Plugin related and other generic customizations 2

From IThemes Codex
(Difference between revisions)
Jump to: navigation, search
m (How to assign layouts to The Events Calendar pages)
(How to Create Mobile Navigation like the new Air Theme)
 
(112 intermediate revisions by 3 users not shown)
Line 1: Line 1:
 
'''This is Page 2 of ''Plugin related and other generic customizations in Builder''. [http://ithemes.com/codex/page/Plugin_related_and_other_generic_customizations_in_Builder Here] is Page 1.'''
 
'''This is Page 2 of ''Plugin related and other generic customizations in Builder''. [http://ithemes.com/codex/page/Plugin_related_and_other_generic_customizations_in_Builder Here] is Page 1.'''
  
== How to add social media icons in nav bar ==
+
= How to add social media icons in nav bar =
  
 
This can be done in at least 2 different ways. The primary difference between method 1 and 2 is that in method 2, left margin for first social icon has to be manually adjusted every time a menu item in the nav bar is changed. For this reason, '''method 1 is recommended'''.
 
This can be done in at least 2 different ways. The primary difference between method 1 and 2 is that in method 2, left margin for first social icon has to be manually adjusted every time a menu item in the nav bar is changed. For this reason, '''method 1 is recommended'''.
Line 202: Line 202:
 
[http://ithemes.com/forum/index.php?/topic/20491-builder-traverse-theme-navigation-removing-block-behind-icons/#p96994 Forum topic]
 
[http://ithemes.com/forum/index.php?/topic/20491-builder-traverse-theme-navigation-removing-block-behind-icons/#p96994 Forum topic]
  
== How to display Posts from a specific category on a Page in Magazine Extension style ==
+
= How to use CSS3 PIE =
 
+
[[File:Page-mag-style.png|800px|thumb|none]]
+
 
+
The instructions below outline how to have all posts from a category named ''Issues'' (ID = 18) appear on a Page titled ''Issues List'' (slug = ''issues-list'').
+
 
+
'''1.''' Ensure that [http://codex.wordpress.org/Using_Permalinks pretty permalinks] are enabled. Create a Page titled ''Issues''. Do not enter any content in the Page. Just enter the title and publish.
+
 
+
'''2.''' Save [http://d.pr/HBZR this] code as page-issues-list.php. (i.e., page-''<<slug>>''.php)
+
 
+
# Set a title for this Page in line 12.
+
# Edit the category ID in line 21.
+
 
+
Upload this file to child theme directory.
+
 
+
'''3.''' Copy ''lib'' directory from parent Builder/extensions/magazine directory into child theme directory.
+
 
+
'''4.''' Add [http://d.pr/ns9k this] at the end of child theme's style.css.
+
 
+
That's it.
+
 
+
<u>Note</u>: If a layout is applied to this Page, ensure that it (the layout) does not have an extension applied.
+
 
+
== How to use CSS3 PIE ==
+
  
 
[http://css3pie.com/ PIE] stands for Progressive Internet Explorer. It is an IE attached behavior which, when applied to an element, allows IE to recognize and display a number of CSS3 properties.
 
[http://css3pie.com/ PIE] stands for Progressive Internet Explorer. It is an IE attached behavior which, when applied to an element, allows IE to recognize and display a number of CSS3 properties.
Line 327: Line 304:
 
Source: http://www.position-relative.com/2011/01/using-css3-pie-in-wordpress-custom-themes/
 
Source: http://www.position-relative.com/2011/01/using-css3-pie-in-wordpress-custom-themes/
  
== How to set up Shopp in iThemes Builder ==
+
= How to float a div at any position on top of other elements in the container =
  
[http://shopplugin.net/ Shopp] is an e-commerce plugin that adds a feature-rich online store to your WordPress-powered website or blog.
+
[[File:Screen Shot 2011-12-19 at 10.37.52 PM.png|800px|thumb|none]]
  
Shopp works out of the box in Builder without the need to edit any template files.
+
'''1.''' Add the following in child theme's functions.php:
  
'''The steps below outline how Shopp can be set up in Builder''':
+
<pre class="brush:php;">
 +
add_action('builder_layout_engine_render_header', 'add_floating_box', 20 );
  
'''1.''' After Shopp has been installed and activated, it will create four placeholder pages.
+
function add_floating_box() { ?>
 +
<div id="floating-box-container">
 +
<div id="floating-box">
 +
HTML or PHP code comes here
 +
</div>
 +
</div>
 +
<?php }
 +
</pre>
  
[[File:Shopp-placeholder-pages.png|690px|thumb|none]]
+
In the above, place the code needed to display your logo (for example) where "HTML code comes here" is present.
  
Each of these pages include Shopp-specific shortcodes that are replaced with dynamic content generated by Shopp.
+
'''2.''' Add the following at the end of child theme's style.css:
  
'''2.''' Go to Shopp -> Settings, Continue to Shopp Setup...
+
<pre class="brush:css;">
 +
#floating-box-container {
 +
max-width: 1000px; /* set this to container (layout) width */
 +
width: 100%;
 +
margin: 0 auto;
 +
position: relative;
 +
z-index: 100;
 +
}
  
Go through the various settings and fill them out. Refer to links at the bottom of [http://docs.shopplugin.net/Installation this] page for details on these settings.
+
#floating-box {
 +
position: absolute;
 +
top: 50px;
 +
left: 0;
 +
background: yellow;
 +
width: 200px;
 +
height: 100px;
 +
}
 +
</pre>
  
'''3.''' Presentation Settings:
+
In the above, you might want to adjust top, left, background, width and height values.
  
Make sure you have saved the settings that have been entered in the previous options thus far, if any, before proceeding further.
+
[[File:2011-12-19 22-57-10.png|800px|thumb|none|Screenshot showing the div structure]]
  
a) Click on ''Use Custom Templates'' button.
+
A practical example of implementing this method can be found [http://ithemes.com/codex/page/Plugin_related_and_other_generic_customizations_in_Builder#How_to_add_social_media_icons_floating_at_top_right here].
  
b) Create a directory in your active theme (Builder child theme) named ''shopp''. You can either use a FTP client or your hosting cPanel file manager for this.
+
Source: http://ithemes.com/forum/topic/28189-where-is-body-tag/page__view__findpost__p__130559
  
[[File:Creating-shopp-dir-in-child-theme.png]]
+
= How to show top most (latest) post in full and the others as excerpts =
  
c) Reload the Presentation Settings in the WordPress/Shopp admin and click ''Install Theme Templates'' button.
+
Screenshot: http://d.pr/nfl1
  
At this point, Shopp will make a copy of the built-in default templates into the newly created shopp directory within your active theme.
+
Edit child theme's index.php and any other needed template files like archive.php that output a list of posts.
  
d) Tick ''Enable theme templates'' and save changes.
+
Replace the ''the_content()'' or ''the_excerpt()'' function call with the following:
  
'''4.''' Now you are ready to add products. Go to Shopp -> Products. Click Add New. Enter the details and save the product.
+
<pre class="brush:php;">
 +
<?php /* Conditional output flag set after first post */ ?>
 +
<?php if($showexcerpt) : ?>
 +
  <?php the_excerpt(); ?>
 +
<?php else: ?>
 +
  <?php the_content(); ?>
 +
<?php endif; ?>
 +
<?php $showexcerpt=true; ?>
 +
</pre>
  
[[File:Products Builder Test Site WordPress 2011-12-03 17-53-00.png|497px|thumb|none]]
+
Ex.: In Foundation Blank's index.php,
  
Note: After a product image has been added, if its thumbnail does not appear i.e., if it looks like:
+
<pre class="brush:php;">
 +
<?php the_content( __( 'Read More&rarr;', 'it-l10n-BuilderChild-Foundation-Blank' ) ); ?>
 +
</pre>
  
[[File:Product-image-missing-thumbnail.png]]
+
should be replaced with
  
go to Shopp -> Settings -> System and uncheck ''Enable Flash-based uploading'' next to ''Upload System''. Save changes.
+
<pre class="brush:php;">
 +
<?php /* Conditional output flag set after first post */ ?>
 +
<?php if($showexcerpt) : ?>
 +
  <?php the_excerpt(); ?>
 +
<?php else: ?>
 +
  <?php the_content( __( 'Read More&rarr;', 'it-l10n-BuilderChild-Foundation-Blank' ) ); ?>
 +
<?php endif; ?>
 +
<?php $showexcerpt=true; ?>
 +
</pre>
  
You will have to edit the products and add images again.
+
With the above change, the top most (latest) post will be shown in full unless more quick tag, <!--more--> is used. If more quick tag is used, "Read More→" will appear at the cut off point.
  
'''Screenshots'''
+
Source: http://wordpress.org/support/topic/full-article-for-first-post-excerpts-for-the-rest?replies=7#post-1743222
  
<u>Shop page (Products listing page)</u>
+
= How to remove hyperlink from tagline in Header module =
  
[[File:Shop- -Builder-Test-Site-2011-12-03-18-23-09.jpg|744px|thumb|none]]
+
Add the following code to child theme's functions.php (at the end, but before the closing ?> line, if any):
  
Live Demo: http://sridhar.internal.ithemes.com/shop/ (Dummy site, do not place orders)
+
<pre class="brush:php;">
 +
// load our javascript in the footer
 +
add_action('wp_enqueue_scripts', 'add_my_code');
 +
function add_my_code() {
 +
    add_action( 'print_footer_scripts', 'my_footer_script' );
 +
  
<u>Product page</u>
+
// Add jQuery to footer
 +
function my_footer_script() { ?>
  
[[File:Shop-Catalog-Products-Nike-Men-Downshifter-4-MSL-Black-Sports-Shoes- -Builder-Test-Site-2011-12-03-18-35-09.jpg|508px|thumb|none]]
+
    <script type="text/javascript">
 +
    jQuery(document).ready(function($) {
 +
            $('.site-tagline a').replaceWith(function() {
 +
                    return this.innerHTML; });
 +
            });
  
<u>Cart page</u>
+
    </script>
  
[[File:Cart- -Builder-Test-Site-2011-12-03-18-42-53.jpg|776px|thumb|none]]
+
<?php }
 +
</pre>
  
== How to add smooth animation effect for navigation menus ==
+
[http://ithemes.com/forum/topic/29848-remove-link-from-tagline/page__view__findpost__p__138431 Thanks to Ronald (forum post)]
  
[http://jsfiddle.net/ronald/nBFm3/ Live demo]
+
= How to get the output of a Header module in a HTML module =
  
Go to My Theme -> Settings -> Analytics and JavaScript Code. Paste the following in the text area under
+
Using a HTML module gives more control than a Header module in situations like [http://ithemes.com/forum/topic/38496-problem-with-header-module/ this].
  
"List any JavaScript or other code to be manually inserted inside the site's <head> tag in the input below."
+
[[File:Header Module Settings.png|463px|thumb|none]]
  
<pre class="brush:php;">
+
Output of above Header module can be simulated by using a PHP enabled HTML module having the following code:
<script type='text/javascript'>
+
 
jQuery(document).ready(function() {
+
<pre class="brush: php; gutter: false;">
            jQuery(".menu ul").css({display: "none"}); // Opera Fix
+
<?php if (is_front_page()) : ?>
            jQuery(".menu li").hover(function(){
+
<h1 class="site-title"><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
                          jQuery(this).find('ul:first').css({visibility: "visible",display: "none"}).show(500);
+
 
            },function(){
+
<h3 class="site-tagline"><a href="<?php bloginfo('url'); ?>"><?php bloginfo('description'); ?></a></h3>
                            jQuery(this).find('ul:first').css({visibility: "hidden"});
+
 
            });
+
<?php else : ?>
  });
+
<h3 class="site-title"><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h3>
</script>
+
 
 +
<h5 class="site-tagline"><a href="<?php bloginfo('url'); ?>"><?php bloginfo('description'); ?></a></h5>
 +
 
 +
<?php endif; ?>
 
</pre>
 
</pre>
  
Save settings.
+
= How to Show Featured Image Below Navigation Module on Static Pages =
  
Note: in the code sample, it is assumed that your menu unordered list tag has a class of "menu" (<code>&lt;ul id="menu-main" class="menu"></code>). To make sure, inspect the menu using Firebug.
+
<code>builder_module_render_navigation</code> hook can be used to inject content below and/or above all nav bars in Builder.
  
[http://ithemes.com/forum/topic/21002-navigation-with-animated-effect/ Forum topic].
+
In this example, the goal is to show featured image attached to Pages below the nav bar as a header. This way each Page can have its own unique header image.
  
== How to float a div at any position on top of other elements in the container ==
+
[[File:2013-03-22 13-59-21.png|640px|thumb|none]]
  
[[File:Screen Shot 2011-12-19 at 10.37.52 PM.png|800px|thumb|none]]
+
[[File:2013-03-22 13-26-02.png|800px|thumb|none]]
  
'''1.''' Add the following in child theme's functions.php:
+
'''1.''' Add the following in child theme's <code>functions.php</code> (before closing PHP tag if present):
  
<pre class="brush:php;">
+
<pre class="brush: php; gutter: false;">
add_action('builder_layout_engine_render_header', 'add_floating_box', 20 );
+
add_action( 'builder_module_render_navigation', 'show_featured_image', 20 );
  
function add_floating_box() { ?>
+
function show_featured_image() {
<div id="floating-box-container">
+
if (has_post_thumbnail() && is_page()) { ?>
<div id="floating-box">
+
<div class="my-featured-image-header">
HTML code comes here
+
        <?php the_post_thumbnail(); ?>
</div>
+
    </div>
</div>
+
<?php }
<?php }
+
}
 
</pre>
 
</pre>
  
In the above, place the code needed to display your logo (for example) where "HTML code comes here" is present.
+
'''2.''' Add the following at the end of child theme's style.css (WP dashboard -> Appearance -> Editor):
  
'''2.''' Add the following at the end of child theme's style.css:
+
<pre class="brush: css; gutter: false;">
 
+
.my-featured-image-header img {
<pre class="brush:css;">
+
margin-top: 0;
#floating-box-container {
+
margin-bottom: 0;
width: 1000px; /* set this to container (layout) width */
+
vertical-align: top;
margin: 0 auto;
+
position: relative;
+
z-index: 100;
+
 
}
 
}
  
#floating-box {
+
.builder-module-navigation .builder-module-element-outer-wrapper { /* if needed */
position: absolute;
+
margin-bottom: 0;
top: 50px;
+
left: 0;
+
background: yellow;
+
width: 200px;
+
height: 100px;
+
 
}
 
}
 
</pre>
 
</pre>
  
In the above, you might want to adjust top, left, background, width and height values.
+
If <code>20</code> in
  
[[File:2011-12-19 22-57-10.png|800px|thumb|none|Screenshot showing the div structure]]
+
add_action( 'builder_module_render_navigation', 'show_featured_image', 20 );
  
A practical example of implementing this method can be found [http://ithemes.com/codex/page/Plugin_related_and_other_generic_customizations_in_Builder#How_to_add_social_media_icons_floating_at_top_right here].
+
is changed to <code>0</code>, then the function will be output ABOVE the nav bar(s).
  
Source: http://ithemes.com/forum/topic/28189-where-is-body-tag/page__view__findpost__p__130559
+
Forum topic: http://ithemes.com/forum/topic/40690-featured-image-on-each-page/
  
== Using Easy Custom Content Types in Builder ==
+
= How to Fix "Missing required fields" warnings in Structured Data Testing Tool =
  
Easy Content Types, a commercial plugin provides an extremely easy to use and intuitive interface for creating custom post types, taxonomies, and meta boxes.
+
[http://www.google.com/webmasters/tools/richsnippets Rich Snippets Testing Tool] can be used to check whether Google can correctly parse your structured data markup and display it in search results.
  
Here are some general tips on using [http://codecanyon.net/item/easy-custom-content-types-for-wordpress/234182 Easy Custom Content Types for WordPress] in Builder.
+
Before:
  
'''1.''' Do not use <code>Post name</code> permalink structure. <code>Day and name</code> works fine.
+
[[File:Screen Shot 2013-03-29 at 6.25.24 PM.png|774px|thumb|none]]
  
'''2.''' Go to plugin's settings and tick the first two under "Post Type Templates". You might also want to tick the option under "Taxonomy Templates" if you plan on using custom taxonomy archives.
+
After:
  
[[File:2012-03-01 10-32-06.png|484px|thumb|none]]
+
[[File:Screen Shot 2013-03-29 at 6.57.00 PM.png|768px|thumb|none]]
  
'''3.''' Create your Post Types.
+
The fix is to edit these active theme (ideally, should be a child theme of Builder) template files (at the minimum): index.php, archive.php, single.php, page.php and search.php.
  
Ex.:
+
You might have to edit other/more template files depending on your need. See http://codex.wordpress.org/images/1/18/Template_Hierarchy.png
  
[[File:2012-03-01 10-44-56.png|800px|thumb|none]]
+
If any of these files are not present in the child theme, copy them from parent Builder directory into the child theme's directory and edit them.
  
The URL of archive listing of entries from a CPT is: http://yoursite.com/cptslug
+
* Title of the post should be marked with class <code>entry-title</code>
 +
* Posting date should be marked with class <code>updated</code>
 +
* Full name of the post author should be marked with class <code>author</code> accomplished by elements from hCard microformat – <code>vcard</code> and <code>fn</code>
  
Ex.: http://localhost/builder/testimonials/
+
Sample generated HTML code should be:
  
The URL of single CPT entry is: http://yoursite.com/cptslug/entrytitle
+
<pre class="brush:html; gutter: false;">
 +
<span class="entry-title">How to fix "missing required fields" warnings in Rich Snippets Testing Tool</span>
 +
<span class="updated">December 24, 2011</span>
 +
<span class="vcard author"><span class="fn">Anton Khitrenovich</span></span>
 +
</pre>
  
Ex.: http://localhost/builder/testimonials/awesome-service/
+
=== To fix <code>Warning: Missing required field "updated"</code> in Builder ===
  
'''4.''' Check child theme directory using a FTP client or cPanel file manager. If single-''<cpt>''.php has not been automatically created, copy/upload single.php from parent Builder into the child theme and rename it as single-''<cpt>''.php.
+
Locate the <code>date</code> div and add <code>updated</code> class to it.
  
 
Ex.:
 
Ex.:
  
[[File:2012-03-01 10-39-45.png|623px|thumb|none]]
+
Change
  
'''5.''' Create any necessary Meta Boxes and Meta Fields.
+
<pre class="brush:html; gutter: false;">
 +
<div class="entry-meta date">
 +
</pre>
  
Ex.:
+
to
  
[[File:2012-03-01 10-58-00.png|800px|thumb|none]]
+
<pre class="brush:html; gutter: false;">
 +
<div class="entry-meta date updated">
 +
</pre>
  
[[File:2012-03-01 10-58-18.png|800px|thumb|none]]
+
=== To fix <code>Warning: Missing required hCard "author"</code> in Builder ===
  
'''6.''' To display Meta Field in template files like single-''<cpt>''.php, use
+
Change
  
<pre class="brush:php;">
+
<pre class="brush: php; gutter: false;">
<?php
+
<?php printf( __( 'By %s', 'it-l10n-Builder' ), '<span class="author">' . builder_get_author_link() . '</span>' ); ?>
global $post;
+
echo get_post_meta($post->ID, 'ecpt_clienturl', true);
+
?>
+
 
</pre>
 
</pre>
  
In the above replace "ecpt_clienturl" with the name of your field.
+
to
  
'''7.''' To display a Meta Field in LoopBuddy layout, use "Custom Field" tag and enter the field name in "Meta Key" text input.
+
<pre class="brush: php; gutter: false;">
 +
<?php printf( __( 'By %s', 'it-l10n-Builder' ), '<span class="vcard author"><span class="fn">' . builder_get_author_link() . '</span></span>' ); ?>
 +
</pre>
  
[[File:2012-03-01 11-11-28.png|547px|thumb|none]]
+
Family name and Given names are taken from values entered for Last Name and First Name respectively in author's profile page.
  
== How to show top most (latest) post in full and the others as excerpts ==
+
Example of doing the above changes in Kepler child theme: http://ithemes.com/forum/topic/33858-google-rich-snippet-tool-warning-missing-required-field-entry-title/#entry156972
  
Screenshot: http://d.pr/nfl1
+
<pre style="white-space: pre-wrap">
 +
Tip: If a static Page is set to be shown on front page, then page.php would be the main file to edit and do the above changes. As it does not have the code for displaying author and date, the below lines can be added in the loop and CSS display property set to none to not show them on the homepage.
 +
</pre>
  
Edit child theme's index.php and any other needed template files like archive.php that output a list of posts.
+
Ex.:
  
Replace the ''the_content()'' or ''the_excerpt()'' function call with the following:
+
<pre class="brush:php; gutter: false;">
 +
<div class="entry-meta date updated">
 +
<?php echo get_the_date(); ?>
 +
</div>
  
<pre class="brush:php;">
+
<?php printf( __( 'By %s', 'it-l10n-Builder' ), '<span class="vcard author"><span class="fn">' . builder_get_author_link() . '</span></span>' ); ?>
<?php /* Conditional output flag set after first post */ ?>
+
<?php if($showexcerpt) : ?>
+
  <?php the_excerpt(); ?>
+
<?php else: ?>
+
  <?php the_content(); ?>
+
<?php endif; ?>
+
<?php $showexcerpt=true; ?>
+
 
</pre>
 
</pre>
  
Ex.: In Foundation Blank's index.php,
+
was added above
  
<pre class="brush:php;">
+
<pre class="brush:php; gutter: false;">
<?php the_content( __( 'Read More&rarr;', 'it-l10n-BuilderChild-Foundation-Blank' ) ); ?>
+
<!-- post content -->
 
</pre>
 
</pre>
  
should be replaced with
+
[[File:2013-03-29 19-20-58.png|800px|thumb|none]]
  
<pre class="brush:php;">
+
In child theme's style.css:
<?php /* Conditional output flag set after first post */ ?>
+
 
<?php if($showexcerpt) : ?>
+
<pre class="brush:css; gutter: false;">
  <?php the_excerpt(); ?>
+
.home .entry-title,
<?php else: ?>
+
.page .date,
  <?php the_content( __( 'Read More&rarr;', 'it-l10n-BuilderChild-Foundation-Blank' ) ); ?>
+
.page .author {
<?php endif; ?>
+
display: none;
<?php $showexcerpt=true; ?>
+
}
 
</pre>
 
</pre>
  
With the above change, the top most (latest) post will be shown in full unless more quick tag, <!--more--> is used. If more quick tag is used, "Read More→" will appear at the cut off point.
+
Source:
  
Source: http://wordpress.org/support/topic/full-article-for-first-post-excerpts-for-the-rest?replies=7#post-1743222
+
http://technotes.khitrenovich.com/fix-missing-required-fields-warnings-rich-snippets-testing-tool/
  
== How to implement Yoast Breadcrumbs in Builder ==
+
http://nepallica.com/fix-google-rich-snippets-warning-missing-required-field-wordpress/
  
[http://wordpress.org/extend/plugins/breadcrumbs/ Yoast Breadcrumbs on WordPress.org]
+
= How to Make Entire Text Widgets Clickable =
  
Determine where you want the breadcrumbs to appear and edit the appropriate template file(s) in child theme. Use [http://codex.wordpress.org/images/1/18/Template_Hierarchy.png this] image as a reference. If a particular file is not present in the child theme directory, copy it from  parent Builder directory.
+
[[File:2013-03-31 17-48-29.png|237px|thumb|none]]
  
Generally speaking, these are the files that you will be modifying: page.php (for static Pages), single.php (for single post pages), index.php (for Posts page) and archive.php (for category pages).
+
When a text link is placed in a text widget, only the text will be clickable as hyperlinks are inline elements.
  
Let's consider Kepler child theme as an example and that we want to add breadcrumbs to all Pages.
+
<code>display: block</code> CSS can be used so the entire widget becomes clickable.
  
Edit page.php.
+
Ex.:
  
Below
+
Code in a text widget:
  
<pre class="brush:php;">
+
<pre class="brush:html; gutter: false;">
<?php if ( have_posts() ) : ?>
+
<a href="#" class="my-widget-link">Mold Removal and Remediation</a>
 
</pre>
 
</pre>
  
add
+
CSS:
  
<pre class="brush:php;">
+
<pre class="brush:css; gutter: false;">
<?php if ( function_exists('yoast_breadcrumb') ) {
+
a.my-widget-link {
yoast_breadcrumb('<p id="breadcrumbs">','</p>');
+
display: block;
} ?>
+
font-size: 1.65em;
 +
padding: 1em;
 +
}
 +
 
 +
#builder-module-514372ec66190 .widget {
 +
padding: 0;
 +
}
 
</pre>
 
</pre>
  
Add the following at the end of child theme's style.css (WP dashboard -> Appearance -> Editor):
+
where <code>builder-module-514372ec66190</code> is the ID of widget bar module having the widget.
  
<pre class="brush:css;">
+
= How to Enable Comments For Custom Post Types =
#breadcrumbs {
+
    color: #D0ECF3;
+
    margin-top: 0;
+
}
+
  
#breadcrumbs a {
+
'''1.''' Ensure that support for Comments is enabled in the CPT.
    color: #FFFFFF;
+
 
 +
How this is done depends on the method being used to set up the CPTs.
 +
 
 +
Here's an example when using CustomPress:
 +
 
 +
[[File:2013-04-02 12-35-15.png|608px|thumb|none]]
 +
 
 +
'''2.''' Go to My Theme -> Settings -> Comments.
 +
 
 +
Even though the CPT might be shown as selected, it won't actually work until it is unchecked and checked again. Therefore, untick your CPT under Comments, save settings, tick it and again save settings.
 +
 
 +
'''3.''' In the CPT add/edit screen, tick <code>Allow comments</code> in Discussion meta box. If Discussion meta box is not visible, pull down Screen Options at the top right of the page and tick <code>Discussion</code>.
 +
 
 +
= How to Create Mobile Navigation like the new Air Theme =
 +
 
 +
==Important notice - new plugin==
 +
On Feb 4, 2014, a mobile navigation plugin was released for Beta testing. It should make all the manual changes unnecessary. You can find more on this in this forum: http://ithemes.com/forum/forum/236-builder-mobile-navigation-plugin-beta-feedback/
 +
 
 +
So we encourage you to take the plugin for a test drive first, and provide feedback through that forum.
 +
 
 +
 
 +
 
 +
 
 +
==Manual implementation==
 +
There are several steps involved to accomplish this. The solution was tested on a couple of Builder Child themes, but not all, so this may not work for all Child themes. As such, these instructions are provided "as is" and are unsupported. Further customisation is beyond the scope of our theme support.
 +
 
 +
 
 +
===Pre-requisites===
 +
 
 +
* Builder parent theme AND your Builder child theme should be at least at version 4, since these are responsive capable themes.
 +
* Responsive needs to be enabled in the child theme (functions.php should contain: <code>add_theme_support( 'builder-responsive' );</code>
 +
 
 +
===Include the javascript code that enables the Mobile dropdown===
 +
 
 +
* Copy the <code>js</code> folder and contents from the Air child theme to your child theme.
 +
* Add the following code at the end of your child theme's <code>functions.php</code> file, yet before the closing <code>?></code> (if any):
 +
 
 +
<pre class="brush:php; gutter: false;">
 +
// Enqueuing and Using Custom Javascript/Jquery
 +
function it_air_load_custom_scripts() {
 +
wp_register_script( 'it_air_jquery_additions', get_stylesheet_directory_uri() . '/js/it_air_jquery_additions.js', array('jquery'), false, true );
 +
wp_enqueue_script('it_air_jquery_additions');
 
}
 
}
 +
add_action( 'wp_enqueue_scripts', 'it_air_load_custom_scripts' );
 
</pre>
 
</pre>
  
Note: The above CSS code might have to be adjusted depending on the child theme.
+
===Enable the Mobile Nav as an Alternative Module Style===
 +
Following the code added in step 1, add the following code in <code>functions.php</code> (again, before a closing ?>)
  
This should result in [[File:2012-06-26 21-36-17.png|746px|thumb|none]]
+
'''NOTE: when using a navigation menu in another module (e.g. an HTML module, see [http://ithemes.com/codex/page/Plugin_related_and_other_generic_customizations_2#How_to_add_a_Navigation_menu_in_a_Builder_module below])'''
  
== How to remove hyperlink from tagline in Header module ==
+
In the following code, replace:
  
Add the following code to child theme's functions.php (at the end, but before the closing ?> line, if any):
+
<pre class="brush:php; gutter: false;">
 +
builder_register_module_style( 'navigation', 'Mobile Navigation', 'mobile-nav' );
 +
</pre>
  
<pre class="brush:php;">
+
with
// load our javascript in the footer
+
add_action('wp_enqueue_scripts', 'add_my_code');
+
function add_my_code() {
+
    add_action( 'print_footer_scripts', 'my_footer_script' );
+
+
  
// Add jQuery to footer
+
<pre class="brush:php; gutter: false;">
function my_footer_script() { ?>
+
builder_register_module_style( 'html', 'Mobile Navigation', 'mobile-nav' );
 +
</pre>
  
    <script type="text/javascript">
+
<pre class="brush:php; gutter: false;">
    jQuery(document).ready(function($) {
+
// Add Support for Alternate Module Styles
            $('.site-tagline a').replaceWith(function() {
+
if ( ! function_exists( 'it_builder_loaded' ) ) {
                    return this.innerHTML; });
+
function it_builder_loaded() {
            });
+
builder_register_module_style( 'navigation', 'Mobile Navigation', 'mobile-nav' );
 +
}
 +
}
 +
add_action( 'it_libraries_loaded', 'it_builder_loaded' );
 +
</pre>
  
    </script>
+
'''NOTE:'''
 +
To avoid conflicts, the above function <code>it_builder_loaded()</code>will '''only''' run if a function with the same name '''does not already exist'''. Some themes are already using this function to load custom styles. In that case, '''you should not add this function''', but instead '''add the code''' <code>builder_register_module_style( 'html', 'Mobile Navigation', 'mobile-nav' );</code> to the existing function!
  
<?php }
+
===Add the css code for the Mobile navigation===
 +
Add the following code at the end of your child themes '''mobile''' stylesheet <code>style-mobile.css</code>:
 +
 
 +
'''Note: when using a navigation menu in another module (e.g. an HTML module)'''
 +
 
 +
In the following css code, replace ''all'' occurrences of:
 +
 
 +
<pre class="brush:css; gutter: false;">
 +
.builder-module-navigation.mobile
 
</pre>
 
</pre>
  
[http://ithemes.com/forum/topic/29848-remove-link-from-tagline/page__view__findpost__p__138431 Thanks to Ronald (forum post)]
+
with
  
== How to assign layouts to The Events Calendar pages ==
+
<pre class="brush:css; gutter: false;">
 +
.builder-module-html.mobile
 +
</pre>
  
[http://wordpress.org/extend/plugins/the-events-calendar/ The Events Calendar] plugin enables you to rapidly create and manage events. Features include Google Maps integration as well as default templates such as a calendar grid and event list, widget and so much more.
 
  
To assign a layout to all pages generated by this plugin, ex.: <code>http://yoursite.com/events/</code> add the following in child theme's functions.php before closing PHP tag (if present):
+
<pre class="brush:css; gutter: false;">
 +
/*********************************************
 +
Navigation Module (Mobile)
 +
*********************************************/
 +
.builder-module-navigation.mobile {
 +
padding-top: .5em !important;
 +
}
  
<pre class="brush:php;">
+
.builder-module-navigation.mobile ul {
function set_custom_layout( $layout_id ) {
+
margin-top: .5em;
    if ( tribe_is_month() || tribe_is_upcoming() || tribe_is_past() )
+
}
            return '4f5363f3cb8e1';
+
  
    return $layout_id;
+
.builder-module-navigation.mobile li {
 +
width: 100%;
 +
position: relative;
 +
}
 +
 
 +
/* second level stuff */
 +
.builder-module-navigation.mobile li ul {
 +
position: relative !important;
 +
left: 0 !important;
 +
border: 0;
 +
width: 100%;
 +
margin: 0;
 +
}
 +
 
 +
.builder-module-navigation.mobile li a,
 +
.builder-module-navigation.mobile .current_page_item li a,
 +
.builder-module-navigation.mobile .current-cat li a,
 +
.builder-module-navigation.mobile .current-menu-item li a {
 +
margin: 0;
 +
background: transparent;
 +
border-color: transparent;
 +
color: #3B3F42;
 +
border-bottom: 1px solid rgba(0,0,0,0.1);
 +
}
 +
 
 +
.builder-module-navigation.mobile li a:hover,
 +
.builder-module-navigation.mobile .current_page_item li a:hover,
 +
.builder-module-navigation.mobile .current-cat li a li a:hover,
 +
.builder-module-navigation.mobile .current-menu-item li a:hover {
 +
background: #3B3F42;
 +
color: #ECECEC;
 +
}
 +
 
 +
.builder-module-navigation.mobile li li {
 +
border: 0;
 +
width: 100%;
 +
}
 +
 
 +
.builder-module-navigation.mobile li ul ul {
 +
margin: 0;
 +
}
 +
 
 +
.builder-module-navigation.mobile li li a {
 +
padding: .25em 0 .25em 2em;
 +
line-height: inherit;
 +
border-radius: 2px;
 +
}
 +
 
 +
.builder-module-navigation.mobile li li li a {
 +
padding-left: 4em;
 +
}
 +
 
 +
.builder-module-navigation.mobile-nav .menu.hidden {
 +
display: none;
 +
}
 +
#it-mobile-menu {
 +
background: #3B3F42;
 +
color: #ECECEC;
 +
padding: .25em .75em;
 +
display: block;
 +
cursor: pointer;
 +
border-radius: 2px;
 +
-webkit-font-smoothing: antialiased;
 +
}
 +
 
 +
.builder-module-navigation.mobile.borderless {
 +
border: 0;
 
}
 
}
add_filter( 'builder_filter_current_layout', 'set_custom_layout' );
 
 
</pre>
 
</pre>
  
In the above replace <code>4f5363f3cb8e1</code> with the ID of your desired layout.
+
===Make sure the Mobile navigation only shows when in Mobile mode (style-mobile.css is active)===
  
Source: http://tri.be/tutorial-integrating-the-events-calendar-w-genesis/
+
Add the following at the end of child theme's <code>style.css</code> (WP dashboard -> Appearance -> Editor):
 +
 
 +
<pre class="brush:css; gutter: false;">
 +
/*********************************************
 +
Mobile Navigation Menu (Alternate Module Style - hidden above 500px wide)
 +
*********************************************/
 +
 
 +
#it-mobile-menu {
 +
display: none;
 +
}
 +
</pre>
  
It is also possible to set different layouts to different views like
+
===Activate the Mobile Navigation===
 +
Select the Mobile navigation Style in the Builder Layout Manager for your Navigation Module.
  
* main calendar page
+
'''When using a navigation menu in another module (e.g. an HTML module):'''
* calendar category pages
+
* single events
+
* single event days
+
* single venues
+
* events or venue pages
+
* events list page
+
  
by adding more functions similar to the one above.
+
Select the Mobile navigation Style in the Builder Layout Manager for that specific Module.
  
The needed if conditionals can be obtained from the source linked above.
+
===How to add a Navigation menu in a Builder module===
 +
[[File:Htmlmodulemobile.jpg|600px|thumb|none]]

Latest revision as of 16:37, February 4, 2014

This is Page 2 of Plugin related and other generic customizations in Builder. Here is Page 1.

Contents

How to add social media icons in nav bar

This can be done in at least 2 different ways. The primary difference between method 1 and 2 is that in method 2, left margin for first social icon has to be manually adjusted every time a menu item in the nav bar is changed. For this reason, method 1 is recommended.

Method 1

2012-09-02 12-52-02.png

1. Create (if you haven't already) a custom menu at Appearance -> Menus, which should appear in the nav bar.

2. Instead of a navigation module, use a PHP enabled HTML module having this sample code:

<?php wp_nav_menu( array( 'menu' => 'primary', 'menu_class' => 'builder-module-navigation') ); ?>

<div class="my-social-icons">
<ul>
    <li class="social-icon"><a target="_blank" rel="nofollow" href="http://www.facebook.com/"><img class="fade" style="opacity: 1; -moz-opacity: 1;" title="Follow Us on Facebook" alt="Follow Us on Facebook" src="//ithemes.com//builder/misc/social-media-icons/32/facebook.png"></a></li>
    
    <li class="social-icon"><a target="_blank" rel="nofollow" href="http://twitter.com/#!/"><img class="fade" style="opacity: 1; -moz-opacity: 1;" title="Follow Us on Twitter" alt="Follow Us on Twitter" src="//ithemes.com//builder/misc/social-media-icons/32/twitter.png"></a></li>
    
    <li class="social-icon"><a target="_blank" rel="nofollow" href="http://www.yoursite.com/feed/"><img class="fade" style="opacity: 1; -moz-opacity: 1;" title="Follow Us on RSS" alt="Follow Us on RSS" src="//ithemes.com//builder/misc/social-media-icons/32/rss.png"></a></li>
    
    <li class="social-icon"><a target="_blank" rel="nofollow" href="mailto: admin@yoursite.com"><img class="fade" style="opacity: 1; -moz-opacity: 1;" title="E-mail Us" alt="E-mail Us" src="//ithemes.com//builder/misc/social-media-icons/32/email.png"></a></li>
</ul> 
</div>

Note:

  1. In the above, change primary to the slug of your custom menu. Ex.: If the name of your custom menu is "Main Menu", it slug will be main-menu.
  2. It is recommended to use the social icons from your WordPress site. You should download the icons referred to in the above code, upload them to your site and use those links instead.

3. Add the following sample code at the end of child theme's style.css (WP dashboard -> Appearance -> Editor):

/************************************************************************
    For right floating social icons in a HTML module showing nav bar
*************************************************************************/

.builder-module-2 {
	background: #FAA51B;
}

.menu-primary-container {
	float: left;
}

#menu-primary {
	margin-bottom: 0;
}

li.social-icon a, li.social-icon a:hover {
    padding: 1px 0 0 8px;
}

li.social-icon a:hover {
    opacity: 0.8;
    -moz-opacity: 0.8;
    background: none;
}

li.social-icon:hover,
li.social-icon:hover a {
    background: none;
}

.my-social-icons {
	float: right;
	margin-right: 10px;
	padding-top: 8px;
}

.my-social-icons ul {
	list-style: none;
}

.my-social-icons li {
	float: left;
}

Note: In the above

a) Change the number (2) in .builder-module-2 so it is the module number from top in layout.

b) In

.builder-module-2 {
	background: #FAA51B;
}

replace background: #FAA51B; with child theme's styles set for navigation module or in the case of Thinner, those of .builder-module-navigation ul.menu. i.e.,

.builder-module-2 {
	/*background: #FAA51B;*/
	overflow: hidden;
	background: #F6F6F6;
	background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#F6F6F6));
	background: -webkit-linear-gradient(#FFFFFF, #F6F6F6);
	background: -moz-linear-gradient(#FFFFFF, #F6F6F6);
	background: -ms-linear-gradient(#FFFFFF, #F6F6F6);
	background: -o-linear-gradient(#FFFFFF, #F6F6F6);
	background: linear-gradient(#FFFFFF, #F6F6F6);
	border: 1px solid #FFF;
	-webkit-border-radius: 10px;
	-khtml-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	-webkit-box-shadow: #AAAAAA 1px 1px 2px;
	-moz-box-shadow: #AAAAAA 1px 1px 2px;
	-o-box-shadow: #AAAAAA 1px 1px 2px;
	-khtml-box-shadow: #AAAAAA 1px 1px 2px;
	box-shadow: #AAAAAA 1px 1px 2px;
}

c) primary to the slug of your custom menu. Ex.: If the name of your custom menu is "Main Menu", it slug will be main-menu.

Method 2

Social-icons-navbar.png

Create (if you haven't already) a custom menu at Appearance -> Menus, which should appear in the nav bar.

1. Edit your child theme's functions.php.

Add the following at the end (before closing PHP tag, if present):

add_filter('wp_nav_menu_main-menu_items','add_images', 10, 2);
function add_images($items, $args) {
 
        $items .= '<li class="social-icon" id="first-social-icon"><a target="_blank" rel="nofollow" href="http://www.facebook.com/"><img class="fade" style="opacity: 1; -moz-opacity: 1;" title="Follow Us on Facebook" alt="Follow Us on Facebook" src="//ithemes.com//builder/misc/social-media-icons/32/facebook.png"></a></li>';
        
        $items .= '<li class="social-icon"><a target="_blank" rel="nofollow" href="http://twitter.com/#!/"><img class="fade" style="opacity: 1; -moz-opacity: 1;" title="Follow Us on Twitter" alt="Follow Us on Twitter" src="//ithemes.com//builder/misc/social-media-icons/32/twitter.png"></a></li>';
        
        $items .= '<li class="social-icon"><a target="_blank" rel="nofollow" href="http://www.yoursite.com/feed/"><img class="fade" style="opacity: 1; -moz-opacity: 1;" title="Follow Us on RSS" alt="Follow Us on RSS" src="//ithemes.com//builder/misc/social-media-icons/32/rss.png"></a></li>';
        
        $items .= '<li class="social-icon"><a target="_blank" rel="nofollow" href="mailto: admin@yoursite.com"><img class="fade" style="opacity: 1; -moz-opacity: 1;" title="E-mail Us" alt="E-mail Us" src="//ithemes.com//builder/misc/social-media-icons/32/email.png"></a></li>';
        
    return $items;    
}

Note: In the above code, main-menu must be replaced with the slug of your custom menu. Ex.: If the name of your custom menu is Primary Navigation, then

add_filter('wp_nav_menu_main-menu_items','add_images', 10, 2);

must be changed to

add_filter('wp_nav_menu_primary-navigation_items','add_images', 10, 2);

2. Add the following at the end of child theme's style.css and customize it if necessary:

/* Custom Styles For The Social Media Widget Icons in Navigation */

li#first-social-icon {
    margin-left: 355px; /* Adjust this value so the icons are positioned at your desired location. */
}

/* li.social-icon {
    height: 36px;
} */ /* Needed only in certain themes like Traverse */

li.social-icon a, li.social-icon a:hover {
    padding: 1px 0 0 8px;
}

li.social-icon a:hover {
    opacity: 0.8;
    -moz-opacity: 0.8;
    background: none;    
}

li.social-icon:hover,
li.social-icon:hover a {
    background: none;
}

That's it!

This method is also explained here.

Sample implementations:

1. Traverse with round icons:

2011-11-26 10-27-16.png

Forum topic

How to use CSS3 PIE

PIE stands for Progressive Internet Explorer. It is an IE attached behavior which, when applied to an element, allows IE to recognize and display a number of CSS3 properties.

It is used to get CSS3 properties like border-radius working in IE older than version 9.

Follow the steps below to make CSS3 PIE work in Builder:

Update on July 11, 2012: Builder provides IE browser specific IDs for the html element. These are ie7, ie8 and ie9. It is thus possible to write IE 7, IE 8 and IE 9 specific CSS. This forum topic provides an example where post comment text area (which already has border-radius set in style.css) can be made to show rounded corners in IE 8 using CSS3 PIE. The alternate method listed below also works.

1. Download the latest version of CSS3 PIE from here.

2. Extract the zip flle and upload PIE.htc to any web reachable directory.

Ex.:

public_html/assets/PIE.htc

3. Add position: relative; style to all those selectors for which you would like to use CSS3 PIE. You will of course be specifying border-radius/box-shadow etc. properties (which are supported by CSS3 PIE).

Ex.:

#text-6 {
	-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
position: relative;
}

#text-6 .widget-title {
-moz-border-radius:10px 10px 0px 0px;
-webkit-border-radius:10px 10px 0px 0px;
border-radius:10px 10px 0px 0px;
position: relative;
}

The above CSS is written to make a widget whose ID is text-6 rounded.

Screenshot in Firefox:

Rounded-corners-ff.png

Live Site

4. Add the following in your child theme's functions.php:

function my_render_ie_pie() { ?>
<!--[if lte IE 8]>
<style type="text/css" media="screen">
   #your-css-elements-here { 
          behavior: url('http://www.redkitecreative.com/PIE.htc'); 
    }
</style>

<![endif]-->
<?php
}
add_action('wp_head', 'my_render_ie_pie', 8);

In the above, replace

  1. #your-css-elements-here with CSS selectors for which you have specified CSS 3 properties and for which you would like to use CSS3 PIE.
  2. http://www.redkitecreative.com/PIE.htc with the URL of PIE.htc on your server.

Ex.:

Code in functions.php:

function my_render_ie_pie() { ?>
<!--[if lte IE 8]>
<style type="text/css" media="screen">
   #text-6, #text-6 .widget-title { 
          behavior: url('http://sridhar.internal.ithemes.com/assets/PIE.htc'); 
    }
</style>

<![endif]-->
<?php
}
add_action('wp_head', 'my_render_ie_pie', 8);

Now border-radius property for #text-6 and #text-6 .widget-title will work in IE 8 and below.

Screenshot in IE 8:

Rounded-corners-ie8.png

Note:

  1. This particular example does not render properly in IE 7 probably because of using PIE on an element inside another element. This is the behavior coming from PIE itself and not Builder. Screenshot.
  2. IE 9 supports border-radius natively. So PIE will not be used in IE 9.

That's it!

Source: http://www.position-relative.com/2011/01/using-css3-pie-in-wordpress-custom-themes/

How to float a div at any position on top of other elements in the container

Screen Shot 2011-12-19 at 10.37.52 PM.png

1. Add the following in child theme's functions.php:

add_action('builder_layout_engine_render_header', 'add_floating_box', 20 );

function add_floating_box() { ?>
	<div id="floating-box-container">
		<div id="floating-box">
			HTML or PHP code comes here
		</div>
	</div>
<?php }

In the above, place the code needed to display your logo (for example) where "HTML code comes here" is present.

2. Add the following at the end of child theme's style.css:

#floating-box-container {
	max-width: 1000px; /* set this to container (layout) width */
	width: 100%;
	margin: 0 auto;
	position: relative;
	z-index: 100;
}

#floating-box {
	position: absolute;
	top: 50px;
	left: 0;
	background: yellow;
	width: 200px;
	height: 100px;	
}

In the above, you might want to adjust top, left, background, width and height values.

Screenshot showing the div structure

A practical example of implementing this method can be found here.

Source: http://ithemes.com/forum/topic/28189-where-is-body-tag/page__view__findpost__p__130559

How to show top most (latest) post in full and the others as excerpts

Screenshot: http://d.pr/nfl1

Edit child theme's index.php and any other needed template files like archive.php that output a list of posts.

Replace the the_content() or the_excerpt() function call with the following:

<?php /* Conditional output flag set after first post */ ?>
<?php if($showexcerpt) : ?>
   <?php the_excerpt(); ?>
<?php else: ?>
  <?php the_content(); ?>
<?php endif; ?>
<?php $showexcerpt=true; ?>

Ex.: In Foundation Blank's index.php,

<?php the_content( __( 'Read More→', 'it-l10n-BuilderChild-Foundation-Blank' ) ); ?>

should be replaced with

<?php /* Conditional output flag set after first post */ ?>
							<?php if($showexcerpt) : ?>
							   <?php the_excerpt(); ?>
							<?php else: ?>
							  <?php the_content( __( 'Read More→', 'it-l10n-BuilderChild-Foundation-Blank' ) ); ?>
							<?php endif; ?>
							<?php $showexcerpt=true; ?>

With the above change, the top most (latest) post will be shown in full unless more quick tag, is used. If more quick tag is used, "Read More→" will appear at the cut off point.

Source: http://wordpress.org/support/topic/full-article-for-first-post-excerpts-for-the-rest?replies=7#post-1743222

How to remove hyperlink from tagline in Header module

Add the following code to child theme's functions.php (at the end, but before the closing ?> line, if any):

// load our javascript in the footer
add_action('wp_enqueue_scripts', 'add_my_code');
function add_my_code() {
    add_action( 'print_footer_scripts', 'my_footer_script' );
}  

// Add jQuery to footer
function my_footer_script() { ?>

    <script type="text/javascript">
    jQuery(document).ready(function($) {
            $('.site-tagline a').replaceWith(function() {
                    return this.innerHTML; });
            });

    </script>

<?php }

Thanks to Ronald (forum post)

How to get the output of a Header module in a HTML module

Using a HTML module gives more control than a Header module in situations like this.

Header Module Settings.png

Output of above Header module can be simulated by using a PHP enabled HTML module having the following code:

<?php if (is_front_page()) : ?>
	<h1 class="site-title"><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>

	<h3 class="site-tagline"><a href="<?php bloginfo('url'); ?>"><?php bloginfo('description'); ?></a></h3>

<?php else : ?>
	<h3 class="site-title"><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h3>

	<h5 class="site-tagline"><a href="<?php bloginfo('url'); ?>"><?php bloginfo('description'); ?></a></h5>

<?php endif; ?>

How to Show Featured Image Below Navigation Module on Static Pages

builder_module_render_navigation hook can be used to inject content below and/or above all nav bars in Builder.

In this example, the goal is to show featured image attached to Pages below the nav bar as a header. This way each Page can have its own unique header image.

2013-03-22 13-59-21.png
2013-03-22 13-26-02.png

1. Add the following in child theme's functions.php (before closing PHP tag if present):

add_action( 'builder_module_render_navigation', 'show_featured_image', 20 );

function show_featured_image() {
	if (has_post_thumbnail() && is_page()) { ?>
		<div class="my-featured-image-header">
	        <?php the_post_thumbnail(); ?>
	    </div>
	<?php }
}

2. Add the following at the end of child theme's style.css (WP dashboard -> Appearance -> Editor):

.my-featured-image-header img {
	margin-top: 0;
	margin-bottom: 0;
	vertical-align: top;
}

.builder-module-navigation .builder-module-element-outer-wrapper { /* if needed */
	margin-bottom: 0;
}

If 20 in

add_action( 'builder_module_render_navigation', 'show_featured_image', 20 );

is changed to 0, then the function will be output ABOVE the nav bar(s).

Forum topic: http://ithemes.com/forum/topic/40690-featured-image-on-each-page/

How to Fix "Missing required fields" warnings in Structured Data Testing Tool

Rich Snippets Testing Tool can be used to check whether Google can correctly parse your structured data markup and display it in search results.

Before:

Screen Shot 2013-03-29 at 6.25.24 PM.png

After:

Screen Shot 2013-03-29 at 6.57.00 PM.png

The fix is to edit these active theme (ideally, should be a child theme of Builder) template files (at the minimum): index.php, archive.php, single.php, page.php and search.php.

You might have to edit other/more template files depending on your need. See http://codex.wordpress.org/images/1/18/Template_Hierarchy.png

If any of these files are not present in the child theme, copy them from parent Builder directory into the child theme's directory and edit them.

  • Title of the post should be marked with class entry-title
  • Posting date should be marked with class updated
  • Full name of the post author should be marked with class author accomplished by elements from hCard microformat – vcard and fn

Sample generated HTML code should be:

<span class="entry-title">How to fix "missing required fields" warnings in Rich Snippets Testing Tool</span>
<span class="updated">December 24, 2011</span>
<span class="vcard author"><span class="fn">Anton Khitrenovich</span></span>

To fix Warning: Missing required field "updated" in Builder

Locate the date div and add updated class to it.

Ex.:

Change

<div class="entry-meta date">

to

<div class="entry-meta date updated">

To fix Warning: Missing required hCard "author" in Builder

Change

<?php printf( __( 'By %s', 'it-l10n-Builder' ), '<span class="author">' . builder_get_author_link() . '</span>' ); ?>

to

<?php printf( __( 'By %s', 'it-l10n-Builder' ), '<span class="vcard author"><span class="fn">' . builder_get_author_link() . '</span></span>' ); ?>

Family name and Given names are taken from values entered for Last Name and First Name respectively in author's profile page.

Example of doing the above changes in Kepler child theme: http://ithemes.com/forum/topic/33858-google-rich-snippet-tool-warning-missing-required-field-entry-title/#entry156972

Tip: If a static Page is set to be shown on front page, then page.php would be the main file to edit and do the above changes. As it does not have the code for displaying author and date, the below lines can be added in the loop and CSS display property set to none to not show them on the homepage.

Ex.:

<div class="entry-meta date updated">
	<?php echo get_the_date(); ?>
</div>

<?php printf( __( 'By %s', 'it-l10n-Builder' ), '<span class="vcard author"><span class="fn">' . builder_get_author_link() . '</span></span>' ); ?>

was added above

<!-- post content -->
2013-03-29 19-20-58.png

In child theme's style.css:

.home .entry-title,
.page .date,
.page .author {
	display: none;
}

Source:

http://technotes.khitrenovich.com/fix-missing-required-fields-warnings-rich-snippets-testing-tool/

http://nepallica.com/fix-google-rich-snippets-warning-missing-required-field-wordpress/

How to Make Entire Text Widgets Clickable

2013-03-31 17-48-29.png

When a text link is placed in a text widget, only the text will be clickable as hyperlinks are inline elements.

display: block CSS can be used so the entire widget becomes clickable.

Ex.:

Code in a text widget:

<a href="#" class="my-widget-link">Mold Removal and Remediation</a>

CSS:

a.my-widget-link {
 	display: block;
 	font-size: 1.65em;
 	padding: 1em;
}

#builder-module-514372ec66190 .widget {
 	padding: 0;
}

where builder-module-514372ec66190 is the ID of widget bar module having the widget.

How to Enable Comments For Custom Post Types

1. Ensure that support for Comments is enabled in the CPT.

How this is done depends on the method being used to set up the CPTs.

Here's an example when using CustomPress:

2013-04-02 12-35-15.png

2. Go to My Theme -> Settings -> Comments.

Even though the CPT might be shown as selected, it won't actually work until it is unchecked and checked again. Therefore, untick your CPT under Comments, save settings, tick it and again save settings.

3. In the CPT add/edit screen, tick Allow comments in Discussion meta box. If Discussion meta box is not visible, pull down Screen Options at the top right of the page and tick Discussion.

How to Create Mobile Navigation like the new Air Theme

Important notice - new plugin

On Feb 4, 2014, a mobile navigation plugin was released for Beta testing. It should make all the manual changes unnecessary. You can find more on this in this forum: http://ithemes.com/forum/forum/236-builder-mobile-navigation-plugin-beta-feedback/

So we encourage you to take the plugin for a test drive first, and provide feedback through that forum.



Manual implementation

There are several steps involved to accomplish this. The solution was tested on a couple of Builder Child themes, but not all, so this may not work for all Child themes. As such, these instructions are provided "as is" and are unsupported. Further customisation is beyond the scope of our theme support.


Pre-requisites

  • Builder parent theme AND your Builder child theme should be at least at version 4, since these are responsive capable themes.
  • Responsive needs to be enabled in the child theme (functions.php should contain: add_theme_support( 'builder-responsive' );

Include the javascript code that enables the Mobile dropdown

  • Copy the js folder and contents from the Air child theme to your child theme.
  • Add the following code at the end of your child theme's functions.php file, yet before the closing ?> (if any):
// Enqueuing and Using Custom Javascript/Jquery 
function it_air_load_custom_scripts() {
	wp_register_script( 'it_air_jquery_additions', get_stylesheet_directory_uri() . '/js/it_air_jquery_additions.js', array('jquery'), false, true );
	wp_enqueue_script('it_air_jquery_additions');
}
add_action( 'wp_enqueue_scripts', 'it_air_load_custom_scripts' );

Enable the Mobile Nav as an Alternative Module Style

Following the code added in step 1, add the following code in functions.php (again, before a closing ?>)

NOTE: when using a navigation menu in another module (e.g. an HTML module, see below)

In the following code, replace:

builder_register_module_style( 'navigation', 'Mobile Navigation', 'mobile-nav' );

with

builder_register_module_style( 'html', 'Mobile Navigation', 'mobile-nav' );
// Add Support for Alternate Module Styles
if ( ! function_exists( 'it_builder_loaded' ) ) {
	function it_builder_loaded() {
		builder_register_module_style( 'navigation', 'Mobile Navigation', 'mobile-nav' );
	}
}
add_action( 'it_libraries_loaded', 'it_builder_loaded' );

NOTE: To avoid conflicts, the above function it_builder_loaded()will only run if a function with the same name does not already exist. Some themes are already using this function to load custom styles. In that case, you should not add this function, but instead add the code builder_register_module_style( 'html', 'Mobile Navigation', 'mobile-nav' ); to the existing function!

Add the css code for the Mobile navigation

Add the following code at the end of your child themes mobile stylesheet style-mobile.css:

Note: when using a navigation menu in another module (e.g. an HTML module)

In the following css code, replace all occurrences of:

.builder-module-navigation.mobile

with

.builder-module-html.mobile


/*********************************************
	Navigation Module (Mobile)
*********************************************/
.builder-module-navigation.mobile {
	padding-top: .5em !important;
}

.builder-module-navigation.mobile ul {
	margin-top: .5em;
}

.builder-module-navigation.mobile li {
	width: 100%;
	position: relative;
}

/* second level stuff */
.builder-module-navigation.mobile li ul {
	position: relative !important;
	left: 0 !important;
	border: 0;
	width: 100%;
	margin: 0;
}

.builder-module-navigation.mobile li a,
.builder-module-navigation.mobile .current_page_item li a,
.builder-module-navigation.mobile .current-cat li a,
.builder-module-navigation.mobile .current-menu-item li a {
	margin: 0;
	background: transparent;
	border-color: transparent;
	color: #3B3F42;
	border-bottom: 1px solid rgba(0,0,0,0.1);
}

.builder-module-navigation.mobile li a:hover,
.builder-module-navigation.mobile .current_page_item li a:hover,
.builder-module-navigation.mobile .current-cat li a li a:hover,
.builder-module-navigation.mobile .current-menu-item li a:hover {
	background: #3B3F42;
	color: #ECECEC;
}

.builder-module-navigation.mobile li li {
	border: 0;
	width: 100%;
}

.builder-module-navigation.mobile li ul ul {
	margin: 0;
}

.builder-module-navigation.mobile li li a {
	padding: .25em 0 .25em 2em;
	line-height: inherit;
	border-radius: 2px;
}

.builder-module-navigation.mobile li li li a {
	padding-left: 4em;
}

.builder-module-navigation.mobile-nav .menu.hidden {
	display: none;
}
#it-mobile-menu {
	background: #3B3F42;
	color: #ECECEC;
	padding: .25em .75em;	
	display: block;
	cursor: pointer;
	border-radius: 2px;
	-webkit-font-smoothing: antialiased;	
}

.builder-module-navigation.mobile.borderless {
	border: 0;
}

Make sure the Mobile navigation only shows when in Mobile mode (style-mobile.css is active)

Add the following at the end of child theme's style.css (WP dashboard -> Appearance -> Editor):

/*********************************************
	Mobile Navigation Menu (Alternate Module Style - hidden above 500px wide)
*********************************************/

#it-mobile-menu {
	display: none;
}

Activate the Mobile Navigation

Select the Mobile navigation Style in the Builder Layout Manager for your Navigation Module.

When using a navigation menu in another module (e.g. an HTML module):

Select the Mobile navigation Style in the Builder Layout Manager for that specific Module.

How to add a Navigation menu in a Builder module

Htmlmodulemobile.jpg
Personal tools
Namespaces
Variants
Actions
iThemes Codex
Codex Navigation
Toolbox