Builder Tips and Tricks

(Difference between revisions)
Jump to: navigation, search
(Added == How to show "My Theme" menu only to specific users ==)
(Added == How to set up print stylesheet such that only the content gets printed ==)
(13 intermediate revisions by 2 users not shown)
Line 51: Line 51:
  
 
== 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 76: Line 76:
 
* '''Why''': Because you want to
 
* '''Why''': Because you want to
 
* '''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].
 +
 +
Note: See http://ithemes.com/forum/topic/31075-getting-fatal-error/page__view__findpost__p__144435 for updated code.
  
 
== 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.
+
=== Intro ===
 +
 
 +
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 94: Line 98:
  
 
=== 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 146: Line 152:
  
 
=== 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 Module Types====
Line 203: Line 211:
 
* 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 243: Line 251:
  
 
=== 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 254: Line 264:
 
}</pre>
 
}</pre>
  
Code in functions.php:
+
'''Code in functions.php''':
  
 
<pre class="brush:php;">
 
<pre class="brush:php;">
Line 294: Line 304:
  
 
=== 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 338: Line 350:
  
 
=== 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 349: Line 363:
 
}</pre>
 
}</pre>
  
Code in functions.php:
+
'''Code in functions.php''':
  
 
<pre class="brush:php;">
 
<pre class="brush:php;">
Line 389: Line 403:
  
 
=== 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 400: Line 416:
 
}</pre>
 
}</pre>
  
Code in functions.php:
+
'''Code in functions.php''':
  
 
<pre class="brush:php;">
 
<pre class="brush:php;">
Line 440: Line 456:
  
 
=== 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 451: Line 469:
 
}</pre>
 
}</pre>
  
Code in functions.php:
+
'''Code in functions.php''':
  
 
<pre class="brush:php;">
 
<pre class="brush:php;">
Line 491: Line 509:
  
 
=== 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 502: Line 522:
 
}</pre>
 
}</pre>
  
Code in functions.php:
+
'''Code in functions.php''':
  
 
<pre class="brush:php;">
 
<pre class="brush:php;">
Line 542: Line 562:
  
 
=== 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 547: Line 569:
 
[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 667: Line 689:
 
<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 750: Line 772:
 
         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 760: Line 782:
 
    
 
    
 
<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 772: Line 794:
  
 
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==
 
==Links to specific customization requests==
Line 895: Line 923:
 
add_action( 'builder_customize_theme_features', 'child_theme_restrict_my_theme_menu' );
 
add_action( 'builder_customize_theme_features', 'child_theme_restrict_my_theme_menu' );
 
</pre>
 
</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

Revision as of 09:35, November 21, 2012

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.

Note: See http://ithemes.com/forum/topic/31075-getting-fatal-error/page__view__findpost__p__144435 for updated code.

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

Intro

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

Personal tools
Namespaces
Variants
Actions
iThemes Codex
Codex Navigation
Toolbox