'''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.'''

'''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 ==

+

= 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'''.

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'''.

'''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.

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):

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."

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].

[[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):

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]

[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]

[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.

'''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>

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):

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

+

−

+

−

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

where <code>builder-module-514372ec66190</code> is the ID of widget bar module having the widget.

where <code>builder-module-514372ec66190</code> is the ID of widget bar module having the widget.

−

== How to Enable Comments For Custom Post Types ==

+

= How to Enable Comments For Custom Post Types =

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

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

Line 1,942:

Line 640:

'''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>.

'''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 ==

+

= How to Create Mobile Navigation like the new Air Theme =

+

==Important notice - new plugin==

+

On Feb 4, 2014, a mobile navigation plugin was released for Beta testing. It should make all the manual changes unnecessary. You can find more on this in this forum: http://ithemes.com/forum/forum/236-builder-mobile-navigation-plugin-beta-feedback/

+

+

So we encourage you to take the plugin for a test drive first, and provide feedback through that forum.

+

+

+

+

+

==Manual implementation==

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.

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===

===Pre-requisites===

Line 1,965:

Line 673:

</pre>

</pre>

−

===Enable the Mobile Nav as an Alternative Navigation Module Style===

+

===Enable the Mobile Nav as an Alternative Module Style===

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

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

+

+

'''NOTE: when using a navigation menu in another module (e.g. an HTML module, see [http://ithemes.com/codex/page/Plugin_related_and_other_generic_customizations_2#How_to_add_a_Navigation_menu_in_a_Builder_module below])'''

To avoid conflicts, the above function <code>it_builder_loaded()</code>will '''only''' run if a function with the same name '''does not already exist'''. Some themes are already using this function to load custom styles. In that case, '''you should not add this function''', but instead '''add the code''' <code>builder_register_module_style( 'html', 'Mobile Navigation', 'mobile-nav' );</code> to the existing function!

===Add the css code for the Mobile navigation===

===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>:

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

+

+

'''Note: when using a navigation menu in another module (e.g. an HTML module)'''

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

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:

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.

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).

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.

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:

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.

So we encourage you to take the plugin for a test drive first, and provide feedback through that forum.

Manual implementation

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):

NOTE:
To avoid conflicts, the above function it_builder_loaded()will only run if a function with the same name does not already exist. Some themes are already using this function to load custom styles. In that case, you should not add this function, but instead add the codebuilder_register_module_style( 'html', 'Mobile Navigation', 'mobile-nav' ); to the existing function!

Add the css code for the Mobile navigation

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

Note: when using a navigation menu in another module (e.g. an HTML module)