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).
Implementation: Add the code to your blog index template file as described in the Create your own blog index page in Builder tip.
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:
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 functions.php 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.
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.
Before and After
Specific-module-full-width-before.png
Specific-module-full-width-after.png
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
Before and After
Specific-modules-full-width-before.png
Specific-modules-full-width-after.png
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.
Before and After
Image-modules-fullwidth-before.png
Image-modules-fullwidth-after.png
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.
Before and After
Image-modules-fullwidth-before.png
Navigation-modules-fullwidth-after.png
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.
Before and After
Image-modules-fullwidth-before.png
Content-module-fullwidth-after.png
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.
Before and After
Html-modules-fullwidth-before.png
Html-modules-fullwidth-after.png
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.
Before and After
Widget-bar-modules-fullwidth-before.png
Widget-bar-modules-fullwidth-after.png
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.
Before and After
Specific-module-full-width-before.png
Footer-module-fullwidth-after.png
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:
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 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
Before and After
Search-in-nav-method2-before.png
Search-in-nav-method2-after.png
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