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

== How to display Posts from a specific category on a Page in Magazine Extension style ==

+

= How to use CSS3 PIE =

−

+

−

[[File:Page-mag-style.png|800px|thumb|none]]

+

−

+

−

The instructions below outline how to have all posts from a category named ''Issues'' (ID = 18) appear on a Page titled ''Issues List'' (slug = ''issues-list'').

+

−

+

−

'''1.''' Ensure that [http://codex.wordpress.org/Using_Permalinks pretty permalinks] are enabled. Create a Page titled ''Issues''. Do not enter any content in the Page. Just enter the title and publish.

Here are some general tips on using [http://codecanyon.net/item/easy-custom-content-types-for-wordpress/234182 Easy Custom Content Types for WordPress] in Builder.

+

−

+

−

'''1.''' Do not use <code>Post name</code> permalink structure. <code>Day and name</code> works fine.

+

−

+

−

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

+

−

+

−

[[File:2012-03-01 10-32-06.png|484px|thumb|none]]

+

−

+

−

'''3.''' Create your Post Types.

+

−

+

−

Ex.:

+

−

+

−

[[File:2012-03-01 10-44-56.png|800px|thumb|none]]

+

−

+

−

The URL of archive listing of entries from a CPT is: http://yoursite.com/cptslug

+

−

+

−

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

+

−

+

−

The URL of single CPT entry is: http://yoursite.com/cptslug/entrytitle

+

−

+

−

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

+

−

+

−

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

+

−

+

−

Ex.:

+

−

+

−

[[File:2012-03-01 10-39-45.png|623px|thumb|none]]

+

−

+

−

'''5.''' Create any necessary Meta Boxes and Meta Fields.

+

−

+

−

Ex.:

+

−

+

−

[[File:2012-03-01 10-58-00.png|800px|thumb|none]]

+

−

+

−

[[File:2012-03-01 10-58-18.png|800px|thumb|none]]

+

−

+

−

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

+

−

+

−

<pre class="brush:php;">

+

−

<?php

+

−

global $post;

+

−

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

+

−

?>

+

−

</pre>

+

−

+

−

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

+

−

+

−

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

+

−

+

−

[[File:2012-03-01 11-11-28.png|547px|thumb|none]]

+

−

+

−

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

+

−

+

−

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

Determine where you want the breadcrumbs to appear and edit the appropriate template file(s) in child theme. Use [http://codex.wordpress.org/images/1/18/Template_Hierarchy.png this] image as a reference. If a particular file is not present in the child theme directory, copy it from parent Builder directory.

+

−

+

−

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

+

−

+

−

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

+

−

+

−

Edit page.php.

+

−

+

−

Below

+

−

+

−

<pre class="brush:php;">

+

−

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

+

−

</pre>

+

−

+

−

add

+

−

+

−

<pre class="brush:php;">

+

−

<?php if ( function_exists('yoast_breadcrumb') ) {

+

−

yoast_breadcrumb('<p id="breadcrumbs">','</p>');

+

−

} ?>

+

−

</pre>

+

−

+

−

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

+

−

+

−

<pre class="brush:css;">

+

−

#breadcrumbs {

+

−

color: #D0ECF3;

+

−

margin-top: 0;

+

−

}

+

−

+

−

#breadcrumbs a {

+

−

color: #FFFFFF;

+

−

}

+

−

</pre>

+

−

+

−

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

+

−

+

−

This should result in [[File:2012-06-26 21-36-17.png|746px|thumb|none]]

+

−

+

−

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

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

[http://wordpress.org/extend/plugins/the-events-calendar/ The Events Calendar] plugin enables you to rapidly create and manage events. Features include Google Maps integration as well as default templates such as a calendar grid and event list, widget and so much more.

+

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

−

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

+

[[File:Header Module Settings.png|463px|thumb|none]]

−

<pre class="brush:php;">

+

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

−

function set_custom_layout( $layout_id ) {

+

−

if ( tribe_is_month() || tribe_is_upcoming() || tribe_is_past() )

+

−

return '4f5363f3cb8e1';

+

−

+

−

return $layout_id;

+

−

}

+

−

add_filter( 'builder_filter_current_layout', 'set_custom_layout' );

+

−

</pre>

+

−

+

−

In the above replace <code>4f5363f3cb8e1</code> with the ID of your desired layout.

3) 'Teasers Layout - Image Left' Builder extension is applied to the Posts page with [http://ithemes.com/codex/page/Builder_Extensions#How_to_show_Read_More_below_each_excerpt_when_using_.27Teasers_Layout_-_Image_Left.27_extension Read More set to appear for all excerpts].

+

−

+

−

<gallery widths=178px heights=598px>

+

−

File:My iThemes Builder Test Site 2013-01-25 15-38-08.png|Before

+

−

File:My iThemes Builder Test Site 2013-01-25 15-39-07.png|After

+

−

</gallery>

+

−

+

−

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

+

−

+

−

'''1.''' Add the following at end of child theme's <code>functions.php</code>:

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

+

−

+

−

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

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

+

−

+

−

<gallery>

+

−

File:Screen Shot 2013-01-31 at 11.43.35 AM.png|Before

+

−

File:Screen Shot 2013-01-31 at 11.44.35 AM.png|After

+

−

</gallery>

+

−

+

−

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

+

−

+

−

[[File:2013-02-01 19-34-41.png|308px|thumb|none]]

+

−

+

−

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

+

−

+

−

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

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

+

−

+

−

<pre class="brush:css; gutter: false;">

+

−

#gform_wrapper_2 {

+

−

margin-top: 4em;

+

−

}

+

</pre>

</pre>

−

In the above change <code>2</code> to the ID of form that's embedded.

+

= How to Show Featured Image Below Navigation Module on Static Pages =

−

== Examples of Using jQuery in Builder ==

+

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

−

=== Disclaimer ===

+

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.

−

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

+

[[File:2013-03-22 13-59-21.png|640px|thumb|none]]

−

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.

+

[[File:2013-03-22 13-26-02.png|800px|thumb|none]]

−

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

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>

</pre>

−

where <code>menu-main-menu</code> is the CSS ID of custom menu shown in the nav bar.

+

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

−

+

−

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.

+

to

−

+

−

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

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.

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

</pre>

−

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

+

[[File:2013-03-29 19-20-58.png|800px|thumb|none]]

−

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

+

In child theme's style.css:

−

(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:css; gutter: false;">

−

+

.home .entry-title,

−

<pre class="brush: php; gutter: false;">

+

.page .date,

−

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

+

.page .author {

−

</pre>

+

display: none;

−

+

−

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

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.

−

add_action( 'print_footer_scripts', 'my_footer_script' );

+

−

}

+

−

// Add jQuery to footer

+

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

−

function my_footer_script() { ?>

+

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

−

<script type="text/javascript">

+

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.

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

−

== Using a Shortcode in HTML Module for Custom Header ==

+

<pre class="brush:php; gutter: false;">

−

+

// Add Support for Alternate Module Styles

−

A user in the forum asked the following:

+

if ( ! function_exists( 'it_builder_loaded' ) ) {

−

+

function it_builder_loaded() {

−

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

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

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

+

.builder-module-navigation.mobile.borderless {

−

+

border: 0;

−

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:

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.

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