Builder Tips and Tricks

(Difference between revisions)
Jump to: navigation, search
(Added "How to replace H4 tags around widget titles with divs")
(Use a 100% width background for one or more modules)
Line 77: Line 77:
 
* '''How''': Detailed instructions in [http://vanweerd.com/how-to-add-full-width-header-and-footer-to-the-builder-theme/ this article].
 
* '''How''': Detailed instructions in [http://vanweerd.com/how-to-add-full-width-header-and-footer-to-the-builder-theme/ this article].
  
== Use a 100% width background for one or more modules ==
+
== How to have full width (100% wide background) modules ==
* '''Why''': You have a design that requires that one or more modules have a background wider than the layout width.
+
* '''How''': Using just CSS, the width of the container and the modules can be expanded to 100%; however, it will be difficult to style specific modules this way. The solution is to first remove the width limitation of both the layout container and each module's outer wrapper and then add a new div that constrains the module content to a specific width and centers it again.
+
  
Add the following [[function]] to your [[Child Theme|child theme's]] [[functions.php]].
+
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.
<pre class="brush:php">
+
<?php
+
  
 +
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.
 +
 +
'''3.''' To observe a module becoming full width, set a background color or image or both.
 +
 +
[[Image:GUID.png|200px|none]]
 +
 +
In the example shown in the above screenshot, GUID of the module is: 4d14470049da5
 +
 +
=== To make a specific single module full width ===
 +
 +
<gallery widths=200px caption="Before and After">
 +
File:Specific-module-full-width-before.png
 +
File:Specific-module-full-width-after.png
 +
</gallery>
 +
 +
* The following has been added to child theme's style.css to see the effect of module going full width:
 +
<pre class="brush:php;">#builder-module-4d14470049da5 {
 +
background-color: yellow;
 +
}</pre>
 +
* 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:
 +
 +
<pre class="brush:php;">
 
function custom_remove_container_width( $fields ) {  
 
function custom_remove_container_width( $fields ) {  
 
     foreach ( (array) $fields['style'] as $index => $rule ) {  
 
     foreach ( (array) $fields['style'] as $index => $rule ) {  
         if ( preg_match( '/^width:/', $rule ) )  
+
         if ( preg_match( '/^(max-)?width:/', $rule ) )  
 
             unset( $fields['style'][$index] );
 
             unset( $fields['style'][$index] );
 
     }
 
     }
Line 95: Line 119:
 
add_filter( 'builder_filter_container_outer_wrapper_attributes', 'custom_remove_container_width', 20 );
 
add_filter( 'builder_filter_container_outer_wrapper_attributes', 'custom_remove_container_width', 20 );
  
function custom_remove_module_width( $fields ) {
+
function custom_remove_module_width( $fields ) {  
     /* add module specific rules here */
+
     $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 );
 +
</pre>
 +
 
 +
=== To make specific multiple modules full width ===
 +
 
 +
<gallery widths=200px caption="Before and After">
 +
File:Specific-modules-full-width-before.png
 +
File:Specific-modules-full-width-after.png
 +
</gallery>
 +
 
 +
* The following has been added to child theme's style.css to see the effect of module going full width:
 +
<pre class="brush:php;">#builder-module-4d14470049da5, #builder-module-4d14470049da7 {
 +
background-color: yellow;
 +
}</pre>
 +
* 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:
 +
 
 +
<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( '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 );
 +
</pre>
 +
 
 +
=== To make all Image modules full width ===
 +
 
 +
<gallery widths=200px caption="Before and After">
 +
File:Image-modules-fullwidth-before.png
 +
File:Image-modules-fullwidth-after.png
 +
</gallery>
 +
 
 +
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:
 +
<pre class="brush:php;">.builder-module-image {
 +
background-color: yellow;
 +
}</pre>
 +
 
 +
Code in functions.php:
 +
 
 +
<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 ) {
 +
    if ( 'image' !=== $fields['module'] )
 +
        return $fields;
 
      
 
      
 
     foreach ( (array) $fields['attributes']['style'] as $index => $rule ) {  
 
     foreach ( (array) $fields['attributes']['style'] as $index => $rule ) {  
Line 105: Line 233:
 
     return $fields;
 
     return $fields;
 
}
 
}
 +
 
add_filter( 'builder_module_filter_outer_wrapper_attributes', 'custom_remove_module_width', 20 );
 
add_filter( 'builder_module_filter_outer_wrapper_attributes', 'custom_remove_module_width', 20 );
  
Line 117: Line 246:
 
add_action( 'builder_module_render_contents', 'custom_add_open_module_wrapper', 0 );
 
add_action( 'builder_module_render_contents', 'custom_add_open_module_wrapper', 0 );
 
add_action( 'builder_module_render_contents', 'custom_add_close_module_wrapper', 20 );
 
add_action( 'builder_module_render_contents', 'custom_add_close_module_wrapper', 20 );
 +
</pre>
  
?>
+
=== To make all Navigation modules full width ===
 +
 
 +
<gallery widths=200px caption="Before and After">
 +
File:Image-modules-fullwidth-before.png
 +
File:Navigation-modules-fullwidth-after.png
 +
</gallery>
 +
 
 +
<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 ) {
 +
    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 );
 
</pre>
 
</pre>
''Note that the '<?php' and '?>' lines only needed to be used if the code is added inside of existing '<?php' and '?>' tags.''
 
  
The following screenshot shows Builder Child Default after this code was added to a new functions.php file.
+
=== To make Content module full width ===
  
[[File:Builder-tip-full-width-module-backgrounds.png‎]]
+
<gallery widths=200px caption="Before and After">
 +
File:Image-modules-fullwidth-before.png
 +
File:Content-module-fullwidth-after.png
 +
</gallery>
  
The "add module specific rules here" comment in the custom_remove_module_width function above marks an area that could be used to limit the full-width background to specific modules. For example, the following modification of the custom_remove_module_width function results in only the Navigation modules getting full-width module backgrounds.
+
The following has been added to child theme's style.css to see the effect of content module going full width:
 +
<pre class="brush:php;">.builder-module-content {
 +
background-color: yellow;
 +
}</pre>
 +
 
 +
Code in functions.php:
 +
 
 +
<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 );
  
<pre class="brush:php">
 
 
function custom_remove_module_width( $fields ) {  
 
function custom_remove_module_width( $fields ) {  
     if ( 'navigation' !== $fields['module'] )
+
     if ( 'content' !=== $fields['module'] )
 
         return $fields;
 
         return $fields;
 
      
 
      
Line 140: Line 328:
 
     return $fields;
 
     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>
 
</pre>
  
To use full-width backgrounds on all modules other than Content and Image modules, use the following modification.
+
=== To make all HTML modules full width ===
 +
 
 +
<gallery widths=200px caption="Before and After">
 +
File:Html-modules-fullwidth-before.png
 +
File:Html-modules-fullwidth-after.png
 +
</gallery>
 +
 
 +
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 {
 +
background-color: yellow;
 +
}</pre>
 +
 
 +
Code in functions.php:
 +
 
 +
<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 );
  
<pre class="brush:php">
 
 
function custom_remove_module_width( $fields ) {  
 
function custom_remove_module_width( $fields ) {  
     if ( in_array( $fields['module'], array( 'content', 'image' ) ) )  
+
     if ( 'html' !=== $fields['module'] )
 
         return $fields;
 
         return $fields;
 
      
 
      
Line 156: Line 379:
 
     return $fields;
 
     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>
 
</pre>
  
If a specific module is the one to get the full-width background, the module's GUID can be used to test for the right module.
+
=== To make Footer module full width ===
 +
 
 +
<gallery widths=200px caption="Before and After">
 +
File:Specific-module-full-width-before.png
 +
File:Footer-module-fullwidth-after.png
 +
</gallery>
 +
 
 +
The following has been added to child theme's style.css to see the effect of Footer module going full width:
 +
<pre class="brush:php;">.builder-module-footer {
 +
background-color: yellow;
 +
}</pre>
 +
 
 +
Code in functions.php:
 +
 
 +
<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 );
  
<pre class="brush:php">
 
 
function custom_remove_module_width( $fields ) {  
 
function custom_remove_module_width( $fields ) {  
     if ( '4bc3c9b3bbf52' !== $fields['guid'] )
+
     if ( 'footer' !=== $fields['module'] )
 
         return $fields;
 
         return $fields;
 
      
 
      
Line 172: Line 430:
 
     return $fields;
 
     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>
 
</pre>
 +
 +
=== To make 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.
 +
 +
[http://d.pr/iH9x Before] -> [http://d.pr/bdwr After]
 +
 +
Code in functions.php:
 +
 +
<pre class="brush: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;';
 +
}
 +
}
 +
echo "<!-- " . print_r( $fields, true ) . "-->\n";
 +
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;
 +
}
 +
</pre>
 +
 +
The following has been added to child theme's style.css to see the effect of all module going full width:
 +
 +
<pre class="brush:php;">
 +
.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;
 +
}</pre>
 +
 +
If you would like to apply different styles to different modules of the same type when using this method, use 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:
 +
 +
# Register the new module style using builder_register_module_style() function
 +
# 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 [http://ithemes.com/forum/index.php?/topic/9420-americana-theme-how-do-i-get-away-from-fixed-width-layout/#p44290 Example 1], [http://ithemes.com/forum/index.php?/topic/10030-modification-to-americana-theme/#p47025 Example 2] and [http://ithemes.com/codex/page/BuilderChild-Blueprint#How_to_make_nav_bars_go_full_width Example 3].
  
 
==To change widget titles from the default h4 to any other heading tag==
 
==To change widget titles from the default h4 to any other heading tag==

Revision as of 04:24, March 4, 2011

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,
    • 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' ) ); ?>

<?php if ( have_posts() ) : ?>
    <?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>
    <div class="alignright"><?php next_posts_link('Next Page »') ?></div>
<?php endif; ?>

<?php

}

add_action( 'builder_layout_engine_render_content', 'render_content' );

do_action( 'builder_layout_engine_render', basename( __FILE__ ) );

?>

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. Important Note 2: the content is displayed using the_content_limit(250, "more »") (see highlighted line), a function described in another tip on this page. You can use the_content() or the_excerpt(), depending on your requirements.

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

  • Why: Because you want to
  • How: Detailed instructions in this article.

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.

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.

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

GUID.png

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

To make a specific single module full width

  • 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

  • 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

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

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

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

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-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 ( '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 Footer module full width

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

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;';
		}
	}
	echo "<!-- " . print_r( $fields, true ) . "-->\n";
	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 module 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 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_container', 'add_after_opening_body', 0 );
function add_after_opening_body() { ?> 
	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() { ?> 
	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 to your child theme's functions.php file in order 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.

Personal tools
Namespaces
Variants
Actions
iThemes Codex
Codex Navigation
Toolbox