Builder Generic Customizations

(Difference between revisions)
Jump to: navigation, search
(jQuery Mega Menu in Builder)
Line 1,070: Line 1,070:
  
 
'''This is Page 1 of ''Plugin related and other generic customizations in Builder''. [http://ithemes.com/codex/page/Plugin_related_and_other_generic_customizations_2 Here] is Page 2.'''
 
'''This is Page 1 of ''Plugin related and other generic customizations in Builder''. [http://ithemes.com/codex/page/Plugin_related_and_other_generic_customizations_2 Here] is Page 2.'''
 +
 +
'''This is Page 2 of ''Plugin related and other generic customizations in Builder''. [http://ithemes.com/codex/page/Plugin_related_and_other_generic_customizations_in_Builder Here] is Page 1.'''
 +
 +
== How to add social media icons in nav bar ==
 +
 +
This can be done in at least 2 different ways. The primary difference between method 1 and 2 is that in method 2, left margin for first social icon has to be manually adjusted every time a menu item in the nav bar is changed. For this reason, '''method 1 is recommended'''.
 +
 +
=== Method 1 ===
 +
 +
[[File:2012-09-02 12-52-02.png|800px|thumb|none]]
 +
 +
'''1.''' Create (if you haven't already) a custom menu at Appearance -> Menus, which should appear in the nav bar.
 +
 +
'''2.''' Instead of a navigation module, use a PHP enabled HTML module having this sample code:
 +
 +
<pre class="brush:php;">
 +
<?php wp_nav_menu( array( 'menu' => 'primary', 'menu_class' => 'builder-module-navigation') ); ?>
 +
 +
<div class="my-social-icons">
 +
<ul>
 +
    <li class="social-icon"><a target="_blank" rel="nofollow" href="http://www.facebook.com/"><img class="fade" style="opacity: 1; -moz-opacity: 1;" title="Follow Us on Facebook" alt="Follow Us on Facebook" src="//ithemes.com//builder/misc/social-media-icons/32/facebook.png"></a></li>
 +
   
 +
    <li class="social-icon"><a target="_blank" rel="nofollow" href="http://twitter.com/#!/"><img class="fade" style="opacity: 1; -moz-opacity: 1;" title="Follow Us on Twitter" alt="Follow Us on Twitter" src="//ithemes.com//builder/misc/social-media-icons/32/twitter.png"></a></li>
 +
   
 +
    <li class="social-icon"><a target="_blank" rel="nofollow" href="http://www.yoursite.com/feed/"><img class="fade" style="opacity: 1; -moz-opacity: 1;" title="Follow Us on RSS" alt="Follow Us on RSS" src="//ithemes.com//builder/misc/social-media-icons/32/rss.png"></a></li>
 +
   
 +
    <li class="social-icon"><a target="_blank" rel="nofollow" href="mailto: admin@yoursite.com"><img class="fade" style="opacity: 1; -moz-opacity: 1;" title="E-mail Us" alt="E-mail Us" src="//ithemes.com//builder/misc/social-media-icons/32/email.png"></a></li>
 +
</ul>
 +
</div>
 +
</pre>
 +
 +
Note:
 +
 +
# In the above, change <code>primary</code> to the slug of your custom menu. Ex.: If the name of your custom menu is "Main Menu", it slug will be <code>main-menu</code>.
 +
# It is recommended to use the social icons from your WordPress site. You should download the icons referred to in the above code, upload them to your site and use those links instead.
 +
 +
'''3.''' Add the following sample code at the end of child theme's style.css (WP dashboard -> Appearance -> Editor):
 +
 +
<pre class="brush:css;">
 +
/************************************************************************
 +
    For right floating social icons in a HTML module showing nav bar
 +
*************************************************************************/
 +
 +
.builder-module-2 {
 +
background: #FAA51B;
 +
}
 +
 +
.menu-primary-container {
 +
float: left;
 +
}
 +
 +
#menu-primary {
 +
margin-bottom: 0;
 +
}
 +
 +
li.social-icon a, li.social-icon a:hover {
 +
    padding: 1px 0 0 8px;
 +
}
 +
 +
li.social-icon a:hover {
 +
    opacity: 0.8;
 +
    -moz-opacity: 0.8;
 +
    background: none;
 +
}
 +
 +
li.social-icon:hover,
 +
li.social-icon:hover a {
 +
    background: none;
 +
}
 +
 +
.my-social-icons {
 +
float: right;
 +
margin-right: 10px;
 +
padding-top: 8px;
 +
}
 +
 +
.my-social-icons ul {
 +
list-style: none;
 +
}
 +
 +
.my-social-icons li {
 +
float: left;
 +
}
 +
</pre>
 +
 +
Note: In the above
 +
 +
a) Change the number (2) in <code>.builder-module-2</code> so it is the module number from top in layout.
 +
 +
b) In
 +
 +
<pre class="brush:css;">
 +
.builder-module-2 {
 +
background: #FAA51B;
 +
}
 +
</pre>
 +
 +
replace <code>background: #FAA51B;</code> with child theme's styles set for navigation module or in the case of Thinner, those of <code>.builder-module-navigation ul.menu</code>. i.e.,
 +
 +
<pre class="brush:css;">
 +
.builder-module-2 {
 +
/*background: #FAA51B;*/
 +
overflow: hidden;
 +
background: #F6F6F6;
 +
background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#F6F6F6));
 +
background: -webkit-linear-gradient(#FFFFFF, #F6F6F6);
 +
background: -moz-linear-gradient(#FFFFFF, #F6F6F6);
 +
background: -ms-linear-gradient(#FFFFFF, #F6F6F6);
 +
background: -o-linear-gradient(#FFFFFF, #F6F6F6);
 +
background: linear-gradient(#FFFFFF, #F6F6F6);
 +
border: 1px solid #FFF;
 +
-webkit-border-radius: 10px;
 +
-khtml-border-radius: 10px;
 +
-moz-border-radius: 10px;
 +
border-radius: 10px;
 +
-webkit-box-shadow: #AAAAAA 1px 1px 2px;
 +
-moz-box-shadow: #AAAAAA 1px 1px 2px;
 +
-o-box-shadow: #AAAAAA 1px 1px 2px;
 +
-khtml-box-shadow: #AAAAAA 1px 1px 2px;
 +
box-shadow: #AAAAAA 1px 1px 2px;
 +
}
 +
</pre>
 +
 +
c) <code>primary</code> to the slug of your custom menu. Ex.: If the name of your custom menu is "Main Menu", it slug will be <code>main-menu</code>.
 +
 +
=== Method 2 ===
 +
 +
[[File:Social-icons-navbar.png|800px|thumb|none]]
 +
 +
Create (if you haven't already) a custom menu at Appearance -> Menus, which should appear in the nav bar.
 +
 +
'''1.''' Edit your child theme's [http://ithemes.com/codex/page/Builder_Frequently_Asked_Questions#Where_is_functions.php.3F functions.php].
 +
 +
Add the following at the end (before closing PHP tag, if present):
 +
 +
<pre class="brush:php;">
 +
add_filter('wp_nav_menu_main-menu_items','add_images', 10, 2);
 +
function add_images($items, $args) {
 +
 +
        $items .= '<li class="social-icon" id="first-social-icon"><a target="_blank" rel="nofollow" href="http://www.facebook.com/"><img class="fade" style="opacity: 1; -moz-opacity: 1;" title="Follow Us on Facebook" alt="Follow Us on Facebook" src="//ithemes.com//builder/misc/social-media-icons/32/facebook.png"></a></li>';
 +
       
 +
        $items .= '<li class="social-icon"><a target="_blank" rel="nofollow" href="http://twitter.com/#!/"><img class="fade" style="opacity: 1; -moz-opacity: 1;" title="Follow Us on Twitter" alt="Follow Us on Twitter" src="//ithemes.com//builder/misc/social-media-icons/32/twitter.png"></a></li>';
 +
       
 +
        $items .= '<li class="social-icon"><a target="_blank" rel="nofollow" href="http://www.yoursite.com/feed/"><img class="fade" style="opacity: 1; -moz-opacity: 1;" title="Follow Us on RSS" alt="Follow Us on RSS" src="//ithemes.com//builder/misc/social-media-icons/32/rss.png"></a></li>';
 +
       
 +
        $items .= '<li class="social-icon"><a target="_blank" rel="nofollow" href="mailto: admin@yoursite.com"><img class="fade" style="opacity: 1; -moz-opacity: 1;" title="E-mail Us" alt="E-mail Us" src="//ithemes.com//builder/misc/social-media-icons/32/email.png"></a></li>';
 +
       
 +
    return $items;   
 +
}
 +
</pre>
 +
 +
<u>Note</u>: In the above code, ''main-menu'' must be replaced with the slug of your custom menu. Ex.: If the name of your custom menu is ''Primary Navigation'', then
 +
 +
<pre class="brush:php;">
 +
add_filter('wp_nav_menu_main-menu_items','add_images', 10, 2);
 +
</pre>
 +
 +
must be changed to
 +
 +
<pre class="brush:php;">
 +
add_filter('wp_nav_menu_primary-navigation_items','add_images', 10, 2);
 +
</pre>
 +
 +
'''2.''' Add the following at the end of child theme's style.css and customize it if necessary:
 +
 +
<pre class="brush:css;">
 +
/* Custom Styles For The Social Media Widget Icons in Navigation */
 +
 +
li#first-social-icon {
 +
    margin-left: 355px; /* Adjust this value so the icons are positioned at your desired location. */
 +
}
 +
 +
/* li.social-icon {
 +
    height: 36px;
 +
} */ /* Needed only in certain themes like Traverse */
 +
 +
li.social-icon a, li.social-icon a:hover {
 +
    padding: 1px 0 0 8px;
 +
}
 +
 +
li.social-icon a:hover {
 +
    opacity: 0.8;
 +
    -moz-opacity: 0.8;
 +
    background: none;   
 +
}
 +
 +
li.social-icon:hover,
 +
li.social-icon:hover a {
 +
    background: none;
 +
}
 +
</pre>
 +
 +
That's it!
 +
 +
This method is also explained [http://ithemesbuilder.com/how-to-add-a-items-to-builders-navigation-menus/ here].
 +
 +
Sample implementations:
 +
 +
'''1.''' Traverse with round icons:
 +
 +
[[File:2011-11-26 10-27-16.png|800px|thumb|none]]
 +
 +
[http://ithemes.com/forum/index.php?/topic/20491-builder-traverse-theme-navigation-removing-block-behind-icons/#p96994 Forum topic]
 +
 +
== How to use CSS3 PIE ==
 +
 +
[http://css3pie.com/ PIE] stands for Progressive Internet Explorer. It is an IE attached behavior which, when applied to an element, allows IE to recognize and display a number of CSS3 properties.
 +
 +
It is used to get CSS3 properties like ''border-radius'' working in IE older than version 9.
 +
 +
'''Follow the steps below to make CSS3 PIE work in Builder''':
 +
 +
'''Update on July 11, 2012''': Builder provides IE browser specific IDs for the html element. These are ie7, ie8 and ie9. It is thus possible to write IE 7, IE 8 and IE 9 specific CSS. [http://ithemes.com/forum/topic/30017-comment-form-text-area-weird-format-in-ie/page__view__findpost__p__139158 This] forum topic provides an example where post comment text area (which already has <code>border-radius</code> set in style.css) can be made to show rounded corners in IE 8 using CSS3 PIE. The alternate method listed below also works.
 +
 +
'''1.''' Download the latest version of CSS3 PIE from [http://css3pie.com/download-latest here].
 +
 +
'''2.''' Extract the zip flle and upload ''PIE.htc'' to any web reachable directory.
 +
 +
Ex.:
 +
 +
public_html/assets/PIE.htc
 +
 +
'''3.''' Add <code>position: relative;</code> style to all those selectors for which you would like to use CSS3 PIE. You will of course be specifying border-radius/box-shadow etc. properties (which are supported by CSS3 PIE).
 +
 +
Ex.:
 +
 +
<pre class="brush:css;">
 +
#text-6 {
 +
-moz-border-radius:10px;
 +
-webkit-border-radius:10px;
 +
border-radius:10px;
 +
position: relative;
 +
}
 +
 +
#text-6 .widget-title {
 +
-moz-border-radius:10px 10px 0px 0px;
 +
-webkit-border-radius:10px 10px 0px 0px;
 +
border-radius:10px 10px 0px 0px;
 +
position: relative;
 +
}
 +
</pre>
 +
 +
The above CSS is written to make a widget whose ID is ''text-6'' rounded.
 +
 +
Screenshot in Firefox:
 +
 +
[[File:Rounded-corners-ff.png]]
 +
 +
[http://sridhar.internal.ithemes.com/ Live Site]
 +
 +
'''4.''' Add the following in your child theme's functions.php:
 +
 +
<pre class="brush:php;">
 +
function my_render_ie_pie() { ?>
 +
<!--[if lte IE 8]>
 +
<style type="text/css" media="screen">
 +
  #your-css-elements-here {
 +
          behavior: url('http://www.redkitecreative.com/PIE.htc');
 +
    }
 +
</style>
 +
 +
<![endif]-->
 +
<?php
 +
}
 +
add_action('wp_head', 'my_render_ie_pie', 8);
 +
</pre>
 +
 +
In the above, replace
 +
 +
# <code>#your-css-elements-here</code> with CSS selectors for which you have specified CSS 3 properties and for which you would like to use CSS3 PIE.
 +
# http://www.redkitecreative.com/PIE.htc with the URL of PIE.htc on your server.
 +
 +
Ex.:
 +
 +
Code in functions.php:
 +
 +
<pre class="brush:php;">
 +
function my_render_ie_pie() { ?>
 +
<!--[if lte IE 8]>
 +
<style type="text/css" media="screen">
 +
  #text-6, #text-6 .widget-title {
 +
          behavior: url('http://sridhar.internal.ithemes.com/assets/PIE.htc');
 +
    }
 +
</style>
 +
 +
<![endif]-->
 +
<?php
 +
}
 +
add_action('wp_head', 'my_render_ie_pie', 8);
 +
</pre>
 +
 +
Now ''border-radius'' property for ''#text-6'' and ''#text-6 .widget-title'' will work in IE 8 and below.
 +
 +
Screenshot in IE 8:
 +
 +
[[File:Rounded-corners-ie8.png]]
 +
 +
<u>Note</u>:
 +
 +
# This particular example does not render properly in IE 7 probably because of using PIE on an element inside another element. This is the behavior coming from PIE itself and not Builder. [http://ithemes.com/codex/images/6/63/Rounded-corners-ie7.png Screenshot].
 +
# IE 9 supports border-radius natively. So PIE will not be used in IE 9.
 +
 +
That's it!
 +
 +
Source: http://www.position-relative.com/2011/01/using-css3-pie-in-wordpress-custom-themes/
 +
 +
== How to float a div at any position on top of other elements in the container ==
 +
 +
[[File:Screen Shot 2011-12-19 at 10.37.52 PM.png|800px|thumb|none]]
 +
 +
'''1.''' Add the following in child theme's functions.php:
 +
 +
<pre class="brush:php;">
 +
add_action('builder_layout_engine_render_header', 'add_floating_box', 20 );
 +
 +
function add_floating_box() { ?>
 +
<div id="floating-box-container">
 +
<div id="floating-box">
 +
HTML or PHP code comes here
 +
</div>
 +
</div>
 +
<?php }
 +
</pre>
 +
 +
In the above, place the code needed to display your logo (for example) where "HTML code comes here" is present.
 +
 +
'''2.''' Add the following at the end of child theme's style.css:
 +
 +
<pre class="brush:css;">
 +
#floating-box-container {
 +
max-width: 1000px; /* set this to container (layout) width */
 +
width: 100%;
 +
margin: 0 auto;
 +
position: relative;
 +
z-index: 100;
 +
}
 +
 +
#floating-box {
 +
position: absolute;
 +
top: 50px;
 +
left: 0;
 +
background: yellow;
 +
width: 200px;
 +
height: 100px;
 +
}
 +
</pre>
 +
 +
In the above, you might want to adjust top, left, background, width and height values.
 +
 +
[[File:2011-12-19 22-57-10.png|800px|thumb|none|Screenshot showing the div structure]]
 +
 +
A practical example of implementing this method can be found [http://ithemes.com/codex/page/Plugin_related_and_other_generic_customizations_in_Builder#How_to_add_social_media_icons_floating_at_top_right here].
 +
 +
Source: http://ithemes.com/forum/topic/28189-where-is-body-tag/page__view__findpost__p__130559
 +
 +
== How to show top most (latest) post in full and the others as excerpts ==
 +
 +
Screenshot: http://d.pr/nfl1
 +
 +
Edit child theme's index.php and any other needed template files like archive.php that output a list of posts.
 +
 +
Replace the ''the_content()'' or ''the_excerpt()'' function call with the following:
 +
 +
<pre class="brush:php;">
 +
<?php /* Conditional output flag set after first post */ ?>
 +
<?php if($showexcerpt) : ?>
 +
  <?php the_excerpt(); ?>
 +
<?php else: ?>
 +
  <?php the_content(); ?>
 +
<?php endif; ?>
 +
<?php $showexcerpt=true; ?>
 +
</pre>
 +
 +
Ex.: In Foundation Blank's index.php,
 +
 +
<pre class="brush:php;">
 +
<?php the_content( __( 'Read More&rarr;', 'it-l10n-BuilderChild-Foundation-Blank' ) ); ?>
 +
</pre>
 +
 +
should be replaced with
 +
 +
<pre class="brush:php;">
 +
<?php /* Conditional output flag set after first post */ ?>
 +
<?php if($showexcerpt) : ?>
 +
  <?php the_excerpt(); ?>
 +
<?php else: ?>
 +
  <?php the_content( __( 'Read More&rarr;', 'it-l10n-BuilderChild-Foundation-Blank' ) ); ?>
 +
<?php endif; ?>
 +
<?php $showexcerpt=true; ?>
 +
</pre>
 +
 +
With the above change, the top most (latest) post will be shown in full unless more quick tag, <!--more--> is used. If more quick tag is used, "Read More→" will appear at the cut off point.
 +
 +
Source: http://wordpress.org/support/topic/full-article-for-first-post-excerpts-for-the-rest?replies=7#post-1743222
 +
 +
== How to remove hyperlink from tagline in Header module ==
 +
 +
Add the following code to child theme's functions.php (at the end, but before the closing ?> line, if any):
 +
 +
<pre class="brush:php;">
 +
// load our javascript in the footer
 +
add_action('wp_enqueue_scripts', 'add_my_code');
 +
function add_my_code() {
 +
    add_action( 'print_footer_scripts', 'my_footer_script' );
 +
 +
 +
// Add jQuery to footer
 +
function my_footer_script() { ?>
 +
 +
    <script type="text/javascript">
 +
    jQuery(document).ready(function($) {
 +
            $('.site-tagline a').replaceWith(function() {
 +
                    return this.innerHTML; });
 +
            });
 +
 +
    </script>
 +
 +
<?php }
 +
</pre>
 +
 +
[http://ithemes.com/forum/topic/29848-remove-link-from-tagline/page__view__findpost__p__138431 Thanks to Ronald (forum post)]
 +
 +
== Examples of Using jQuery in Builder ==
 +
 +
=== Disclaimer ===
 +
'''iThemes will not be responsible for any issues that may be the result of your attempts to change your site's functions.php file. You do not HAVE to change it. All code samples are for your information, possibly inspiration, and provided "as is". However, when properly implemented, the code samples are accurate and will work.'''
 +
 +
=== Warning ===
 +
If you do not understand what it is you are doing, if the words "php", "opening tag", "FTP", "functions" and "backup" are not familiar to you proceed with caution. You can blow up your site due to invalid code in the functions.php file. Actually, even if you know or think you know it all, it still happens (it happens to me at least once a week - Ronald).
 +
 +
A single missing } or even a , or a semi-colon is all it takes to take your site down. This can be resolved by undoing the changes, however, this can not be done through the wp-dashboard > Appearance > Editor anymore (since your site is down). You then have to restore the functions.php file either through FTP or your hosting cPanel File Manager.
 +
 +
'''If you think you can not do that, or do not understand what all the above means, I suggest you refrain from editing functions.php.'''
 +
 +
Should anything go wrong, do not blame the code posted here. The code works. It just needs to be inserted a) the right way, and b) in the right place.
 +
 +
For everyone else feeling confident, and having read the Disclaimer and the paragraph on how to add PHP code to a PHP file, DO MAKE A BACKUP, at least of the file you are editing. It is also not recommended to do these changes through the wp-dashboard > Appearance > Editor. Setup a localhost server on your computer, and use a simple PHP Editor (with syntax checking), ensure that your additions do not break the site and only THEN FTP your files to your server.
 +
 +
=== How to add PHP code to a PHP file ===
 +
When adding code to the <code>functions.php</code> file (or any PHP file), make sure it is in PHP format. HTML code is not PHP code, and it '''WILL''' break things when coded inside a block of PHP code.
 +
 +
PHP code can be identified by an opening tag: <code><?php</code>
 +
and a closing tag <code>?></code>
 +
 +
all code between these tags should be PHP code.
 +
 +
Most WordPress themes have the opening <code><?php</code> tag in functions.php, coded all the way at the top of the file. Most (Builder Child theme) <code>functions.php</code> files do not have a closing <code>?></code> tag (ALL THE WAY) at the end of the file, since it is not required.
 +
 +
So if you add code at the end of your <code>functions.php</code> file, and do so before the closing <code>?></code> PHP tag (if any!) you (generally!) are inside a PHP block of code. But this is '''NOT''' guaranteed.
 +
 +
*You can't add html code inside PHP tags.
 +
*You can't add PHP code outside PHP tags.
 +
*You can't add opening PHP tags INSIDE a block of PHP code (nesting <code><?php some php code ?></code> when there is no closing php tag before it).
 +
 +
Before making the final edits and saving and uploading the file to your server, make sure that the syntax of the entire functions.php is valid syntax. You can do so by using a PHP Editor, and there are online tools such as this one: http://www.piliapp.com/php-syntax-check/
 +
 +
====example of correct PHP code====
 +
<pre class="brush: php; gutter: false;">
 +
<?php
 +
PHP code
 +
?>
 +
 +
html code
 +
 +
<?php
 +
some more PHP code
 +
?>
 +
</pre>
 +
 +
====example of incorrect PHP code 1====
 +
<pre class="brush: php; gutter: false;">
 +
<?php
 +
php code
 +
 +
  <?php
 +
  some more php code
 +
  ?>
 +
 +
?>
 +
</pre>
 +
 +
====example of incorrect PHP code 2====
 +
<pre class="brush: php; gutter: false;">
 +
<?php
 +
html code
 +
?>
 +
</pre>
 +
 +
====example of incorrect PHP code 3====
 +
<pre class="brush: php; gutter: false;">
 +
<?php
 +
php code
 +
?>
 +
 +
more php code
 +
</pre>
 +
 +
 +
=== Introduction ===
 +
 +
Please note that code shown is for a particular child theme and for a specific version used when writing the articles. It would usually have to be modified to suit your needs. All code samples use certain selector names (for menus, for builder selectors etc.) This is entirely arbitrary, and it is ''highly unlikely'' that your selectors are the same. '''You have to adapt the code accordingly'''.
 +
 +
'''All code samples provided here ASSUME that it will be placed in already existing PHP tags. Therefore, you will not find an opening <?php code at the start, or a closing ?> tag at the end.'''
 +
 +
=== How to assign odd and even classes to menu items in nav bar ===
 +
 +
One typical usage of this would be to set different background colors to alternate menu items.
 +
 +
[[File:2013-02-02 21-15-52.png|567px|thumb|none]]
 +
 +
Add the following at the end of child theme's <code>functions.php</code>:
 +
 +
<pre class="brush: php; gutter: false;">
 +
// Assign even and odd classes to nav bar menu items
 +
 +
add_action('wp_enqueue_scripts', 'add_my_code_1');
 +
 +
function add_my_code_1() {
 +
    add_action( 'print_footer_scripts', 'my_footer_script_1' );
 +
}
 +
 +
function my_footer_script_1() { ?>
 +
    <script type="text/javascript">
 +
        jQuery(document).ready(function($) {
 +
        $("#menu-main-menu > li:nth-child(odd)").addClass("odd");
 +
        $("#menu-main-menu > li:nth-child(even)").addClass("even");
 +
        });
 +
    </script>
 +
<?php }
 +
</pre>
 +
 +
where <code>menu-main-menu</code> is the CSS ID of custom menu shown in the nav bar.
 +
 +
Add the following at the end of child theme's <code>style.css</code> (WP dashboard -> Appearance -> Editor):
 +
 +
<pre class="brush: css; gutter: false;">
 +
.builder-module-navigation li.even a {
 +
    background: red;
 +
}
 +
 +
.builder-module-navigation li.odd a {
 +
    background: blue;
 +
}
 +
 +
.builder-module-navigation li.even li a,
 +
.builder-module-navigation li.odd li a {
 +
    background: #FFF;
 +
}
 +
 +
.builder-module-navigation li a:hover,
 +
.builder-module-navigation li.even li a:hover,
 +
.builder-module-navigation li.odd li a:hover {
 +
    background: #333;
 +
    color: #FFF;
 +
}
 +
 +
.builder-module-navigation .current_page_item.even a, .builder-module-navigation .current_page_item.odd a
 +
.builder-module-navigation .current-cat.even a, .builder-module-navigation .current-cat.odd a
 +
.builder-module-navigation .current-menu-item.even a, .builder-module-navigation .current-menu-item.odd a {
 +
background: #333;
 +
}
 +
 +
.builder-module-navigation li a,
 +
.builder-module-navigation .current_page_item li a,
 +
.builder-module-navigation .current-cat li a {
 +
color: #FFF;
 +
}
 +
 +
.builder-module-navigation li li a {
 +
    color: #333;
 +
}
 +
</pre>
 +
 +
Ex.:
 +
 +
[http://www.wpcon186.info/ Live Demo]. Code used on this site: [http://pastebin.com/Kwr3Q1g7 functions.php], [http://pastebin.com/irx9GtC8 style.css].
 +
 +
=== How to spread/space out menu items equally across the nav bar ===
 +
 +
[[File:Screen Shot 2013-02-02 at 9.43.51 PM.png|800px|thumb|none|Before]]
 +
 +
[[File:Screen Shot 2013-02-02 at 9.39.19 PM.png|800px|thumb|none|After]]
 +
 +
Add the following at the end of child theme's <code>functions.php</code> but '''before''' a closing <code>?></code>, if any):
 +
 +
<pre class="brush: php; gutter: false;">
 +
// =========================================
 +
// = Space out nav bar menu items equally =
 +
// =========================================
 +
 +
// load javascript in the footer
 +
add_action('wp_enqueue_scripts', 'add_my_code_37742');
 +
function add_my_code_37742() {
 +
        add_action( 'print_footer_scripts', 'my_footer_script_37742' );
 +
}
 +
 +
// Add Javascript to footer
 +
function my_footer_script_37742() { ?>
 +
 +
<script type="text/javascript">
 +
 +
jQuery(document).ready(function($) {
 +
 +
        var menuItems = $("ul#menu-main-menu").children().length;
 +
        var menuWidth = $("ul#menu-main-menu").width();
 +
        var percentage = (menuWidth / menuItems) / (menuWidth / 100);
 +
 +
        $("ul#menu-main-menu").children().each(function() {
 +
                $(this).css('width',  percentage + '%');
 +
        });
 +
 +
});
 +
 +
</script>
 +
 +
<?php }
 +
</pre>
 +
 +
where <code>menu-main-menu</code> is the ID of custom menu shown in the nav bar.
 +
 +
Add the following at the end of child theme's <code>style.css</code> (WP dashboard -> Appearance -> Editor):
 +
 +
<pre class="brush: css; gutter: false;">
 +
/*********************************************
 +
    Space out nav bar menu items equally
 +
*********************************************/
 +
 +
.builder-module-navigation ul {
 +
width: 100%;
 +
}
 +
 +
.builder-module-navigation li a, .builder-module-navigation .current_page_item li a, .builder-module-navigation .current-cat li a {
 +
text-align: center;
 +
}
 +
</pre>
 +
 +
Thanks to Ronald. Source: http://ithemes.com/forum/topic/37742-navigation-spread-items-to-length-of-the-nav-bar/#entry173441
 +
 +
=== How to add a slow transition effect for second level menus in nav bar ===
 +
 +
[http://jsfiddle.net/ronald/nBFm3/ Live Demo]
 +
 +
Add the following at the end of child theme's <code>functions.php</code>:
 +
 +
<pre class="brush: php; gutter: false;">
 +
// =========================================
 +
// = Smoothen transition of 2nd level menu =
 +
// =========================================
 +
 +
// load javascript in footer
 +
add_action('wp_enqueue_scripts', 'add_my_code_2');
 +
function add_my_code_2() {
 +
add_action( 'print_footer_scripts', 'print_my_footer_scripts_2' );
 +
}
 +
 +
// Add required javascript to footer (for delayed opening of subnav)
 +
function print_my_footer_scripts_2() { ?>
 +
 +
<script type='text/javascript'>
 +
jQuery(document).ready(function($) {
 +
    $("#menu-main-menu li").hover(function(){
 +
    $(this).find('ul:first').css({visibility: "visible",display: "none"}).show(400);
 +
    },function(){
 +
    $(this).find('ul:first').css({visibility: "hidden"});
 +
});
 +
 +
});
 +
</script>
 +
 +
<?php }
 +
</pre>
 +
 +
where <code>menu-main-menu</code> is the CSS ID of custom menu (usually <code>&lt;ul id="menu-main-menu"></code>) shown in the nav bar. This is entirely arbitrary, and it is highly unlikely that your selectors are the same. You need to adapt the code accordingly.
 +
 +
<u>Alternate Method</u>:
 +
 +
Go to My Theme -> Settings -> Analytics and JavaScript Code. Paste the following in the text area under
 +
 +
"List any JavaScript or other code to be manually inserted inside the site's <head> tag in the input below."
 +
 +
<pre class="brush:php; gutter: false;">
 +
<script type='text/javascript'>
 +
jQuery(document).ready(function($) {
 +
    $("#menu-main-menu li").hover(function(){
 +
    $(this).find('ul:first').css({visibility: "visible",display: "none"}).show(400);
 +
    },function(){
 +
    $(this).find('ul:first').css({visibility: "hidden"});
 +
});
 +
 +
});
 +
</script>
 +
</pre>
 +
 +
where <code>menu-main-menu</code> is the CSS ID of custom menu shown in the nav bar.
 +
 +
Save settings.
 +
 +
 +
Thanks to Ronald. Source: http://ithemes.com/forum/topic/30998-is-it-possible-to-add-a-slow-transition-effect-to-the-navbar/#entry144025
 +
 +
Another similar forum topic: http://ithemes.com/forum/topic/21002-navigation-with-animated-effect/
 +
 +
=== How to Clear Placeholder Text Upon Focus in Gravity Forms Fields ===
 +
 +
[http://wordpress.org/extend/plugins/gravity-forms-placeholders/ Gravity Forms - Placeholders add-on] plugin can be used to add HTML5 placeholder support to Gravity Forms' fields with a javascript fallback. <code>gplaceholder</code> CSS class should be added to text fields or textareas as needed, or to the form itself to enable this feature to all fields within it.
 +
 +
Ex.:
 +
 +
[[File:2013-02-04 20-35-47.png|513px|thumb|none]]
 +
 +
Now all Gravity Forms' field labels will appear inside the fields as placeholder text.
 +
 +
<gallery>
 +
File:Screen Shot 2013-02-04 at 8.39.24 PM.png|Before
 +
File:Screen Shot 2013-02-04 at 8.39.33 PM.png|After
 +
</gallery>
 +
 +
The placeholder text will continue to appear when clicked or tabbed to inside a field, but will disappear when user starts typing.
 +
 +
If you would like the fields' placeholder text to be cleared when a field gets focus, add the following at the end of child theme's <code>functions.php</code>:
 +
 +
<pre class="brush: php; gutter: false;">
 +
// =========================================
 +
// = Auto hide placeholder text upon focus =
 +
// =========================================
 +
 +
// load javascript in footer
 +
add_action('wp_enqueue_scripts', 'add_my_code_3');
 +
 +
function add_my_code_3() {
 +
    add_action( 'print_footer_scripts', 'my_footer_script_3' );
 +
}
 +
 +
// Add jQuery to footer
 +
 +
function my_footer_script_3() { ?>
 +
    <script type="text/javascript">
 +
        jQuery(document).ready(function($) {
 +
            $('.gform_wrapper').find(':input').each(function() {
 +
                $(this).data('saveplaceholder', $(this).attr('placeholder'));
 +
 +
                $(this).focusin(function() {
 +
                    $(this).attr('placeholder', '');
 +
                });
 +
 +
                $(this).focusout(function() {
 +
                    $(this).attr('placeholder', $(this).data('saveplaceholder'));
 +
                });
 +
 +
            })
 +
        })
 +
    </script>
 +
<?php }
 +
</pre>
 +
 +
Thanks to Ronald for providing this code [http://jsfiddle.net/ronald/KfZTp/ here].
 +
 +
=== Loading Script in Footer on All Pages Except One ===
 +
 +
Ex.:
 +
 +
<pre class="brush: php; gutter: false;">
 +
/* JMAC script load */
 +
// load jquery and prepare javascript in footer
 +
add_action('wp_enqueue_scripts', 'jmac_scripts_method');
 +
function jmac_scripts_method() {
 +
wp_enqueue_script('jquery');
 +
    add_action('print_footer_scripts', 'jmac_print_footer_scripts');
 +
}
 +
 +
// Add required javascript to footer
 +
function jmac_print_footer_scripts() { if(!is_page('videoconferencing')) { ?>
 +
<script type="text/javascript">
 +
jQuery(document).ready(function($) {
 +
function toggleVideo(state) {
 +
    // if state == 'hide', hide. Else: show video
 +
    var div = document.getElementById("popupVid");
 +
    var iframe = div.getElementsByTagName("iframe")[0].contentWindow;
 +
    div.style.display = state == 'hide' ? 'none' : '';
 +
    func = state == 'hide' ? 'pauseVideo' : 'playVideo';
 +
    iframe.postMessage('{"event":"command","func":"' + func + '","args":""}','*');
 +
}
 +
 +
});
 +
</script>
 +
<?php
 +
} }
 +
/* JMAC script load end */
 +
</pre>
 +
 +
Note: The focus of this wiki entry is not what the jQuery code does, but rather the if conditional used:
 +
 +
<code>if(!is_page('videoconferencing'))</code>
 +
 +
where "videoconferencing" is the slug of Page in which jQuery code should NOT be loaded.
 +
 +
Forum topic: http://ithemes.com/forum/topic/33305-script-in-footer-on-all-pages-except-one/
 +
 +
=== Loading Script in Footer Only on Site's Front Page ===
 +
 +
Ex.:
 +
 +
<pre class="brush: php; gutter: false;">
 +
// prepare javascript in footer
 +
add_action('wp_enqueue_scripts', 'add_my_script_4');
 +
 +
function add_my_script_4() {
 +
add_action( 'print_footer_scripts', 'home_page_only_script' );
 +
}
 +
 +
 +
// Add javascript to footer
 +
function home_page_only_script() {
 +
    if ( is_front_page() ) : ?>
 +
        <script type="text/javascript">
 +
        //your javascript here...
 +
        </script>
 +
<?php endif;
 +
}
 +
</pre>
 +
 +
Thanks to Ronald. Source: http://ithemes.com/forum/topic/33473-adding-javascipt-to-home-page/#entry155302
 +
 +
=== How to Create a "Stay-On-Top" element ===
 +
 +
==== Method 1 ====
 +
 +
Live Demos: [http://ithemes.com/ iThemes.com], [http://training.ithemes.com/ WebDesign.com]
 +
 +
[[File:Parent page Builder Responsive Test Site.png|800px|thumb|none|Standard nav bar]]
 +
 +
As the user scrolls down..
 +
 +
[[File:2013-02-14 16-52-24.png|800px|thumb|none|As user scrolls below past the standard nav bar, it gets replaced by a nav bar in a fixed position at the top of browser. When user scrolls to top, it goes away]]
 +
 +
'''1.''' Identify the selector of the element that you wish to stay on top. Firebug can be used for this.
 +
 +
Ex.: <code>.builder-module-navigation-background-wrapper</code> in case of a navigation module.
 +
 +
'''2.''' Add the following at the end of child theme's <code>functions.php</code> (before closing PHP tag, if present):
 +
 +
<pre class="brush: php; gutter: false;">
 +
// =========================================
 +
// = "Stay-On-Top" element =
 +
// =========================================
 +
 +
add_action('wp_enqueue_scripts', 'add_my_code');
 +
 +
function add_my_code() {
 +
    add_action( 'print_footer_scripts', 'my_footer_script' );
 +
}
 +
 +
 +
function my_footer_script() { ?>
 +
 +
  <script type="text/javascript">
 +
 +
    jQuery(function($) {
 +
 +
      var filter = $('.builder-module-navigation-background-wrapper');
 +
 +
      pos = filter.offset();
 +
 +
      var filterSpacer = $('<div />', {
 +
        "class": "filter-drop-spacer",
 +
        "height": filter.outerHeight()
 +
      });
 +
 +
      var fixed = false;
 +
 +
      $(window).scroll(function() {
 +
 +
        if($(this).scrollTop() >= pos.top+filter.height() )
 +
 +
          {
 +
            if( !fixed )
 +
              {
 +
                fixed = true;
 +
 +
                filter.fadeOut('fast', function() {
 +
                  $(this).addClass('fixed').fadeIn('fast');
 +
                  // $('.search_in_nav, .my-social-icons').hide();
 +
                  $(this).before(filterSpacer);
 +
                  });
 +
              }
 +
          }
 +
 +
          else
 +
 +
          {
 +
            if( fixed )
 +
              {
 +
                fixed = false;
 +
 +
                filter.fadeOut('fast', function() {
 +
                  $(this).removeClass('fixed').fadeIn('fast');
 +
                  // $('.search_in_nav, .my-social-icons').show();
 +
                  filterSpacer.remove();
 +
                });
 +
              }
 +
        }
 +
      });
 +
 +
    });
 +
 +
  </script>
 +
 +
<?php }
 +
</pre>
 +
 +
In the above, enter the selector from step 1 in the following line:
 +
 +
var filter = $('.builder-module-navigation-background-wrapper');
 +
 +
(Optional) If you would like to hide any children of the element in fixed state, specify their selectors in the line below and remove the comment.
 +
 +
<pre class="brush: php; gutter: false;">
 +
// $('.search_in_nav, .my-social-icons').hide();
 +
</pre>
 +
 +
Remember to do similarly in the line below:
 +
 +
<pre class="brush: php; gutter: false;">
 +
// $('.search_in_nav, .my-social-icons').show();
 +
</pre>
 +
 +
'''3.''' Add the following at the end of child theme's style.css (WP dashboard -> Appearance -> Editor):
 +
 +
<pre class="brush: css; gutter: false;">
 +
.builder-module-navigation-background-wrapper.fixed {
 +
position: fixed;
 +
left: 0;
 +
top: 0;
 +
width: 100%;
 +
 +
-webkit-box-shadow: 0 0 40px #222;
 +
-moz-box-shadow: 0 0 40px #222;
 +
box-shadow: 0 0 40px #222;
 +
 +
background: rgba(255, 255, 255, 0.92);
 +
z-index: 100;
 +
}
 +
 +
.admin-bar .builder-module-navigation-background-wrapper.fixed {
 +
top: 28px;
 +
}
 +
</pre>
 +
 +
In the above CSS code, ensure that correct selector is being used.
 +
 +
Source: http://www.1stwebdesigner.com/tutorials/create-stay-on-top-menu-css3-jquery/ and http://ithemes.com/wp-content/themes/iThemes2012/js/ui.js
 +
 +
==== Method 2: Using Sticky jQuery plugin in iThemes Builder  ====
 +
 +
Below instructions can be used to make nav bar and a widget as sticky (fixed position and always visible) using the Sticky jQuery plugin.
 +
 +
{{#ev:youtube|Pv8dZcmMr9E|640|none|Watch in 1080p HD and in full screen for best viewing experience}}
 +
 +
Please note that I have tested it only in Builder Default child theme. Numbers in the code and CSS may have to be adjusted for other child themes.
 +
 +
'''1.''' Download [http://stickyjs.com/ Sticky jQuery plugin]. Extract the zip file and upload jquery.sticky.js to /assets/sticky under site root.
 +
 +
'''2.''' Add the following in child theme's <code>functions.php</code> (before closing PHP tag if any):
 +
 +
<pre class="brush: php; gutter: false;">
 +
add_action('wp_enqueue_scripts', 'add_my_code');
 +
 +
function add_my_code() {
 +
wp_enqueue_script( 'jquery-sticky', get_bloginfo('wpurl') . '/assets/sticky/jquery.sticky.js', array('jquery'), '1.0', true );
 +
    add_action( 'print_footer_scripts', 'my_footer_script' );
 +
}
 +
 +
function my_footer_script() { ?>
 +
 +
 +
    <?php if(is_admin_bar_showing()) : ?>
 +
    <script type="text/javascript">
 +
    jQuery(function($) {
 +
            $(".builder-module-navigation").sticky({topSpacing: 28, getWidthFrom: ".builder-module-navigation-outer-wrapper"});
 +
            $("#meta-5").sticky({topSpacing: 64});
 +
        });
 +
    </script>
 +
 +
<?php else : ?>
 +
 +
    <script type="text/javascript">
 +
        jQuery(function($) {
 +
            $(".builder-module-navigation").sticky({topSpacing: 0, getWidthFrom: ".builder-module-navigation-outer-wrapper"});
 +
            $("#meta-5").sticky({topSpacing: 36});
 +
        });
 +
    </script>
 +
 +
    <?php endif;
 +
 +
 +
} ?>
 +
</pre>
 +
 +
In the above,
 +
 +
a) replace <code>meta-5</code> with the ID of widget that you would like to make sticky.
 +
 +
b) replace 36 with height of nav bar
 +
 +
c) replace 64 with height of nav bar + 28
 +
 +
'''3.''' Add the following at the end of child theme's style.css (WP dashboard -> Appearance -> Editor):
 +
 +
<pre class="brush:css; gutter: false;">
 +
.sticky-wrapper.is-sticky .builder-module-navigation {
 +
border-bottom: 1px solid #d6d6d6;
 +
box-shadow: 0px 0px 16px rgba(0,0,0,0.1);
 +
}
 +
 +
.builder-module-content .widget {
 +
background: #DDD;
 +
border-bottom: 3px solid #F1F0F0;
 +
width: 264px !important;
 +
}
 +
</pre>
 +
 +
In the above replace 264 with width of widget w/o left and right padding.
 +
 +
=== How to Style All First Words of Widget Titles Differently ===
 +
 +
[[File:Screen Shot 2013-03-20 at 9.31.42 AM.png|216px|thumb|none]]
 +
 +
'''1.''' Add the following in child theme's <code>functions.php</code> (before closing PHP tag if any):
 +
 +
<pre class="brush: php; gutter: false;">
 +
// ==================================================
 +
// = Assign a Class to First Word of Widget Titles =
 +
// ==================================================
 +
 +
// load javascript in footer
 +
 +
add_action('wp_enqueue_scripts', 'add_my_code');
 +
 +
function add_my_code() {
 +
add_action( 'print_footer_scripts', 'my_footer_script' );
 +
}
 +
 +
// Add jQuery to footer
 +
 +
function my_footer_script() { ?>
 +
 +
    <script type="text/javascript">
 +
    jQuery(function($) {
 +
 +
$('.builder-module-sidebar h4.widget-title').each(function() {
 +
  var h = $(this).html();
 +
  var index = h.indexOf(' ');
 +
  if(index == -1) {
 +
      index = h.length;
 +
  }
 +
  $(this).html('<span class="widget-title-first-word">' + h.substring(0, index) + '</span>' + h.substring(index, h.length));
 +
});
 +
 +
    });
 +
    </script>
 +
 +
<?php }
 +
</pre>
 +
 +
'''2.''' Add the following at the end of child theme's <code>style.css</code> (WP dashboard -> Appearance -> Editor):
 +
 +
<pre class="brush: css; gutter: false;">
 +
/****************************************************
 +
    Styling First Word of Widget Titles
 +
*****************************************************/
 +
 +
.widget-title-first-word {
 +
    color: red;
 +
}
 +
</pre>
 +
 +
Source: http://blog.codez.in/jquery-css-styling-first-word-of-a-text-differently/jquery/2010/08/23
 +
 +
=== How to incorporate jQuery Kwicks Accordion in Builder ===
 +
 +
See [http://ithemes.com/forum/topic/40780-jquery-kwiks/#entry183718 this] forum post.
 +
 +
=== Animated Responsive Image Grid ===
 +
 +
Below is how I implemented a jQuery plugin by [http://tympanus.net/Development/AnimatedResponsiveImageGrid/ codrops] in WordPress for creating a responsive image grid that will switch images using different animations and timings.
 +
 +
[http://websitesetuppro.com/demos/builder-responsive/animated-responsive-image-grid/ Live Demo]
 +
 +
'''1.''' Downloaded source, extracted zip file and uploaded the <code>AnimatedResponsiveImageGrid</code> folder to <code>/assets</code>
 +
 +
[[File:2013-04-10 14-17-19.png|365px|thumb|none]]
 +
 +
'''2.''' Added the following at the end of child theme's <code>functions.php</code>:
 +
 +
<pre class="brush: php; gutter: false;">
 +
 +
// =========================================
 +
// = My Changes Below =
 +
// =========================================
 +
 +
 +
// load javascript and styles in footer or head
 +
 +
// only on http://websitesetuppro.com/demos/builder-responsive/animated-responsive-image-grid/
 +
add_action('wp_enqueue_scripts', 'AnimatedResponsiveImageGrid_code');
 +
 +
function AnimatedResponsiveImageGrid_code() {
 +
    if(is_page( '1155' )) {
 +
    wp_enqueue_script( 'modernizr', get_bloginfo('wpurl') . '/assets/AnimatedResponsiveImageGrid/js/modernizr.custom.26633.js', '2.6.2', false ); /* in head */
 +
        wp_enqueue_script( 'AnimatedResponsiveImageGrid', get_bloginfo('wpurl') . '/assets/AnimatedResponsiveImageGrid/js/jquery.gridrotator.js', array('jquery'), true );
 +
 +
        wp_enqueue_style( 'AnimatedResponsiveImageGrid-style', get_bloginfo('wpurl') . '/assets/AnimatedResponsiveImageGrid/css/style.css' );
 +
    }
 +
}
 +
 +
 +
 +
add_action('wp_enqueue_scripts', 'add_my_code');
 +
 +
function add_my_code() {
 +
 +
    add_action( 'print_footer_scripts', 'my_footer_script' );
 +
}
 +
 +
// Add jQuery to footer
 +
 +
function my_footer_script() { ?>
 +
 +
 +
    <!-- only on http://websitesetuppro.com/demos/builder-responsive/animated-responsive-image-grid/ -->
 +
    <?php if(is_page( '1155' )) { ?>
 +
    <script type="text/javascript">
 +
        jQuery(function($) {
 +
            $( '#ri-grid' ).gridrotator( {
 +
w320 : {
 +
rows : 3,
 +
columns : 4
 +
},
 +
w240 : {
 +
rows : 3,
 +
columns : 3
 +
}
 +
} );
 +
 +
$( '#ri-grid-2' ).gridrotator( {
 +
rows : 3,
 +
columns : 15,
 +
animType : 'fadeInOut',
 +
animSpeed : 1000,
 +
interval : 600,
 +
step : 1,
 +
w320 : {
 +
rows : 3,
 +
columns : 4
 +
},
 +
w240 : {
 +
rows : 3,
 +
columns : 4
 +
}
 +
} );
 +
        });
 +
    </script>
 +
    <?php }
 +
 +
 +
}
 +
</pre>
 +
 +
'''3.'''
 +
 +
a) Placed this (in Text view) in "Animated Responsive Image Grid" Page:
 +
 +
<pre class="brush: html; gutter: false;">
 +
<h2>Demo 1: Random animations / 55% container width / 3s between switching</h2>
 +
 +
<div id="ri-grid" class="ri-grid ri-grid-size-1 ri-shadow">
 +
<img class="ri-loading-image" src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/loading.gif"/>
 +
<ul>
 +
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/1.jpg"/></a></li>
 +
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/2.jpg"/></a></li>
 +
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/3.jpg"/></a></li>
 +
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/4.jpg"/></a></li>
 +
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/5.jpg"/></a></li>
 +
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/6.jpg"/></a></li>
 +
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/7.jpg"/></a></li>
 +
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/8.jpg"/></a></li>
 +
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/9.jpg"/></a></li>
 +
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/10.jpg"/></a></li>
 +
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/11.jpg"/></a></li>
 +
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/12.jpg"/></a></li>
 +
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/13.jpg"/></a></li>
 +
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/14.jpg"/></a></li>
 +
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/15.jpg"/></a></li>
 +
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/16.jpg"/></a></li>
 +
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/17.jpg"/></a></li>
 +
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/18.jpg"/></a></li>
 +
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/19.jpg"/></a></li>
 +
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/20.jpg"/></a></li>
 +
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/21.jpg"/></a></li>
 +
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/22.jpg"/></a></li>
 +
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/23.jpg"/></a></li>
 +
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/24.jpg"/></a></li>
 +
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/25.jpg"/></a></li>
 +
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/26.jpg"/></a></li>
 +
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/27.jpg"/></a></li>
 +
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/28.jpg"/></a></li>
 +
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/29.jpg"/></a></li>
 +
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/30.jpg"/></a></li>
 +
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/31.jpg"/></a></li>
 +
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/32.jpg"/></a></li>
 +
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/33.jpg"/></a></li>
 +
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/34.jpg"/></a></li>
 +
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/35.jpg"/></a></li>
 +
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/36.jpg"/></a></li>
 +
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/37.jpg"/></a></li>
 +
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/38.jpg"/></a></li>
 +
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/39.jpg"/></a></li>
 +
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/40.jpg"/></a></li>
 +
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/41.jpg"/></a></li>
 +
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/42.jpg"/></a></li>
 +
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/43.jpg"/></a></li>
 +
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/44.jpg"/></a></li>
 +
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/45.jpg"/></a></li>
 +
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/46.jpg"/></a></li>
 +
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/47.jpg"/></a></li>
 +
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/48.jpg"/></a></li>
 +
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/49.jpg"/></a></li>
 +
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/50.jpg"/></a></li>
 +
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/51.jpg"/></a></li>
 +
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/52.jpg"/></a></li>
 +
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/53.jpg"/></a></li>
 +
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/54.jpg"/></a></li>
 +
</ul>
 +
</div>
 +
</pre>
 +
 +
b) Placed this in HTML module below the content module in layout used by that Page:
 +
 +
<pre class="brush: html; gutter: false;">
 +
<h2 style="margin-left: 1em; margin-right: 1em;">Demo 2: "fadeInOut" animation / 100% container width / 1 image switch at a time / 600ms between switching</h2>
 +
 +
<div id="ri-grid-2" class="ri-grid ri-grid-size-2">
 +
<img class="ri-loading-image" src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/loading.gif"/>
 +
<ul>
 +
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/1.jpg"/></a></li>
 +
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/2.jpg"/></a></li>
 +
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/3.jpg"/></a></li>
 +
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/4.jpg"/></a></li>
 +
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/5.jpg"/></a></li>
 +
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/6.jpg"/></a></li>
 +
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/7.jpg"/></a></li>
 +
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/8.jpg"/></a></li>
 +
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/9.jpg"/></a></li>
 +
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/10.jpg"/></a></li>
 +
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/11.jpg"/></a></li>
 +
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/12.jpg"/></a></li>
 +
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/13.jpg"/></a></li>
 +
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/14.jpg"/></a></li>
 +
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/15.jpg"/></a></li>
 +
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/16.jpg"/></a></li>
 +
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/17.jpg"/></a></li>
 +
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/18.jpg"/></a></li>
 +
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/19.jpg"/></a></li>
 +
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/20.jpg"/></a></li>
 +
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/21.jpg"/></a></li>
 +
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/22.jpg"/></a></li>
 +
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/23.jpg"/></a></li>
 +
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/24.jpg"/></a></li>
 +
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/25.jpg"/></a></li>
 +
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/26.jpg"/></a></li>
 +
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/27.jpg"/></a></li>
 +
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/28.jpg"/></a></li>
 +
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/29.jpg"/></a></li>
 +
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/30.jpg"/></a></li>
 +
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/31.jpg"/></a></li>
 +
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/32.jpg"/></a></li>
 +
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/33.jpg"/></a></li>
 +
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/34.jpg"/></a></li>
 +
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/35.jpg"/></a></li>
 +
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/36.jpg"/></a></li>
 +
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/37.jpg"/></a></li>
 +
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/38.jpg"/></a></li>
 +
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/39.jpg"/></a></li>
 +
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/40.jpg"/></a></li>
 +
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/41.jpg"/></a></li>
 +
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/42.jpg"/></a></li>
 +
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/43.jpg"/></a></li>
 +
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/44.jpg"/></a></li>
 +
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/45.jpg"/></a></li>
 +
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/46.jpg"/></a></li>
 +
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/47.jpg"/></a></li>
 +
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/48.jpg"/></a></li>
 +
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/49.jpg"/></a></li>
 +
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/50.jpg"/></a></li>
 +
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/51.jpg"/></a></li>
 +
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/52.jpg"/></a></li>
 +
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/53.jpg"/></a></li>
 +
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/54.jpg"/></a></li>
 +
</ul>
 +
</div>
 +
</pre>
 +
 +
'''4.''' Added the following at the end of child theme's <code>style.css</code> (WP dashboard -> Appearance -> Editor):
 +
 +
<pre class="brush: css; gutter: false;">
 +
/* http://websitesetuppro.com/demos/builder-responsive/animated-responsive-image-grid/ */
 +
 +
.ri-grid-size-1 {
 +
    width: 90% !important;
 +
}
 +
 +
.ri-grid ul li,
 +
.ri-grid ul li a {
 +
    width: 98px !important;
 +
    height: 97px !important;
 +
}
 +
 +
#builder-module-516519f61bcba-outer-wrapper {
 +
    max-width: 100% !important;
 +
}
 +
 +
#ri-grid-2 ul li,
 +
#ri-grid-2 ul li a {
 +
    width: 94px !important;
 +
    height: 94px !important;
 +
}
 +
 +
.page-id-1155 .builder-module-content .builder-module-element {
 +
margin-bottom: 0 !important;
 +
}
 +
 +
.page-id-1155 .hentry {
 +
margin-bottom: 0;
 +
}
 +
</pre>
 +
 +
=== Easy Accordion jQuery plugin in iThemes Builder ===
 +
 +
[http://buildersnippets.com/easy-accordion-test-page/ Live Demo] [Note: Due to differences in CSS properties like font sizes between child themes and other minor customizations, the demo (which uses Air child theme) looks slightly different than the screenshot below, which was taken in Default child theme]
 +
 +
[[File:Easy Accordion Test Page - WordPress Dev Site 2013-04-30 13-03-49.png|441px|thumb|none]]
 +
 +
[http://www.madeincima.it/en/articles/resources-and-tools/easy-accordion-plugin/ Easy Accordion] is a jQuery plugin to create a horizontal accordion and is a free alternative to Slidedeck.
 +
 +
The following steps outline how the [http://www.madeincima.it/download/samples/jquery/easyAccordion/ plugin's demo] can be set up in a WordPress site running iThemes Builder. Once you have the following working, you can then edit the HTML, javascript parameters and CSS to suit your needs.
 +
 +
'''1.''' Download the full sample zip file from [http://www.madeincima.it/en/articles/resources-and-tools/easy-accordion-plugin/ here] under the Conclusion section. Extract the zip file and upload the resulting <code>jQuery-easyAccordion</code> folder to <code>assets</code> directory under your site's root.
 +
 +
'''2.''' Upload all the contents of <code>jQuery-easyAccordion/images</code> folder to active child theme's <code>images</code> directory.
 +
 +
'''3.''' Wherever you want the Easy Accordion to appear (in a Page or Post or HTML module etc), paste the following:
 +
 +
<pre class="brush: html; gutter: false;">
 +
<div class="sample">
 +
        <h1>jQuery Easy Accordion Plugin</h1>
 +
       
 +
        <h2>Horizontal Accordion with Autoplay</h2>
 +
        <p>Set the '<strong>autoStart</strong>' parameter to '<strong>true</strong>' to get a timed slideshow. You can also define the interval between each slide in milliseconds using the '<strong>slideInterval</strong>' parameter.</p>
 +
        <div id="accordion-1">
 +
            <dl>
 +
                <dt>First slide</dt>
 +
                <dd><h2>This is the first slide</h2><p><img src="http://buildersnippets.com/assets/jQuery-easyAccordion/images/monsters/img1.png" alt="Alt text to go here" />Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, enim.<br /><a href="#" class="more">Read more</a></p></dd>
 +
                <dt>Second slide</dt>
 +
                <dd><h2>Here is the second slide</h2><p><img src="http://buildersnippets.com/assets/jQuery-easyAccordion/images/monsters/img2.png" alt="Alt text to go here" />Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, enim.<br /><a href="#" class="more">Read more</a></p></dd>
 +
                <dt>One more slide</dt>
 +
                <dd><h2>One more slide to go here</h2><p><img src="http://buildersnippets.com/assets/jQuery-easyAccordion/images/monsters/img3.png" alt="Alt text to go here" />Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, enim.<br /><a href="#" class="more">Read more</a></p></dd>
 +
                <dt>Another slide</dt>
 +
                <dd><h2>Another slide to go here</h2><p><img src="http://buildersnippets.com/assets/jQuery-easyAccordion/images/monsters/img4.png" alt="Alt text to go here" />Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, enim.<br /><a href="#" class="more">Read more</a></p></dd>
 +
                <dt>Wow one more</dt>
 +
                <dd><h2>Unbilievable one more slide here</h2><p><img src="http://buildersnippets.com/assets/jQuery-easyAccordion/images/monsters/img5.png" alt="Alt text to go here" />Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, enim.<br /><a href="#" class="more">Read more</a></p></dd>
 +
                <dt>Last one</dt>
 +
                <dd><h2>This is definitely the last one</h2><p><img src="http://buildersnippets.com/assets/jQuery-easyAccordion/images/monsters/img6.png" alt="Alt text to go here" />Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, enim.<br /><a href="#" class="more">Read more</a></p></dd>
 +
            </dl>
 +
        </div>
 +
       
 +
        <h2>Simple Horizontal Accordion</h2>
 +
        <p>If you don't specify the '<strong>autoStart</strong>' parameter or if you set it to '<strong>false</strong>' you get a simple slideshow.</p>
 +
 +
        <div id="accordion-2">
 +
            <dl>
 +
                <dt>Slide title</dt>
 +
                <dd><h2>First mammoth here</h2><p><img src="http://buildersnippets.com/assets/jQuery-easyAccordion/images/mammoths/img1.png" alt="Alt text to go here" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean commodo ligula eget dolor.</p></dd>
 +
                <dt>Another slide</dt>
 +
                <dd><h2>Over the moon!</h2><p><img src="http://buildersnippets.com/assets/jQuery-easyAccordion/images/mammoths/img2.png" alt="Alt text to go here" />Aenean commodo ligula eget dolor. Aenean massa. Nascetur aenean commodo ligula eget dolor. Aenean massa eget. </p></dd>
 +
                <dt>Third slide</dt>
 +
                <dd><h2>Another mammoth</h2><p><img src="http://buildersnippets.com/assets/jQuery-easyAccordion/images/mammoths/img3.png" alt="Alt text to go here" />Ipsum dolor sit amet.Aenean ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur.</p></dd>
 +
                <dt>Last slide</dt>
 +
                <dd><h2>This is my favourite</h2><p><img src="http://buildersnippets.com/assets/jQuery-easyAccordion/images/mammoths/img4.png" alt="Alt text to go here" />Cum sociis natoque penatibus et donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p></dd>
 +
          </dl>
 +
        </div>
 +
       
 +
        <h2>Set the initial Active Slide</h2>
 +
        <p>You can easily set the <strong>initial active slide</strong> by adding the '<strong>active</strong>' class to the respective DT element.
 +
        <br />Notice that you could also remove the slide number by setting the '<strong>slideNum</strong>' parameter to '<strong>false</strong>'.</p>
 +
        <div id="accordion-3">
 +
            <dl>
 +
                <dt>Slide title</dt>
 +
                <dd><h2>First slide here</h2><p><img src="http://buildersnippets.com/assets/jQuery-easyAccordion/images/bugs/img2.png" alt="Alt text to go here" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean commodo ligula eget dolor.</p></dd>
 +
                <dt>Another slide</dt>
 +
                <dd><h2>Title to go here</h2><p><img src="http://buildersnippets.com/assets/jQuery-easyAccordion/images/bugs/img4.png" alt="Alt text to go here" />Aenean commodo ligula eget dolor. Aenean massa. Nascetur aenean commodo ligula eget dolor. Aenean massa eget. </p></dd>
 +
                <dt class="active">Third slide</dt>
 +
                <dd><h2>Here is the title</h2><p><img src="http://buildersnippets.com/assets/jQuery-easyAccordion/images/bugs/img1.png" alt="Alt text to go here" />Ipsum dolor sit amet.Aenean ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur.</p></dd>
 +
                <dt>Last slide</dt>
 +
                <dd><h2>Last slide title</h2><p><img src="http://buildersnippets.com/assets/jQuery-easyAccordion/images/bugs/img3.png" alt="Alt text to go here" />Cum sociis natoque penatibus et donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p></dd>
 +
          </dl>
 +
        </div>
 +
 +
        <p><a href="http://www.madeincima.eu/blog/jquery-plugin-easy-accordion/">Go back to the post!</a></p>
 +
    </div>
 +
</pre>
 +
 +
In the case of [http://buildersnippets.com/easy-accordion-test-page/ my demo], the above code has been placed in a static Page.
 +
 +
'''4.''' Add the following in child theme's <code>functions.php</code> before closing PHP tag (if any):
 +
 +
<pre class="brush: php; gutter: false;">
 +
// load javascript and styles in footer or header
 +
 +
// only on http://buildersnippets.com/easy-accordion-test-page/
 +
add_action('wp_enqueue_scripts', 'easyAccordion_code');
 +
 +
function easyAccordion_code() {
 +
    if(is_page( '127' )) {
 +
        wp_enqueue_script( 'easyAccordion', get_bloginfo('wpurl') . '/assets/jQuery-easyAccordion/scripts/jquery.easyAccordion.js', array('jquery'), '0.1', true );
 +
 +
        wp_enqueue_style( 'easy-accordion', get_bloginfo('wpurl') . '/assets/jQuery-easyAccordion/css/styles.css' );
 +
    }
 +
}
 +
 +
 +
add_action('wp_enqueue_scripts', 'add_my_code_ea');
 +
 +
function add_my_code_ea() {
 +
 +
    add_action( 'print_footer_scripts', 'my_footer_script_ea' );
 +
}
 +
 +
// Add jQuery to footer
 +
 +
function my_footer_script_ea() { ?>
 +
 +
 +
    <!-- only on http://buildersnippets.com/easy-accordion-test-page/ -->
 +
    <?php if(is_page( '127' )) { ?>
 +
    <script type="text/javascript">
 +
        var accordion;
 +
        jQuery(function($) {
 +
        $('#accordion-1').easyAccordion({
 +
autoStart: true,
 +
slideInterval: 3000
 +
});
 +
 +
$('#accordion-2').easyAccordion({
 +
autoStart: false
 +
});
 +
 +
$('#accordion-3').easyAccordion({
 +
autoStart: true,
 +
slideInterval: 5000,
 +
slideNum:false
 +
});
 +
 +
$('#accordion-4').easyAccordion({
 +
autoStart: false,
 +
slideInterval: 5000
 +
});
 +
        });
 +
    </script>
 +
    <?php }
 +
 +
 +
}
 +
</pre>
 +
 +
The <code>if(is_page( '127' ))</code> conditional is in place to ensure that javascript is loaded and called only where needed (in this case, a specific Page vs site-wide). You would need to either change the ID or remove the conditional to suit your needs.
 +
 +
'''5.''' Add the following at the end of child theme's <code>style.css</code> (WP dashboard -> Appearance -> Editor):
 +
 +
<pre class="brush: css; gutter: false;">
 +
/* Easy Accordion Styling */
 +
 +
.sample{border:1px solid #92cdec;background:#d7e7ff;padding:30px}
 +
.easy-accordion h2{margin:0px 0 20px 0;padding:0;font-size:1.6em;}
 +
 +
dd p{line-height:120%}
 +
 +
#accordion-1{width:800px;height:245px;padding:30px;background:#fff;border:1px solid #b5c9e8}
 +
#accordion-1 dl{width:800px;height:245px}
 +
#accordion-1 dt{height:46px;line-height:44px;text-align:right;padding:0 15px 0 0;font-size:1.1em;font-weight:bold;font-family: Tahoma, Geneva, sans-serif;text-transform:uppercase;letter-spacing:1px;background:#fff url(images/slide-title-inactive-1.jpg) 0 0 no-repeat;color:#26526c}
 +
#accordion-1 dt.active{cursor:pointer;color:#fff;background:#fff url(images/slide-title-active-1.jpg) 0 0 no-repeat}
 +
#accordion-1 dt.hover{color:#68889b;}
 +
#accordion-1 dt.active.hover{color:#fff}
 +
#accordion-1 dd{padding:25px;background:url(images/slide.jpg) bottom left repeat-x;border:1px solid #dbe9ea;border-left:0;margin-right:3px}
 +
#accordion-1 .slide-number{color:#68889b;left:10px;font-weight:bold}
 +
#accordion-1 .active .slide-number{color:#fff;}
 +
#accordion-1 a{color:#68889b}
 +
#accordion-1 dd img{float:right;margin:0 0 0 30px;}
 +
#accordion-1 h2{font-size:2.5em;margin-top:10px}
 +
#accordion-1 .more{padding-top:10px;display:block}
 +
 +
#accordion-2{width:700px;height:195px;padding:30px;background:#fff;border:1px solid #b5c9e8}
 +
#accordion-2 h2{font-size:2.5em;margin-top:10px;}
 +
#accordion-2 dl{width:700px;height:195px}
 +
#accordion-2 dt{height:56px;line-height:44px;text-align:right;padding:10px 15px 0 0;font-size:1.1em;font-weight:bold;font-family: Tahoma, Geneva, sans-serif;text-transform:uppercase;letter-spacing:1px;background:#fff url(images/slide-title-inactive-2.jpg) 0 0 no-repeat;color:#26526c}
 +
#accordion-2 dt.active{cursor:pointer;color:#fff;background:#fff url(images/slide-title-active-2.jpg) 0 0 no-repeat}
 +
#accordion-2 dt.hover{color:#68889b;}
 +
#accordion-2 dt.active.hover{color:#fff}
 +
#accordion-2 dd{padding:25px;background:url(images/slide.jpg) bottom left repeat-x;border:1px solid #dbe9ea;border-left:0;margin-right:3px}
 +
#accordion-2 .slide-number{color:#68889b;left:10px;font-weight:bold}
 +
#accordion-2 .active .slide-number{color:#fff}
 +
#accordion-2 a{color:#68889b}
 +
#accordion-2 dd img{float:right;margin:0 0 0 30px;position:relative;top:-20px}
 +
 +
#accordion-3{width:700px;height:195px;padding:30px;background:#fff;border:1px solid #b5c9e8}
 +
#accordion-3 h2{font-size:2.5em;margin-top:10px}
 +
#accordion-3 dl{width:700px;height:195px}
 +
#accordion-3 dt{height:56px;line-height:44px;text-align:right;padding:10px 15px 0 0;font-size:1.1em;font-weight:bold;font-family: Tahoma, Geneva, sans-serif;text-transform:uppercase;letter-spacing:1px;background:#fff url(images/slide-title-inactive-2.jpg) 0 0 no-repeat;color:#26526c}
 +
#accordion-3 dt.active{cursor:pointer;color:#fff;background:#fff url(images/slide-title-active-2.jpg) 0 0 no-repeat}
 +
#accordion-3 dt.hover{color:#68889b;}
 +
#accordion-3 dt.active.hover{color:#fff}
 +
#accordion-3 dd{padding:25px;background:url(images/slide.jpg) bottom left repeat-x;border:1px solid #dbe9ea;border-left:0;margin-right:3px}
 +
#accordion-3 .slide-number{color:#68889b;left:13px;font-weight:bold}
 +
#accordion-3 .active .slide-number{color:#fff}
 +
#accordion-3 a{color:#68889b}
 +
#accordion-3 dd img{float:right;margin:0 0 0 30px;position:relative;top:-20px}
 +
 +
.sample h1 {
 +
margin-top: 0;
 +
line-height: 1;
 +
}
 +
 +
.hentry .easy-accordion img {
 +
background: none;
 +
border: none;
 +
-moz-border-radius: 0;
 +
-webkit-border-radius: 0;
 +
border-radius: 0;
 +
padding: 0;
 +
}
 +
 +
.easy-accordion h2 {
 +
line-height: 1;
 +
margin-top: 0;
 +
}
 +
</pre>
 +
 +
== How to get the output of a Header module in a HTML module ==
 +
 +
Using a HTML module gives more control than a Header module in situations like [http://ithemes.com/forum/topic/38496-problem-with-header-module/ this].
 +
 +
[[File:Header Module Settings.png|463px|thumb|none]]
 +
 +
Output of above Header module can be simulated by using a PHP enabled HTML module having the following code:
 +
 +
<pre class="brush: php; gutter: false;">
 +
<?php if (is_front_page()) : ?>
 +
<h1 class="site-title"><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
 +
 +
<h3 class="site-tagline"><a href="<?php bloginfo('url'); ?>"><?php bloginfo('description'); ?></a></h3>
 +
 +
<?php else : ?>
 +
<h3 class="site-title"><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h3>
 +
 +
<h5 class="site-tagline"><a href="<?php bloginfo('url'); ?>"><?php bloginfo('description'); ?></a></h5>
 +
 +
<?php endif; ?>
 +
</pre>
 +
 +
== How to Show Featured Image Below Navigation Module on Static Pages ==
 +
 +
<code>builder_module_render_navigation</code> hook can be used to inject content below and/or above all nav bars in Builder.
 +
 +
In this example, the goal is to show featured image attached to Pages below the nav bar as a header. This way each Page can have its own unique header image.
 +
 +
[[File:2013-03-22 13-59-21.png|640px|thumb|none]]
 +
 +
[[File:2013-03-22 13-26-02.png|800px|thumb|none]]
 +
 +
'''1.''' Add the following in child theme's <code>functions.php</code> (before closing PHP tag if present):
 +
 +
<pre class="brush: php; gutter: false;">
 +
add_action( 'builder_module_render_navigation', 'show_featured_image', 20 );
 +
 +
function show_featured_image() {
 +
if (has_post_thumbnail() && is_page()) { ?>
 +
<div class="my-featured-image-header">
 +
        <?php the_post_thumbnail(); ?>
 +
    </div>
 +
<?php }
 +
}
 +
</pre>
 +
 +
'''2.''' Add the following at the end of child theme's style.css (WP dashboard -> Appearance -> Editor):
 +
 +
<pre class="brush: css; gutter: false;">
 +
.my-featured-image-header img {
 +
margin-top: 0;
 +
margin-bottom: 0;
 +
vertical-align: top;
 +
}
 +
 +
.builder-module-navigation .builder-module-element-outer-wrapper { /* if needed */
 +
margin-bottom: 0;
 +
}
 +
</pre>
 +
 +
If <code>20</code> in
 +
 +
add_action( 'builder_module_render_navigation', 'show_featured_image', 20 );
 +
 +
is changed to <code>0</code>, then the function will be output ABOVE the nav bar(s).
 +
 +
Forum topic: http://ithemes.com/forum/topic/40690-featured-image-on-each-page/
 +
 +
== How to Fix "Missing required fields" warnings in Structured Data Testing Tool ==
 +
 +
[http://www.google.com/webmasters/tools/richsnippets Rich Snippets Testing Tool] can be used to check whether Google can correctly parse your structured data markup and display it in search results.
 +
 +
Before:
 +
 +
[[File:Screen Shot 2013-03-29 at 6.25.24 PM.png|774px|thumb|none]]
 +
 +
After:
 +
 +
[[File:Screen Shot 2013-03-29 at 6.57.00 PM.png|768px|thumb|none]]
 +
 +
The fix is to edit these active theme (ideally, should be a child theme of Builder) template files (at the minimum): index.php, archive.php, single.php, page.php and search.php.
 +
 +
You might have to edit other/more template files depending on your need. See http://codex.wordpress.org/images/1/18/Template_Hierarchy.png
 +
 +
If any of these files are not present in the child theme, copy them from parent Builder directory into the child theme's directory and edit them.
 +
 +
* Title of the post should be marked with class <code>entry-title</code>
 +
* Posting date should be marked with class <code>updated</code>
 +
* Full name of the post author should be marked with class <code>author</code> accomplished by elements from hCard microformat – <code>vcard</code> and <code>fn</code>
 +
 +
Sample generated HTML code should be:
 +
 +
<pre class="brush:html; gutter: false;">
 +
<span class="entry-title">How to fix "missing required fields" warnings in Rich Snippets Testing Tool</span>
 +
<span class="updated">December 24, 2011</span>
 +
<span class="vcard author"><span class="fn">Anton Khitrenovich</span></span>
 +
</pre>
 +
 +
=== To fix <code>Warning: Missing required field "updated"</code> in Builder ===
 +
 +
Locate the <code>date</code> div and add <code>updated</code> class to it.
 +
 +
Ex.:
 +
 +
Change
 +
 +
<pre class="brush:html; gutter: false;">
 +
<div class="entry-meta date">
 +
</pre>
 +
 +
to
 +
 +
<pre class="brush:html; gutter: false;">
 +
<div class="entry-meta date updated">
 +
</pre>
 +
 +
=== To fix <code>Warning: Missing required hCard "author"</code> in Builder ===
 +
 +
Change
 +
 +
<pre class="brush: php; gutter: false;">
 +
<?php printf( __( 'By %s', 'it-l10n-Builder' ), '<span class="author">' . builder_get_author_link() . '</span>' ); ?>
 +
</pre>
 +
 +
to
 +
 +
<pre class="brush: php; gutter: false;">
 +
<?php printf( __( 'By %s', 'it-l10n-Builder' ), '<span class="vcard author"><span class="fn">' . builder_get_author_link() . '</span></span>' ); ?>
 +
</pre>
 +
 +
Family name and Given names are taken from values entered for Last Name and First Name respectively in author's profile page.
 +
 +
Example of doing the above changes in Kepler child theme: http://ithemes.com/forum/topic/33858-google-rich-snippet-tool-warning-missing-required-field-entry-title/#entry156972
 +
 +
<pre style="white-space: pre-wrap">
 +
Tip: If a static Page is set to be shown on front page, then page.php would be the main file to edit and do the above changes. As it does not have the code for displaying author and date, the below lines can be added in the loop and CSS display property set to none to not show them on the homepage.
 +
</pre>
 +
 +
Ex.:
 +
 +
<pre class="brush:php; gutter: false;">
 +
<div class="entry-meta date updated">
 +
<?php echo get_the_date(); ?>
 +
</div>
 +
 +
<?php printf( __( 'By %s', 'it-l10n-Builder' ), '<span class="vcard author"><span class="fn">' . builder_get_author_link() . '</span></span>' ); ?>
 +
</pre>
 +
 +
was added above
 +
 +
<pre class="brush:php; gutter: false;">
 +
<!-- post content -->
 +
</pre>
 +
 +
[[File:2013-03-29 19-20-58.png|800px|thumb|none]]
 +
 +
In child theme's style.css:
 +
 +
<pre class="brush:css; gutter: false;">
 +
.home .entry-title,
 +
.page .date,
 +
.page .author {
 +
display: none;
 +
}
 +
</pre>
 +
 +
Source:
 +
 +
http://technotes.khitrenovich.com/fix-missing-required-fields-warnings-rich-snippets-testing-tool/
 +
 +
http://nepallica.com/fix-google-rich-snippets-warning-missing-required-field-wordpress/
 +
 +
== How to Make Entire Text Widgets Clickable ==
 +
 +
[[File:2013-03-31 17-48-29.png|237px|thumb|none]]
 +
 +
When a text link is placed in a text widget, only the text will be clickable as hyperlinks are inline elements.
 +
 +
<code>display: block</code> CSS can be used so the entire widget becomes clickable.
 +
 +
Ex.:
 +
 +
Code in a text widget:
 +
 +
<pre class="brush:html; gutter: false;">
 +
<a href="#" class="my-widget-link">Mold Removal and Remediation</a>
 +
</pre>
 +
 +
CSS:
 +
 +
<pre class="brush:css; gutter: false;">
 +
a.my-widget-link {
 +
display: block;
 +
font-size: 1.65em;
 +
padding: 1em;
 +
}
 +
 +
#builder-module-514372ec66190 .widget {
 +
padding: 0;
 +
}
 +
</pre>
 +
 +
where <code>builder-module-514372ec66190</code> is the ID of widget bar module having the widget.
 +
 +
== How to Enable Comments For Custom Post Types ==
 +
 +
'''1.''' Ensure that support for Comments is enabled in the CPT.
 +
 +
How this is done depends on the method being used to set up the CPTs.
 +
 +
Here's an example when using CustomPress:
 +
 +
[[File:2013-04-02 12-35-15.png|608px|thumb|none]]
 +
 +
'''2.''' Go to My Theme -> Settings -> Comments.
 +
 +
Even though the CPT might be shown as selected, it won't actually work until it is unchecked and checked again. Therefore, untick your CPT under Comments, save settings, tick it and again save settings.
 +
 +
'''3.''' In the CPT add/edit screen, tick <code>Allow comments</code> in Discussion meta box. If Discussion meta box is not visible, pull down Screen Options at the top right of the page and tick <code>Discussion</code>.
 +
 +
== How to Create Mobile Navigation like the new Air Theme ==
 +
 +
There are several steps involved to accomplish this. The solution was tested on a couple of Builder Child themes, but not all, so this may not work for all Child themes. As such, these instructions are provided "as is" and are unsupported. Further customisation is beyond the scope of our theme support.
 +
 +
===Pre-requisites===
 +
 +
* Builder parent theme AND your Builder child theme should be at least at version 4, since these are responsive capable themes.
 +
* Responsive needs to be enabled in the child theme (functions.php should contain: <code>add_theme_support( 'builder-responsive' );</code>
 +
 +
===Include the javascript code that enables the Mobile dropdown===
 +
 +
* Copy the <code>js</code> folder and contents from the Air child theme to your child theme.
 +
* Add the following code at the end of your child theme's <code>functions.php</code> file, yet before the closing <code>?></code> (if any):
 +
 +
<pre class="brush:php; gutter: false;">
 +
// Enqueuing and Using Custom Javascript/Jquery
 +
function it_air_load_custom_scripts() {
 +
wp_register_script( 'it_air_jquery_additions', get_stylesheet_directory_uri() . '/js/it_air_jquery_additions.js', array('jquery'), false, true );
 +
wp_enqueue_script('it_air_jquery_additions');
 +
}
 +
add_action( 'wp_enqueue_scripts', 'it_air_load_custom_scripts' );
 +
</pre>
 +
 +
===Enable the Mobile Nav as an Alternative Navigation Module Style===
 +
Following the code added in step 1, add the following code in <code>functions.php</code> (again, before a closing ?>)
 +
<pre class="brush:php; gutter: false;">
 +
// Add Support for Alternate Module Styles
 +
if ( ! function_exists( 'it_builder_loaded' ) ) {
 +
function it_builder_loaded() {
 +
builder_register_module_style( 'navigation', 'Mobile Navigation', 'mobile-nav' );
 +
}
 +
}
 +
add_action( 'it_libraries_loaded', 'it_builder_loaded' );
 +
</pre>
 +
 +
 +
===Add the css code for the Mobile navigation===
 +
Add the following code at the end of your child themes '''mobile''' stylesheet <code>style-mobile.css</code>:
 +
 +
<pre class="brush:css; gutter: false;">
 +
/*********************************************
 +
Navigation Module (Mobile)
 +
*********************************************/
 +
.builder-module-navigation.mobile {
 +
padding-top: .5em !important;
 +
}
 +
 +
.builder-module-navigation.mobile ul {
 +
margin-top: .5em;
 +
}
 +
 +
.builder-module-navigation.mobile li {
 +
width: 100%;
 +
position: relative;
 +
}
 +
 +
/* second level stuff */
 +
.builder-module-navigation.mobile li ul {
 +
position: relative !important;
 +
left: 0 !important;
 +
border: 0;
 +
width: 100%;
 +
margin: 0;
 +
}
 +
 +
.builder-module-navigation.mobile li a,
 +
.builder-module-navigation.mobile .current_page_item li a,
 +
.builder-module-navigation.mobile .current-cat li a,
 +
.builder-module-navigation.mobile .current-menu-item li a {
 +
margin: 0;
 +
background: transparent;
 +
border-color: transparent;
 +
color: #3B3F42;
 +
border-bottom: 1px solid rgba(0,0,0,0.1);
 +
}
 +
 +
.builder-module-navigation.mobile li a:hover,
 +
.builder-module-navigation.mobile .current_page_item li a:hover,
 +
.builder-module-navigation.mobile .current-cat li a li a:hover,
 +
.builder-module-navigation.mobile .current-menu-item li a:hover {
 +
background: #3B3F42;
 +
color: #ECECEC;
 +
}
 +
 +
.builder-module-navigation.mobile li li {
 +
border: 0;
 +
width: 100%;
 +
}
 +
 +
.builder-module-navigation.mobile li ul ul {
 +
margin: 0;
 +
}
 +
 +
.builder-module-navigation.mobile li li a {
 +
padding: .25em 0 .25em 2em;
 +
line-height: inherit;
 +
border-radius: 2px;
 +
}
 +
 +
.builder-module-navigation.mobile li li li a {
 +
padding-left: 4em;
 +
}
 +
 +
.builder-module-navigation.mobile-nav .menu.hidden {
 +
display: none;
 +
}
 +
#it-mobile-menu {
 +
background: #3B3F42;
 +
color: #ECECEC;
 +
padding: .25em .75em;
 +
display: block;
 +
cursor: pointer;
 +
border-radius: 2px;
 +
-webkit-font-smoothing: antialiased;
 +
}
 +
 +
.builder-module-navigation.mobile.borderless {
 +
border: 0;
 +
}
 +
</pre>
 +
 +
===Make sure the Mobile navigation only shows when in Mobile mode (style-mobile.css is active)===
 +
 +
Add the following at the end of child theme's <code>style.css</code> (WP dashboard -> Appearance -> Editor):
 +
 +
<pre class="brush:css; gutter: false;">
 +
/*********************************************
 +
Mobile Navigation Menu (Alternate Module Style - hidden above 500px wide)
 +
*********************************************/
 +
 +
#it-mobile-menu {
 +
display: none;
 +
}
 +
</pre>
 +
 +
===Activate the Mobile Navigation===
 +
Select the Mobile navigation Style in the Builder Layout Manager for your Navigation Module.

Revision as of 09:02, July 30, 2013

Note: All the entries here are only for the purpose of documenting are beyond the scope of our support. As such there is no guaranteed support on implementing the methods listed on this page.

Contents

How to add a wordpress.org style pagination

1. Install and activate WP-Paginate plugin. While on the plugins page in WP admin, click on Settings link for the plugin.

Set

a) Pagination Label: blank

b) Previous Page: &laquo; Previous

c) Next Page: Next &raquo;

Wp-paginate-settings.png


Save Changes.

2. Edit all those theme template files (of Builder child theme that's currently active) in which you would like to replace the default Builder navigation links with your custom ones powered by WP-Paginate plugin.

The main one would be index.php. The others are archive.php, page.php, page_sitemap.php, search.php and single.php. Note: Not all these files might be present in your child theme. If you wish to make changes to a file that is not present in the child theme, then you should copy it from the parent Builder directory into child theme directory and make changes.

Replace

<!-- Previous/Next page navigation -->
				<div class="loop-utility clearfix">
					<div class="alignleft"><?php previous_posts_link( __( '« Previous Page', 'it-l10n-Builder' ) ); ?></div>
					<div class="alignright"><?php next_posts_link( __( 'Next Page »', 'it-l10n-Builder' ) ); ?></div>
				</div>

with

		<!-- Previous/Next page navigation -->
		<?php if(function_exists('wp_paginate')) {
			wp_paginate();
		} ?>

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

.wp-paginate {
	font-family: "Lucida Grande",Verdana,"Bitstream Vera Sans",Arial,sans-serif !important;
}

.wp-paginate a {
	background: #FFFFFF !important; 
	border: 1px solid #ccc !important; 
	color: #21759B !important; 
	margin-right: 3px !important; 
	padding: 2px 4px !important;
	font-size: 10px !important;
	line-height: 22px !important;
}

.wp-paginate a:hover, .wp-paginate a:active {
	color: #D54E21 !important;
}

.wp-paginate .current  {
    background-color: #328AB2 !important;
    border: 1px solid #328AB2 !important;
    color: #FFFFFF !important;
    font-weight: bold !important;
	font-size: 10px !important;
}

.wp-paginate .prev, .wp-paginate .next {
	border: none !important;
	color: #2583AD !important;
	padding: 0 !important;
}

.wp-paginate .next:hover {
	border-bottom: 1px solid #D54E21 !important;
}

Note:

1. If you would like to display WP-Paginate navigation at the top of Posts page as well, paste

<!-- Previous/Next page navigation -->
	<div class="paging-top clearfix">
	<?php if(function_exists('wp_paginate')) {
		wp_paginate();
	} ?>
	</div>

immediately above

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

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

.paging-top {
	margin-bottom: 1em;
}


Forum topic on using this plugin in Avail child theme.


Vertical menu with sub menus expanding on mouse hover

Demo: http://screenr.com/sLb

1. Install Pixopoint Menu Plugin.

2. Drag the items (usually Categories or Pages) that you would like to show in the vertical menu at the plugin's settings page under "Main menu items". If none of the menu items children should be visible by default, i.e. the menu should be collapsed initially, expand the item and tick "Single dropdown?".

Pixopoint1.png

3. Go to Settings tab and disable stylesheet. Enable arrow mark-up.

4. Install PHP Widgetify plugin.

5. Go to Appearance -> Widgets. Drag the PHP Widgetify widget into widget area where you want the vertical menu to appear and paste the following:

<?php if (function_exists('pixopoint_menu')) {pixopoint_menu();} ?>

How to show n number of posts on front page only

If you would like to have a certain number of posts shown on the front page while keeping the number of posts shown in other views like categories and archives to the number defined for "Blog pages show at most" at Settings -> Reading, follow this:

1. Make a copy of child theme's index.php as name it as home.php. If the child theme does not contain index.php, copy it from parent Builder directory.

2. Edit home.php

Add

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

[This code is set to show 3 posts (the most recent ones). Change the value of posts_per_page from 3 to the number of your choice]

above

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

How to show posts from a specific category on front page only

If you would like to restrict posts from a specific category on the front page while not affecting the posts shown in other views like categories and archives, follow this:

1. Make a copy of child theme's index.php as name it as home.php. If the child theme does not contain index.php, copy it from parent Builder directory.

2. Edit home.php

Add

<?php $paged = (get_query_var('paged')) ? get_query_var('paged') : 1; query_posts("cat=3&paged=$paged"); ?>

[This code is set to show all posts from category 3. Change the value of cat from 3 to ID of your desired category]

above

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

How to show posts from certain category on a separate Page

The instructions below outline how to have all posts from a category named Movies (ID = 92 ) on a Page titled Movies Page (slug = movies-page).

1. Ensure that pretty permalinks are enabled. Create a Page titled Movies Page. Do not enter any content in the Page. Just enter the title and publish.

2. Create a copy of index.php present in your child theme directory and rename it as page-movies-page.php. If index.php is not present in the child theme, copy it from parent Builder directory. page-movies-page.php is the custom template which will automatically be used for display of the Page titled Movies Page (Reference).

3. Edit page-movies-page.php.

Add

<?php $paged = (get_query_var('paged')) ? get_query_var('paged') : 1; query_posts("cat=92&paged=$paged"); ?>
<?php // set $more to 0 in order to only get the first part of the post
			global $more;
			$more = 0; ?>

[This code is set to show all posts from category 92. Change the value of cat from 92 to ID of your desired category]

above

		<?php while ( have_posts() ) : // The Loop ?>

Update

If you would like to just show linked post titles on the Page, follow this:

Linked-post-titles.png

Edit page-movies-page.php.

Delete

<!-- post content -->
						<div class="entry-content clearfix">
							<?php the_content(); ?>
						</div>

Change

								<h1 class="entry-title"><?php the_title(); ?></h1>

to

								<h3 class="entry-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>

How to let visitors control font size

There's a plugin called WP-chgFontSize which does not seem to be supported any more. It allows users to dynamically change the font size. Unfortunately it does not seem to work in our testing (see this).

A working alternative is using the method provided here.

Font-size.png

Follow these steps (Note: tested only on Default child theme)

1. Paste this code in a text file and save it as textsize.js. Upload this file to "js" directory (create one, if it doesn't exist) under the child theme.

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

function my_theme_scripts() {
  
  if ( !is_admin() ) { // instruction to only load if it is not the admin area
   // register your script location, dependencies and version
   
   wp_register_script('custom_script',
       get_bloginfo('stylesheet_directory') . '/js/textsize.js');
   // enqueue the script
   wp_enqueue_script('custom_script');
}
}   
 
add_action('init', 'my_theme_scripts');

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

#textsize {
	opacity: 0.4;
	float: right;
	margin-right: 0;
	margin-top: 3px;
	padding: 0;
	width: 155px;
}

#textsize:hover {
	opacity: 1;
}

#textsize a {
	text-decoration: none;
}

4. Paste the following HTML wherever (for example: in a text widget or HTML module's text area) you want it to appear on the site:

<p id="textsize">
Font size: <a href="index.php" onclick="changeFontSize(1);return false;" title="Increase font size">A+</a>  <a href="index.php" onclick="changeFontSize(-1);return false;" title="Decrease font size">A-</a>  <a href="index.php" onclick="resetFontSize(); return false;" title="Default font size">A</a>

How to add a string of text at the top of Posts page?

Blog-page-title.png

Edit the PHP file that's being used by the Posts page. This is usually child theme's index.php. If the layout used by the Posts page has an extension applied, it could be functions.php or index.php inside the extension's directory.

Add the following immediately above <?php if ( have_posts() ) : ?>

	<?php if(is_home()) { ?>
		<div class="blog-title">This is my blog page</div>
	<?php } ?>

then add the following at the end of your theme's style.css (as an example):

.blog-title {
	font-family: 'Yanone Kaffeesatz', 'Trebuchet MS', arial, sans-serif;
	clear: both;
	color: #2C445E;
	font-weight: normal;
	font-size: 2.3em;
	line-height: 1em;
	text-shadow: 1px 2px 0px #CDCA71;
	margin-bottom: 1em;
	text-align: center;
}

Update: This can also be done using hooks. See this forum post for an example.

How to add category nicenames in body class

Category-body-class.png

In Builder (and in many other themes) by default the body class of a single post page does not contain the categories under which the post has been categorized.

If you would like to apply a specific background to all single post pages that belong to say, "Recipes" category then by using the following code "recipes" will be one of the classes that gets applied to body class. Therefore we can target any element on a single post page belonging to "Recipes" category by prepending the CSS selector with "body.recipes".

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

// add category nicenames in body class
function category_id_class($classes) {
global $post;
foreach((get_the_category($post->ID)) as $category)
$classes[] = $category->category_nicename;
return $classes;
}

add_filter('body_class', 'category_id_class');

Source: http://codex.wordpress.org/Function_Reference/body_class#Adding_More_Classes

Note: In Builder, category/categories are present for post class by default.

How to delete comment author link in Builder

Before: Comment-author-link-before-2.png

After: Comment-author-link-after.png

1. Copy comments.php from parent Builder theme directory into the child theme directory. Edit this file.

Replace

<?php wp_list_comments(); ?>

with

<?php wp_list_comments( array( 'callback' => 'builder_comment' ) ); ?>

2. Edit child theme's functions.php. If the child theme does not have functions.php, create a new file having opening and closing PHP tags, name it as functions.php and upload it to child theme directory.

Add the following before closing PHP tag:

if ( ! function_exists( 'builder_comment' ) ) :
/**
 * Template for comments and pingbacks.
 *
 * Used as a callback by wp_list_comments() for displaying the comments. *
 * 
 */
function builder_comment( $comment, $args, $depth ) {
	$GLOBALS['comment'] = $comment;
	switch ( $comment->comment_type ) :
		case '' :
	?>
	<li <?php comment_class(); ?> id="li-comment-<?php comment_ID(); ?>">
		<div id="comment-<?php comment_ID(); ?>">
		<div class="comment-author vcard">
			<?php echo get_avatar( $comment, 32 ); ?>
			<?php printf( __( '%s <span class="says">says:</span>', 'builder' ), sprintf( '<cite class="fn">%s</cite>', get_comment_author() ) ); ?>
		</div><!-- .comment-author .vcard -->
		<?php if ( $comment->comment_approved == '0' ) : ?>
			<em class="comment-awaiting-moderation"><?php _e( 'Your comment is awaiting moderation.', 'builder' ); ?></em>
			<br />
		<?php endif; ?>

		<div class="comment-meta commentmetadata"><a href="<?php echo esc_url( get_comment_link( $comment->comment_ID ) ); ?>">
			<?php
				/* translators: 1: date, 2: time */
				printf( __( '%1$s at %2$s', 'builder' ), get_comment_date(),  get_comment_time() ); ?></a><?php edit_comment_link( __( '(Edit)', 'builder' ), ' ' );
			?>
		</div><!-- .comment-meta .commentmetadata -->

		<div class="comment-body"><?php comment_text(); ?></div>

		<div class="reply">
			<?php comment_reply_link( array_merge( $args, array( 'depth' => $depth, 'max_depth' => $args['max_depth'] ) ) ); ?>
		</div><!-- .reply -->
	</div><!-- #comment-##  -->

	<?php
			break;
		case 'pingback'  :
		case 'trackback' :
	?>
	<li class="post pingback">
		<p><?php _e( 'Pingback:', 'builder' ); ?> <?php comment_author(); ?><?php edit_comment_link( __( '(Edit)', 'builder' ), ' ' ); ?></p>
	<?php
			break;
	endswitch;
}
endif;

Source: Twenty Ten theme

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

li.comment p {
	margin-bottom: 1.5em;
}

How to make a div always stick to the bottom of screen

The steps below outline how this method can be applied in Builder to have a div always stick to the bottom of screen.

Sticky-footer.png

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

add_action('builder_finish', 'add_custom_footer', 0 );
function add_custom_footer() { ?>
 
<div class="footer">
	<p>Copyright © 2011</p>
</div>
 
<?php }
Replace
<p>Copyright © 2011</p>
with HTML/PHP code to show whatever you want to display in the sticky footer.

2. Edit your site's layout(s) and add a new HTML module at the end (as the last layout). Paste the following in module's text area:

<div class="push"></div>

Set "Remove Wrapper DIVs" to Yes.

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

/* To make a div always stick to the bottom of screen */

* {
    margin: 0;
}

html, body {
    height: 100%;
}

.builder-container-outer-wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px;
}

.footer, .push {
    height: 142px;
}

.footer {
    background: url("http://ryanfait.com/sticky-footer/footer.jpg") no-repeat 0 0;
    margin: 0 auto;
    position: relative;
    width: 700px;
}

.footer p {
	margin-top: 0;
	margin-bottom: 0;
}

Change background and width of .footer in the above to your desired values.

How to show comment form and comments list on Posts page

1. Edit your child theme's index.php. If it is not present, copy index.php from parent Builder directory into the child theme directory and edit it.

2. Replace

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

with

<?php global $withcomments; $withcomments = true; comments_template(); // include comments template ?>

3. [Optional] Delete the lines that display text similar to "Comments (0)". These would be:

<?php do_action( 'builder_comments_popup_link', '<span class="meta-comments">· ', '</span>', __( 'Comments %s', 'it-l10n-Builder' ), __( '(0)', 'it-l10n-Builder' ), __( '(1)', 'it-l10n-Builder' ), __( '(%)', 'it-l10n-Builder' ) ); ?>

and

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

Source.

How to place banner/google ad on top of Rotating Images

Screenshot

Ad-on-top-of-rotating-images.png

Steps

1. Add a widget bar module having widget width of 100% in layout.

RI-wbm.png

Save the module's settings.

2. Below that add a HTML module with your ad code wrapped in
<div id="google-ad">
and
</div>
.

Ex.:

<div id="google-ad"><script type="text/javascript"><!--
google_ad_client = "ca-pub-1097062987503577";
/* 468x60, created 12/30/08 */
google_ad_slot = "4793151765";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></div>

WARNING: It might be against Google's TOS to place ads on top of static image/rotating images. Please get this clarified before you proceed further with the rest of this article if you are planning to use Google's ads.

Set Remove Wrapper DIVs to Yes.

Mms-html-module-ad.png

Save the module's settings.

Save the layout.

3. At Appearance -> Widgets, drag Rotating Images widget into the widget area of widget bar module added in step 1.

Dragging-widget-into-widgetarea.png

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

.builder-module-1 .widget, .builder-module-1 .builder-module-sidebar  {
	padding: 0;
}

#google-ad {
	position: absolute;
	right: 0;
	top: 50px;
	margin-right: 1em;
}

.builder-container  {
	position: relative;
}

Note: Change "1" in .builder-module-1 to the position of widget bar module in which Rotating Images has been placed.

How to create a widget bar section having more than 5 sidebars

See http://ithemes.com/forum/index.php?/topic/12248-ionic-green-add-and-extra-widget-to-5-multi-widget/#p57377

How to add hover effects for images like in Ionic

Visit Ionic demo site to observe the hover effect.

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

wp_enqueue_script( 'jquery' );

2. Go to My Theme -> Settings.

Click on Analytics and JavaScript Code.

Paste the following in the text area under List any JavaScript or other code to be manually inserted in the site's footer just above the </body> tag in the input below.:

<script type="text/javascript">
			jQuery(document).ready(function() {
				jQuery("img").hover(
					function () {
						jQuery(this).stop().fadeTo("fast", 0.7);
					},
					function () {
						jQuery(this).stop().fadeTo("fast", 1);
					}
				);
			});
		</script>

Save Settings.

Update on May 29, 2012

An alternative CSS3 solution (forum topic)

How to show excerpt of a Page with title and its featured image in a widget

2011-06-26 08-37-59.png

While it is possible to use Query Posts Widget plugin, it will not give us complete control like the code method below.

1. Install and activate PHP Widgetify plugin.

2. Go to Appearance -> Widgets. Drag a PHP Widgetify widget into the widget area. Paste the following:

<?php if ( have_posts() ) : ?>
<?php query_posts( 'pagename=why-custom-framing' ); ?>
		<?php while ( have_posts() ) : // The Loop ?>
			<?php the_post(); ?>
		<div class="widget-post">
			<?php /*the_author_posts_link();*/ ?>
			<?php /*the_time(__('l, F j, Y', 'Builder'));*/ ?>

<h4 id="post-<?php the_ID(); ?>"><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h4>
			
			<?php if (has_post_thumbnail()) { ?>
			<div class="widget-thumbnail">
				<a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail( 'widget-thumbnail' ); ?></a>
			</div>
			<?php } ?>			
			
			<!--post text with the read more link -->
			<div class="post-content">
				<?php the_excerpt(); ?>
			</div>
		</div>
	
	<?php endwhile; // end of one post ?>
	
	<?php else : // do not delete ?>
		<?php do_action( 'builder_template_show_not_found' ); ?>
	<?php endif; // do not delete ?>

In the above, why-custom-framing is the slug of the Page whose excerpt should be displayed in the widget.

Php-widget-show-page.png

Reference: http://codex.wordpress.org/Class_Reference/WP_Query#Post_.26_Page_Parameters

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

		add_image_size('widget-thumbnail', 100, 100, true);

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

.widget .widget-thumbnail {
    float: left;
    margin-right: 1em;
}

.widget .post-content {
    clear: none;
}

How to add 'Leave a Comment' link to the left of Comments(#) in Posts page

Screenshot:

Leave-a-comment.png

Steps:

1. Edit child theme's index.php.

Change


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

to

<?php do_action( 'builder_comments_popup_link', '<div class="my-alignright"><span class="my-comments">', '</span></div>', __( 'Comments %s', 'it-l10n-Builder' ), __( '(0)', 'it-l10n-Builder' ), __( '(1)', 'it-l10n-Builder' ), __( '(%)', 'it-l10n-Builder' ) ); ?>
					<div class="alignright"><a href="<?php the_permalink() ?>#respond">Leave a Comment</a>  •</div>

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

.meta-bottom .my-alignright {
    margin: 0 0 1.5em 0.5em;
    float: right;
    text-align: right;
}

How to stop Builder internal code from appearing in page source code

Builder-code-in-source.png

If code similar to above appears when you view the source of your Builder site, edit child theme's functions.php and remove this line:

echo "<!-- " . print_r( $fields, true ) . "-->\n";

How to link the content of a widget to a URL

Wrap the content of widget with
<div onclick="location.href='http://target-url.com/'" style="cursor:pointer;">
and
</div>

Example.

How to automatically add a sub menu indicator to 1st level menu items in nav bar

Update on Wednesday, April 24, 2013: Here is the latest method.


Before: Jquery-submenuindicator-before.png

After: Jquery-submenuindicator-after.png

jQuery Method

Note: This method works for all 4 types of navigation modules (Builder Settings Pages, Builder Settings Categories, WordPress Pages, Custom Menu).

1. If child theme's functions.php already does not have the following, add it before closing PHP tag:

		wp_enqueue_script( 'jquery' );

2. Go to My Theme -> Settings, click on 'Analytics and JavaScript Code'. Paste the following in the text area under 'List any JavaScript or other code to be manually inserted in the site's footer just above the </body> tag in the input below.':

<script type="text/javascript">
			jQuery(document).ready(function() {
jQuery(".builder-module-navigation li:has(ul)").addClass("arrow");
});
</script>

Note: If you would like this to work only for a specific navigation module, replace ".builder-module-navigation" with # followed by module's ID like so:

<script type="text/javascript">
			jQuery(document).ready(function() {
jQuery("#builder-module-4e12b7145bfa8 li:has(ul)").addClass("arrow");
});
</script>

Scroll down the page and save settings.

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

.builder-module-navigation li.arrow {
	background: url("http://k.min.us/ibDuJC.gif") no-repeat center right;
}

Note: You might want to specify the URL of your desired sub menu indicator image in the above.

PHP Method

Note: This method does not work in a navigation module. It only works when wp_nav_menu() is used like in a HTML module or a PHP widget.

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

class Arrow_Walker_Nav_Menu extends Walker_Nav_Menu {
    function display_element($element, &$children_elements, $max_depth, $depth=0, $args, &$output) {
        $id_field = $this->db_fields['id'];
        if (!empty($children_elements[$element->$id_field])) { 
            $element->classes[] = 'arrow'; //enter any classname you like here!
        }
        Walker_Nav_Menu::display_element($element, $children_elements, $max_depth, $depth, $args, $output);
    }
}

2. Edit your layout, add a HTML module, paste the following code and enable PHP:

<?php wp_nav_menu( array('walker' => new Arrow_Walker_Nav_Menu, 'menu' => 'Main Menu', 'menu_class' => 'builder-module-navigation') ); ?>

Change 'Main Menu' in the above to the name of your custom menu.

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

a.

.meta-bottom .my-alignright {
    margin: 0 0 1.5em 0.5em;
    float: right;
    text-align: right;
}

b.

[Optional - tested in HeatWave child theme] Also add the following:

.builder-module-1 .builder-module-navigation {
	height: 30px;
	margin-left: 0;
	border-left: none !important;
	border-right: none !important;
}

Change '1' in '.builder-module-1' in the above to the position of HTML module in the layout from top.

Meta

Source: http://stackoverflow.com/questions/3558198/php-wordpress-add-arrows-to-parent-menus

Forum topics:

  1. http://ithemes.com/forum/index.php?/topic/9881-submenu-indicator/
  2. http://ithemes.com/forum/index.php?/topic/15843-arrow-on-menu-to-indicate-more-items/

How to add Register and Log in links at the top of your Builder site

Highlighted links will change to Site Admin and Log out for admins

1. Edit your child theme's functions.php.

Add the following at the end (before closing PHP tag, if present):

add_action('builder_layout_engine_render_container', 'add_custom_header', 0 );

function add_custom_header() { ?>
	<div id="my_custom_header">
		<ul id="headerlinks">
			<?php wp_register(); ?>
			<li><?php wp_loginout(); ?></li>
		</ul>
	</div>	
<?php }

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

#headerlinks li
{
	display: inline;
	list-style-type: none;
	padding-right: 20px;
}

#my_custom_header {
	width: 960px;
	margin: 0 auto;
	position: relative;
}

#headerlinks {
	float: right;
	position: absolute;
	right: 0;
}

3. At Settings -> General, place a tick mark in "Membership: Anyone can register" box.

If you would like to show the links in a 100% wide horizontal bar at the top of site,

So you want a login bar, ha?

use this PHP:

add_action('builder_layout_engine_render_container', 'add_custom_header', 0 );

function add_custom_header() { ?>
	<div id="my_custom_header_wrapper">
		<div id="my_custom_header">
			<ul id="headerlinks">
				<?php wp_register(); ?>
				<li class="last"><?php wp_loginout(); ?></li>
			</ul>
		</div>
	</div>	
<?php }

and this CSS:

#headerlinks li
{
	display: inline;
	list-style-type: none;
	padding-right: 20px;
}

#my_custom_header_wrapper {
	background: #DDDDDD;
	height: 30px;
}

#my_custom_header {
	width: 960px;
	margin: 0 auto;
	position: relative;
}

#headerlinks {
	float: right;
	position: absolute;
	right: 0;
	margin-top: 4px;
}

li.last {
	padding-right: 0 !important;
}

How to add social media icons floating at top right

Adding-social-icons-site1.png
Adding-social-icons-site2.png

Note:

  • The icons will appear through out the site. It is not possible to restrict them to certain layouts when using this method.
  • Please upload the png images to your own server and use them.

1. Edit your child theme's functions.php.

Add the following at the end (before closing PHP tag, if present):

add_action('builder_layout_engine_render_container', 'add_social_icons', 0 );

function add_social_icons() { ?>
	<div class="socialmedia-buttons-container">
		<div class="socialmedia-buttons">
			<a target="_blank" rel="nofollow" href="http://www.facebook.com/"><img class="fade" style="opacity: 0.8; -moz-opacity: 0.8;" title="Follow Us on Facebook" alt="Follow Us on Facebook" src="//ithemes.com//builder/misc/social-media-icons/32/facebook.png"></a>
			
			<a target="_blank" rel="nofollow" href="http://twitter.com/#!/"><img class="fade" style="opacity: 0.8; -moz-opacity: 0.8;" title="Follow Us on Twitter" alt="Follow Us on Twitter" src="//ithemes.com//builder/misc/social-media-icons/32/twitter.png"></a>
			
			<a target="_blank" rel="nofollow" href="http://www.yoursite.com/feed/"><img class="fade" style="opacity: 0.8; -moz-opacity: 0.8;" title="Follow Us on RSS" alt="Follow Us on RSS" src="//ithemes.com//builder/misc/social-media-icons/32/rss.png"></a>
			
			<a target="_blank" rel="nofollow" href="mailto: admin@yoursite.com"><img class="fade" style="opacity: 0.8; -moz-opacity: 0.8;" title="E-mail Us" alt="E-mail Us" src="//ithemes.com//builder/misc/social-media-icons/32/email.png"></a>		
		</div>
	</div>	
<?php }
Adding-social-icons-editor.png

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

/* Custom Styles For The Social Media Widget Icons */

.socialmedia-buttons-container {
	width: 960px;
	margin: 0 auto;
	position: relative;
}

.socialmedia-buttons {
	float: right;
	position: absolute;
	right: 0;
}

.socialmedia-buttons img {
	border: 0;
	/*border: 0 !important;*/
	margin-right: 10px !important;
	display: inline;
	-webkit-transition: all 0.2s ease-in;
	-moz-transition: all 0.2s ease-in;
	transition: all 0.2s ease;
}

.socialmedia-buttons a {
	background: none !important;
}

.socialmedia-buttons a:hover {
	text-decoration: none;
	border: 0;
}
.socialmedia-buttons img.fade:hover {
	opacity: 1 !important;
	-moz-opacity: 1 !important;
	-webkit-transition: all 0.2s ease-in;
	-moz-transition: all 0.2s ease-in;
	transition: all 0.2s ease;
}

Source: http://wordpress.org/extend/plugins/social-media-widget/

///**********************************************************///

This is Page 1 of Plugin related and other generic customizations in Builder. Here is Page 2.

This is Page 2 of Plugin related and other generic customizations in Builder. Here is Page 1.

How to add social media icons in nav bar

This can be done in at least 2 different ways. The primary difference between method 1 and 2 is that in method 2, left margin for first social icon has to be manually adjusted every time a menu item in the nav bar is changed. For this reason, method 1 is recommended.

Method 1

2012-09-02 12-52-02.png

1. Create (if you haven't already) a custom menu at Appearance -> Menus, which should appear in the nav bar.

2. Instead of a navigation module, use a PHP enabled HTML module having this sample code:

<?php wp_nav_menu( array( 'menu' => 'primary', 'menu_class' => 'builder-module-navigation') ); ?>

<div class="my-social-icons">
<ul>
    <li class="social-icon"><a target="_blank" rel="nofollow" href="http://www.facebook.com/"><img class="fade" style="opacity: 1; -moz-opacity: 1;" title="Follow Us on Facebook" alt="Follow Us on Facebook" src="//ithemes.com//builder/misc/social-media-icons/32/facebook.png"></a></li>
    
    <li class="social-icon"><a target="_blank" rel="nofollow" href="http://twitter.com/#!/"><img class="fade" style="opacity: 1; -moz-opacity: 1;" title="Follow Us on Twitter" alt="Follow Us on Twitter" src="//ithemes.com//builder/misc/social-media-icons/32/twitter.png"></a></li>
    
    <li class="social-icon"><a target="_blank" rel="nofollow" href="http://www.yoursite.com/feed/"><img class="fade" style="opacity: 1; -moz-opacity: 1;" title="Follow Us on RSS" alt="Follow Us on RSS" src="//ithemes.com//builder/misc/social-media-icons/32/rss.png"></a></li>
    
    <li class="social-icon"><a target="_blank" rel="nofollow" href="mailto: admin@yoursite.com"><img class="fade" style="opacity: 1; -moz-opacity: 1;" title="E-mail Us" alt="E-mail Us" src="//ithemes.com//builder/misc/social-media-icons/32/email.png"></a></li>
</ul> 
</div>

Note:

  1. In the above, change primary to the slug of your custom menu. Ex.: If the name of your custom menu is "Main Menu", it slug will be main-menu.
  2. It is recommended to use the social icons from your WordPress site. You should download the icons referred to in the above code, upload them to your site and use those links instead.

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

/************************************************************************
    For right floating social icons in a HTML module showing nav bar
*************************************************************************/

.builder-module-2 {
	background: #FAA51B;
}

.menu-primary-container {
	float: left;
}

#menu-primary {
	margin-bottom: 0;
}

li.social-icon a, li.social-icon a:hover {
    padding: 1px 0 0 8px;
}

li.social-icon a:hover {
    opacity: 0.8;
    -moz-opacity: 0.8;
    background: none;
}

li.social-icon:hover,
li.social-icon:hover a {
    background: none;
}

.my-social-icons {
	float: right;
	margin-right: 10px;
	padding-top: 8px;
}

.my-social-icons ul {
	list-style: none;
}

.my-social-icons li {
	float: left;
}

Note: In the above

a) Change the number (2) in .builder-module-2 so it is the module number from top in layout.

b) In

.builder-module-2 {
	background: #FAA51B;
}

replace background: #FAA51B; with child theme's styles set for navigation module or in the case of Thinner, those of .builder-module-navigation ul.menu. i.e.,

.builder-module-2 {
	/*background: #FAA51B;*/
	overflow: hidden;
	background: #F6F6F6;
	background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#F6F6F6));
	background: -webkit-linear-gradient(#FFFFFF, #F6F6F6);
	background: -moz-linear-gradient(#FFFFFF, #F6F6F6);
	background: -ms-linear-gradient(#FFFFFF, #F6F6F6);
	background: -o-linear-gradient(#FFFFFF, #F6F6F6);
	background: linear-gradient(#FFFFFF, #F6F6F6);
	border: 1px solid #FFF;
	-webkit-border-radius: 10px;
	-khtml-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	-webkit-box-shadow: #AAAAAA 1px 1px 2px;
	-moz-box-shadow: #AAAAAA 1px 1px 2px;
	-o-box-shadow: #AAAAAA 1px 1px 2px;
	-khtml-box-shadow: #AAAAAA 1px 1px 2px;
	box-shadow: #AAAAAA 1px 1px 2px;
}

c) primary to the slug of your custom menu. Ex.: If the name of your custom menu is "Main Menu", it slug will be main-menu.

Method 2

Social-icons-navbar.png

Create (if you haven't already) a custom menu at Appearance -> Menus, which should appear in the nav bar.

1. Edit your child theme's functions.php.

Add the following at the end (before closing PHP tag, if present):

add_filter('wp_nav_menu_main-menu_items','add_images', 10, 2);
function add_images($items, $args) {
 
        $items .= '<li class="social-icon" id="first-social-icon"><a target="_blank" rel="nofollow" href="http://www.facebook.com/"><img class="fade" style="opacity: 1; -moz-opacity: 1;" title="Follow Us on Facebook" alt="Follow Us on Facebook" src="//ithemes.com//builder/misc/social-media-icons/32/facebook.png"></a></li>';
        
        $items .= '<li class="social-icon"><a target="_blank" rel="nofollow" href="http://twitter.com/#!/"><img class="fade" style="opacity: 1; -moz-opacity: 1;" title="Follow Us on Twitter" alt="Follow Us on Twitter" src="//ithemes.com//builder/misc/social-media-icons/32/twitter.png"></a></li>';
        
        $items .= '<li class="social-icon"><a target="_blank" rel="nofollow" href="http://www.yoursite.com/feed/"><img class="fade" style="opacity: 1; -moz-opacity: 1;" title="Follow Us on RSS" alt="Follow Us on RSS" src="//ithemes.com//builder/misc/social-media-icons/32/rss.png"></a></li>';
        
        $items .= '<li class="social-icon"><a target="_blank" rel="nofollow" href="mailto: admin@yoursite.com"><img class="fade" style="opacity: 1; -moz-opacity: 1;" title="E-mail Us" alt="E-mail Us" src="//ithemes.com//builder/misc/social-media-icons/32/email.png"></a></li>';
        
    return $items;    
}

Note: In the above code, main-menu must be replaced with the slug of your custom menu. Ex.: If the name of your custom menu is Primary Navigation, then

add_filter('wp_nav_menu_main-menu_items','add_images', 10, 2);

must be changed to

add_filter('wp_nav_menu_primary-navigation_items','add_images', 10, 2);

2. Add the following at the end of child theme's style.css and customize it if necessary:

/* Custom Styles For The Social Media Widget Icons in Navigation */

li#first-social-icon {
    margin-left: 355px; /* Adjust this value so the icons are positioned at your desired location. */
}

/* li.social-icon {
    height: 36px;
} */ /* Needed only in certain themes like Traverse */

li.social-icon a, li.social-icon a:hover {
    padding: 1px 0 0 8px;
}

li.social-icon a:hover {
    opacity: 0.8;
    -moz-opacity: 0.8;
    background: none;    
}

li.social-icon:hover,
li.social-icon:hover a {
    background: none;
}

That's it!

This method is also explained here.

Sample implementations:

1. Traverse with round icons:

2011-11-26 10-27-16.png

Forum topic

How to use CSS3 PIE

PIE stands for Progressive Internet Explorer. It is an IE attached behavior which, when applied to an element, allows IE to recognize and display a number of CSS3 properties.

It is used to get CSS3 properties like border-radius working in IE older than version 9.

Follow the steps below to make CSS3 PIE work in Builder:

Update on July 11, 2012: Builder provides IE browser specific IDs for the html element. These are ie7, ie8 and ie9. It is thus possible to write IE 7, IE 8 and IE 9 specific CSS. This forum topic provides an example where post comment text area (which already has border-radius set in style.css) can be made to show rounded corners in IE 8 using CSS3 PIE. The alternate method listed below also works.

1. Download the latest version of CSS3 PIE from here.

2. Extract the zip flle and upload PIE.htc to any web reachable directory.

Ex.:

public_html/assets/PIE.htc

3. Add position: relative; style to all those selectors for which you would like to use CSS3 PIE. You will of course be specifying border-radius/box-shadow etc. properties (which are supported by CSS3 PIE).

Ex.:

#text-6 {
	-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
position: relative;
}

#text-6 .widget-title {
-moz-border-radius:10px 10px 0px 0px;
-webkit-border-radius:10px 10px 0px 0px;
border-radius:10px 10px 0px 0px;
position: relative;
}

The above CSS is written to make a widget whose ID is text-6 rounded.

Screenshot in Firefox:

Rounded-corners-ff.png

Live Site

4. Add the following in your child theme's functions.php:

function my_render_ie_pie() { ?>
<!--[if lte IE 8]>
<style type="text/css" media="screen">
   #your-css-elements-here { 
          behavior: url('http://www.redkitecreative.com/PIE.htc'); 
    }
</style>

<![endif]-->
<?php
}
add_action('wp_head', 'my_render_ie_pie', 8);

In the above, replace

  1. #your-css-elements-here with CSS selectors for which you have specified CSS 3 properties and for which you would like to use CSS3 PIE.
  2. http://www.redkitecreative.com/PIE.htc with the URL of PIE.htc on your server.

Ex.:

Code in functions.php:

function my_render_ie_pie() { ?>
<!--[if lte IE 8]>
<style type="text/css" media="screen">
   #text-6, #text-6 .widget-title { 
          behavior: url('http://sridhar.internal.ithemes.com/assets/PIE.htc'); 
    }
</style>

<![endif]-->
<?php
}
add_action('wp_head', 'my_render_ie_pie', 8);

Now border-radius property for #text-6 and #text-6 .widget-title will work in IE 8 and below.

Screenshot in IE 8:

Rounded-corners-ie8.png

Note:

  1. This particular example does not render properly in IE 7 probably because of using PIE on an element inside another element. This is the behavior coming from PIE itself and not Builder. Screenshot.
  2. IE 9 supports border-radius natively. So PIE will not be used in IE 9.

That's it!

Source: http://www.position-relative.com/2011/01/using-css3-pie-in-wordpress-custom-themes/

How to float a div at any position on top of other elements in the container

Screen Shot 2011-12-19 at 10.37.52 PM.png

1. Add the following in child theme's functions.php:

add_action('builder_layout_engine_render_header', 'add_floating_box', 20 );

function add_floating_box() { ?>
	<div id="floating-box-container">
		<div id="floating-box">
			HTML or PHP code comes here
		</div>
	</div>
<?php }

In the above, place the code needed to display your logo (for example) where "HTML code comes here" is present.

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

#floating-box-container {
	max-width: 1000px; /* set this to container (layout) width */
	width: 100%;
	margin: 0 auto;
	position: relative;
	z-index: 100;
}

#floating-box {
	position: absolute;
	top: 50px;
	left: 0;
	background: yellow;
	width: 200px;
	height: 100px;	
}

In the above, you might want to adjust top, left, background, width and height values.

Screenshot showing the div structure

A practical example of implementing this method can be found here.

Source: http://ithemes.com/forum/topic/28189-where-is-body-tag/page__view__findpost__p__130559

How to show top most (latest) post in full and the others as excerpts

Screenshot: http://d.pr/nfl1

Edit child theme's index.php and any other needed template files like archive.php that output a list of posts.

Replace the the_content() or the_excerpt() function call with the following:

<?php /* Conditional output flag set after first post */ ?>
<?php if($showexcerpt) : ?>
   <?php the_excerpt(); ?>
<?php else: ?>
  <?php the_content(); ?>
<?php endif; ?>
<?php $showexcerpt=true; ?>

Ex.: In Foundation Blank's index.php,

<?php the_content( __( 'Read More→', 'it-l10n-BuilderChild-Foundation-Blank' ) ); ?>

should be replaced with

<?php /* Conditional output flag set after first post */ ?>
							<?php if($showexcerpt) : ?>
							   <?php the_excerpt(); ?>
							<?php else: ?>
							  <?php the_content( __( 'Read More→', 'it-l10n-BuilderChild-Foundation-Blank' ) ); ?>
							<?php endif; ?>
							<?php $showexcerpt=true; ?>

With the above change, the top most (latest) post will be shown in full unless more quick tag, is used. If more quick tag is used, "Read More→" will appear at the cut off point.

Source: http://wordpress.org/support/topic/full-article-for-first-post-excerpts-for-the-rest?replies=7#post-1743222

How to remove hyperlink from tagline in Header module

Add the following code to child theme's functions.php (at the end, but before the closing ?> line, if any):

// load our javascript in the footer
add_action('wp_enqueue_scripts', 'add_my_code');
function add_my_code() {
    add_action( 'print_footer_scripts', 'my_footer_script' );
}  

// Add jQuery to footer
function my_footer_script() { ?>

    <script type="text/javascript">
    jQuery(document).ready(function($) {
            $('.site-tagline a').replaceWith(function() {
                    return this.innerHTML; });
            });

    </script>

<?php }

Thanks to Ronald (forum post)

Examples of Using jQuery in Builder

Disclaimer

iThemes will not be responsible for any issues that may be the result of your attempts to change your site's functions.php file. You do not HAVE to change it. All code samples are for your information, possibly inspiration, and provided "as is". However, when properly implemented, the code samples are accurate and will work.

Warning

If you do not understand what it is you are doing, if the words "php", "opening tag", "FTP", "functions" and "backup" are not familiar to you proceed with caution. You can blow up your site due to invalid code in the functions.php file. Actually, even if you know or think you know it all, it still happens (it happens to me at least once a week - Ronald).

A single missing } or even a , or a semi-colon is all it takes to take your site down. This can be resolved by undoing the changes, however, this can not be done through the wp-dashboard > Appearance > Editor anymore (since your site is down). You then have to restore the functions.php file either through FTP or your hosting cPanel File Manager.

If you think you can not do that, or do not understand what all the above means, I suggest you refrain from editing functions.php.

Should anything go wrong, do not blame the code posted here. The code works. It just needs to be inserted a) the right way, and b) in the right place.

For everyone else feeling confident, and having read the Disclaimer and the paragraph on how to add PHP code to a PHP file, DO MAKE A BACKUP, at least of the file you are editing. It is also not recommended to do these changes through the wp-dashboard > Appearance > Editor. Setup a localhost server on your computer, and use a simple PHP Editor (with syntax checking), ensure that your additions do not break the site and only THEN FTP your files to your server.

How to add PHP code to a PHP file

When adding code to the functions.php file (or any PHP file), make sure it is in PHP format. HTML code is not PHP code, and it WILL break things when coded inside a block of PHP code.

PHP code can be identified by an opening tag: <?php and a closing tag ?>

all code between these tags should be PHP code.

Most WordPress themes have the opening <?php tag in functions.php, coded all the way at the top of the file. Most (Builder Child theme) functions.php files do not have a closing ?> tag (ALL THE WAY) at the end of the file, since it is not required.

So if you add code at the end of your functions.php file, and do so before the closing ?> PHP tag (if any!) you (generally!) are inside a PHP block of code. But this is NOT guaranteed.

  • You can't add html code inside PHP tags.
  • You can't add PHP code outside PHP tags.
  • You can't add opening PHP tags INSIDE a block of PHP code (nesting <?php some php code ?> when there is no closing php tag before it).

Before making the final edits and saving and uploading the file to your server, make sure that the syntax of the entire functions.php is valid syntax. You can do so by using a PHP Editor, and there are online tools such as this one: http://www.piliapp.com/php-syntax-check/

example of correct PHP code

<?php
PHP code
?>

html code

<?php
some more PHP code
?>

example of incorrect PHP code 1

<?php
php code

   <?php
   some more php code
   ?>

?>

example of incorrect PHP code 2

<?php
html code
?>

example of incorrect PHP code 3

<?php
php code
?>

more php code


Introduction

Please note that code shown is for a particular child theme and for a specific version used when writing the articles. It would usually have to be modified to suit your needs. All code samples use certain selector names (for menus, for builder selectors etc.) This is entirely arbitrary, and it is highly unlikely that your selectors are the same. You have to adapt the code accordingly.

All code samples provided here ASSUME that it will be placed in already existing PHP tags. Therefore, you will not find an opening <?php code at the start, or a closing ?> tag at the end.

How to assign odd and even classes to menu items in nav bar

One typical usage of this would be to set different background colors to alternate menu items.

2013-02-02 21-15-52.png

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

// Assign even and odd classes to nav bar menu items

add_action('wp_enqueue_scripts', 'add_my_code_1');

function add_my_code_1() {
    add_action( 'print_footer_scripts', 'my_footer_script_1' );
}

function my_footer_script_1() { ?>
    <script type="text/javascript">
        jQuery(document).ready(function($) {
        	$("#menu-main-menu > li:nth-child(odd)").addClass("odd");
        	$("#menu-main-menu > li:nth-child(even)").addClass("even");
        });
    </script>
<?php }

where menu-main-menu is the CSS ID of custom menu shown in the nav bar.

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

.builder-module-navigation li.even a {
    background: red;
}

.builder-module-navigation li.odd a {
    background: blue;
}

.builder-module-navigation li.even li a,
.builder-module-navigation li.odd li a {
    background: #FFF;
}

.builder-module-navigation li a:hover,
.builder-module-navigation li.even li a:hover,
.builder-module-navigation li.odd li a:hover {
    background: #333;
    color: #FFF;
}

.builder-module-navigation .current_page_item.even a, .builder-module-navigation .current_page_item.odd a
.builder-module-navigation .current-cat.even a, .builder-module-navigation .current-cat.odd a
.builder-module-navigation .current-menu-item.even a, .builder-module-navigation .current-menu-item.odd a {
	background: #333;
}

.builder-module-navigation li a,
.builder-module-navigation .current_page_item li a,
.builder-module-navigation .current-cat li a {
	color: #FFF;
}

.builder-module-navigation li li a {
    color: #333;
}

Ex.:

Live Demo. Code used on this site: functions.php, style.css.

How to spread/space out menu items equally across the nav bar

Before
After

Add the following at the end of child theme's functions.php but before a closing ?>, if any):

// =========================================
// = Space out nav bar menu items equally =
// =========================================

// load javascript in the footer
add_action('wp_enqueue_scripts', 'add_my_code_37742');
function add_my_code_37742() {
        add_action( 'print_footer_scripts', 'my_footer_script_37742' );
}

// Add Javascript to footer
function my_footer_script_37742() { ?>

<script type="text/javascript">

jQuery(document).ready(function($) {

        var menuItems = $("ul#menu-main-menu").children().length;
        var menuWidth = $("ul#menu-main-menu").width();
        var percentage = (menuWidth / menuItems) / (menuWidth / 100);

        $("ul#menu-main-menu").children().each(function() {
                $(this).css('width',  percentage + '%');
        });

});

</script>

<?php }

where menu-main-menu is the ID of custom menu shown in the nav bar.

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

/*********************************************
    Space out nav bar menu items equally
*********************************************/

.builder-module-navigation ul {
	width: 100%;
}

.builder-module-navigation li a, .builder-module-navigation .current_page_item li a, .builder-module-navigation .current-cat li a {
	text-align: center;
}

Thanks to Ronald. Source: http://ithemes.com/forum/topic/37742-navigation-spread-items-to-length-of-the-nav-bar/#entry173441

How to add a slow transition effect for second level menus in nav bar

Live Demo

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

// =========================================
// = Smoothen transition of 2nd level menu =
// =========================================

// load javascript in footer
add_action('wp_enqueue_scripts', 'add_my_code_2');
function add_my_code_2() {
	add_action( 'print_footer_scripts', 'print_my_footer_scripts_2' );
}

// Add required javascript to footer (for delayed opening of subnav)
function print_my_footer_scripts_2() { ?>

<script type='text/javascript'>
jQuery(document).ready(function($) {
	    $("#menu-main-menu li").hover(function(){
	    $(this).find('ul:first').css({visibility: "visible",display: "none"}).show(400);
	    },function(){
	    $(this).find('ul:first').css({visibility: "hidden"});
	});

});
</script>

<?php }

where menu-main-menu is the CSS ID of custom menu (usually <ul id="menu-main-menu">) shown in the nav bar. This is entirely arbitrary, and it is highly unlikely that your selectors are the same. You need to adapt the code accordingly.

Alternate Method:

Go to My Theme -> Settings -> Analytics and JavaScript Code. Paste the following in the text area under

"List any JavaScript or other code to be manually inserted inside the site's <head> tag in the input below."

<script type='text/javascript'>
jQuery(document).ready(function($) {
	    $("#menu-main-menu li").hover(function(){
	    $(this).find('ul:first').css({visibility: "visible",display: "none"}).show(400);
	    },function(){
	    $(this).find('ul:first').css({visibility: "hidden"});
	});

});
</script>

where menu-main-menu is the CSS ID of custom menu shown in the nav bar.

Save settings.


Thanks to Ronald. Source: http://ithemes.com/forum/topic/30998-is-it-possible-to-add-a-slow-transition-effect-to-the-navbar/#entry144025

Another similar forum topic: http://ithemes.com/forum/topic/21002-navigation-with-animated-effect/

How to Clear Placeholder Text Upon Focus in Gravity Forms Fields

Gravity Forms - Placeholders add-on plugin can be used to add HTML5 placeholder support to Gravity Forms' fields with a javascript fallback. gplaceholder CSS class should be added to text fields or textareas as needed, or to the form itself to enable this feature to all fields within it.

Ex.:

2013-02-04 20-35-47.png

Now all Gravity Forms' field labels will appear inside the fields as placeholder text.

The placeholder text will continue to appear when clicked or tabbed to inside a field, but will disappear when user starts typing.

If you would like the fields' placeholder text to be cleared when a field gets focus, add the following at the end of child theme's functions.php:

// =========================================
// = Auto hide placeholder text upon focus =
// =========================================

// load javascript in footer
add_action('wp_enqueue_scripts', 'add_my_code_3');

function add_my_code_3() {
    add_action( 'print_footer_scripts', 'my_footer_script_3' );
}

// Add jQuery to footer

function my_footer_script_3() { ?>
    <script type="text/javascript">
        jQuery(document).ready(function($) {
            $('.gform_wrapper').find(':input').each(function() {
                $(this).data('saveplaceholder', $(this).attr('placeholder'));

                $(this).focusin(function() {
                    $(this).attr('placeholder', '');
                });

                $(this).focusout(function() {
                    $(this).attr('placeholder', $(this).data('saveplaceholder'));
                });

            })
        })
    </script>
<?php }

Thanks to Ronald for providing this code here.

Loading Script in Footer on All Pages Except One

Ex.:

/* JMAC script load */
// load jquery and prepare javascript in footer
add_action('wp_enqueue_scripts', 'jmac_scripts_method');
function jmac_scripts_method() {
	wp_enqueue_script('jquery');
    add_action('print_footer_scripts', 'jmac_print_footer_scripts');
}

// Add required javascript to footer
function jmac_print_footer_scripts() { if(!is_page('videoconferencing')) { ?>
	<script type="text/javascript">
		jQuery(document).ready(function($) {
		function toggleVideo(state) {
		    // if state == 'hide', hide. Else: show video
		    var div = document.getElementById("popupVid");
		    var iframe = div.getElementsByTagName("iframe")[0].contentWindow;
		    div.style.display = state == 'hide' ? 'none' : '';
		    func = state == 'hide' ? 'pauseVideo' : 'playVideo';
		    iframe.postMessage('{"event":"command","func":"' + func + '","args":""}','*');
		}

		});
	</script>
<?php
} }
/* JMAC script load end */

Note: The focus of this wiki entry is not what the jQuery code does, but rather the if conditional used:

if(!is_page('videoconferencing'))

where "videoconferencing" is the slug of Page in which jQuery code should NOT be loaded.

Forum topic: http://ithemes.com/forum/topic/33305-script-in-footer-on-all-pages-except-one/

Loading Script in Footer Only on Site's Front Page

Ex.:

// prepare javascript in footer
add_action('wp_enqueue_scripts', 'add_my_script_4');

function add_my_script_4() {
	add_action( 'print_footer_scripts', 'home_page_only_script' );
}


// Add javascript to footer
function home_page_only_script() {
    if ( is_front_page() ) : ?>
        <script type="text/javascript">
        	//your javascript here...
        </script>
	<?php endif;
}

Thanks to Ronald. Source: http://ithemes.com/forum/topic/33473-adding-javascipt-to-home-page/#entry155302

How to Create a "Stay-On-Top" element

Method 1

Live Demos: iThemes.com, WebDesign.com

Standard nav bar

As the user scrolls down..

As user scrolls below past the standard nav bar, it gets replaced by a nav bar in a fixed position at the top of browser. When user scrolls to top, it goes away

1. Identify the selector of the element that you wish to stay on top. Firebug can be used for this.

Ex.: .builder-module-navigation-background-wrapper in case of a navigation module.

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

// =========================================
// = "Stay-On-Top" element =
// =========================================

add_action('wp_enqueue_scripts', 'add_my_code');

function add_my_code() {
    add_action( 'print_footer_scripts', 'my_footer_script' );
}


function my_footer_script() { ?>

  <script type="text/javascript">

    jQuery(function($) {

      var filter = $('.builder-module-navigation-background-wrapper');

      pos = filter.offset();

      var filterSpacer = $('<div />', {
        "class": "filter-drop-spacer",
        "height": filter.outerHeight()
      });

      var fixed = false;

      $(window).scroll(function() {

        if($(this).scrollTop() >= pos.top+filter.height() )

          {
            if( !fixed )
              {
                fixed = true;

                filter.fadeOut('fast', function() {
                  $(this).addClass('fixed').fadeIn('fast');
                  // $('.search_in_nav, .my-social-icons').hide();
                  $(this).before(filterSpacer);
                  });
              }
          }

          else

          {
            if( fixed )
              {
                fixed = false;

                filter.fadeOut('fast', function() {
                  $(this).removeClass('fixed').fadeIn('fast');
                  // $('.search_in_nav, .my-social-icons').show();
                  filterSpacer.remove();
                });
              }
        }
      });

    });

  </script>

<?php }

In the above, enter the selector from step 1 in the following line:

var filter = $('.builder-module-navigation-background-wrapper');

(Optional) If you would like to hide any children of the element in fixed state, specify their selectors in the line below and remove the comment.

// $('.search_in_nav, .my-social-icons').hide();

Remember to do similarly in the line below:

// $('.search_in_nav, .my-social-icons').show();

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

.builder-module-navigation-background-wrapper.fixed {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;

	-webkit-box-shadow: 0 0 40px #222;
	-moz-box-shadow: 0 0 40px #222;
	box-shadow: 0 0 40px #222;

	background: rgba(255, 255, 255, 0.92);
	z-index: 100;
}

.admin-bar .builder-module-navigation-background-wrapper.fixed {
	top: 28px;
}

In the above CSS code, ensure that correct selector is being used.

Source: http://www.1stwebdesigner.com/tutorials/create-stay-on-top-menu-css3-jquery/ and http://ithemes.com/wp-content/themes/iThemes2012/js/ui.js

Method 2: Using Sticky jQuery plugin in iThemes Builder

Below instructions can be used to make nav bar and a widget as sticky (fixed position and always visible) using the Sticky jQuery plugin.


Watch in 1080p HD and in full screen for best viewing experience

Please note that I have tested it only in Builder Default child theme. Numbers in the code and CSS may have to be adjusted for other child themes.

1. Download Sticky jQuery plugin. Extract the zip file and upload jquery.sticky.js to /assets/sticky under site root.

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

add_action('wp_enqueue_scripts', 'add_my_code');

function add_my_code() {
	wp_enqueue_script( 'jquery-sticky', get_bloginfo('wpurl') . '/assets/sticky/jquery.sticky.js', array('jquery'), '1.0', true );
    add_action( 'print_footer_scripts', 'my_footer_script' );
}

function my_footer_script() { ?>


    <?php if(is_admin_bar_showing()) : ?>
	    <script type="text/javascript">
	    	jQuery(function($) {
            $(".builder-module-navigation").sticky({topSpacing: 28, getWidthFrom: ".builder-module-navigation-outer-wrapper"});
            $("#meta-5").sticky({topSpacing: 64});
        });
	    </script>

	<?php else : ?>

	    <script type="text/javascript">
	        jQuery(function($) {
	            $(".builder-module-navigation").sticky({topSpacing: 0, getWidthFrom: ".builder-module-navigation-outer-wrapper"});
	            $("#meta-5").sticky({topSpacing: 36});
	        });
	    </script>

    <?php endif;


} ?>

In the above,

a) replace meta-5 with the ID of widget that you would like to make sticky.

b) replace 36 with height of nav bar

c) replace 64 with height of nav bar + 28

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

.sticky-wrapper.is-sticky .builder-module-navigation {
	border-bottom: 1px solid #d6d6d6;
	box-shadow: 0px 0px 16px rgba(0,0,0,0.1);
}

.builder-module-content .widget {
	background: #DDD;
	border-bottom: 3px solid #F1F0F0;
	width: 264px !important;
}

In the above replace 264 with width of widget w/o left and right padding.

How to Style All First Words of Widget Titles Differently

Screen Shot 2013-03-20 at 9.31.42 AM.png

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

// ==================================================
// = Assign a Class to First Word of Widget Titles =
// ==================================================

// load javascript in footer

add_action('wp_enqueue_scripts', 'add_my_code');

function add_my_code() {
	add_action( 'print_footer_scripts', 'my_footer_script' );
}

// Add jQuery to footer

function my_footer_script() { ?>

    <script type="text/javascript">
    	jQuery(function($) {

			$('.builder-module-sidebar h4.widget-title').each(function() {
			   var h = $(this).html();
			   var index = h.indexOf(' ');
			   if(index == -1) {
			       index = h.length;
			   }
			   $(this).html('<span class="widget-title-first-word">' + h.substring(0, index) + '</span>' + h.substring(index, h.length));
			});

    	});
    </script>

<?php }

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

/****************************************************
    Styling First Word of Widget Titles
*****************************************************/

.widget-title-first-word {
    color: red;
}

Source: http://blog.codez.in/jquery-css-styling-first-word-of-a-text-differently/jquery/2010/08/23

How to incorporate jQuery Kwicks Accordion in Builder

See this forum post.

Animated Responsive Image Grid

Below is how I implemented a jQuery plugin by codrops in WordPress for creating a responsive image grid that will switch images using different animations and timings.

Live Demo

1. Downloaded source, extracted zip file and uploaded the AnimatedResponsiveImageGrid folder to /assets

2013-04-10 14-17-19.png

2. Added the following at the end of child theme's functions.php:


// =========================================
// = My Changes Below =
// =========================================


// load javascript and styles in footer or head

// only on http://websitesetuppro.com/demos/builder-responsive/animated-responsive-image-grid/
add_action('wp_enqueue_scripts', 'AnimatedResponsiveImageGrid_code');

function AnimatedResponsiveImageGrid_code() {
    if(is_page( '1155' )) {
    	wp_enqueue_script( 'modernizr', get_bloginfo('wpurl') . '/assets/AnimatedResponsiveImageGrid/js/modernizr.custom.26633.js', '2.6.2', false ); /* in head */
        wp_enqueue_script( 'AnimatedResponsiveImageGrid', get_bloginfo('wpurl') . '/assets/AnimatedResponsiveImageGrid/js/jquery.gridrotator.js', array('jquery'), true );

        wp_enqueue_style( 'AnimatedResponsiveImageGrid-style', get_bloginfo('wpurl') . '/assets/AnimatedResponsiveImageGrid/css/style.css' );
    }
}



add_action('wp_enqueue_scripts', 'add_my_code');

function add_my_code() {

    add_action( 'print_footer_scripts', 'my_footer_script' );
}

// Add jQuery to footer

function my_footer_script() { ?>


    <!-- only on http://websitesetuppro.com/demos/builder-responsive/animated-responsive-image-grid/ -->
    <?php if(is_page( '1155' )) { ?>
    <script type="text/javascript">
        jQuery(function($) {
            $( '#ri-grid' ).gridrotator( {
				w320 : {
					rows : 3,
					columns : 4
				},
				w240 : {
					rows : 3,
					columns : 3
				}
			} );

			$( '#ri-grid-2' ).gridrotator( {
				rows		: 3,
				columns		: 15,
				animType	: 'fadeInOut',
				animSpeed	: 1000,
				interval	: 600,
				step		: 1,
				w320		: {
					rows	: 3,
					columns	: 4
				},
				w240		: {
					rows	: 3,
					columns	: 4
				}
			} );
        });
    </script>
    <?php }


}

3.

a) Placed this (in Text view) in "Animated Responsive Image Grid" Page:

<h2>Demo 1: Random animations / 55% container width / 3s between switching</h2>

<div id="ri-grid" class="ri-grid ri-grid-size-1 ri-shadow">
	<img class="ri-loading-image" src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/loading.gif"/>
	<ul>
		<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/1.jpg"/></a></li>
		<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/2.jpg"/></a></li>
		<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/3.jpg"/></a></li>
		<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/4.jpg"/></a></li>
		<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/5.jpg"/></a></li>
		<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/6.jpg"/></a></li>
		<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/7.jpg"/></a></li>
		<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/8.jpg"/></a></li>
		<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/9.jpg"/></a></li>
		<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/10.jpg"/></a></li>
		<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/11.jpg"/></a></li>
		<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/12.jpg"/></a></li>
		<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/13.jpg"/></a></li>
		<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/14.jpg"/></a></li>
		<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/15.jpg"/></a></li>
		<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/16.jpg"/></a></li>
		<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/17.jpg"/></a></li>
		<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/18.jpg"/></a></li>
		<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/19.jpg"/></a></li>
		<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/20.jpg"/></a></li>
		<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/21.jpg"/></a></li>
		<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/22.jpg"/></a></li>
		<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/23.jpg"/></a></li>
		<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/24.jpg"/></a></li>
		<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/25.jpg"/></a></li>
		<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/26.jpg"/></a></li>
		<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/27.jpg"/></a></li>
		<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/28.jpg"/></a></li>
		<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/29.jpg"/></a></li>
		<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/30.jpg"/></a></li>
		<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/31.jpg"/></a></li>
		<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/32.jpg"/></a></li>
		<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/33.jpg"/></a></li>
		<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/34.jpg"/></a></li>
		<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/35.jpg"/></a></li>
		<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/36.jpg"/></a></li>
		<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/37.jpg"/></a></li>
		<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/38.jpg"/></a></li>
		<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/39.jpg"/></a></li>
		<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/40.jpg"/></a></li>
		<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/41.jpg"/></a></li>
		<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/42.jpg"/></a></li>
		<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/43.jpg"/></a></li>
		<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/44.jpg"/></a></li>
		<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/45.jpg"/></a></li>
		<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/46.jpg"/></a></li>
		<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/47.jpg"/></a></li>
		<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/48.jpg"/></a></li>
		<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/49.jpg"/></a></li>
		<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/50.jpg"/></a></li>
		<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/51.jpg"/></a></li>
		<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/52.jpg"/></a></li>
		<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/53.jpg"/></a></li>
		<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/54.jpg"/></a></li>
	</ul>
</div>

b) Placed this in HTML module below the content module in layout used by that Page:

<h2 style="margin-left: 1em; margin-right: 1em;">Demo 2: "fadeInOut" animation / 100% container width / 1 image switch at a time / 600ms between switching</h2>

<div id="ri-grid-2" class="ri-grid ri-grid-size-2">
	<img class="ri-loading-image" src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/loading.gif"/>
	<ul>
		<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/1.jpg"/></a></li>
		<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/2.jpg"/></a></li>
		<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/3.jpg"/></a></li>
		<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/4.jpg"/></a></li>
		<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/5.jpg"/></a></li>
		<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/6.jpg"/></a></li>
		<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/7.jpg"/></a></li>
		<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/8.jpg"/></a></li>
		<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/9.jpg"/></a></li>
		<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/10.jpg"/></a></li>
		<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/11.jpg"/></a></li>
		<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/12.jpg"/></a></li>
		<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/13.jpg"/></a></li>
		<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/14.jpg"/></a></li>
		<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/15.jpg"/></a></li>
		<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/16.jpg"/></a></li>
		<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/17.jpg"/></a></li>
		<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/18.jpg"/></a></li>
		<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/19.jpg"/></a></li>
		<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/20.jpg"/></a></li>
		<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/21.jpg"/></a></li>
		<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/22.jpg"/></a></li>
		<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/23.jpg"/></a></li>
		<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/24.jpg"/></a></li>
		<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/25.jpg"/></a></li>
		<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/26.jpg"/></a></li>
		<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/27.jpg"/></a></li>
		<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/28.jpg"/></a></li>
		<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/29.jpg"/></a></li>
		<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/30.jpg"/></a></li>
		<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/31.jpg"/></a></li>
		<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/32.jpg"/></a></li>
		<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/33.jpg"/></a></li>
		<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/34.jpg"/></a></li>
		<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/35.jpg"/></a></li>
		<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/36.jpg"/></a></li>
		<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/37.jpg"/></a></li>
		<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/38.jpg"/></a></li>
		<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/39.jpg"/></a></li>
		<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/40.jpg"/></a></li>
		<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/41.jpg"/></a></li>
		<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/42.jpg"/></a></li>
		<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/43.jpg"/></a></li>
		<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/44.jpg"/></a></li>
		<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/45.jpg"/></a></li>
		<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/46.jpg"/></a></li>
		<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/47.jpg"/></a></li>
		<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/48.jpg"/></a></li>
		<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/49.jpg"/></a></li>
		<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/50.jpg"/></a></li>
		<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/51.jpg"/></a></li>
		<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/52.jpg"/></a></li>
		<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/53.jpg"/></a></li>
		<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/54.jpg"/></a></li>
	</ul>
				</div>

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

/* http://websitesetuppro.com/demos/builder-responsive/animated-responsive-image-grid/ */

.ri-grid-size-1 {
    width: 90% !important;
}

.ri-grid ul li,
.ri-grid ul li a {
    width: 98px !important;
    height: 97px !important;
}

#builder-module-516519f61bcba-outer-wrapper {
    max-width: 100% !important;
}

#ri-grid-2 ul li,
#ri-grid-2 ul li a {
    width: 94px !important;
    height: 94px !important;
}

.page-id-1155 .builder-module-content .builder-module-element {
	margin-bottom: 0 !important;
}

.page-id-1155 .hentry {
	margin-bottom: 0;
}

Easy Accordion jQuery plugin in iThemes Builder

Live Demo [Note: Due to differences in CSS properties like font sizes between child themes and other minor customizations, the demo (which uses Air child theme) looks slightly different than the screenshot below, which was taken in Default child theme]

Easy Accordion Test Page - WordPress Dev Site 2013-04-30 13-03-49.png

Easy Accordion is a jQuery plugin to create a horizontal accordion and is a free alternative to Slidedeck.

The following steps outline how the plugin's demo can be set up in a WordPress site running iThemes Builder. Once you have the following working, you can then edit the HTML, javascript parameters and CSS to suit your needs.

1. Download the full sample zip file from here under the Conclusion section. Extract the zip file and upload the resulting jQuery-easyAccordion folder to assets directory under your site's root.

2. Upload all the contents of jQuery-easyAccordion/images folder to active child theme's images directory.

3. Wherever you want the Easy Accordion to appear (in a Page or Post or HTML module etc), paste the following:

<div class="sample">
        <h1>jQuery Easy Accordion Plugin</h1>
        
        <h2>Horizontal Accordion with Autoplay</h2>
        <p>Set the '<strong>autoStart</strong>' parameter to '<strong>true</strong>' to get a timed slideshow. You can also define the interval between each slide in milliseconds using the '<strong>slideInterval</strong>' parameter.</p>
        <div id="accordion-1">
            <dl>
                <dt>First slide</dt>
                <dd><h2>This is the first slide</h2><p><img src="http://buildersnippets.com/assets/jQuery-easyAccordion/images/monsters/img1.png" alt="Alt text to go here" />Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, enim.<br /><a href="#" class="more">Read more</a></p></dd>
                <dt>Second slide</dt>
                <dd><h2>Here is the second slide</h2><p><img src="http://buildersnippets.com/assets/jQuery-easyAccordion/images/monsters/img2.png" alt="Alt text to go here" />Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, enim.<br /><a href="#" class="more">Read more</a></p></dd>
                <dt>One more slide</dt>
                <dd><h2>One more slide to go here</h2><p><img src="http://buildersnippets.com/assets/jQuery-easyAccordion/images/monsters/img3.png" alt="Alt text to go here" />Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, enim.<br /><a href="#" class="more">Read more</a></p></dd>
                <dt>Another slide</dt>
                <dd><h2>Another slide to go here</h2><p><img src="http://buildersnippets.com/assets/jQuery-easyAccordion/images/monsters/img4.png" alt="Alt text to go here" />Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, enim.<br /><a href="#" class="more">Read more</a></p></dd>
                <dt>Wow one more</dt>
                <dd><h2>Unbilievable one more slide here</h2><p><img src="http://buildersnippets.com/assets/jQuery-easyAccordion/images/monsters/img5.png" alt="Alt text to go here" />Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, enim.<br /><a href="#" class="more">Read more</a></p></dd>
                <dt>Last one</dt>
                <dd><h2>This is definitely the last one</h2><p><img src="http://buildersnippets.com/assets/jQuery-easyAccordion/images/monsters/img6.png" alt="Alt text to go here" />Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, enim.<br /><a href="#" class="more">Read more</a></p></dd>
            </dl>
        </div>
        
        <h2>Simple Horizontal Accordion</h2>
        <p>If you don't specify the '<strong>autoStart</strong>' parameter or if you set it to '<strong>false</strong>' you get a simple slideshow.</p>

        <div id="accordion-2">
            <dl>
                <dt>Slide title</dt>
                <dd><h2>First mammoth here</h2><p><img src="http://buildersnippets.com/assets/jQuery-easyAccordion/images/mammoths/img1.png" alt="Alt text to go here" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean commodo ligula eget dolor.</p></dd>
                <dt>Another slide</dt>
                <dd><h2>Over the moon!</h2><p><img src="http://buildersnippets.com/assets/jQuery-easyAccordion/images/mammoths/img2.png" alt="Alt text to go here" />Aenean commodo ligula eget dolor. Aenean massa. Nascetur aenean commodo ligula eget dolor. Aenean massa eget. </p></dd>
                <dt>Third slide</dt>
                <dd><h2>Another mammoth</h2><p><img src="http://buildersnippets.com/assets/jQuery-easyAccordion/images/mammoths/img3.png" alt="Alt text to go here" />Ipsum dolor sit amet.Aenean ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur.</p></dd>
                <dt>Last slide</dt>
                <dd><h2>This is my favourite</h2><p><img src="http://buildersnippets.com/assets/jQuery-easyAccordion/images/mammoths/img4.png" alt="Alt text to go here" />Cum sociis natoque penatibus et donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p></dd>
           </dl>
        </div>
        
        <h2>Set the initial Active Slide</h2>
        <p>You can easily set the <strong>initial active slide</strong> by adding the '<strong>active</strong>' class to the respective DT element.
        <br />Notice that you could also remove the slide number by setting the '<strong>slideNum</strong>' parameter to '<strong>false</strong>'.</p>
        <div id="accordion-3">
            <dl>
                <dt>Slide title</dt>
                <dd><h2>First slide here</h2><p><img src="http://buildersnippets.com/assets/jQuery-easyAccordion/images/bugs/img2.png" alt="Alt text to go here" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean commodo ligula eget dolor.</p></dd>
                <dt>Another slide</dt>
                <dd><h2>Title to go here</h2><p><img src="http://buildersnippets.com/assets/jQuery-easyAccordion/images/bugs/img4.png" alt="Alt text to go here" />Aenean commodo ligula eget dolor. Aenean massa. Nascetur aenean commodo ligula eget dolor. Aenean massa eget. </p></dd>
                <dt class="active">Third slide</dt>
                <dd><h2>Here is the title</h2><p><img src="http://buildersnippets.com/assets/jQuery-easyAccordion/images/bugs/img1.png" alt="Alt text to go here" />Ipsum dolor sit amet.Aenean ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur.</p></dd>
                <dt>Last slide</dt>
                <dd><h2>Last slide title</h2><p><img src="http://buildersnippets.com/assets/jQuery-easyAccordion/images/bugs/img3.png" alt="Alt text to go here" />Cum sociis natoque penatibus et donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p></dd>
           </dl>
        </div>

        <p><a href="http://www.madeincima.eu/blog/jquery-plugin-easy-accordion/">Go back to the post!</a></p>
    </div>

In the case of my demo, the above code has been placed in a static Page.

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

// load javascript and styles in footer or header

// only on http://buildersnippets.com/easy-accordion-test-page/
add_action('wp_enqueue_scripts', 'easyAccordion_code');

function easyAccordion_code() {
    if(is_page( '127' )) {
        wp_enqueue_script( 'easyAccordion', get_bloginfo('wpurl') . '/assets/jQuery-easyAccordion/scripts/jquery.easyAccordion.js', array('jquery'), '0.1', true );

        wp_enqueue_style( 'easy-accordion', get_bloginfo('wpurl') . '/assets/jQuery-easyAccordion/css/styles.css' );
    }
}


add_action('wp_enqueue_scripts', 'add_my_code_ea');

function add_my_code_ea() {

    add_action( 'print_footer_scripts', 'my_footer_script_ea' );
}

// Add jQuery to footer

function my_footer_script_ea() { ?>


    <!-- only on http://buildersnippets.com/easy-accordion-test-page/ -->
    <?php if(is_page( '127' )) { ?>
    <script type="text/javascript">
        var accordion;
        jQuery(function($) {
        	$('#accordion-1').easyAccordion({
				autoStart: true,
				slideInterval: 3000
			});

			$('#accordion-2').easyAccordion({
				autoStart: false
			});

			$('#accordion-3').easyAccordion({
				autoStart: true,
				slideInterval: 5000,
				slideNum:false
			});

			$('#accordion-4').easyAccordion({
				autoStart: false,
				slideInterval: 5000
			});
        });
    </script>
    <?php }


}

The if(is_page( '127' )) conditional is in place to ensure that javascript is loaded and called only where needed (in this case, a specific Page vs site-wide). You would need to either change the ID or remove the conditional to suit your needs.

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

/* Easy Accordion Styling */

.sample{border:1px solid #92cdec;background:#d7e7ff;padding:30px}
.easy-accordion h2{margin:0px 0 20px 0;padding:0;font-size:1.6em;}

dd p{line-height:120%}

#accordion-1{width:800px;height:245px;padding:30px;background:#fff;border:1px solid #b5c9e8}
#accordion-1 dl{width:800px;height:245px}
#accordion-1 dt{height:46px;line-height:44px;text-align:right;padding:0 15px 0 0;font-size:1.1em;font-weight:bold;font-family: Tahoma, Geneva, sans-serif;text-transform:uppercase;letter-spacing:1px;background:#fff url(images/slide-title-inactive-1.jpg) 0 0 no-repeat;color:#26526c}
#accordion-1 dt.active{cursor:pointer;color:#fff;background:#fff url(images/slide-title-active-1.jpg) 0 0 no-repeat}
#accordion-1 dt.hover{color:#68889b;}
#accordion-1 dt.active.hover{color:#fff}
#accordion-1 dd{padding:25px;background:url(images/slide.jpg) bottom left repeat-x;border:1px solid #dbe9ea;border-left:0;margin-right:3px}
#accordion-1 .slide-number{color:#68889b;left:10px;font-weight:bold}
#accordion-1 .active .slide-number{color:#fff;}
#accordion-1 a{color:#68889b}
#accordion-1 dd img{float:right;margin:0 0 0 30px;}
#accordion-1 h2{font-size:2.5em;margin-top:10px}
#accordion-1 .more{padding-top:10px;display:block}

#accordion-2{width:700px;height:195px;padding:30px;background:#fff;border:1px solid #b5c9e8}
#accordion-2 h2{font-size:2.5em;margin-top:10px;}
#accordion-2 dl{width:700px;height:195px}
#accordion-2 dt{height:56px;line-height:44px;text-align:right;padding:10px 15px 0 0;font-size:1.1em;font-weight:bold;font-family: Tahoma, Geneva, sans-serif;text-transform:uppercase;letter-spacing:1px;background:#fff url(images/slide-title-inactive-2.jpg) 0 0 no-repeat;color:#26526c}
#accordion-2 dt.active{cursor:pointer;color:#fff;background:#fff url(images/slide-title-active-2.jpg) 0 0 no-repeat}
#accordion-2 dt.hover{color:#68889b;}
#accordion-2 dt.active.hover{color:#fff}
#accordion-2 dd{padding:25px;background:url(images/slide.jpg) bottom left repeat-x;border:1px solid #dbe9ea;border-left:0;margin-right:3px}
#accordion-2 .slide-number{color:#68889b;left:10px;font-weight:bold}
#accordion-2 .active .slide-number{color:#fff}
#accordion-2 a{color:#68889b}
#accordion-2 dd img{float:right;margin:0 0 0 30px;position:relative;top:-20px}

#accordion-3{width:700px;height:195px;padding:30px;background:#fff;border:1px solid #b5c9e8}
#accordion-3 h2{font-size:2.5em;margin-top:10px}
#accordion-3 dl{width:700px;height:195px}
#accordion-3 dt{height:56px;line-height:44px;text-align:right;padding:10px 15px 0 0;font-size:1.1em;font-weight:bold;font-family: Tahoma, Geneva, sans-serif;text-transform:uppercase;letter-spacing:1px;background:#fff url(images/slide-title-inactive-2.jpg) 0 0 no-repeat;color:#26526c}
#accordion-3 dt.active{cursor:pointer;color:#fff;background:#fff url(images/slide-title-active-2.jpg) 0 0 no-repeat}
#accordion-3 dt.hover{color:#68889b;}
#accordion-3 dt.active.hover{color:#fff}
#accordion-3 dd{padding:25px;background:url(images/slide.jpg) bottom left repeat-x;border:1px solid #dbe9ea;border-left:0;margin-right:3px}
#accordion-3 .slide-number{color:#68889b;left:13px;font-weight:bold}
#accordion-3 .active .slide-number{color:#fff}
#accordion-3 a{color:#68889b}
#accordion-3 dd img{float:right;margin:0 0 0 30px;position:relative;top:-20px}

.sample h1 {
	margin-top: 0;
	line-height: 1;
}

.hentry .easy-accordion img {
	background: none;
	border: none;
	-moz-border-radius: 0;
	-webkit-border-radius: 0;
	border-radius: 0;
	padding: 0;
}

.easy-accordion h2 {
	line-height: 1;
	margin-top: 0;
}

How to get the output of a Header module in a HTML module

Using a HTML module gives more control than a Header module in situations like this.

Header Module Settings.png

Output of above Header module can be simulated by using a PHP enabled HTML module having the following code:

<?php if (is_front_page()) : ?>
	<h1 class="site-title"><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>

	<h3 class="site-tagline"><a href="<?php bloginfo('url'); ?>"><?php bloginfo('description'); ?></a></h3>

<?php else : ?>
	<h3 class="site-title"><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h3>

	<h5 class="site-tagline"><a href="<?php bloginfo('url'); ?>"><?php bloginfo('description'); ?></a></h5>

<?php endif; ?>

How to Show Featured Image Below Navigation Module on Static Pages

builder_module_render_navigation hook can be used to inject content below and/or above all nav bars in Builder.

In this example, the goal is to show featured image attached to Pages below the nav bar as a header. This way each Page can have its own unique header image.

2013-03-22 13-59-21.png
2013-03-22 13-26-02.png

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

add_action( 'builder_module_render_navigation', 'show_featured_image', 20 );

function show_featured_image() {
	if (has_post_thumbnail() && is_page()) { ?>
		<div class="my-featured-image-header">
	        <?php the_post_thumbnail(); ?>
	    </div>
	<?php }
}

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

.my-featured-image-header img {
	margin-top: 0;
	margin-bottom: 0;
	vertical-align: top;
}

.builder-module-navigation .builder-module-element-outer-wrapper { /* if needed */
	margin-bottom: 0;
}

If 20 in

add_action( 'builder_module_render_navigation', 'show_featured_image', 20 );

is changed to 0, then the function will be output ABOVE the nav bar(s).

Forum topic: http://ithemes.com/forum/topic/40690-featured-image-on-each-page/

How to Fix "Missing required fields" warnings in Structured Data Testing Tool

Rich Snippets Testing Tool can be used to check whether Google can correctly parse your structured data markup and display it in search results.

Before:

Screen Shot 2013-03-29 at 6.25.24 PM.png

After:

Screen Shot 2013-03-29 at 6.57.00 PM.png

The fix is to edit these active theme (ideally, should be a child theme of Builder) template files (at the minimum): index.php, archive.php, single.php, page.php and search.php.

You might have to edit other/more template files depending on your need. See http://codex.wordpress.org/images/1/18/Template_Hierarchy.png

If any of these files are not present in the child theme, copy them from parent Builder directory into the child theme's directory and edit them.

  • Title of the post should be marked with class entry-title
  • Posting date should be marked with class updated
  • Full name of the post author should be marked with class author accomplished by elements from hCard microformat – vcard and fn

Sample generated HTML code should be:

<span class="entry-title">How to fix "missing required fields" warnings in Rich Snippets Testing Tool</span>
<span class="updated">December 24, 2011</span>
<span class="vcard author"><span class="fn">Anton Khitrenovich</span></span>

To fix Warning: Missing required field "updated" in Builder

Locate the date div and add updated class to it.

Ex.:

Change

<div class="entry-meta date">

to

<div class="entry-meta date updated">

To fix Warning: Missing required hCard "author" in Builder

Change

<?php printf( __( 'By %s', 'it-l10n-Builder' ), '<span class="author">' . builder_get_author_link() . '</span>' ); ?>

to

<?php printf( __( 'By %s', 'it-l10n-Builder' ), '<span class="vcard author"><span class="fn">' . builder_get_author_link() . '</span></span>' ); ?>

Family name and Given names are taken from values entered for Last Name and First Name respectively in author's profile page.

Example of doing the above changes in Kepler child theme: http://ithemes.com/forum/topic/33858-google-rich-snippet-tool-warning-missing-required-field-entry-title/#entry156972

Tip: If a static Page is set to be shown on front page, then page.php would be the main file to edit and do the above changes. As it does not have the code for displaying author and date, the below lines can be added in the loop and CSS display property set to none to not show them on the homepage.

Ex.:

<div class="entry-meta date updated">
	<?php echo get_the_date(); ?>
</div>

<?php printf( __( 'By %s', 'it-l10n-Builder' ), '<span class="vcard author"><span class="fn">' . builder_get_author_link() . '</span></span>' ); ?>

was added above

<!-- post content -->
2013-03-29 19-20-58.png

In child theme's style.css:

.home .entry-title,
.page .date,
.page .author {
	display: none;
}

Source:

http://technotes.khitrenovich.com/fix-missing-required-fields-warnings-rich-snippets-testing-tool/

http://nepallica.com/fix-google-rich-snippets-warning-missing-required-field-wordpress/

How to Make Entire Text Widgets Clickable

2013-03-31 17-48-29.png

When a text link is placed in a text widget, only the text will be clickable as hyperlinks are inline elements.

display: block CSS can be used so the entire widget becomes clickable.

Ex.:

Code in a text widget:

<a href="#" class="my-widget-link">Mold Removal and Remediation</a>

CSS:

a.my-widget-link {
 	display: block;
 	font-size: 1.65em;
 	padding: 1em;
}

#builder-module-514372ec66190 .widget {
 	padding: 0;
}

where builder-module-514372ec66190 is the ID of widget bar module having the widget.

How to Enable Comments For Custom Post Types

1. Ensure that support for Comments is enabled in the CPT.

How this is done depends on the method being used to set up the CPTs.

Here's an example when using CustomPress:

2013-04-02 12-35-15.png

2. Go to My Theme -> Settings -> Comments.

Even though the CPT might be shown as selected, it won't actually work until it is unchecked and checked again. Therefore, untick your CPT under Comments, save settings, tick it and again save settings.

3. In the CPT add/edit screen, tick Allow comments in Discussion meta box. If Discussion meta box is not visible, pull down Screen Options at the top right of the page and tick Discussion.

How to Create Mobile Navigation like the new Air Theme

There are several steps involved to accomplish this. The solution was tested on a couple of Builder Child themes, but not all, so this may not work for all Child themes. As such, these instructions are provided "as is" and are unsupported. Further customisation is beyond the scope of our theme support.

Pre-requisites

  • Builder parent theme AND your Builder child theme should be at least at version 4, since these are responsive capable themes.
  • Responsive needs to be enabled in the child theme (functions.php should contain: add_theme_support( 'builder-responsive' );

Include the javascript code that enables the Mobile dropdown

  • Copy the js folder and contents from the Air child theme to your child theme.
  • Add the following code at the end of your child theme's functions.php file, yet before the closing ?> (if any):
// Enqueuing and Using Custom Javascript/Jquery 
function it_air_load_custom_scripts() {
	wp_register_script( 'it_air_jquery_additions', get_stylesheet_directory_uri() . '/js/it_air_jquery_additions.js', array('jquery'), false, true );
	wp_enqueue_script('it_air_jquery_additions');
}
add_action( 'wp_enqueue_scripts', 'it_air_load_custom_scripts' );

Enable the Mobile Nav as an Alternative Navigation Module Style

Following the code added in step 1, add the following code in functions.php (again, before a closing ?>)

// Add Support for Alternate Module Styles
if ( ! function_exists( 'it_builder_loaded' ) ) {
	function it_builder_loaded() {
		builder_register_module_style( 'navigation', 'Mobile Navigation', 'mobile-nav' );
	}
}
add_action( 'it_libraries_loaded', 'it_builder_loaded' );


Add the css code for the Mobile navigation

Add the following code at the end of your child themes mobile stylesheet style-mobile.css:

/*********************************************
	Navigation Module (Mobile)
*********************************************/
.builder-module-navigation.mobile {
	padding-top: .5em !important;
}

.builder-module-navigation.mobile ul {
	margin-top: .5em;
}

.builder-module-navigation.mobile li {
	width: 100%;
	position: relative;
}

/* second level stuff */
.builder-module-navigation.mobile li ul {
	position: relative !important;
	left: 0 !important;
	border: 0;
	width: 100%;
	margin: 0;
}

.builder-module-navigation.mobile li a,
.builder-module-navigation.mobile .current_page_item li a,
.builder-module-navigation.mobile .current-cat li a,
.builder-module-navigation.mobile .current-menu-item li a {
	margin: 0;
	background: transparent;
	border-color: transparent;
	color: #3B3F42;
	border-bottom: 1px solid rgba(0,0,0,0.1);
}

.builder-module-navigation.mobile li a:hover,
.builder-module-navigation.mobile .current_page_item li a:hover,
.builder-module-navigation.mobile .current-cat li a li a:hover,
.builder-module-navigation.mobile .current-menu-item li a:hover {
	background: #3B3F42;
	color: #ECECEC;
}

.builder-module-navigation.mobile li li {
	border: 0;
	width: 100%;
}

.builder-module-navigation.mobile li ul ul {
	margin: 0;
}

.builder-module-navigation.mobile li li a {
	padding: .25em 0 .25em 2em;
	line-height: inherit;
	border-radius: 2px;
}

.builder-module-navigation.mobile li li li a {
	padding-left: 4em;
}

.builder-module-navigation.mobile-nav .menu.hidden {
	display: none;
}
#it-mobile-menu {
	background: #3B3F42;
	color: #ECECEC;
	padding: .25em .75em;	
	display: block;
	cursor: pointer;
	border-radius: 2px;
	-webkit-font-smoothing: antialiased;	
}

.builder-module-navigation.mobile.borderless {
	border: 0;
}

Make sure the Mobile navigation only shows when in Mobile mode (style-mobile.css is active)

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

/*********************************************
	Mobile Navigation Menu (Alternate Module Style - hidden above 500px wide)
*********************************************/

#it-mobile-menu {
	display: none;
}

Activate the Mobile Navigation

Select the Mobile navigation Style in the Builder Layout Manager for your Navigation Module.

Personal tools
Namespaces
Variants
Actions
iThemes Codex
Codex Navigation
Toolbox