Plugin related and other generic customizations 2

(Difference between revisions)
Jump to: navigation, search
(Events Calendar Pro in Builder)
(Added == How to embed a Gravity Forms form at the bottom of all single posts ==)
(45 intermediate revisions by 2 users not shown)
Line 1: Line 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.'''
 
'''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 navigation 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 ===
 +
 
 +
[[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]]
 
[[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].
 
'''1.''' Edit your child theme's [http://ithemes.com/codex/page/Builder_Frequently_Asked_Questions#Where_is_functions.php.3F functions.php].
Line 13: Line 137:
 
function add_images($items, $args) {
 
function add_images($items, $args) {
 
   
 
   
         $items .= '<div class="socialmedia-buttons"><li><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></li>';
+
         $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><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></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><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></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="last"><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></li></div>';
+
         $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;     
 
     return $items;     
Line 42: Line 166:
 
/* Custom Styles For The Social Media Widget Icons in Navigation */
 
/* Custom Styles For The Social Media Widget Icons in Navigation */
  
.socialmedia-buttons {
+
li#first-social-icon {
float: right;
+
    margin-left: 355px; /* Adjust this value so the icons are positioned at your desired location. */
 
}
 
}
  
.socialmedia-buttons img {
+
/* li.social-icon {
border: 0;
+
    height: 36px;
border: 0 !important;
+
} */ /* Needed only in certain themes like Traverse */
margin-right: 10px !important;
+
 
display: inline;
+
li.social-icon a, li.social-icon a:hover {
-webkit-transition: all 0.2s ease-in;
+
    padding: 1px 0 0 8px;
-moz-transition: all 0.2s ease-in;
+
transition: all 0.2s ease;
+
 
}
 
}
  
.socialmedia-buttons a {
+
li.social-icon a:hover {
background: none !important;
+
    opacity: 0.8;
padding: 12px 0 0 5px !important;
+
    -moz-opacity: 0.8;
border-right: none !important;
+
    background: none;  
 
}
 
}
  
.socialmedia-buttons a:hover {
+
li.social-icon:hover,
text-decoration: none;
+
li.social-icon:hover a {
border: 0;
+
    background: none;
-webkit-box-shadow: none !important;
+
-moz-box-shadow: none !important;
+
-o-box-shadow: none !important;
+
box-shadow: none !important;
+
}
+
.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;
+
 
}
 
}
 
</pre>
 
</pre>
  
Here is sample customized code for a few child themes: [http://d.pr/HhKk Default], [http://ithemes.com/forum/index.php?/topic/16654-images-in-top-nav/#p78154 Americana Interstate], [http://ithemes.com/forum/index.php?/topic/16654-images-in-top-nav/#p77690 Ionic].
+
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 display Posts from a specific category on a Page in Magazine Extension style =
+
== How to display Posts from a specific category on a Page in Magazine Extension style ==
  
 
[[File:Page-mag-style.png|800px|thumb|none]]
 
[[File:Page-mag-style.png|800px|thumb|none]]
Line 104: Line 225:
 
<u>Note</u>: If a layout is applied to this Page, ensure that it (the layout) does not have an extension applied.
 
<u>Note</u>: If a layout is applied to this Page, ensure that it (the layout) does not have an extension applied.
  
= Entry 4 =
+
== 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 set up Shopp in iThemes Builder ==
 +
 
 +
[http://shopplugin.net/ Shopp] is an e-commerce plugin that adds a feature-rich online store to your WordPress-powered website or blog.
 +
 
 +
Shopp works out of the box in Builder without the need to edit any template files.
 +
 
 +
'''The steps below outline how Shopp can be set up in Builder''':
 +
 
 +
'''1.''' After Shopp has been installed and activated, it will create four placeholder pages.
 +
 
 +
[[File:Shopp-placeholder-pages.png|690px|thumb|none]]
 +
 
 +
Each of these pages include Shopp-specific shortcodes that are replaced with dynamic content generated by Shopp.
 +
 
 +
'''2.''' Go to Shopp -> Settings, Continue to Shopp Setup...
 +
 
 +
Go through the various settings and fill them out. Refer to links at the bottom of [http://docs.shopplugin.net/Installation this] page for details on these settings.
 +
 
 +
'''3.''' Presentation Settings:
 +
 
 +
Make sure you have saved the settings that have been entered in the previous options thus far, if any, before proceeding further.
 +
 
 +
a) Click on ''Use Custom Templates'' button.
 +
 
 +
b) Create a directory in your active theme (Builder child theme) named ''shopp''. You can either use a FTP client or your hosting cPanel file manager for this.
 +
 
 +
[[File:Creating-shopp-dir-in-child-theme.png]]
 +
 
 +
c) Reload the Presentation Settings in the WordPress/Shopp admin and click ''Install Theme Templates'' button.
 +
 
 +
At this point, Shopp will make a copy of the built-in default templates into the newly created shopp directory within your active theme.
 +
 
 +
d) Tick ''Enable theme templates'' and save changes.
 +
 
 +
'''4.''' Now you are ready to add products. Go to Shopp -> Products. Click Add New. Enter the details and save the product.
 +
 
 +
[[File:Products Builder Test Site WordPress 2011-12-03 17-53-00.png|497px|thumb|none]]
 +
 
 +
Note: After a product image has been added, if its thumbnail does not appear i.e., if it looks like:
 +
 
 +
[[File:Product-image-missing-thumbnail.png]]
 +
 
 +
go to Shopp -> Settings -> System and uncheck ''Enable Flash-based uploading'' next to ''Upload System''. Save changes.
 +
 
 +
You will have to edit the products and add images again.
 +
 
 +
'''Screenshots'''
 +
 
 +
<u>Shop page (Products listing page)</u>
 +
 
 +
[[File:Shop- -Builder-Test-Site-2011-12-03-18-23-09.jpg|744px|thumb|none]]
 +
 
 +
Live Demo: http://sridhar.internal.ithemes.com/shop/ (Dummy site, do not place orders)
 +
 
 +
<u>Product page</u>
 +
 
 +
[[File:Shop-Catalog-Products-Nike-Men-Downshifter-4-MSL-Black-Sports-Shoes- -Builder-Test-Site-2011-12-03-18-35-09.jpg|508px|thumb|none]]
 +
 
 +
<u>Cart page</u>
 +
 
 +
[[File:Cart- -Builder-Test-Site-2011-12-03-18-42-53.jpg|776px|thumb|none]]
 +
 
 +
== How to add smooth animation effect for navigation menus ==
 +
 
 +
[http://jsfiddle.net/ronald/nBFm3/ Live demo]
 +
 
 +
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;">
 +
<script type='text/javascript'>
 +
jQuery(document).ready(function() {
 +
            jQuery(".menu ul").css({display: "none"}); // Opera Fix
 +
            jQuery(".menu li").hover(function(){
 +
                          jQuery(this).find('ul:first').css({visibility: "visible",display: "none"}).show(500);
 +
            },function(){
 +
                            jQuery(this).find('ul:first').css({visibility: "hidden"});
 +
            });
 +
  });
 +
</script>
 +
</pre>
 +
 
 +
Save settings.
 +
 
 +
Note: in the code sample, it is assumed that your menu unordered list tag has a class of "menu" (<code>&lt;ul id="menu-main" class="menu"></code>). To make sure, inspect the menu using Firebug.
 +
 
 +
[http://ithemes.com/forum/topic/21002-navigation-with-animated-effect/ Forum topic].
 +
 
 +
== 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 {
 +
width: 1000px; /* set this to container (layout) width */
 +
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
 +
 
 +
== Using Easy Custom Content Types in Builder ==
 +
 
 +
Easy Content Types, a commercial plugin provides an extremely easy to use and intuitive interface for creating custom post types, taxonomies, and meta boxes.
 +
 
 +
Here are some general tips on using [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]]
 +
 
 +
== 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 implement Yoast Breadcrumbs in Builder ==
 +
 
 +
[http://wordpress.org/extend/plugins/breadcrumbs/ Yoast Breadcrumbs on WordPress.org]
 +
 
 +
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):
 +
 
 +
<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)]
 +
 
 +
== How to assign layouts to The Events Calendar pages ==
 +
 
 +
[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.
 +
 
 +
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):
 +
 
 +
<pre class="brush:php;">
 +
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.
 +
 
 +
Source: http://tri.be/tutorial-integrating-the-events-calendar-w-genesis/
 +
 
 +
It is also possible to set different layouts to different views like
 +
 
 +
* main calendar page
 +
* calendar category pages
 +
* single events
 +
* single event days
 +
* single venues
 +
* events or venue pages
 +
* events list page
 +
 
 +
by adding more functions similar to the one above.
 +
 
 +
The needed if conditionals can be obtained from the source linked above.
 +
 
 +
== Jetpack and Builder ==
 +
 
 +
=== Sharing ===
 +
 
 +
If you would like to use Jetpack's Sharing Buttons in Widget Content widgets, go to
 +
 
 +
# Settings -> Sharing. Tick <code>Widget Content</code> under "Show buttons on".
 +
# My Theme -> Settings -> Widget Content. Select "Use the the_content filter to format Widget Content entries."
 +
 
 +
Sample screenshot:
 +
 
 +
[[File:Screen Shot 2012-12-07 at 5.22.34 PM.png|396px|thumb|none]]
 +
 
 +
==== How to prevent automatic placement of Jetpack's Share buttons and place them manually ====
 +
 
 +
Sample scenario:
 +
 
 +
1) At WP Dashboard -> Settings -> Sharing,
 +
 
 +
a) Few services have been enabled by dragging them under "Enabled Services" area.
 +
 
 +
b) <code>Show buttons on</code> is ticked for "Front Page, Archive Pages, and Search Results".
 +
 
 +
2) Active theme: Builder Child Theme - Acute Purple - 1.1.0
 +
 
 +
3) 'Teasers Layout - Image Left' Builder extension is applied to the Posts page with [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>:
 +
 
 +
<pre class="brush:php;">
 +
// Remove automatically-inserted Jetpack's share buttons
 +
function jptweak_remove_share() {
 +
//remove_filter( 'the_content', 'sharing_display',19 );
 +
remove_filter( 'the_excerpt', 'sharing_display',19 );
 +
}
 +
add_action( 'loop_end', 'jptweak_remove_share' );
 +
</pre>
 +
 
 +
Source: http://wordpress.org/support/topic/share-buttons-position-above-other-plugins#post-3686704
 +
 
 +
'''2.''' Wherever you would like to place the Jetpack's Share buttons, edit the [http://codex.wordpress.org/images/1/18/Template_Hierarchy.png appropriate template file] and paste the following:
 +
 
 +
<pre class="brush:php;">
 +
<?php if (function_exists('sharing_display')) echo sharing_display(); ?>
 +
</pre>
 +
 
 +
In our sample scenario, the file would be wp-content/themes/BuilderChild-Acute-Purple/extensions/post-teasers-left/functions.php and the above code would be placed below
 +
 
 +
<pre class="brush:php;">
 +
<?php the_excerpt(); ?>
 +
<p><a href="<?php the_permalink(); ?>" class="more-link">Read More &rarr;</a></p>
 +
</pre>
 +
 
 +
[[File:Screen Shot 2013-01-25 at 8.31.03 PM.png|587px|thumb|none]]
 +
 
 +
That's it.
 +
 
 +
=== Jetpack Comments ===
 +
 
 +
Sample screenshot:
 +
 
 +
[[File:2012-12-07 17-49-39.png|778px|thumb|none]]
 +
 
 +
# Edit <code>comments.php</code> in active theme (should be a child theme of Builder). If the file is not present, copy it from parent Builder directory into the child theme directory and edit it.
 +
 
 +
Delete code similar to
 +
 
 +
<pre class="brush:php;">
 +
<h3><?php comment_form_title( __( 'Leave a Reply', 'it-l10n-BuilderChild-Ionic' ), __( 'Leave a Reply to %s', 'it-l10n-BuilderChild-Ionic' ) ); ?></h3>
 +
 +
<div class="cancel-comment-reply">
 +
<small><?php cancel_comment_reply_link(); ?></small>
 +
</div>
 +
</pre>
 +
 
 +
and replace
 +
 
 +
<pre class="brush:php;">
 +
<form action="<?php echo site_url( '/wp-comments-post.php' ); ?>" method="post" id="commentform">
 +
<?php if ( is_user_logged_in() ) : ?>
 +
<p class="logged-in-as"><?php printf( __( 'Logged in as <a href="%1$s">%2$s</a>. <a href="%3$s" title="Log out of this account">Log out?</a>', 'it-l10n-BuilderChild-Ionic' ), admin_url( 'profile.php' ), $user_identity, $logout_url ); ?></p>
 +
<?php else : ?>
 +
<p class="comment-form-author">
 +
<input type="text" name="author" id="author" value="<?php echo esc_attr( $commenter['comment_author'] ); ?>" size="22"<?php echo $aria_req; ?> />
 +
<label for="author"><small><?php _e( 'Name', 'it-l10n-BuilderChild-Ionic' ); ?> <?php if ( $req ) _e( "<span class='required'>(required)</span>", 'it-l10n-BuilderChild-Ionic' ); ?></small></label>
 +
</p>
 +
 +
<p class="comment-form-email">
 +
<input type="text" name="email" id="email" value="<?php echo esc_attr(  $commenter['comment_author_email'] ); ?>" size="22"<?php echo $aria_req; ?> />
 +
<label for="email"><small><?php _e( 'Mail (will not be published)', 'it-l10n-BuilderChild-Ionic' ); ?> <?php if ( $req ) _e( "<span class='required'>(required)</span>", 'it-l10n-BuilderChild-Ionic' ); ?></small></label>
 +
</p>
 +
 +
<p class="comment-form-url">
 +
<input type="text" name="url" id="url" value="<?php echo esc_attr( $commenter['comment_author_url'] ); ?>" size="22" />
 +
<label for="url"><small><?php _e( 'Website', 'it-l10n-BuilderChild-Ionic' ); ?></small></label>
 +
</p>
 +
<?php endif; ?>
 +
 +
<!--<p><small><strong>XHTML:</strong> You can use these tags: <code><?php echo allowed_tags(); ?></code></small></p>-->
 +
<p><textarea name="comment" id="comment" cols="45" rows="10"></textarea></p>
 +
 +
<p class="comment-submit-wrapper">
 +
<input name="submit" type="submit" id="submit" value="<?php _e( 'Submit Comment &rarr;', 'it-l10n-BuilderChild-Ionic' ); ?>" />
 +
<?php comment_id_fields(); ?>
 +
</p>
 +
 +
<?php do_action( 'comment_form', $post->ID ); ?>
 +
</form>
 +
</pre>
 +
 
 +
with
 +
 
 +
<pre class="brush:php;">
 +
<?php comment_form(); ?>
 +
</pre>
 +
 
 +
=== Infinite Scroll ===
 +
 
 +
Jetpack's Infinite Scroll can either enabled by adding code in child theme's functions.php or simply by just using a plugin.
 +
 
 +
Details: http://ithemes.com/2012/12/03/builder-jetpack-infinite-scroll/
 +
 
 +
=== Carousel ===
 +
 
 +
Beginning [http://ithemes.com/codex/page/Builder/Release_Notes/4.0.15 Builder 4.0.15], [http://jetpack.me/2012/07/13/jetpack-1-5-with-carousel/ Jetpack's Carousel] module works fine in iThemes Builder.
 +
 
 +
=== Tiled Galleries ===
 +
 
 +
[http://jetpack.me/support/tiled-galleries/ JetPack's Tiled Galleries] module works in iThemes Builder (v4.0.15 and above) by using a workaround.
 +
 
 +
Add the following in child theme's <tt>functions.php</tt> file (after the <code>&lt;?php</code> line):
 +
 
 +
function custom_disable_builder_gallery() {
 +
    remove_filter( 'post_gallery', 'builder_custom_post_gallery', 10 );
 +
}
 +
add_action( 'builder_theme_features_loaded', 'custom_disable_builder_gallery' );
 +
 +
$content_width = 604;
 +
 
 +
Note that the <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.
 +
 
 +
[[File:2013-01-31 11-10-53.png|800px|thumb|none]]
 +
 
 +
Source: [http://ithemes.com/codex/page/Builder/Release_Notes/4.0.15 Builder 4.0.15 release notes].
 +
 
 +
<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.
 +
 
 +
Below
 +
 
 +
<pre class="brush: php; gutter: false;">
 +
<?php comments_template(); // include comments template ?>
 +
</pre>
 +
 
 +
paste
 +
 
 +
<pre class="brush: php; gutter: false;">
 +
<?php gravity_form(2, true, false, false, '', false); ?>
 +
</pre>
 +
 
 +
In the above change <code>2</code> to the ID of form you wish to embed.
 +
 
 +
Source: http://www.gravityhelp.com/documentation/page/Embedding_A_Form
 +
 
 +
'''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>
 +
 
 +
In the above change <code>2</code> to the ID of form that's embedded.

Revision as of 08:08, February 1, 2013

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

Contents

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 display Posts from a specific category on a Page in Magazine Extension style

Page-mag-style.png

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 pretty permalinks are enabled. Create a Page titled Issues. Do not enter any content in the Page. Just enter the title and publish.

2. Save this code as page-issues-list.php. (i.e., page-<<slug>>.php)

  1. Set a title for this Page in line 12.
  2. Edit the category ID in line 21.

Upload this file to child theme directory.

3. Copy lib directory from parent Builder/extensions/magazine directory into child theme directory.

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

That's it.

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.

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 set up Shopp in iThemes Builder

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

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

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

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

Shopp-placeholder-pages.png

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

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

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

3. Presentation Settings:

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

a) Click on Use Custom Templates button.

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

Creating-shopp-dir-in-child-theme.png

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

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

d) Tick Enable theme templates and save changes.

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

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

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

Product-image-missing-thumbnail.png

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

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

Screenshots

Shop page (Products listing page)

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

Live Demo: http://sridhar.internal.ithemes.com/shop/ (Dummy site, do not place orders)

Product page

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

Cart page

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

How to add smooth animation effect for navigation menus

Live demo

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() {
            jQuery(".menu ul").css({display: "none"}); // Opera Fix
            jQuery(".menu li").hover(function(){
                           jQuery(this).find('ul:first').css({visibility: "visible",display: "none"}).show(500);
            },function(){
                            jQuery(this).find('ul:first').css({visibility: "hidden"});
            });
  });
</script>

Save settings.

Note: in the code sample, it is assumed that your menu unordered list tag has a class of "menu" (<ul id="menu-main" class="menu">). To make sure, inspect the menu using Firebug.

Forum topic.

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 {
	width: 1000px; /* set this to container (layout) width */
	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

Using Easy Custom Content Types in Builder

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

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

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

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

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

3. Create your Post Types.

Ex.:

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

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

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

5. Create any necessary Meta Boxes and Meta Fields.

Ex.:

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

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

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

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

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

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

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 implement Yoast Breadcrumbs in Builder

Yoast Breadcrumbs on WordPress.org

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

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

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

Edit page.php.

Below

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

add

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

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

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

#breadcrumbs a {
    color: #FFFFFF;
}

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

This should result in
2012-06-26 21-36-17.png

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)

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

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

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

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

Source: http://tri.be/tutorial-integrating-the-events-calendar-w-genesis/

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

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

by adding more functions similar to the one above.

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

Jetpack and Builder

Sharing

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

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

Sample screenshot:

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

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

Sample scenario:

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

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

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

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

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

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

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

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

Source: http://wordpress.org/support/topic/share-buttons-position-above-other-plugins#post-3686704

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

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

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

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

That's it.

Jetpack Comments

Sample screenshot:

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

Delete code similar to

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

and replace

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

with

<?php comment_form(); ?>

Infinite Scroll

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

Details: http://ithemes.com/2012/12/03/builder-jetpack-infinite-scroll/

Carousel

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

Tiled Galleries

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

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

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

$content_width = 604;

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

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

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

Source: Builder 4.0.15 release notes.

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

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

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

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

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

Below

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

paste

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

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

Source: http://www.gravityhelp.com/documentation/page/Embedding_A_Form

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.

Personal tools
Namespaces
Variants
Actions
iThemes Codex
Codex Navigation
Toolbox