Builder Plugin-related Customizations

From iThemes Codex
Jump to: navigation, search

All In One Calendar By Timely

How to fix positioning problem of event pop up trigger bar of All In One Calendar By Timely

Applies to plugin version: 1.9


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

a.ai1ec-popup-trigger {
    top: 0 !important;

.timely .hide.ai1ec-popup + a.ai1ec-popup-trigger {
    padding-top: 1em;

Forum topic:

Easy Custom Content Types

Easy Content Types, a commercial plugin provides an extremely easy to use and intuitive interface for creating custom post types, taxonomies, and meta boxes.

Here are some general tips on using Easy Custom Content Types for WordPress in Builder.

1. Do not use Post name permalink structure. Day and name works fine.

2. Go to plugin's settings and tick the first two under "Post Type Templates". You might also want to tick the option under "Taxonomy Templates" if you plan on using custom taxonomy archives.

2012-03-01 10-32-06.png

3. Create your Post Types.


2012-03-01 10-44-56.png

The URL of archive listing of entries from a CPT is:

Ex.: http://localhost/builder/testimonials/

The URL of single CPT entry is:

Ex.: http://localhost/builder/testimonials/awesome-service/

4. Check child theme directory using a FTP client or cPanel file manager. If single-<cpt>.php has not been automatically created, copy/upload single.php from parent Builder into the child theme and rename it as single-<cpt>.php.


2012-03-01 10-39-45.png

5. Create any necessary Meta Boxes and Meta Fields.


2012-03-01 10-58-00.png
2012-03-01 10-58-18.png

6. To display Meta Field in template files like single-<cpt>.php, use

global $post;												
echo get_post_meta($post->ID, 'ecpt_clienturl', true);

In the above replace "ecpt_clienturl" with the name of your field.

7. To display a Meta Field in LoopBuddy layout, use "Custom Field" tag and enter the field name in "Meta Key" text input.

2012-03-01 11-11-28.png

8. If comments area is not appearing in single CPT entry pages on the site, go to My Theme -> Settings -> Comments. Uncheck the CPT, save settings, re-check it and save settings.

The Events Calendar

The Events Calendar plugin enables you to rapidly create and manage events. Features include Google Maps integration as well as default templates such as a calendar grid and event list, widget and so much more.

To assign a layout to all pages generated by this plugin, ex.: add the following in child theme's functions.php before closing PHP tag (if present):

function set_custom_layout( $layout_id ) {
    if ( tribe_is_month() || tribe_is_upcoming() || tribe_is_past() )
            return '4f5363f3cb8e1';

    return $layout_id;
add_filter( 'builder_filter_current_layout', 'set_custom_layout' );

In the above replace 4f5363f3cb8e1 with the ID of your desired layout.


It is also possible to set different layouts to different views like

  • main calendar page
  • calendar category pages
  • single events
  • single event days
  • single venues
  • events or venue pages
  • events list page

by adding more functions similar to the one above.

The needed if conditionals can be obtained from the source linked above.

Global Content Blocks

Using a Shortcode in HTML Module for Custom Header

A user in the forum asked the following:

On one of my customer sites (a Builder site), we have many similar, but slightly different layouts. On all of them, we want the same custom header (in a Custom HTML module). I’d like to maintain the HTML for that custom header in one place so that I don’t have to copy and paste the header code into each layout each time I want to make a change.

One of the ways this can be done is by creating a shortcode having the HTML code needed to display the custom header and place this shortcode in HTML module of all the layouts in use. The advantage of doing so is that should you decide later on to make any changes in the HTML, it has to be done only in one place.

1. Install and activate Global Content Blocks plugin.

2. Go to Settings -> Global Content Blocks -> Add a New Content Block.

Enter a Name. This is only for your reference and is not used while executing the shortcode.

In the Content editor, enter the HTML code needed to display your custom header image.


<a href="http://localhost/builder3/"><img src="http://localhost/builder-responsive/wp-content/themes/BuilderChild-Default/images/header.jpg" alt="Home" /></a>

Click Save.

Global Content Blocks ‹ iThemes Builder Test Site — WordPress 2013-03-16 15-38-32.png

Note the generated shortcode which will be in the form of

[contentblock id=1] 

Now add a HTML module wherever you want to the custom header image to appear and paste the shortcode. Save the module and layout.

2013-03-16 15-43-28.png

Output on the webpage:

Screen Shot 2013-03-16 at 3.48.56 PM.png

Depending on the active theme, there could be padding around the image which can be gotten rid of by using CSS like so:

.builder-module-1 .builder-module-element {
    padding: 0;

.builder-module-1 img {
    vertical-align: top;

to have:

Screen Shot 2013-03-16 at 3.51.35 PM.png

As you may probably be thinking, the output can simply be achieved by using a Image module but then it will not have the advantage of "update in one place – change everywhere".

Instead of using the plugin, we can write code similar to following in child theme's functions.php to create shortcode and use it as above.

//logo in header
function getlogo() {
	echo '<div class="headerlogo"><a href="'.get_bloginfo('home').'"><img src="'.get_bloginfo('stylesheet_directory').'/images/company-logo.png" alt="web design" /></a>';

In the above example, shortcode to be used would be [headercontent]

Thanks to Valerie Cudnik for providing the above code here.

Gravity Forms

To ensure that Gravity Forms plugin's styling gets applied in Builder (or any other WordPress theme), ensure that "Output CSS" is set to Yes in the plugin's settings.


How to embed a Gravity Forms form at the bottom of all single posts

2013-02-01 19-34-41.png

1. Go to Forms -> Forms in WP dashboard. Hover mouse on the title of form that you wish to embed and note the number at the end of URL in browser status bar. That would be the form's ID.

2. Edit child theme's single.php. If the child theme does not have this, copy it from parent Builder directory into the child theme directory.


<?php comments_template(); // include comments template ?>


<?php gravity_form(2, true, false, false, '', false); ?>

In the above change 2 to the ID of form you wish to embed.


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

#gform_wrapper_2 {
    margin-top: 4em;

In the above change 2 to the ID of form that's embedded.



If you would like to use Jetpack's Sharing Buttons in Widget Content widgets, go to

  1. Settings -> Sharing. Tick Widget Content under "Show buttons on".
  2. My Theme -> Settings -> Widget Content. Select "Use the the_content filter to format Widget Content entries."

Sample screenshot:

Screen Shot 2012-12-07 at 5.22.34 PM.png

How to prevent automatic placement of Jetpack's Share buttons and place them manually

Sample scenario:

1) At WP Dashboard -> Settings -> Sharing,

a) Few services have been enabled by dragging them under "Enabled Services" area.

b) Show buttons on is ticked for "Front Page, Archive Pages, and Search Results".

2) Active theme: Builder Child Theme - Acute Purple - 1.1.0

3) 'Teasers Layout - Image Left' Builder extension is applied to the Posts page with Read More set to appear for all excerpts.

To prevent automatic placement of Jetpack's Share buttons and place them manually, follow this:

1. Add the following at end of child theme's functions.php:

// Remove automatically-inserted Jetpack's share buttons
function jptweak_remove_share() {
	//remove_filter( 'the_content', 'sharing_display',19 );
	remove_filter( 'the_excerpt', 'sharing_display',19 );
add_action( 'loop_end', 'jptweak_remove_share' );


2. Wherever you would like to place the Jetpack's Share buttons, edit the appropriate template file and paste the following:

<?php if (function_exists('sharing_display')) echo sharing_display(); ?>

In our sample scenario, the file would be wp-content/themes/BuilderChild-Acute-Purple/extensions/post-teasers-left/functions.php and the above code would be placed below

<?php the_excerpt(); ?>
<p><a href="<?php the_permalink(); ?>" class="more-link">Read More →</a></p>
Screen Shot 2013-01-25 at 8.31.03 PM.png

That's it.

Jetpack Comments

Sample screenshot:

2012-12-07 17-49-39.png
  1. Edit comments.php in active theme (should be a child theme of Builder). If the file is not present, copy it from parent Builder directory into the child theme directory and edit it.

Delete code similar to

<h3><?php comment_form_title( __( 'Leave a Reply', 'it-l10n-BuilderChild-Ionic' ), __( 'Leave a Reply to %s', 'it-l10n-BuilderChild-Ionic' ) ); ?></h3>
		<div class="cancel-comment-reply">
			<small><?php cancel_comment_reply_link(); ?></small>

and replace

<form action="<?php echo site_url( '/wp-comments-post.php' ); ?>" method="post" id="commentform">
				<?php if ( is_user_logged_in() ) : ?>
					<p class="logged-in-as"><?php printf( __( 'Logged in as <a href="%1$s">%2$s</a>. <a href="%3$s" title="Log out of this account">Log out?</a>', 'it-l10n-BuilderChild-Ionic' ), admin_url( 'profile.php' ), $user_identity, $logout_url ); ?></p>
				<?php else : ?>
					<p class="comment-form-author">
						<input type="text" name="author" id="author" value="<?php echo esc_attr( $commenter['comment_author'] ); ?>" size="22"<?php echo $aria_req; ?> />
						<label for="author"><small><?php _e( 'Name', 'it-l10n-BuilderChild-Ionic' ); ?> <?php if ( $req ) _e( "<span class='required'>(required)</span>", 'it-l10n-BuilderChild-Ionic' ); ?></small></label>
					<p class="comment-form-email">
						<input type="text" name="email" id="email" value="<?php echo esc_attr(  $commenter['comment_author_email'] ); ?>" size="22"<?php echo $aria_req; ?> />
						<label for="email"><small><?php _e( 'Mail (will not be published)', 'it-l10n-BuilderChild-Ionic' ); ?> <?php if ( $req ) _e( "<span class='required'>(required)</span>", 'it-l10n-BuilderChild-Ionic' ); ?></small></label>
					<p class="comment-form-url">
						<input type="text" name="url" id="url" value="<?php echo esc_attr( $commenter['comment_author_url'] ); ?>" size="22" />
						<label for="url"><small><?php _e( 'Website', 'it-l10n-BuilderChild-Ionic' ); ?></small></label>
				<?php endif; ?>
				<!--<p><small><strong>XHTML:</strong> You can use these tags: <code><?php echo allowed_tags(); ?></code></small></p>-->
				<p><textarea name="comment" id="comment" cols="45" rows="10"></textarea></p>
				<p class="comment-submit-wrapper">
					<input name="submit" type="submit" id="submit" value="<?php _e( 'Submit Comment →', 'it-l10n-BuilderChild-Ionic' ); ?>" />
					<?php comment_id_fields(); ?>
				<?php do_action( 'comment_form', $post->ID ); ?>


<?php comment_form(); ?>

Infinite Scroll

Jetpack's Infinite Scroll can either enabled by adding code in child theme's functions.php or simply by just using a plugin.



Beginning Builder 4.0.15, Jetpack's Carousel module works fine in iThemes Builder.

Tiled Galleries

JetPack's Tiled Galleries module works in iThemes Builder (v4.0.15 and above) by using a workaround.

Add the following in child theme's functions.php file (after the <?php line):

function custom_disable_builder_gallery() {
    remove_filter( 'post_gallery', 'builder_custom_post_gallery', 10 );
add_action( 'builder_theme_features_loaded', 'custom_disable_builder_gallery' );

$content_width = 604;

Note that the $content_width variable has to be set to a value that refers to the pixel width of the area displaying the gallery. The 604 number refers to the total pixel width area of the Default child theme's Content Module without any Layout modifications (960 pixel wide Layout with a 320 pixel wide sidebar). Until a better solution can be found, this variable will have to be manually adjusted so that the gallery properly fills the content area. Fortunately, if you are running a responsive Builder child theme, you can set this value to be larger than required, and it will automatically shrink down (this may work in some non-responsive child themes as well, the results vary).

Set $content_width value to the width of actual content portion (.builder-module-content .builder-module-element) that is available after any padding. Firebug makes it easy to find this.

2013-01-31 11-10-53.png

Source: Builder 4.0.15 release notes.

Limitation: When the above code is used, output of standard gallery shortcode, for example, [gallery ids="1072,1070,1062,1050"] will be affected. This is a known issue for the time being.

jQuery Mega Menu in Builder

jQuery Drop Down Mega Menu Widget plugin will allow you to quickly and easily create drop down mega menus from any WordPress custom menu. It has 8 built-in skins (styles).

For the purpose of this tutorial, let's add a 1-column widget bar module in our layout. Next go to Appearance -> Widgets and drag a jQuery Mega Menu widget into the widget area.


When we check the site (having BuilderChild-Default as the active theme), the sub menus will not appear by default.


and depending on the child theme being used, there could be padding around the widget.


To remove unwanted spacing around widget, the following has been added at the end of child theme's style.css:

#dc_jqmegamenu_widget-3 {
    padding: 0; /* To remove the padding around widget - needed only in some child themes */

#builder-module-4e2cfbc65ee6f .builder-module-sidebar {
    padding-top: 0; /* To remove the top padding for the sidebar - needed only in some child themes */
    padding-bottom: 0; /* To remove the bottom padding for the sidebar - needed only in some child themes */

To make the submenus appear, we need to:

  1. Set position of the widget as absolute and specify its width.
  2. Set the height for one of widget's parent div.

So the final CSS would be:

#dc_jqmegamenu_widget-3 {
    padding: 0; /* To remove the padding around widget - needed only in some child themes */
    position: absolute;
    width: 1000px; /* Set this to width of layout in the case of 1-column widget bar module or whatever is the width of sidebar in which this widget is present */

#builder-module-4e2cfbc65ee6f .builder-module-sidebar {
    padding-top: 0; /* To remove the top padding for the sidebar - needed only in some child themes */
    padding-bottom: 0; /* To remove the bottom padding for the sidebar - needed only in some child themes */
    height: 40px; /* This value can be obtained by going to Computed tab in Firebug when this div is selected. See Screenshot A below. */

In the above the ID of widget and layout must be changed to those on your site.

Screenshot showing fully working jQuery Mega Menu in Builder

Screenshot A:


That's it!

Note: Instead of setting position of widget as absolute, we can set absolute position for either #menu-menu-1 or #dc_jqmegamenu_widget-3-item above it or #dc_jqmegamenu_widget-3. Remember to set the height for the chosen element's parent.


This principle also applies when using similar dropdown menu plugins like Pixopoint. See # 4 at

LayerSlider WP

LayerSlider WP


2013-02-26 07-11-10.jpg


2013-02-26 07-07-40.jpg

To fix LayerSlider from being cut off at the bottom, use the following sample CSS:

#builder-module-512b538d8a958-outer-wrapper, #builder-module-512b538d8a958, #builder-module-512b538d8a958 .widget-wrapper {
    overflow: visible !important;

.ls-thumbnail-slide img {
    height: 100% !important;

In the above replace builder-module-512b538d8a958 with the ID of module (typically, a widget bar) in which LayerSlider is placed.

Sexy Bookmarks

How to hide the display of Sexy Bookmarks in widget content

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

.widget-content .shr-bookmarks {
    display: none !important;

Forum thread:

Update: One of our users reported:

there is extra padding under each widget content area as though it's making room for SB but not displaying it

The solution is to change in Sexy Bookmarks options: "animate-expand multi-lined bookmarks" to NO


Update (January 18, 2012): Here is our developer's explanation on the cause of this problem. It's not just Sexy Bookmarks, but other plugins like Yet Another Related Posts Plugin also does this.


Shopp is an e-commerce plugin that adds a feature-rich online store to your WordPress-powered website or blog.

Shopp works out of the box in Builder without the need to edit any template files.

The steps below outline how Shopp can be set up in Builder:

1. After Shopp has been installed and activated, it will create four placeholder pages.


Each of these pages include Shopp-specific shortcodes that are replaced with dynamic content generated by Shopp.

2. Go to Shopp -> Settings, Continue to Shopp Setup...

Go through the various settings and fill them out. Refer to links at the bottom of this page for details on these settings.

3. Presentation Settings:

Make sure you have saved the settings that have been entered in the previous options thus far, if any, before proceeding further.

a) Click on Use Custom Templates button.

b) Create a directory in your active theme (Builder child theme) named shopp. You can either use a FTP client or your hosting cPanel file manager for this.


c) Reload the Presentation Settings in the WordPress/Shopp admin and click Install Theme Templates button.

At this point, Shopp will make a copy of the built-in default templates into the newly created shopp directory within your active theme.

d) Tick Enable theme templates and save changes.

4. Now you are ready to add products. Go to Shopp -> Products. Click Add New. Enter the details and save the product.

Products Builder Test Site WordPress 2011-12-03 17-53-00.png

Note: After a product image has been added, if its thumbnail does not appear i.e., if it looks like:


go to Shopp -> Settings -> System and uncheck Enable Flash-based uploading next to Upload System. Save changes.

You will have to edit the products and add images again.


Shop page (Products listing page)

Shop- -Builder-Test-Site-2011-12-03-18-23-09.jpg

Live Demo: (Dummy site, do not place orders)

Product page

Shop-Catalog-Products-Nike-Men-Downshifter-4-MSL-Black-Sports-Shoes- -Builder-Test-Site-2011-12-03-18-35-09.jpg

Cart page

Cart- -Builder-Test-Site-2011-12-03-18-42-53.jpg

Replay videos of Under the Hood with Shopp training webinar


How to set up a responsive Full Width slideshow in iThemes Builder

In this tutorial, we are going to use iThemes Slideshow plugin to set up a responsive full width slideshow in Builder.


1. Install and activate Slideshow plugin. Add a new group named say, Homepage Slider. Edit the group and set dimensions to 1500px by 430px. Note that these are just recommended dimensions and are not set in stone and you are free to experiment and change them as you see them fit for your needs.

Under Render Mode, select Responsive. Save settings.

Upload the images you wish to appear in the slide group.

Slideshow ‹ WordPress Dev Site — WordPress 2013-04-24 12-03-05.png

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

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

if ( ! function_exists( 'my_builder_loaded' ) ) {
	function my_builder_loaded() {
		builder_register_module_style( 'widget-bar', 'Full Width Slider', 'widget-bar-full-width-slider' );
	add_action( 'it_libraries_loaded', 'my_builder_loaded' );

Note: If the first line in above, i.e., for adding full width modules support is already present, do not add it again.

3. Edit your layout and add a Widget Bar module with 1 column wherever you want the Slideshow to appear.

Select Full Width Slider from Style dropdown.

You might want to name the module Slider for easy identification.

Screen Shot 2013-04-24 at 11.49.50 AM.png

4. Go to Appearance -> Widgets page for this layout and drag iThemes Slideshow widget into the Widget bar module's sidebar and ensure that your full width slider group is the selected one.

Screen Shot 2013-04-24 at 11.51.54 AM.png

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

/* For full width slideshow */

.widget-bar-full-width-slider-background-wrapper {
    padding: 0;
    margin-bottom: 0;

.widget-bar-full-width-slider-outer-wrapper {
    max-width: 100% !important;

6. Add the following in style-mobile.css (create this file if it is not existing):

/* For full width slideshow */

#pb_slideshow_rslider-1 .nivo-prevNav {
	margin-left: 0 !important;

#pb_slideshow_rslider-1 .nivo-nextNav {
	margin-right: 0 !important;

7. Create a new file named style-responsive.css in the child theme and paste the following in it:

/* For full width slideshow */

.widget-bar-full-width-slider-background-wrapper {
    padding: 0;

Uber Menu

How to Set Up a Vertical Custom Menu in a Widget using Uber Menu in iThemes Builder

Vertical menu in iThemes Builder

1. Install and activate Uber Menu.

2. Go to Appearance -> UberMenu.

a) Set Orientation to Vertical. There is no need to enter a value for Vertical Mega Submenu Width (even if entered, it doesn't take effect).

b) Theme Integration -> Easy Integration -> ON.

3. Go to Appearance -> Menus.

a) Create a custom menu that you would like to show vertically in a widget.

b) Tick UberMenu under 'Activate Uber Menu Locations'. Select your desired menu in 'Theme Locations'.

Screen Shot 2013-03-04 at 6.42.00 PM.png

4. At Appearance -> Widgets, drag a text widget in whichever sidebar you would like to show the vertical menu and paste:


Refresh your site and adjust the width of sidebar if necessary.

5. [Optional] To improve the appearance of the menu, add the following at the end of child theme's style.css (WP dashboard -> Appearance -> Editor):

#megaMenu ul.megaMenu {
    width: 100%;

#megaMenu ul ul {
    padding: 0px 27px !important;

#megaMenu ul.megaMenu li li li ul {
    margin-left: 1em;

/* if the widget is placed in content module's sidebar and if sub menu appears to be cut off */
.builder-module-content .builder-module-sidebar-outer-wrapper {
    overflow: visible !important;


How to Assign a Layout to the Main Shop page

Add the following at the end of child theme's functions.php (before closing PHP, if any):

// =================================================
// = Assign a layout to WooCommerce main shop page =
// =================================================

function custom_filter_shop_layout( $layout_id ) {

    if ( is_shop() )
            return '5088b68b45105';

    return $layout_id;
add_filter( 'builder_filter_current_layout', 'custom_filter_shop_layout' );

Change 5088b68b45105 in the above to ID of layout that you wish to assign to the shop page.

To find the ID for a Layout, go to the Layouts listing, copy the edit link for the desired Layout, paste the link somewhere, and grab the text after the last equal sign. For example, consider the following link:

The Layout's ID for the above is 5088b68b45105.


How to Assign a Layout to a single Product page

Following the same method as above, add the following at the end of child theme's functions.php (before closing PHP, if any):

// ===============================================
// = Assign a layout to WooCommerce product page =
// ===============================================

function custom_filter_product_layout( $layout_id ) {

    if ( is_singular( 'product' ) )
            return '5088b68b45105';

    return $layout_id;
add_filter( 'builder_filter_current_layout', 'custom_filter_product_layout' );

How to Assign a Layout to all Woocommerce pages

// ============================================
// = Assign a layout to all WooCommerce pages =
// ============================================

function custom_filter_all_shop_layouts( $layout_id ) {

    if ( is_shop() || is_singular( 'product' ) || is_tax( 'product_cat' ))
            return '5088b68b45105';

    return $layout_id;
add_filter( 'builder_filter_current_layout', 'custom_filter_all_shop_layouts' );

How to Change the Number of Products Per Row and Number of Products Per Page

By default, 4 products per row and per page are visible in WooCommerce shop page.

Screen Shot 2013-03-07 at 10.31.59 AM.png

If you would like to show more number of products per page, add the following in child theme's functions.php (before closing PHP tag, if any):

// Display 24 products per page.
add_filter( 'loop_shop_per_page', create_function( '$cols', 'return 24;' ), 20 );

In the above change 24 to number of products you would like per page.


2013-03-07 10-36-24.png

To change the number of products shown per row, add the following in child theme's functions.php (before closing PHP tag, if any):

// Change number or products per row to 5
add_filter('loop_shop_columns', 'loop_columns');
if (!function_exists('loop_columns')) {
	function loop_columns() {
		return 5; // 5 products per row


That should result in something like

Screen Shot 2013-03-07 at 10.39.01 AM.png

Since the width of each product is set to be 22.05% via CSS, the last 2 products fall down as there is not enough space for them to fit in a single row.

The solution is to add the following at the end of child theme's style.css (WP dashboard -> Appearance -> Editor):

.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
    width: 16% !important;

You will need to adjust the number 16 in the above to whatever is required so all the products get fit on a single line.

Screen Shot 2013-03-07 at 10.44.59 AM.png

Item 3

Yoast Breadcrumbs

How to implement in Builder

Yoast Breadcrumbs on

Determine where you want the breadcrumbs to appear and edit the appropriate template file(s) in child theme. Use this image as a reference. If a particular file is not present in the child theme directory, copy it from parent Builder directory.

Generally speaking, these are the files that you will be modifying: page.php (for static Pages), single.php (for single post pages), index.php (for Posts page) and archive.php (for category pages).

Let's consider Kepler child theme as an example and that we want to add breadcrumbs to all Pages.

Edit page.php.


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


<?php if ( function_exists('yoast_breadcrumb') ) {
	yoast_breadcrumb('<p id="breadcrumbs">','</p>');
} ?>

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

#breadcrumbs {
    color: #D0ECF3;
    margin-top: 0;

#breadcrumbs a {
    color: #FFFFFF;

Note: The above CSS code might have to be adjusted depending on the child theme.

This should result in

2012-06-26 21-36-17.png

See also

← Back to Builder Codex Home