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:

Note: If a layout is applied to this Page, ensure that it (the layout) does not have an extension applied.

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

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.

How to implement Yoast Breadcrumbs in Builder

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

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

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

How to assign layouts to The Events Calendar pages

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

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

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

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

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

#gform_wrapper_2 {
margin-top: 4em;
}

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

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 in correct PHP code 1

<?php
php code
<?php
some more php code
?>
?>

example of in correct 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.

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

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

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

Before

After

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:

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

Using a Shortcode in HTML Module for Custom Header

A user in the forum asked the following:

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

One of the ways this can be done is by creating a shortcode having the HTML code needed to display the custom header image and place this shortcode in HTML module of all the layouts. 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 5088b68b45105 in the above to ID of layout that you wish to assign to the shop page.

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