Builder Tips and Tricks

From IThemes Codex
(Difference between revisions)
Jump to: navigation, search
(Removed line 24 having 'echo "<!-- " . print_r( $fields, true ) . "-->\n";' according to https://git.gaarai.com/2011/03/28/anyone-developing-child-themes-brad-j/comment-page-1/#comment-1906)
(Create custom blog page template for Builder)
 
(40 intermediate revisions by 3 users not shown)
Line 2: Line 2:
 
* '''Why''': Although builder generates a blog index page using the content module, in some cases you might want to create your own listing of blog posts. Perhaps to select posts only from a specific category, or for whatever other reasons you can think of.
 
* '''Why''': Although builder generates a blog index page using the content module, in some cases you might want to create your own listing of blog posts. Perhaps to select posts only from a specific category, or for whatever other reasons you can think of.
 
* '''How''': [http://codex.wordpress.org/Function_Reference/query_posts query_posts] is a WordPress function that allows you to write your own WordPress loop. In Builder, the easiest way to create such a blog page is to
 
* '''How''': [http://codex.wordpress.org/Function_Reference/query_posts query_posts] is a WordPress function that allows you to write your own WordPress loop. In Builder, the easiest way to create such a blog page is to
**[http://codex.wordpress.org/Pages#Creating_Your_Own_Page_Templates create a page template],  
+
**[http://codex.wordpress.org/Pages#Creating_Your_Own_Page_Templates create a page template], use the index.php file as the basis for this template. Make sure that you create the page template in your Custom Child theme folder. Make sure that you give the page template file a unique new name, and make sure that the "Template Name: in the header of the template file is unique and meaningful.
 
**upload to your WordPress site,  
 
**upload to your WordPress site,  
 
**write a new page (no need to add content),
 
**write a new page (no need to add content),
 
**select the newly created page template,
 
**select the newly created page template,
 
**and publish the page.
 
**and publish the page.
Your page template should look something like this:
+
 
<pre class="brush:php; highlight: [21]">
+
===Your page template should look something like this:===
 +
<pre class="brush:php;">
 
<?php
 
<?php
 
/*
 
/*
Line 23: Line 24:
 
<?php query_posts( 'paged='. $paged . '&posts_per_page=' . get_option( 'posts_per_page' ) ); ?>
 
<?php query_posts( 'paged='. $paged . '&posts_per_page=' . get_option( 'posts_per_page' ) ); ?>
  
<?php if ( have_posts() ) : ?>
+
note: the rest of the code doesn't need to be changed, and the code should continue with:
    <?php while ( have_posts() ) : the_post(); ?>
+
        <?php if ( current_theme_supports( 'post-thumbnails' ) ) : ?>
+
            <?php the_post_thumbnail( array( 125, 125 ), array( 'class' => 'thumb' ) ); ?>
+
        <?php endif; ?>
+
        <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
+
        <?php the_time( __( 'l, F j, Y', 'it-l10n-Builder' ) ); ?>
+
        <?php the_content_limit( 250, "more »" ); ?>
+
    <?php endwhile; ?>
+
  
    <div class="alignleft"><?php previous_posts_link('« Previous Page') ?></div>
+
<?php if ( have_posts() ) : ?>
    <div class="alignright"><?php next_posts_link('Next Page »') ?></div>
+
</pre>
<?php endif; ?>
+
  
<?php
+
===examples of using a custom page template===
 +
====include only posts from a certain category or categories in your blog page====
 +
change line 13 in the above code to include only posts in a category with the ID 12
 +
<pre class="brush:php;">
 +
<?php query_posts( 'paged='. $paged . '&cat="12"&posts_per_page=' . get_option( 'posts_per_page' ) ); ?>
 +
</pre>
  
}
+
====exclude posts from a certain category or categories in your blog page====
 
+
change line 13 in the above code to exclude all posts in a category with the ID 12
add_action( 'builder_layout_engine_render_content', 'render_content' );
+
<pre class="brush:php;">
 
+
<?php query_posts( 'paged='. $paged . '&cat="-12"&posts_per_page=' . get_option( 'posts_per_page' ) ); ?>
do_action( 'builder_layout_engine_render', basename( __FILE__ ) );
+
 
+
?>
+
 
</pre>
 
</pre>
'''Important Note 1''': the actual content part (post header, date and content) is simplified, refer to the Child Themes index.php to see how it is actually coded for that specific Child Theme.
+
See also [http://codex.wordpress.org/Function_Reference/query_posts#Exclude_Categories_From_Your_Home_Page Exclude categories from your home page]
'''Important Note 2''': the content is displayed using <tt>the_content_limit(250, "more »")</tt> (see highlighted line), a function described in [[#Limit_the_content_of_a_post_that_is_displayed_on_a_blog_index_page|another tip on this page]]. You can use <tt>[http://codex.wordpress.org/Function_Reference/the_content the_content()]</tt> or <tt>[http://codex.wordpress.org/Function_Reference/the_excerpt the_excerpt()]</tt>, depending on your requirements.
+
  
 
== Limit the content of a post that is displayed on a blog index page ==
 
== Limit the content of a post that is displayed on a blog index page ==
* '''Why''': In some cases, <tt>the_content()</tt> or <tt>the_excerpt()</tt> just don't fit your requirements.
+
* '''Why''': In some cases, <code>the_content()</code> or <code>the_excerpt()</code> just don't fit your requirements.
 
* '''How''': Using a new function allows you to specify the number of characters you want to display on the blog index page, and what to use as the "more" text. Add the following [[function]] to your [[Child Theme|child theme's]] [[functions.php]].
 
* '''How''': Using a new function allows you to specify the number of characters you want to display on the blog index page, and what to use as the "more" text. Add the following [[function]] to your [[Child Theme|child theme's]] [[functions.php]].
 
<pre class="brush:php">
 
<pre class="brush:php">
Line 74: Line 67:
  
 
== Add a full width Header and/or Footer to your Builder theme ==
 
== Add a full width Header and/or Footer to your Builder theme ==
* '''Why''': Because you want to
+
deprecated
* '''How''': Detailed instructions in [http://vanweerd.com/how-to-add-full-width-header-and-footer-to-the-builder-theme/ this article].
+
  
 
== How to have full width (100% wide background) modules ==
 
== How to have full width (100% wide background) modules ==
  
The following applies to all themes other than Americana (and its color variants) and Blueprint. All the modules in Americana and Blueprint child themes are full width by default.
+
=== When using responsive-ready child themes ===
 +
 
 +
These child themes have version number of at least 4.0. The current list of responsive-ready Builder child themes can be seen [http://ithemes.com/codex/page/Builder_Features#List_of_responsive-ready_Builder_child_themes here].
 +
 
 +
Add the following at the end of child theme's <code>functions.php</code> (WP dashboard -> Appearance -> Editor):
 +
 
 +
<pre class="brush:php;">
 +
add_theme_support( 'builder-full-width-modules' );
 +
</pre>
 +
 
 +
'''Note''':
 +
 
 +
# For simplicity sake, we say "full width modules". Technically speaking, it is not the modules that become full width, but their background wrappers.
 +
# Few child themes like Expansion and all its color variants have the above line in their <code>functions.php</code> out of the box. In such cases, do not add it again.
 +
# All custom CSS code should be placed at end of child theme's style.css.
 +
 
 +
{| class="wikitable"
 +
|+ '''Before & After screenshots showing the effect of adding above line of code in Default child theme'''
 +
! scope="col" | Before
 +
! scope="col" | After
 +
|-
 +
| [[File:My Test Site 2013-01-01 10-49-01.png|475px|thumb|none]]
 +
  || [[File:My Test Site 2013-01-01 10-49-27.png|475px|thumb|none]]
 +
 
 +
|}
 +
 
 +
==== Structural change as a result of adding above line of code ====
 +
 
 +
<u>Before</u>
 +
 
 +
<pre class="brush:css;">
 +
.builder-container-outer-wrapper {
 +
    max-width: 960px;
 +
    width: 100%;
 +
}
 +
</pre>
 +
 
 +
(where 960 is the layout width)
 +
 
 +
<u>After</u>
 +
 
 +
<pre class="brush:css;">
 +
.builder-container-outer-wrapper {
 +
    width: 100%;
 +
}
 +
</pre>
 +
 
 +
Note: In [http://ithemes.com/forum/topic/35775-full-width-modules-with-responsive-turned-off-builder-4011/#entry165354 few cases], we have observed that <code>.builder-container-outer-wrapper</code> isn't automatically becoming 100%. This can be observed using Firebug. In such cases, the following CSS should be used:
 +
 
 +
<pre class="brush:css;">
 +
.builder-container-outer-wrapper {
 +
width: 100% !important;
 +
}
 +
</pre>
 +
 
 +
==== How to set background of full width modules ====
 +
 
 +
===== All modules =====
 +
 
 +
If you would like to set the same background to every module of all layouts, i.e., throughout the site in a single shot, use the following sample CSS:
 +
 
 +
<pre class="brush:css;">
 +
.builder-module-background-wrapper {
 +
    background: gray;
 +
}
 +
</pre>
 +
 
 +
[[File:My Test Site 2013-01-01 11-42-10.png|475px|thumb|none]]
 +
 
 +
===== A specific module based on its ID =====
 +
 
 +
If you would like to set a background to a specific full width module, use the following sample CSS:
 +
 
 +
<pre class="brush:css;">
 +
#builder-module-50842a8824755-background-wrapper {
 +
    background: yellow;
 +
}
 +
</pre>
 +
 
 +
where 50842a8824755 is the ID of module in question.
 +
 
 +
[[File:My Test Site 2013-01-01 11-19-53.png|800px|thumb|none]]
 +
 
 +
The easiest way to obtain the CSS ID is by using Firebug. Below screenshot shows where <code>builder-module-50842a8824755-background-wrapper</code> can be found.
 +
 
 +
[[File:2013-01-01 11-15-31.png|800px|thumb|none]]
 +
 
 +
===== A specific module based on its position =====
 +
 
 +
It is also possible to set background of a full width module based on its position in the layout from top. For example, the following sample CSS sets yellow background to top most modules of all layouts i.e, throughout the site.
 +
 
 +
<pre class="brush:css;">
 +
.builder-module-1-background-wrapper {
 +
    background: yellow;
 +
}
 +
</pre>
 +
 
 +
[[File:2013-01-01 11-35-10.png|800px|thumb|none]]
 +
 
 +
===== All modules of a certain type =====
 +
 
 +
It is also possible to set background of full width modules based on '''module type'''. For example, the following sample CSS sets yellow background to all widget bar modules in all layouts i.e, throughout the site.
 +
 
 +
<pre class="brush:css;">
 +
.builder-module-widget-bar-background-wrapper {
 +
    background: yellow;
 +
}
 +
</pre>
 +
 
 +
[[File:My Test Site 2013-01-01 11-38-02.png|432px|thumb|none]]
 +
 
 +
==== Prevent a full width background image being resized to the content width ====
 +
 
 +
By default, an image uploaded and used by an Image Module will be resized to the layout width. This causes images intended to be used as a full width image to pixelate and blur, as they are being inflated from the content width to the full width (regardless of the initial format that was uploaded). To prevent this from happening, add the following code to your <code>functions.php</code> file (preferably at the end, but '''before''' the closing ?> tag, if any!):
 +
 
 +
'''Code in functions.php''':
 +
 
 +
<pre class="brush:php;">
 +
// Ensure that a Full Window-styled Image Module keeps a high-resolution image
 +
function it_air_filter_image_module_widths( $fields ) {
 +
        if ( ( 'image' != $fields['module'] ) || ( 'image-full-window' != $fields['data']['style'] ) || empty( $fields['data']['attachment'] ) )
 +
                return $fields;
 +
 
 +
        $image = wp_get_attachment_metadata( $fields['data']['attachment'] );
 +
 
 +
        $fields['widths']['element_width'] = $image['width'];
 +
 
 +
        return $fields;
 +
}
 +
add_action( 'builder_module_filter_calculated_widths', 'it_air_filter_image_module_widths' );
 +
</pre>
 +
 
 +
=== When using non responsive-ready child themes ===
 +
 
 +
The following applies to all themes other than Acute (and its color variants), Americana (and its color variants), City Church, Blueprint, Scooter, Kepler, Lucky 7, Thinner, Traverse. All the module wrappers in these said child themes are full width by default.
  
 
Note:
 
Note:
Line 93: Line 219:
 
'''3.''' To observe a module becoming full width, set a background color or image or both.
 
'''3.''' To observe a module becoming full width, set a background color or image or both.
  
=== To make a specific single module full width ===
+
==== To make a specific single module full width ====
 +
 
 +
Please read the [http://ithemes.com/codex/page/Builder_Tips_and_Tricks#Intro Intro].
  
 
<gallery widths=200px caption="Before and After">
 
<gallery widths=200px caption="Before and After">
Line 145: Line 273:
 
</pre>
 
</pre>
  
=== To make specific multiple modules full width ===
+
==== To make specific multiple modules full width ====
 +
 
 +
Please read the [http://ithemes.com/codex/page/Builder_Tips_and_Tricks#Intro Intro].
 +
 
 +
===== By Module Types =====
 +
 
 +
By adding the following sample code before the closing PHP tag in child theme's functions.php, all Widget Bar modules, all Navigation modules and the Footer module will become full-width.
 +
 
 +
<pre class="brush:php;">
 +
function custom_remove_container_width( $fields ) {
 +
    foreach ( (array) $fields['style'] as $index => $rule ) {
 +
        if ( preg_match( '/^(max-)?width:/', $rule ) )
 +
            unset( $fields['style'][$index] );
 +
    }
 +
   
 +
    return $fields;
 +
}
 +
add_filter( 'builder_filter_container_outer_wrapper_attributes', 'custom_remove_container_width', 20 );
 +
 
 +
function custom_remove_module_width( $fields ) {
 +
    $full_width_modules = array( 'widget-bar','navigation','footer' );
 +
   
 +
    if ( ! in_array( $fields['module'], $full_width_modules ) )
 +
        return $fields;
 +
    foreach ( (array) $fields['attributes']['style'] as $index => $rule ) {
 +
        if ( preg_match( '/^(max-)?width:/', $rule ) )
 +
            unset( $fields['attributes']['style'][$index] );
 +
    }
 +
   
 +
    return $fields;
 +
}
 +
add_filter( 'builder_module_filter_outer_wrapper_attributes', 'custom_remove_module_width', 20 );
 +
 
 +
function custom_add_open_module_wrapper( $fields ) {
 +
    $width = apply_filters( 'builder_get_container_width', 0 );
 +
   
 +
    echo "<div class='builder-module-limit-width-wrapper clearfix' style='width:{$width}px;margin:0 auto;'>\n";
 +
}
 +
function custom_add_close_module_wrapper( $fields ) {
 +
    echo "</div>\n";
 +
}
 +
add_action( 'builder_module_render_contents', 'custom_add_open_module_wrapper', 0 );
 +
add_action( 'builder_module_render_contents', 'custom_add_close_module_wrapper', 20 );
 +
</pre>
 +
 
 +
The other available module types in Builder are: image, content, html
 +
 
 +
===== By Module IDs =====
  
 
<gallery widths=200px caption="Before and After">
 
<gallery widths=200px caption="Before and After">
Line 158: Line 333:
 
* In the code below, 4d14470049da5 and 4d14470049da7 must be replaced with GUID of specific modules which are to be made full width
 
* In the code below, 4d14470049da5 and 4d14470049da7 must be replaced with GUID of specific modules which are to be made full width
  
Code in functions.php:
+
'''Code in functions.php''':
  
 
<pre class="brush:php;">
 
<pre class="brush:php;">
Line 197: Line 372:
 
</pre>
 
</pre>
  
=== To make all Image modules full width ===
+
==== To make all Image modules full width ====
 +
 
 +
Please read the [http://ithemes.com/codex/page/Builder_Tips_and_Tricks#Intro Intro].
  
 
<gallery widths=200px caption="Before and After">
 
<gallery widths=200px caption="Before and After">
Line 209: Line 386:
 
}</pre>
 
}</pre>
  
Code in functions.php:
+
'''Code in functions.php''':
  
 
<pre class="brush:php;">
 
<pre class="brush:php;">
Line 248: Line 425:
 
</pre>
 
</pre>
  
=== To make all Navigation modules full width ===
+
==== To make all Navigation modules full width ====
 +
 
 +
Please read the [http://ithemes.com/codex/page/Builder_Tips_and_Tricks#Intro Intro].
  
 
<gallery widths=200px caption="Before and After">
 
<gallery widths=200px caption="Before and After">
Line 292: Line 471:
 
</pre>
 
</pre>
  
=== To make Content module full width ===
+
==== To make Content module full width ====
 +
 
 +
Please read the [http://ithemes.com/codex/page/Builder_Tips_and_Tricks#Intro Intro].
  
 
<gallery widths=200px caption="Before and After">
 
<gallery widths=200px caption="Before and After">
Line 304: Line 485:
 
}</pre>
 
}</pre>
  
Code in functions.php:
+
'''Code in functions.php''':
  
 
<pre class="brush:php;">
 
<pre class="brush:php;">
Line 343: Line 524:
 
</pre>
 
</pre>
  
=== To make all HTML modules full width ===
+
==== To make all HTML modules full width ====
 +
 
 +
Please read the [http://ithemes.com/codex/page/Builder_Tips_and_Tricks#Intro Intro].
  
 
<gallery widths=200px caption="Before and After">
 
<gallery widths=200px caption="Before and After">
Line 351: Line 534:
  
 
The following has been added to child theme's style.css to see the effect of all HTML modules (only 1 is being used in the screenshot above) going full width:
 
The following has been added to child theme's style.css to see the effect of all HTML modules (only 1 is being used in the screenshot above) going full width:
<pre class="brush:php;">.builder-module-image {
+
<pre class="brush:php;">.builder-module-html {
 
background-color: yellow;
 
background-color: yellow;
 
}</pre>
 
}</pre>
  
Code in functions.php:
+
'''Code in functions.php''':
  
 
<pre class="brush:php;">
 
<pre class="brush:php;">
Line 394: Line 577:
 
</pre>
 
</pre>
  
=== To make all Widget Bar modules full width ===
+
==== To make all Widget Bar modules full width ====
 +
 
 +
Please read the [http://ithemes.com/codex/page/Builder_Tips_and_Tricks#Intro Intro].
  
 
<gallery widths=200px caption="Before and After">
 
<gallery widths=200px caption="Before and After">
Line 406: Line 591:
 
}</pre>
 
}</pre>
  
Code in functions.php:
+
'''Code in functions.php''':
  
 
<pre class="brush:php;">
 
<pre class="brush:php;">
Line 445: Line 630:
 
</pre>
 
</pre>
  
=== To make Footer module full width ===
+
==== To make Footer module full width ====
 +
 
 +
Please read the [http://ithemes.com/codex/page/Builder_Tips_and_Tricks#Intro Intro].
  
 
<gallery widths=200px caption="Before and After">
 
<gallery widths=200px caption="Before and After">
Line 457: Line 644:
 
}</pre>
 
}</pre>
  
Code in functions.php:
+
'''Code in functions.php''':
  
 
<pre class="brush:php;">
 
<pre class="brush:php;">
Line 496: Line 683:
 
</pre>
 
</pre>
  
=== To make all modules full width ===
+
==== To make all modules full width ====
 +
 
 +
Please read the [http://ithemes.com/codex/page/Builder_Tips_and_Tricks#Intro Intro].
  
 
In this method we are going to add code to functions.php that will make outer wrappers of all modules full width.
 
In this method we are going to add code to functions.php that will make outer wrappers of all modules full width.
Line 502: Line 691:
 
[http://d.pr/iH9x Before] -> [http://d.pr/bdwr After]
 
[http://d.pr/iH9x Before] -> [http://d.pr/bdwr After]
  
Code in functions.php:
+
'''Code in functions.php''':
  
 
<pre class="brush:php;">
 
<pre class="brush:php;">
Line 577: Line 766:
 
}</pre>
 
}</pre>
  
If you would like to apply different styles to different modules of the same type when using this method, use Module Styles.  
+
If you would like to apply different styles to different modules of the same type when using this method, use [http://ithemes.com/codex/page/Builder_Features#Custom_Module_Styles Custom Module Styles].  
  
 
Ex.: Let's say there are two widget bar modules in the layout and using the above method, both would become full width. Now if you would like to set red background to one of these widget bar module and green to another, then you have to create two custom module styles for these and use them.
 
Ex.: Let's say there are two widget bar modules in the layout and using the above method, both would become full width. Now if you would like to set red background to one of these widget bar module and green to another, then you have to create two custom module styles for these and use them.
Line 622: Line 811:
 
<pre class="brush:php;">
 
<pre class="brush:php;">
 
<?php
 
<?php
add_action('builder_layout_engine_render_container', 'add_after_opening_body', 0 );
+
add_action('builder_layout_engine_render_header', 'add_after_opening_body', 20 );
 
function add_after_opening_body() { ?>  
 
function add_after_opening_body() { ?>  
Code that you want just after the opening body tag should be placed here  
+
HTML code that you want just after the opening body tag should be placed here  
 
<?php }
 
<?php }
  
 
add_action('builder_finish', 'add_before_closing_body', 0 );
 
add_action('builder_finish', 'add_before_closing_body', 0 );
 
function add_before_closing_body() { ?>  
 
function add_before_closing_body() { ?>  
Code that you want just before the closing body tag should be placed here  
+
HTML code that you want just before the closing body tag should be placed here  
 
<?php }
 
<?php }
 
?>
 
?>
Line 656: Line 845:
 
== How to replace H4 tags around widget titles with divs ==
 
== How to replace H4 tags around widget titles with divs ==
  
The following code can be added to your child theme's functions.php file in order to remove the H4 tags from around the widget titles:
+
The following code can be added before the closing PHP tag in your child theme's functions.php file to remove the H4 tags from around the widget titles:
  
 
<pre class="brush:php;">
 
<pre class="brush:php;">
Line 669: Line 858:
  
 
[http://ithemes.com/forum/index.php?/topic/12052-builder-seo-issues-widget-heading-elements-semantic-markup/#p57074 Source].
 
[http://ithemes.com/forum/index.php?/topic/12052-builder-seo-issues-widget-heading-elements-semantic-markup/#p57074 Source].
 +
 +
Another example:
 +
 +
To replace h4 tags around widget titles with say h2, the following code can be used:
 +
 +
<pre class="brush:php;">
 +
function custom_modify_widget_wrappers( $options ) {
 +
    $options['before_title'] = '<h2 class="widget-title">';
 +
    $options['after_title'] = '</h2>';
 +
   
 +
    return $options;
 +
}
 +
add_filter( 'builder_filter_register_sidebar_options', 'custom_modify_widget_wrappers' );
 +
</pre>
  
 
== How to add a search form at the right side in a nav bar ==
 
== How to add a search form at the right side in a nav bar ==
Line 691: Line 894:
 
         ob_end_clean();
 
         ob_end_clean();
 
   
 
   
         $items .= '<li class="search-form">' . $searchform . '</li>';
+
         $items .= '<li class="my-search-form">' . $searchform . '</li>';
 
     return $items;
 
     return $items;
 
}
 
}
Line 701: Line 904:
 
    
 
    
 
<pre class="brush:css;">
 
<pre class="brush:css;">
.builder-module-navigation li.search-form {
+
.builder-module-navigation li.my-search-form {
 
     float: right;
 
     float: right;
 
     margin-right: 0.5em;
 
     margin-right: 0.5em;
Line 713: Line 916:
  
 
In the above replace builder-module-4d8f8f64596b7 with the ID of this module.
 
In the above replace builder-module-4d8f8f64596b7 with the ID of this module.
 +
 +
If you are using BuilderChild-City-Church, see [http://ithemes.com/forum/index.php?/topic/19945-search-box-in-navigation/#p94449 this] forum topic for sample CSS.
 +
 +
That's it!
  
 
Source: http://vanweerd.com/enhancing-your-wordpress-3-menus/
 
Source: http://vanweerd.com/enhancing-your-wordpress-3-menus/
 +
 +
This method is also explained [http://ithemesbuilder.com/how-to-add-a-items-to-builders-navigation-menus/ here].
 +
 +
==Links to specific customization requests==
 +
 +
===Designing a widgetized footer===
 +
 +
[[Image:IWfo.16-04-2011 14-01-22.png|800px|none]]
 +
 +
[http://ithemes.com/forum/index.php?/topic/13449-designing-a-widgetised-footer/#p62860 Forum post]
 +
 +
===Positioning images at a fixed location in all widgets===
 +
 +
[[Image:3wa5.16-04-2011 14-22-06.png|800px|none]]
 +
 +
[http://ithemes.com/forum/index.php?/topic/13430-ionic-widget-height/#p62862 Forum post]
 +
 +
===Setting up Go To Top named anchor===
 +
 +
[http://ithemes.com/forum/index.php?/topic/14119-main-custom-navigation-menu-problems-in-safari-browser/#p65897 Forum post]
 +
 +
== builder_comments_popup_link action explained ==
 +
 +
The builder_comments_popup_link action triggers the builder_comments_popup_link() function by default. This function calls the comments_popup_link() function of WordPress but it also ensures that the link should be shown. For instance, the link should not be shown if the comments have been disabled for that content type per Builder's settings, if both comments and pings are disabled, or if a password is required in order to view the content and it has not been entered yet.
 +
 +
So keeping that call in place is very important. It can still be customized in the same way a comments_popup_link() function call is customized. Let's break out the arguments to see how that is done:
 +
 +
<pre class="brush:php;">
 +
<?php
 +
    do_action(
 +
        'builder_comments_popup_link',
 +
        '<div class="alignright_comments"><span class="comments">',
 +
        '</span></div>',
 +
        __( 'Add Your Comment %s', 'it-l10n-Builder' ),
 +
        __( '(0)', 'it-l10n-Builder' ),
 +
        __( '(1)', 'it-l10n-Builder' ),
 +
        __( '(%)', 'it-l10n-Builder' )
 +
    );
 +
?>
 +
</pre>
 +
 +
Now let's see that listing again while replacing the arguments with their meaning:
 +
 +
<pre class="brush:php;">
 +
<?php
 +
    do_action(
 +
        action name,
 +
        content to add before link,
 +
        content to add after link,
 +
        template which has %s replaced with the output from comments_popup_link,
 +
        comments_popup_link argument zero comments,
 +
        comments_popup_link argument one comment,
 +
        comments_popup_link argument more than one comment,
 +
    );
 +
?>
 +
</pre>
 +
 +
So if you know how to modify comments_popup_link, you should now see how you can modify this action call.
 +
 +
Note that all the __( 'text', 'it-l10n-Builder' ) stuff is just for translation purposes. So __( '(%)', 'it-l10n-Builder' ) just means '(%)'.
 +
 +
'''Usage Example'''
 +
 +
To have an image and the words "Add your Comment" with the image and text being a link:
 +
 +
Since the comments_popup_link() arguments are the ones added to the link, to add an image to the link, we need to modify those arguments. Here's a quick example:
 +
 +
<pre class="brush:php;">
 +
<?php
 +
    $image_url = get_bloginfo( 'template_directory' ) . '/images/folder.png';
 +
    $image = "<img src='$image_url' alt='comments' />";
 +
   
 +
    do_action(
 +
        'builder_comments_popup_link',
 +
        '<div class="alignright_comments"><span class="comments">',
 +
        '</span></div>',
 +
        'Add Your Comment %s',
 +
        "$image (0)",
 +
        "$image (1)",
 +
        "$image (%)"
 +
    );
 +
?>
 +
</pre>
 +
 +
Of course, this adds the folder icon and not a comment icon, but hopefully you can see what we are doing here and use it to add your own image. Note that get_bloginfo( 'template_directory' ) returns the base URL to the Builder directory. To get your child theme's directory URL, you can use get_bloginfo( 'stylesheet_directory' ).
 +
 +
Source: http://ithemes.com/forum/index.php?/topic/14453-changing-comments-format/#p67520
 +
 +
== How to show "My Theme" menu only to specific users ==
 +
 +
If the following section of code is added to your child theme's functions.php file, "My Theme" menu will only be shown to the user with a username of "admin".
 +
 +
<pre class="brush:php;">
 +
function child_theme_restrict_my_theme_menu() {
 +
    $user = wp_get_current_user();
 +
   
 +
    if ( 'admin' !== $user->user_login )
 +
        remove_theme_support( 'builder-my-theme-menu' );
 +
}
 +
add_action( 'builder_customize_theme_features', 'child_theme_restrict_my_theme_menu' );
 +
</pre>
 +
 +
If you want to use a different username, replace "admin" text on the fourth line with the username you want to use. For example, to make it only show for username "james", it would look like:
 +
 +
<pre class="brush:php;">
 +
function child_theme_restrict_my_theme_menu() {
 +
    $user = wp_get_current_user();
 +
   
 +
    if ( 'james' !== $user->user_login )
 +
        remove_theme_support( 'builder-my-theme-menu' );
 +
}
 +
add_action( 'builder_customize_theme_features', 'child_theme_restrict_my_theme_menu' );
 +
</pre>
 +
 +
The sample code below shows how to hide "My Theme" menu from everyone except Super Admins. This is a feature specific to multisite WordPress installations.
 +
 +
<pre class="brush:php;">
 +
function child_theme_restrict_my_theme_menu() {
 +
    if ( ! is_super_admin() )
 +
        remove_theme_support( 'builder-my-theme-menu' );
 +
}
 +
add_action( 'builder_customize_theme_features', 'child_theme_restrict_my_theme_menu' );
 +
</pre>
 +
 +
== How to redirect attachment links to corresponding posts ==
 +
 +
Search engine results might show links from your site leading to attachment pages which are not really that useful to the visitors. If you would like to have these links redirect to their corresponding post pages, follow this:
 +
 +
Duplicate ''image.php'' from Builder Parent theme into your child theme directory, then replace the entire content of image.php (the one in your child theme directory) with:
 +
 +
<pre class="brush:php;">
 +
<?php wp_redirect(get_permalink($post->post_parent)); ?>
 +
</pre>
 +
 +
Forum topic: http://ithemes.com/forum/index.php?/topic/17644-how-can-i-find-and-delete-a-attachment-id-page/
 +
 +
More: http://wordpress.org/support/topic/disable-attachment-posts-without-remove-the-medias and http://wordpress.org/support/topic/redirect-attachment-page-to-post-page-how-to
 +
 +
== How to view debug info in page source ==
 +
 +
Add <code>?builder_debug=1</code> at the end of webpage URL.
 +
 +
Ex.: If the page URL is http://ithemesbuilder.com/how-to-add-easy-social-icons-in-the-wordpress-navigation-menu/, visit http://ithemesbuilder.com/how-to-add-easy-social-icons-in-the-wordpress-navigation-menu/?builder_debug=1 and view the page source. It should show Builder specific info like this:
 +
 +
[[File:2012-04-03 20-25-50.png|697px|thumb|none]]
 +
 +
== How to remove Header widget ==
 +
 +
Adding the following code in child theme's functions.php at the end (before closing PHP tag, if present) will remove Builder's Header widget from Appearance -> Widgets.
 +
 +
<pre class="brush:php;">
 +
function unregister_some_widgets() {
 +
unregister_widget('BuilderHeaderWidget');
 +
}
 +
add_action('widgets_init', 'unregister_some_widgets', 1);
 +
</pre>
 +
 +
== How to set up print stylesheet such that only the content gets printed ==
 +
 +
'''1.''' Copy <code>header.php</code> from parent Builder directory into the child theme directory and edit it.
 +
 +
Add
 +
 +
<pre class="brush:php;">
 +
<link rel="stylesheet" type="text/css" media="print" href="<?php bloginfo( 'stylesheet_directory' ); ?>/print.css" />
 +
</pre>
 +
 +
below
 +
 +
<pre class="brush:php;">
 +
<?php builder_add_stylesheets(); ?>
 +
</pre>
 +
 +
'''2.''' Create a file named <code>print.css</code> in child theme directory having this code:
 +
 +
<pre class="brush:css;">
 +
.builder-module {
 +
display: none;
 +
}
 +
 +
.builder-module-content .builder-module-sidebar-outer-wrapper {
 +
display: none;
 +
}
 +
 +
.builder-module-content {
 +
display: block;
 +
}
 +
</pre>
 +
 +
Source: http://ithemes.com/forum/topic/8611-printing-problems-with-builder-help-going-live-in-7-days/#entry44752
 +
 +
== How to force CSS changes to "go live" immediately ==
 +
 +
Intro: http://markjaquith.wordpress.com/2009/05/04/force-css-changes-to-go-live-immediately/
 +
 +
This can be done in Builder by first making sure that the default stylesheet does not load, and then load the version with file modification date appended.
 +
 +
Add the following code at the end of your child themes <code>functions.php</code> (but before the closing <code>?></code>, if any):
 +
 +
<pre class="brush: php; gutter: false;">
 +
// disable loading the default stylesheet
 +
function custom_filter_disable_theme_stylesheets( $disable ) {
 +
        return true;
 +
}
 +
add_filter( 'builder_filter_disable_theme_stylesheets', 'custom_filter_disable_theme_stylesheets', 20 );
 +
 +
// add the versioned stylesheet
 +
function custom_add_new_stylesheet() { ?>
 +
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); echo '?' . filemtime( get_stylesheet_directory() . '/style.css'); ?>" type="text/css" media="screen, projection" />
 +
<?php
 +
}
 +
add_action( 'builder_add_stylesheets', 'custom_add_new_stylesheet' );
 +
</pre>
 +
 +
Source: http://ithemes.com/forum/topic/31621-reloading-stylecss-after-every-change/#entry146840
 +
 +
== How to left/right align a YouTube video ==
 +
 +
When a responsive-ready child theme is active, wrapping YouTube Embed code with
 +
 +
<pre class="brush: html; gutter: false;">
 +
<div style="float: left;">
 +
</pre>
 +
or
 +
<pre class="brush: html; gutter: false;">
 +
<div style="float: right;">
 +
</pre>
 +
 +
and
 +
 +
<pre class="brush: html; gutter: false;">
 +
</div>
 +
</pre>
 +
 +
Ex.:
 +
 +
<pre class="brush: html; gutter: false;">
 +
<div style="float: right;"><iframe width="560" height="315" src="http://www.youtube.com/embed/DSwQ4Mim28I?list=UUXSQU9bJhGWGvKGtfL-tuag" frameborder="0" allowfullscreen></iframe>
 +
</pre>
 +
 +
will not display the video at all on the Page/Post.
 +
 +
The solution if floating is desired is to ensure that the floated element has a width associated with it. In order to prevent breaking the fluidity of the video, width should be set with a max-width and a width of 100% as shown below.
 +
 +
<pre class="brush: html; gutter: false;">
 +
<div style="float: right; max-width: 560px; width: 100%;"><iframe width="560" height="315" src="http://www.youtube.com/embed/DSwQ4Mim28I?list=UUXSQU9bJhGWGvKGtfL-tuag" frameborder="0" allowfullscreen></iframe></div>
 +
</pre>
 +
 +
Forum topic: http://ithemes.com/forum/topic/34643-div-float-right-youtube-video-disappearing/
 +
 +
== How to set a default placeholder text in Search box ==
 +
 +
[[File:2013-02-12 20-47-26.png|216px|thumb|none]]
 +
 +
[[File:2013-02-12 20-47-38.png|204px|thumb|none]]
 +
 +
If you would like to set a default text in search box that goes away when the search field gets focus AND your active child theme does not already have a <code>searchform.php</code>, do this:
 +
 +
Create a file named <code>searchform.php</code> in child theme's directory having the following code:
 +
 +
<pre class="brush:css; gutter: false;">
 +
<?php $search_box_default = __( 'Search site', 'it-l10n-BuilderChild-Default' ); ?>
 +
 +
<?php $search_box_value = esc_attr( apply_filters( 'the_search_query', get_search_query() ) ); ?>
 +
 +
<?php $search_box_value = ( empty( $search_box_value ) ) ? $search_box_default : $search_box_value; ?>
 +
 +
<form method="get" class="search-form" action="<?php echo get_option( 'home' ); ?>">
 +
    <input type="text" value="<?php echo $search_box_value; ?>" name="s" class="search-text-box" onfocus="if(this.value == '<?php echo $search_box_default; ?>') this.value = '';" onblur="if(this.value == '') this.value = '<?php echo $search_box_default; ?>';" />
 +
    <input type="submit" value="<?php echo esc_attr__( 'Search', 'it-l10n-BuilderChild-Default' ); ?>" class="search-submit-button" />
 +
</form>
 +
</pre>
 +
 +
The default text can be changed in the first line. Just replace <code>Search site</code> with your desired default placeholder text.
 +
 +
Optional: Replace <code>Default</code> in <code>it-l10n-BuilderChild-Default</code> above with the name of your active child theme.
 +
 +
== How to add support for Sidebars in Navigation Module ==
 +
 +
It is possible to add sidebar(s) in a Navigation Module by adding the following in child theme's <code>functions.php</code>:
 +
 +
<pre class="brush: php; gutter: false;">
 +
add_theme_support( 'builder-navigation-module-sidebars' );
 +
</pre>
 +
 +
Note: This is presently an experimental feature.
 +
 +
As such the graphic representing the Navigation Module in layout manager will not change to reflect the presence and arrangement of sidebar(s).
 +
 +
Below is an example of using this to add social media icons floating to the right in the nav bar with BuilderChild-Default as the active theme.
 +
 +
But first the result:
 +
 +
[[File:WordPress Dev Site 2013-05-30 13-08-04.png|800px|thumb|none]]
 +
 +
In the backend:
 +
 +
[[File:2013-05-30 12-55-18.png|625px|thumb|none]]
 +
 +
[[File:2013-05-30 12-57-43.png|661px|thumb|none]]
 +
 +
[[File:WordPress Dev Site 2013-05-30 13-13-19.png|800px|thumb|none]]
 +
 +
With [http://wordpress.org/plugins/social-media-widget/ Social Media Widget plugin] installed and activated, its widget has been placed in the Navigation Module's sidebar.
 +
 +
[[File:2013-05-30 13-02-45.png|202px|thumb|none]]
 +
 +
and this CSS added at end of child theme's <code>style.css</code>:
 +
 +
<pre class="brush:css; gutter: false;">
 +
.builder-module-navigation .builder-module-sidebar {
 +
background: transparent;
 +
padding-top: 0;
 +
padding-bottom: 0;
 +
}
 +
 +
.builder-module-navigation .widget {
 +
padding: 0;
 +
padding-right: 0.5em;
 +
}
 +
 +
.builder-module-navigation .widget a {
 +
display: inline;
 +
}
 +
 +
.socialmedia-buttons img {
 +
padding-top: 0.5em;
 +
}
 +
</pre>
 +
 +
Source: http://ithemes.com/codex/page/Builder/Release_Notes/3.0.0

Latest revision as of 15:13, October 11, 2013

Contents

Create custom blog page template for Builder

  • Why: Although builder generates a blog index page using the content module, in some cases you might want to create your own listing of blog posts. Perhaps to select posts only from a specific category, or for whatever other reasons you can think of.
  • How: query_posts is a WordPress function that allows you to write your own WordPress loop. In Builder, the easiest way to create such a blog page is to
    • create a page template, use the index.php file as the basis for this template. Make sure that you create the page template in your Custom Child theme folder. Make sure that you give the page template file a unique new name, and make sure that the "Template Name: in the header of the template file is unique and meaningful.
    • upload to your WordPress site,
    • write a new page (no need to add content),
    • select the newly created page template,
    • and publish the page.

Your page template should look something like this:

<?php
/*
Template Name: Custom Blog Index Page
*/
?>
<?php

function render_content() {
	
?>

<?php $paged = ( get_query_var('paged') ) ? get_query_var( 'paged' ) : 1; ?>
<?php query_posts( 'paged='. $paged . '&posts_per_page=' . get_option( 'posts_per_page' ) ); ?>

note: the rest of the code doesn't need to be changed, and the code should continue with:

<?php if ( have_posts() ) : ?>  

examples of using a custom page template

include only posts from a certain category or categories in your blog page

change line 13 in the above code to include only posts in a category with the ID 12

<?php query_posts( 'paged='. $paged . '&cat="12"&posts_per_page=' . get_option( 'posts_per_page' ) ); ?>

exclude posts from a certain category or categories in your blog page

change line 13 in the above code to exclude all posts in a category with the ID 12

<?php query_posts( 'paged='. $paged . '&cat="-12"&posts_per_page=' . get_option( 'posts_per_page' ) ); ?>

See also Exclude categories from your home page

Limit the content of a post that is displayed on a blog index page

  • Why: In some cases, the_content() or the_excerpt() just don't fit your requirements.
  • How: Using a new function allows you to specify the number of characters you want to display on the blog index page, and what to use as the "more" text. Add the following function to your child theme's functions.php.
function the_content_limit($max_char, $more_link_text = '(more...)', $stripteaser = 0, $more_file = '') {
    $content = get_the_content($more_link_text, $stripteaser, $more_file);
    $content = apply_filters('the_content', $content);

   if (strlen($_GET['p']) > 0) {
      echo $content;
   }
   else if ((strlen($content)>$max_char) && ($space = strpos($content, " ", $max_char ))) {
        $content = substr($content, 0, $space);
        echo $content = $content . " <a href='"; the_permalink(); echo "'>".$more_link_text."</a>";
   }
   else {
      echo $content;
   }
}

(Note: 95% of the code is based on this plugin by Alfonso Sanchez-Paus Diaz and Julian Simon de Castro).

Add a full width Header and/or Footer to your Builder theme

deprecated

How to have full width (100% wide background) modules

When using responsive-ready child themes

These child themes have version number of at least 4.0. The current list of responsive-ready Builder child themes can be seen here.

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

add_theme_support( 'builder-full-width-modules' );

Note:

  1. For simplicity sake, we say "full width modules". Technically speaking, it is not the modules that become full width, but their background wrappers.
  2. Few child themes like Expansion and all its color variants have the above line in their functions.php out of the box. In such cases, do not add it again.
  3. All custom CSS code should be placed at end of child theme's style.css.
Before & After screenshots showing the effect of adding above line of code in Default child theme
Before After
My Test Site 2013-01-01 10-49-01.png
My Test Site 2013-01-01 10-49-27.png

Structural change as a result of adding above line of code

Before

.builder-container-outer-wrapper {
    max-width: 960px;
    width: 100%;
}

(where 960 is the layout width)

After

.builder-container-outer-wrapper {
    width: 100%;
}

Note: In few cases, we have observed that .builder-container-outer-wrapper isn't automatically becoming 100%. This can be observed using Firebug. In such cases, the following CSS should be used:

.builder-container-outer-wrapper {
	width: 100% !important;
}

How to set background of full width modules

All modules

If you would like to set the same background to every module of all layouts, i.e., throughout the site in a single shot, use the following sample CSS:

.builder-module-background-wrapper {
    background: gray;
}
My Test Site 2013-01-01 11-42-10.png
A specific module based on its ID

If you would like to set a background to a specific full width module, use the following sample CSS:

#builder-module-50842a8824755-background-wrapper {
    background: yellow;
}

where 50842a8824755 is the ID of module in question.

My Test Site 2013-01-01 11-19-53.png

The easiest way to obtain the CSS ID is by using Firebug. Below screenshot shows where builder-module-50842a8824755-background-wrapper can be found.

2013-01-01 11-15-31.png
A specific module based on its position

It is also possible to set background of a full width module based on its position in the layout from top. For example, the following sample CSS sets yellow background to top most modules of all layouts i.e, throughout the site.

.builder-module-1-background-wrapper {
    background: yellow;
}
2013-01-01 11-35-10.png
All modules of a certain type

It is also possible to set background of full width modules based on module type. For example, the following sample CSS sets yellow background to all widget bar modules in all layouts i.e, throughout the site.

.builder-module-widget-bar-background-wrapper {
    background: yellow;
}
My Test Site 2013-01-01 11-38-02.png

Prevent a full width background image being resized to the content width

By default, an image uploaded and used by an Image Module will be resized to the layout width. This causes images intended to be used as a full width image to pixelate and blur, as they are being inflated from the content width to the full width (regardless of the initial format that was uploaded). To prevent this from happening, add the following code to your functions.php file (preferably at the end, but before the closing ?> tag, if any!):

Code in functions.php:

// Ensure that a Full Window-styled Image Module keeps a high-resolution image
function it_air_filter_image_module_widths( $fields ) {
        if ( ( 'image' != $fields['module'] ) || ( 'image-full-window' != $fields['data']['style'] ) || empty( $fields['data']['attachment'] ) )
                return $fields;

        $image = wp_get_attachment_metadata( $fields['data']['attachment'] );

        $fields['widths']['element_width'] = $image['width'];

        return $fields;
}
add_action( 'builder_module_filter_calculated_widths', 'it_air_filter_image_module_widths' );

When using non responsive-ready child themes

The following applies to all themes other than Acute (and its color variants), Americana (and its color variants), City Church, Blueprint, Scooter, Kepler, Lucky 7, Thinner, Traverse. All the module wrappers in these said child themes are full width by default.

Note:

1. PHP code given in the sections below should be put in your child theme's functions.php. If this file does not exist, create a new blank file, paste the code in between <?php and ?>, save it as functions.php and upload it to the child theme directory.

2. To set width of specific module(s) full width, the module(s) should be targeted by its/their GUID. The easiest method to obtain GUID of a module is by inspecting the module via Firebug.

GUID.png

In the example shown in the above screenshot, GUID of the module is: 4d14470049da5

3. To observe a module becoming full width, set a background color or image or both.

To make a specific single module full width

Please read the Intro.

  • The following has been added to child theme's style.css to see the effect of module going full width:
#builder-module-4d14470049da5 {
	background-color: yellow;
}
  • In the code below, 4d14470049da5 must be replaced with GUID of the specific module which is to be made full width

Code in functions.php:

function custom_remove_container_width( $fields ) { 
    foreach ( (array) $fields['style'] as $index => $rule ) { 
        if ( preg_match( '/^(max-)?width:/', $rule ) ) 
            unset( $fields['style'][$index] );
    }
    
    return $fields;
}
add_filter( 'builder_filter_container_outer_wrapper_attributes', 'custom_remove_container_width', 20 );

function custom_remove_module_width( $fields ) { 
    $full_width_modules = array( '4d14470049da5' );
    
    if ( ! in_array( $fields['guid'], $full_width_modules ) ) 
        return $fields;
    foreach ( (array) $fields['attributes']['style'] as $index => $rule ) { 
        if ( preg_match( '/^(max-)?width:/', $rule ) ) 
            unset( $fields['attributes']['style'][$index] );
    }
    
    return $fields;
}
add_filter( 'builder_module_filter_outer_wrapper_attributes', 'custom_remove_module_width', 20 );

function custom_add_open_module_wrapper( $fields ) { 
    $width = apply_filters( 'builder_get_container_width', 0 );
    
    echo "<div class='builder-module-limit-width-wrapper clearfix' style='width:{$width}px;margin:0 auto;'>\n";
}
function custom_add_close_module_wrapper( $fields ) { 
    echo "</div>\n";
}
add_action( 'builder_module_render_contents', 'custom_add_open_module_wrapper', 0 );
add_action( 'builder_module_render_contents', 'custom_add_close_module_wrapper', 20 );

To make specific multiple modules full width

Please read the Intro.

By Module Types

By adding the following sample code before the closing PHP tag in child theme's functions.php, all Widget Bar modules, all Navigation modules and the Footer module will become full-width.

function custom_remove_container_width( $fields ) { 
    foreach ( (array) $fields['style'] as $index => $rule ) { 
        if ( preg_match( '/^(max-)?width:/', $rule ) ) 
            unset( $fields['style'][$index] );
    }
    
    return $fields;
}
add_filter( 'builder_filter_container_outer_wrapper_attributes', 'custom_remove_container_width', 20 );

function custom_remove_module_width( $fields ) { 
    $full_width_modules = array( 'widget-bar','navigation','footer' );
    
    if ( ! in_array( $fields['module'], $full_width_modules ) ) 
        return $fields;
    foreach ( (array) $fields['attributes']['style'] as $index => $rule ) { 
        if ( preg_match( '/^(max-)?width:/', $rule ) ) 
            unset( $fields['attributes']['style'][$index] );
    }
    
    return $fields;
}
add_filter( 'builder_module_filter_outer_wrapper_attributes', 'custom_remove_module_width', 20 );

function custom_add_open_module_wrapper( $fields ) { 
    $width = apply_filters( 'builder_get_container_width', 0 );
    
    echo "<div class='builder-module-limit-width-wrapper clearfix' style='width:{$width}px;margin:0 auto;'>\n";
}
function custom_add_close_module_wrapper( $fields ) { 
    echo "</div>\n";
}
add_action( 'builder_module_render_contents', 'custom_add_open_module_wrapper', 0 );
add_action( 'builder_module_render_contents', 'custom_add_close_module_wrapper', 20 );

The other available module types in Builder are: image, content, html

By Module IDs
  • The following has been added to child theme's style.css to see the effect of module going full width:
#builder-module-4d14470049da5, #builder-module-4d14470049da7 {
	background-color: yellow;
}
  • In the code below, 4d14470049da5 and 4d14470049da7 must be replaced with GUID of specific modules which are to be made full width

Code in functions.php:

function custom_remove_container_width( $fields ) { 
    foreach ( (array) $fields['style'] as $index => $rule ) { 
        if ( preg_match( '/^(max-)?width:/', $rule ) ) 
            unset( $fields['style'][$index] );
    }
    
    return $fields;
}
add_filter( 'builder_filter_container_outer_wrapper_attributes', 'custom_remove_container_width', 20 );

function custom_remove_module_width( $fields ) { 
    $full_width_modules = array( '4d14470049da5','4d14470049da7' );
    
    if ( ! in_array( $fields['guid'], $full_width_modules ) ) 
        return $fields;
    foreach ( (array) $fields['attributes']['style'] as $index => $rule ) { 
        if ( preg_match( '/^(max-)?width:/', $rule ) ) 
            unset( $fields['attributes']['style'][$index] );
    }
    
    return $fields;
}
add_filter( 'builder_module_filter_outer_wrapper_attributes', 'custom_remove_module_width', 20 );

function custom_add_open_module_wrapper( $fields ) { 
    $width = apply_filters( 'builder_get_container_width', 0 );
    
    echo "<div class='builder-module-limit-width-wrapper clearfix' style='width:{$width}px;margin:0 auto;'>\n";
}
function custom_add_close_module_wrapper( $fields ) { 
    echo "</div>\n";
}
add_action( 'builder_module_render_contents', 'custom_add_open_module_wrapper', 0 );
add_action( 'builder_module_render_contents', 'custom_add_close_module_wrapper', 20 );

To make all Image modules full width

Please read the Intro.

The following has been added to child theme's style.css to see the effect of all image modules (only 1 is being used in the screenshot above)) going full width:

.builder-module-image {
	background-color: yellow;
}

Code in functions.php:

function custom_remove_container_width( $fields ) { 
    foreach ( (array) $fields['style'] as $index => $rule ) { 
        if ( preg_match( '/^(max-)?width:/', $rule ) ) 
            unset( $fields['style'][$index] );
    }
    
    return $fields;
}
add_filter( 'builder_filter_container_outer_wrapper_attributes', 'custom_remove_container_width', 20 );

function custom_remove_module_width( $fields ) { 
    if ( 'image' !== $fields['module'] )
        return $fields;
    
    foreach ( (array) $fields['attributes']['style'] as $index => $rule ) { 
        if ( preg_match( '/^width:/', $rule ) ) 
            unset( $fields['attributes']['style'][$index] );
    }
    
    return $fields;
}

add_filter( 'builder_module_filter_outer_wrapper_attributes', 'custom_remove_module_width', 20 );

function custom_add_open_module_wrapper( $fields ) { 
    $width = apply_filters( 'builder_get_container_width', 0 );
    
    echo "<div class='builder-module-limit-width-wrapper clearfix' style='width:{$width}px;margin:0 auto;'>\n";
}
function custom_add_close_module_wrapper( $fields ) { 
    echo "</div>\n";
}
add_action( 'builder_module_render_contents', 'custom_add_open_module_wrapper', 0 );
add_action( 'builder_module_render_contents', 'custom_add_close_module_wrapper', 20 );

To make all Navigation modules full width

Please read the Intro.

function custom_remove_container_width( $fields ) { 
    foreach ( (array) $fields['style'] as $index => $rule ) { 
        if ( preg_match( '/^(max-)?width:/', $rule ) ) 
            unset( $fields['style'][$index] );
    }
    
    return $fields;
}
add_filter( 'builder_filter_container_outer_wrapper_attributes', 'custom_remove_container_width', 20 );

function custom_remove_module_width( $fields ) { 
    if ( 'navigation' !== $fields['module'] )
        return $fields;
    
    foreach ( (array) $fields['attributes']['style'] as $index => $rule ) { 
        if ( preg_match( '/^width:/', $rule ) ) 
            unset( $fields['attributes']['style'][$index] );
    }
    
    return $fields;
}

add_filter( 'builder_module_filter_outer_wrapper_attributes', 'custom_remove_module_width', 20 );

function custom_add_open_module_wrapper( $fields ) { 
    $width = apply_filters( 'builder_get_container_width', 0 );
    
    echo "<div class='builder-module-limit-width-wrapper clearfix' style='width:{$width}px;margin:0 auto;'>\n";
}
function custom_add_close_module_wrapper( $fields ) { 
    echo "</div>\n";
}
add_action( 'builder_module_render_contents', 'custom_add_open_module_wrapper', 0 );
add_action( 'builder_module_render_contents', 'custom_add_close_module_wrapper', 20 );

To make Content module full width

Please read the Intro.

The following has been added to child theme's style.css to see the effect of content module going full width:

.builder-module-content {
	background-color: yellow;
}

Code in functions.php:

function custom_remove_container_width( $fields ) { 
    foreach ( (array) $fields['style'] as $index => $rule ) { 
        if ( preg_match( '/^(max-)?width:/', $rule ) ) 
            unset( $fields['style'][$index] );
    }
    
    return $fields;
}
add_filter( 'builder_filter_container_outer_wrapper_attributes', 'custom_remove_container_width', 20 );

function custom_remove_module_width( $fields ) { 
    if ( 'content' !== $fields['module'] )
        return $fields;
    
    foreach ( (array) $fields['attributes']['style'] as $index => $rule ) { 
        if ( preg_match( '/^width:/', $rule ) ) 
            unset( $fields['attributes']['style'][$index] );
    }
    
    return $fields;
}

add_filter( 'builder_module_filter_outer_wrapper_attributes', 'custom_remove_module_width', 20 );

function custom_add_open_module_wrapper( $fields ) { 
    $width = apply_filters( 'builder_get_container_width', 0 );
    
    echo "<div class='builder-module-limit-width-wrapper clearfix' style='width:{$width}px;margin:0 auto;'>\n";
}
function custom_add_close_module_wrapper( $fields ) { 
    echo "</div>\n";
}
add_action( 'builder_module_render_contents', 'custom_add_open_module_wrapper', 0 );
add_action( 'builder_module_render_contents', 'custom_add_close_module_wrapper', 20 );

To make all HTML modules full width

Please read the Intro.

The following has been added to child theme's style.css to see the effect of all HTML modules (only 1 is being used in the screenshot above) going full width:

.builder-module-html {
	background-color: yellow;
}

Code in functions.php:

function custom_remove_container_width( $fields ) { 
    foreach ( (array) $fields['style'] as $index => $rule ) { 
        if ( preg_match( '/^(max-)?width:/', $rule ) ) 
            unset( $fields['style'][$index] );
    }
    
    return $fields;
}
add_filter( 'builder_filter_container_outer_wrapper_attributes', 'custom_remove_container_width', 20 );

function custom_remove_module_width( $fields ) { 
    if ( 'html' !== $fields['module'] )
        return $fields;
    
    foreach ( (array) $fields['attributes']['style'] as $index => $rule ) { 
        if ( preg_match( '/^width:/', $rule ) ) 
            unset( $fields['attributes']['style'][$index] );
    }
    
    return $fields;
}

add_filter( 'builder_module_filter_outer_wrapper_attributes', 'custom_remove_module_width', 20 );

function custom_add_open_module_wrapper( $fields ) { 
    $width = apply_filters( 'builder_get_container_width', 0 );
    
    echo "<div class='builder-module-limit-width-wrapper clearfix' style='width:{$width}px;margin:0 auto;'>\n";
}
function custom_add_close_module_wrapper( $fields ) { 
    echo "</div>\n";
}
add_action( 'builder_module_render_contents', 'custom_add_open_module_wrapper', 0 );
add_action( 'builder_module_render_contents', 'custom_add_close_module_wrapper', 20 );

To make all Widget Bar modules full width

Please read the Intro.

The following has been added to child theme's style.css to see the effect of widget bar modules going full width:

.builder-module-widget-bar {
	background-color: yellow;
}

Code in functions.php:

function custom_remove_container_width( $fields ) { 
    foreach ( (array) $fields['style'] as $index => $rule ) { 
        if ( preg_match( '/^(max-)?width:/', $rule ) ) 
            unset( $fields['style'][$index] );
    }
    
    return $fields;
}
add_filter( 'builder_filter_container_outer_wrapper_attributes', 'custom_remove_container_width', 20 );

function custom_remove_module_width( $fields ) { 
    if ( 'widget-bar' !== $fields['module'] )
        return $fields;
    
    foreach ( (array) $fields['attributes']['style'] as $index => $rule ) { 
        if ( preg_match( '/^width:/', $rule ) ) 
            unset( $fields['attributes']['style'][$index] );
    }
    
    return $fields;
}

add_filter( 'builder_module_filter_outer_wrapper_attributes', 'custom_remove_module_width', 20 );

function custom_add_open_module_wrapper( $fields ) { 
    $width = apply_filters( 'builder_get_container_width', 0 );
    
    echo "<div class='builder-module-limit-width-wrapper clearfix' style='width:{$width}px;margin:0 auto;'>\n";
}
function custom_add_close_module_wrapper( $fields ) { 
    echo "</div>\n";
}
add_action( 'builder_module_render_contents', 'custom_add_open_module_wrapper', 0 );
add_action( 'builder_module_render_contents', 'custom_add_close_module_wrapper', 20 );

To make Footer module full width

Please read the Intro.

The following has been added to child theme's style.css to see the effect of Footer module going full width:

.builder-module-footer {
	background-color: yellow;
}

Code in functions.php:

function custom_remove_container_width( $fields ) { 
    foreach ( (array) $fields['style'] as $index => $rule ) { 
        if ( preg_match( '/^(max-)?width:/', $rule ) ) 
            unset( $fields['style'][$index] );
    }
    
    return $fields;
}
add_filter( 'builder_filter_container_outer_wrapper_attributes', 'custom_remove_container_width', 20 );

function custom_remove_module_width( $fields ) { 
    if ( 'footer' !== $fields['module'] )
        return $fields;
    
    foreach ( (array) $fields['attributes']['style'] as $index => $rule ) { 
        if ( preg_match( '/^width:/', $rule ) ) 
            unset( $fields['attributes']['style'][$index] );
    }
    
    return $fields;
}

add_filter( 'builder_module_filter_outer_wrapper_attributes', 'custom_remove_module_width', 20 );

function custom_add_open_module_wrapper( $fields ) { 
    $width = apply_filters( 'builder_get_container_width', 0 );
    
    echo "<div class='builder-module-limit-width-wrapper clearfix' style='width:{$width}px;margin:0 auto;'>\n";
}
function custom_add_close_module_wrapper( $fields ) { 
    echo "</div>\n";
}
add_action( 'builder_module_render_contents', 'custom_add_open_module_wrapper', 0 );
add_action( 'builder_module_render_contents', 'custom_add_close_module_wrapper', 20 );

To make all modules full width

Please read the Intro.

In this method we are going to add code to functions.php that will make outer wrappers of all modules full width.

Before -> After

Code in functions.php:

function it_set_full_width_container( $width ) {
	remove_filter( 'builder_get_container_width', 'it_set_full_width_container' );
	
	return '';
}
add_filter( 'builder_get_container_width', 'it_set_full_width_container' );

function it_set_full_width_module( $fields ) {

	global $it_original_module_width;
	
	$it_original_module_width = '';
	
	foreach ( (array) $fields['attributes']['style'] as $index => $value ) {
		if ( preg_match( '/^(width:.+)/i', $value, $matches ) ) {
			$it_original_module_width = $matches[1];
			unset( $fields['attributes']['style'][$index] );
		}
		if ( preg_match( '/^overflow:/', $value ) ) {
			unset( $fields['attributes']['style'][$index] );
			$fields['attributes']['style'][] = 'overflow:visible;';
		}
	}
	add_filter( 'builder_module_filter_inner_wrapper_attributes', 'it_constrain_full_width_module_inner_wrapper' );
	
	return $fields;
}
add_filter( 'builder_module_filter_outer_wrapper_attributes', 'it_set_full_width_module' );

function it_constrain_full_width_module_inner_wrapper( $fields ) {
	global $it_original_module_width;
	
	remove_filter( 'builder_module_filter_inner_wrapper_attributes', 'it_constrain_full_width_module_inner_wrapper' );
	
	$fields['attributes']['style'][] = $it_original_module_width;
	$fields['attributes']['style'][] = 'margin:0 auto;';
	
	$it_original_module_width = ''; 
	
	return $fields;
}

The following has been added to child theme's style.css to see the effect of all modules going full width:

.builder-module-image-outer-wrapper {
	background-color: #247da7;
}

.builder-module-navigation-outer-wrapper {
	background: #e0e2e3;
}

.builder-module-html-outer-wrapper {
	background: #9ba1ac;
	border-bottom: 0.1em dotted #CCCCCC;
}

.builder-module-content-outer-wrapper {
	background: #1d313f;
}

.builder-module-widget-bar-outer-wrapper {
	background: #262626;
	border-bottom: 0.1em dotted #CCCCCC;
}

.builder-module-footer-outer-wrapper {
	background-color: #bbbbbb;
}

If you would like to apply different styles to different modules of the same type when using this method, use Custom Module Styles.

Ex.: Let's say there are two widget bar modules in the layout and using the above method, both would become full width. Now if you would like to set red background to one of these widget bar module and green to another, then you have to create two custom module styles for these and use them.

To see how these are implemented, observe functions.php and style.css of Blueprint or Americana child theme.

The overall idea is this:

  1. Register the new module style using builder_register_module_style() function
  2. Add a new style rule in child theme's style.css. For the selector name use a class with the name of module style and append "-outer-wrapper" at end.

For details, please see Example 1, Example 2 and Example 3.

To change widget titles from the default h4 to any other heading tag

Go to http://ithemes.com/forum/index.php?/topic/10724-widget-tags-how-to-change/#p50888

How to extend sidebar and/or content background so they reach till the bottom

Create a 1px tall image and set it to vertically repeat as background for .builder-module-content. This image can either be created from scratch or by taking a screenshot of the site and editing in Photoshop.

The 10 min video below shows how this can be done. It shows how to create an image in Photoshop which can be set using CSS as background for Builder's content module so the sidebar(s) and element (the actual content) appear to extend all the way to the bottom.

Tip: To watch the video in full screen, go to http://vimeo.com/19781283 and click the small 4-arrow button.


Relevant forum topics:

http://ithemes.com/forum/index.php?/topic/8265-foundation-child-theme-color-bleed-in-main-area/#p38894

http://ithemes.com/forum/index.php?/topic/11301-need-sidebars-to-extend-to-bottom-of-page/

http://ithemes.com/forum/index.php?/topic/9013-here-we-are-again-sidebar-bg-color/

http://ithemes.com/forum/index.php?/topic/8363-sidebar-styling-to-continue-vertically-for-entire-module-height/

http://ithemes.com/forum/index.php?/topic/876-the-endless-quest-for-equal-column-heights/

How to add code just after <body> and just before </body>

Add the following in your child theme's functions.php. If the child theme does not contain this file, a new one can be created and the below code pasted.

<?php
add_action('builder_layout_engine_render_header', 'add_after_opening_body', 20 );
function add_after_opening_body() { ?> 
	HTML code that you want just after the opening body tag should be placed here 
<?php }

add_action('builder_finish', 'add_before_closing_body', 0 );
function add_before_closing_body() { ?> 
	HTML code that you want just before the closing body tag should be placed here 
<?php }
?>

Sources: 1, 2.

How to add code before and after each widget

Here's an example that shows how we can add
<div class="custom_top"></div>
before every widget and
<div class="custom_bottom"></div>
after every widget.

Add the following to the child theme's functions.php:

function custom_filter_register_sidebar_options( $options ) { 
    $options['before_widget'] = $options['before_widget'] .'<div class="custom_top"></div>';
    $options['after_widget'] = '<div class="custom_bottom"></div>' . $options['after_widget'];
    
    return $options;
}
add_filter( 'builder_filter_register_sidebar_options', 'custom_filter_register_sidebar_options' );

Source: http://ithemes.com/forum/index.php?/topic/11752-adding-top-and-bottom-images-to-widget-area/#p55547

How to replace H4 tags around widget titles with divs

The following code can be added before the closing PHP tag in your child theme's functions.php file to remove the H4 tags from around the widget titles:

function custom_modify_widget_wrappers( $options ) { 
    $options['before_title'] = '<div class="widget-title">';
    $options['after_title'] = '</div>';
    
    return $options;
}
add_filter( 'builder_filter_register_sidebar_options', 'custom_modify_widget_wrappers' );

Source.

Another example:

To replace h4 tags around widget titles with say h2, the following code can be used:

function custom_modify_widget_wrappers( $options ) { 
    $options['before_title'] = '<h2 class="widget-title">';
    $options['after_title'] = '</h2>';
    
    return $options;
}
add_filter( 'builder_filter_register_sidebar_options', 'custom_modify_widget_wrappers' );

How to add a search form at the right side in a nav bar

1. At Appearance -> Menus, build a custom menu having the items you would like to be shown on the nav bar.

2. Edit your layout and add a navigation module. Set it to show your custom menu.

3. Add the following before closing PHP tag in child theme's functions.php:

add_filter('wp_nav_menu_top-1_items','add_search_box', 10, 2);
function add_search_box($items, $args) {
        ob_start();
        get_search_form();
        $searchform = ob_get_contents();
        ob_end_clean();
 
        $items .= '<li class="my-search-form">' . $searchform . '</li>';
    return $items;	
}

In the above replace "top-1" with the slug of your custom menu.

4. Add the following at the end of your theme's style.css:

.builder-module-navigation li.my-search-form {
    float: right;
    margin-right: 0.5em;
    border-right: none;
}

#builder-module-4d8f8f64596b7 ul {
    float: none;
}

In the above replace builder-module-4d8f8f64596b7 with the ID of this module.

If you are using BuilderChild-City-Church, see this forum topic for sample CSS.

That's it!

Source: http://vanweerd.com/enhancing-your-wordpress-3-menus/

This method is also explained here.

Links to specific customization requests

Designing a widgetized footer

IWfo.16-04-2011 14-01-22.png

Forum post

Positioning images at a fixed location in all widgets

3wa5.16-04-2011 14-22-06.png

Forum post

Setting up Go To Top named anchor

Forum post

builder_comments_popup_link action explained

The builder_comments_popup_link action triggers the builder_comments_popup_link() function by default. This function calls the comments_popup_link() function of WordPress but it also ensures that the link should be shown. For instance, the link should not be shown if the comments have been disabled for that content type per Builder's settings, if both comments and pings are disabled, or if a password is required in order to view the content and it has not been entered yet.

So keeping that call in place is very important. It can still be customized in the same way a comments_popup_link() function call is customized. Let's break out the arguments to see how that is done:

<?php
    do_action(
        'builder_comments_popup_link',
        '<div class="alignright_comments"><span class="comments">',
        '</span></div>',
        __( 'Add Your Comment %s', 'it-l10n-Builder' ),
        __( '(0)', 'it-l10n-Builder' ),
        __( '(1)', 'it-l10n-Builder' ),
        __( '(%)', 'it-l10n-Builder' )
    );
?>

Now let's see that listing again while replacing the arguments with their meaning:

<?php
    do_action(
        action name,
        content to add before link,
        content to add after link,
        template which has %s replaced with the output from comments_popup_link,
        comments_popup_link argument zero comments,
        comments_popup_link argument one comment,
        comments_popup_link argument more than one comment,
    );
?>

So if you know how to modify comments_popup_link, you should now see how you can modify this action call.

Note that all the __( 'text', 'it-l10n-Builder' ) stuff is just for translation purposes. So __( '(%)', 'it-l10n-Builder' ) just means '(%)'.

Usage Example

To have an image and the words "Add your Comment" with the image and text being a link:

Since the comments_popup_link() arguments are the ones added to the link, to add an image to the link, we need to modify those arguments. Here's a quick example:

<?php
    $image_url = get_bloginfo( 'template_directory' ) . '/images/folder.png';
    $image = "<img src='$image_url' alt='comments' />";
    
    do_action(
        'builder_comments_popup_link',
        '<div class="alignright_comments"><span class="comments">',
        '</span></div>',
        'Add Your Comment %s',
        "$image (0)",
        "$image (1)",
        "$image (%)"
    );
?>

Of course, this adds the folder icon and not a comment icon, but hopefully you can see what we are doing here and use it to add your own image. Note that get_bloginfo( 'template_directory' ) returns the base URL to the Builder directory. To get your child theme's directory URL, you can use get_bloginfo( 'stylesheet_directory' ).

Source: http://ithemes.com/forum/index.php?/topic/14453-changing-comments-format/#p67520

How to show "My Theme" menu only to specific users

If the following section of code is added to your child theme's functions.php file, "My Theme" menu will only be shown to the user with a username of "admin".

function child_theme_restrict_my_theme_menu() {
    $user = wp_get_current_user();
    
    if ( 'admin' !== $user->user_login )
        remove_theme_support( 'builder-my-theme-menu' );
}
add_action( 'builder_customize_theme_features', 'child_theme_restrict_my_theme_menu' );

If you want to use a different username, replace "admin" text on the fourth line with the username you want to use. For example, to make it only show for username "james", it would look like:

function child_theme_restrict_my_theme_menu() {
    $user = wp_get_current_user();
    
    if ( 'james' !== $user->user_login )
        remove_theme_support( 'builder-my-theme-menu' );
}
add_action( 'builder_customize_theme_features', 'child_theme_restrict_my_theme_menu' );

The sample code below shows how to hide "My Theme" menu from everyone except Super Admins. This is a feature specific to multisite WordPress installations.

function child_theme_restrict_my_theme_menu() {
    if ( ! is_super_admin() )
        remove_theme_support( 'builder-my-theme-menu' );
}
add_action( 'builder_customize_theme_features', 'child_theme_restrict_my_theme_menu' );

How to redirect attachment links to corresponding posts

Search engine results might show links from your site leading to attachment pages which are not really that useful to the visitors. If you would like to have these links redirect to their corresponding post pages, follow this:

Duplicate image.php from Builder Parent theme into your child theme directory, then replace the entire content of image.php (the one in your child theme directory) with:

<?php wp_redirect(get_permalink($post->post_parent)); ?>

Forum topic: http://ithemes.com/forum/index.php?/topic/17644-how-can-i-find-and-delete-a-attachment-id-page/

More: http://wordpress.org/support/topic/disable-attachment-posts-without-remove-the-medias and http://wordpress.org/support/topic/redirect-attachment-page-to-post-page-how-to

How to view debug info in page source

Add ?builder_debug=1 at the end of webpage URL.

Ex.: If the page URL is http://ithemesbuilder.com/how-to-add-easy-social-icons-in-the-wordpress-navigation-menu/, visit http://ithemesbuilder.com/how-to-add-easy-social-icons-in-the-wordpress-navigation-menu/?builder_debug=1 and view the page source. It should show Builder specific info like this:

2012-04-03 20-25-50.png

How to remove Header widget

Adding the following code in child theme's functions.php at the end (before closing PHP tag, if present) will remove Builder's Header widget from Appearance -> Widgets.

function unregister_some_widgets() {
	unregister_widget('BuilderHeaderWidget');
}
add_action('widgets_init', 'unregister_some_widgets', 1);

How to set up print stylesheet such that only the content gets printed

1. Copy header.php from parent Builder directory into the child theme directory and edit it.

Add

<link rel="stylesheet" type="text/css" media="print" href="<?php bloginfo( 'stylesheet_directory' ); ?>/print.css" />

below

<?php builder_add_stylesheets(); ?>

2. Create a file named print.css in child theme directory having this code:

.builder-module {
	display: none;
}

.builder-module-content .builder-module-sidebar-outer-wrapper {
	display: none;
}

.builder-module-content {
	display: block;
}

Source: http://ithemes.com/forum/topic/8611-printing-problems-with-builder-help-going-live-in-7-days/#entry44752

How to force CSS changes to "go live" immediately

Intro: http://markjaquith.wordpress.com/2009/05/04/force-css-changes-to-go-live-immediately/

This can be done in Builder by first making sure that the default stylesheet does not load, and then load the version with file modification date appended.

Add the following code at the end of your child themes functions.php (but before the closing ?>, if any):

// disable loading the default stylesheet
function custom_filter_disable_theme_stylesheets( $disable ) {
        return true;
}
add_filter( 'builder_filter_disable_theme_stylesheets', 'custom_filter_disable_theme_stylesheets', 20 );

// add the versioned stylesheet
function custom_add_new_stylesheet() { ?>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); echo '?' . filemtime( get_stylesheet_directory() . '/style.css'); ?>" type="text/css" media="screen, projection" />
<?php
}
add_action( 'builder_add_stylesheets', 'custom_add_new_stylesheet' );

Source: http://ithemes.com/forum/topic/31621-reloading-stylecss-after-every-change/#entry146840

How to left/right align a YouTube video

When a responsive-ready child theme is active, wrapping YouTube Embed code with

<div style="float: left;">

or

<div style="float: right;">

and

</div>

Ex.:

<div style="float: right;"><iframe width="560" height="315" src="http://www.youtube.com/embed/DSwQ4Mim28I?list=UUXSQU9bJhGWGvKGtfL-tuag" frameborder="0" allowfullscreen></iframe>

will not display the video at all on the Page/Post.

The solution if floating is desired is to ensure that the floated element has a width associated with it. In order to prevent breaking the fluidity of the video, width should be set with a max-width and a width of 100% as shown below.

<div style="float: right; max-width: 560px; width: 100%;"><iframe width="560" height="315" src="http://www.youtube.com/embed/DSwQ4Mim28I?list=UUXSQU9bJhGWGvKGtfL-tuag" frameborder="0" allowfullscreen></iframe></div>

Forum topic: http://ithemes.com/forum/topic/34643-div-float-right-youtube-video-disappearing/

How to set a default placeholder text in Search box

2013-02-12 20-47-26.png
2013-02-12 20-47-38.png

If you would like to set a default text in search box that goes away when the search field gets focus AND your active child theme does not already have a searchform.php, do this:

Create a file named searchform.php in child theme's directory having the following code:

<?php $search_box_default = __( 'Search site', 'it-l10n-BuilderChild-Default' ); ?>

<?php $search_box_value = esc_attr( apply_filters( 'the_search_query', get_search_query() ) ); ?>

<?php $search_box_value = ( empty( $search_box_value ) ) ? $search_box_default : $search_box_value; ?>

<form method="get" class="search-form" action="<?php echo get_option( 'home' ); ?>">
    <input type="text" value="<?php echo $search_box_value; ?>" name="s" class="search-text-box" onfocus="if(this.value == '<?php echo $search_box_default; ?>') this.value = '';" onblur="if(this.value == '') this.value = '<?php echo $search_box_default; ?>';" />
    <input type="submit" value="<?php echo esc_attr__( 'Search', 'it-l10n-BuilderChild-Default' ); ?>" class="search-submit-button" />
</form>

The default text can be changed in the first line. Just replace Search site with your desired default placeholder text.

Optional: Replace Default in it-l10n-BuilderChild-Default above with the name of your active child theme.

How to add support for Sidebars in Navigation Module

It is possible to add sidebar(s) in a Navigation Module by adding the following in child theme's functions.php:

add_theme_support( 'builder-navigation-module-sidebars' );
Note: This is presently an experimental feature.

As such the graphic representing the Navigation Module in layout manager will not change to reflect the presence and arrangement of sidebar(s).

Below is an example of using this to add social media icons floating to the right in the nav bar with BuilderChild-Default as the active theme.

But first the result:

WordPress Dev Site 2013-05-30 13-08-04.png

In the backend:

2013-05-30 12-55-18.png
2013-05-30 12-57-43.png
WordPress Dev Site 2013-05-30 13-13-19.png

With Social Media Widget plugin installed and activated, its widget has been placed in the Navigation Module's sidebar.

2013-05-30 13-02-45.png

and this CSS added at end of child theme's style.css:

.builder-module-navigation .builder-module-sidebar {
	background: transparent;
	padding-top: 0;
	padding-bottom: 0;
}

.builder-module-navigation .widget {
	padding: 0;
	padding-right: 0.5em;
}

.builder-module-navigation .widget a {
	display: inline;
}

.socialmedia-buttons img {
	padding-top: 0.5em;
}

Source: http://ithemes.com/codex/page/Builder/Release_Notes/3.0.0

Personal tools
Namespaces
Variants
Actions
iThemes Codex
Codex Navigation
Toolbox