Builder Extensions

(Difference between revisions)
Jump to: navigation, search
m (Featured Image Grid & Showcase)
(Case B)
(37 intermediate revisions by 4 users not shown)
Line 3: Line 3:
 
An extension extends or overrides the structure and/or style of a child theme. This is done via functions.php (to alter the structure) and style.css (to alter the style). An extension is nothing but a directory which typically has functions.php (optional), style.css plus optionally a corresponding images directory.  
 
An extension extends or overrides the structure and/or style of a child theme. This is done via functions.php (to alter the structure) and style.css (to alter the style). An extension is nothing but a directory which typically has functions.php (optional), style.css plus optionally a corresponding images directory.  
  
By default, Builder ships with 6 extensions which are meant for displaying listing of entries like Posts page or a category page or a archive. The default extensions reside in ''extensions'' directory under parent Builder directory. If you would like to make any changes to the extension files, copy the extension directory from parent Builder into child theme under a directory named ''extensions''.
+
By default, Builder ships with 6 extensions which are '''designed to be used for displaying a listing of entries''' like Posts page or a category page or a archive. The default extensions reside in ''extensions'' directory under parent Builder directory. If you would like to make any changes to the extension files, copy the extension directory from parent Builder into child theme under a directory named ''extensions''.
  
 
An extension is applied to either a layout or a view.
 
An extension is applied to either a layout or a view.
Line 13: Line 13:
 
Screenshot: http://d.pr/cUJa
 
Screenshot: http://d.pr/cUJa
  
The reason why this category page is not using the default layout (''Right Sidebar'' in this example) is because a view is present that associates Archives view with ''Full Width'' layout by default in Builder.  
+
The reason why this category page is not using the default layout (''Right Sidebar'' in this example) is because a view is present that associates Archives view with ''Full Width'' layout by default in Builder.
 +
 
 +
= Video =
 +
 
 +
{{#ev:vimeo|59948118|640}}
 +
 
 +
= How to apply (use) an extension =
 +
 
 +
== Example 1 ==
 +
 
 +
Scenario:
 +
 
 +
Front page shows a static page.
 +
 
 +
Page titled "Blog" is set as Posts page.
 +
 
 +
The above two can be set in WP dashboard at Settings -> Reading.
 +
 
 +
'''How to apply "Teasers Layout - left" extension to the Posts page''':
 +
 
 +
=== Case A ===
 +
 
 +
You have created a layout named "Blog Layout" to be used for your site's Posts page, i.e., for sitename.com/blog
 +
 
 +
'''1.''' Go to My Theme -> Layouts & Views -> Views. Add a <code>Blog</code> view to specify that Posts page uses "Blog Layout" layout. More info on this [http://ithemes.com/codex/page/Builder_Frequently_Asked_Questions#Apply_a_layout_to_the_Posts_page here] and [http://ithemes.com/codex/page/Builder_Documentation#Apply_Layouts_to_Specific_Views here].
 +
 
 +
'''2.''' Edit "Blog Layout", select "Teasers Layout - left" from the Extension dropdown and save the layout.
 +
 
 +
=== Case B ===
 +
 
 +
You do not want to use a separate layout for the Posts page.
 +
 
 +
Go to My Theme -> Layouts & Views. Add a view as shown in the image below.
 +
 
 +
[[F 12-46-23.png|494px|thumb|none]]
 +
 
 +
<u>Note</u>: If the default layout uses an extension, that extension will take precedence over the one created in the above view. In such cases, create a separate layout for the Posts page and use it as explained in Case A above.
 +
 
 +
= List of extensions that Builder comes with =
  
 
== Featured Image Grid & Showcase ==
 
== Featured Image Grid & Showcase ==
Line 28: Line 66:
  
 
# The images that appear on the page are featured images added in the posts.
 
# The images that appear on the page are featured images added in the posts.
# Another post should also appear on the page but isn't. This is currently a bug and shall be fixed soon.
+
# The output will not show any post that does not have a featured image.
  
 
== Featured Image Slider ==
 
== Featured Image Slider ==
Line 56: Line 94:
 
[[File:Teasers-images-right.png|800px|thumb|none]]
 
[[File:Teasers-images-right.png|800px|thumb|none]]
  
= Miscelleneous =
+
= Miscellaneous =
  
 
* It is not possible to override the parent or child theme's template files like index.php, archive.php, single.php, page.php. If any such files are present in an extension, they will simply be ignored.
 
* It is not possible to override the parent or child theme's template files like index.php, archive.php, single.php, page.php. If any such files are present in an extension, they will simply be ignored.
 
* When an extension has functions.php, it will be executed (for the page using that extension) after the theme's functions.php has been executed.
 
* When an extension has functions.php, it will be executed (for the page using that extension) after the theme's functions.php has been executed.
 +
* [http://ithemes.com/2013/05/03/how-to-apply-an-extension-to-a-cpt-archive-page-in-ithemes-builder/ How to Apply an Extension to a CPT Archive page in iThemes Builder] ([http://ithemes.com/forum/topic/43390-simple-explanation-on-how-to-use-query-posts-for-custom-post-types/ Forum topic])
  
= Sample Extensions =
+
= Examples of customizing Extensions =
  
== Magazine Extension Enhanced - with post thumbnails ==
+
== Styling ContactBuddy ==
 +
 
 +
http://ithemes.com/styling-contactbuddy-using-ithemes-builder-extensions/
 +
 
 +
== Showing posts from a category on a separate Page and applying an extension ==
 +
 
 +
Every category in WordPress by default will have a auto-generated page visible at a URL like http://yoursite.com/category/category-a (where ''category-a'' is the slug for a category titled ''Category A''). We call this category page. It is straight forward to use a extension on this page by going to My Theme -> Layouts and Views, then Views tab, and adding a view to set a layout for our desired category page.
 +
 
 +
For example,
 +
 
 +
[[File:Setting-layout-category-page.png]]
 +
 
 +
applies "Full Width" layout to http://localhost/builder3/category/issues/ (http://localhost/builder3 is just for example, it can very well be www.yoursite.com) and uses Magazine layout for the display of posts.
 +
 
 +
The result is:
 +
 
 +
[[File:Magazine-extn-category-page.png|536px|thumb|none]]
 +
 
 +
Let's say we want to have all posts from ''Issues'' category appear on a Page titled ''Issues List'' and use Magazine extension, follow the steps below. i.e., the objective is to have http://localhost/builder3/issues-list/ appear like the above screenshot.
 +
 
 +
'''1.''' Copy the extension that you would like to be use from parent directory into child directory
 +
 
 +
Ex.: from wp-content/themes/Builder/extensions/magazine to wp-content/themes/BuilderChild-Thinner/extensions/magazine
 +
 
 +
Note: If the child theme directory does not contain ''extensions'' directory, create it.
 +
 +
'''2.'''
 +
 
 +
'''a.''' Rename the extension.
 +
 
 +
'''b.''' Edit functions.php to remove the <code>if ( ! is_singular() ) ...</code> limitation. Add query_posts() call just above the loop to restrict the posts from your desired category.
 +
 
 +
Ex.:
 +
 
 +
'''a.''' Rename wp-content/themes/BuilderChild-Thinner/extensions/magazine to wp-content/themes/BuilderChild-Thinner/extensions/magazine-issues
 +
 
 +
Edit wp-content/themes/BuilderChild-Thinner/extensions/magazine-issues/style.css.
 +
 
 +
Change
 +
 
 +
<pre class="brush:css;">
 +
Name: Magazine Layout
 +
</pre>
 +
 
 +
to
 +
 
 +
<pre class="brush:css;">
 +
Name: Magazine Layout for Issues List Page
 +
</pre>
 +
 
 +
'''b.''' Edit wp-content/themes/BuilderChild-Thinner/extensions/magazine-issues/functions.php.
 +
 
 +
Change
 +
 
 +
<pre class="brush:php;">
 +
// Calling only if not on a singular
 +
if ( ! is_singular() ) {
 +
add_action( 'builder_layout_engine_render', array( &$this, 'change_render_content' ), 0 );
 +
}
 +
</pre>
 +
 
 +
to
 +
 
 +
<pre class="brush:php;">
 +
// Calling only if not on a singular
 +
//if ( ! is_singular() ) {
 +
add_action( 'builder_layout_engine_render', array( &$this, 'change_render_content' ), 0 );
 +
//}
 +
</pre>
 +
 
 +
Add
 +
 
 +
<pre class="brush:php;">
 +
<?php $paged = (get_query_var('paged')) ? get_query_var('paged') : 1; query_posts("cat=18&paged=$paged"); ?> <!-- Change 18 to ID of category from which posts should be shown -->
 +
</pre>
 +
 
 +
immediately above
 +
 
 +
<pre class="brush:php;">
 +
<?php while ( have_posts() ) : // the loop ?>
 +
</pre>
 +
 
 +
[[File:2012-02-27 12-51-10.png|800px|thumb|none]]
 +
 
 +
'''3.''' Create a layout and apply the extension from the previous step.
 +
 
 +
Ex.:
 +
 
 +
[[File:Step3.png]]
 +
 
 +
'''4.''' Create a Page in which you would like to have the posts from the specific category appear and set the layout to the one created in above step.
 +
 
 +
Ex.:
 +
 
 +
[[File:Step4.png|628px|thumb|none]]
 +
 
 +
That's it!
 +
 
 +
If you would like to show posts from another category similarly on another Page, repeat the above process to create a new extension while remembering to specify the category ID and apply it to the Page.
 +
 
 +
=== Update ===
 +
 
 +
One extra step has to be done in addition to the above to apply the above method in the case of '''Featured Image Grid & Showcase'''.
 +
 
 +
Change
 +
 
 +
<pre class="brush:php;">
 +
global $post, $wp_query;
 +
 +
$args = array(
 +
'ignore_sticky_posts' => true,
 +
'posts_per_page'      => 9,
 +
'meta_key'            => '_thumbnail_id',
 +
'paged'              => get_query_var( 'paged' ),
 +
);
 +
 +
$args = wp_parse_args( $args, $wp_query->query );
 +
 +
query_posts( $args ); // Query only posts with a feature image set.
 +
</pre>
 +
 
 +
to
 +
 
 +
<pre class="brush:php;">
 +
global $post/*, $wp_query;
 +
 +
$args = array(
 +
'ignore_sticky_posts' => true,
 +
'posts_per_page'      => 9,
 +
'meta_key'            => '_thumbnail_id',
 +
'paged'              => get_query_var( 'paged' ),
 +
);
 +
 +
$args = wp_parse_args( $args, $wp_query->query );
 +
 +
query_posts( $args );*/ // Query only posts with a feature image set.
 +
</pre>
 +
 
 +
== Modifying Portfolio extension so that 2 images appear per row rather than 3 ==
 +
 
 +
Before: [[File:Portfolio-3-images-per-row.png|800px|thumb|none]]
 +
 
 +
After: [[File:Portfolio-2-images-per-row.png|800px|thumb|none]]
 +
 
 +
<u>Note</u>:
 +
 
 +
# The width and height values used in the steps below are to be taken only as an example and are not to be treated absolute. They may have to be changed depending on child theme you are using and the layout width.
 +
# We are going to edit the extension in parent theme directly. When Builder is updated, our custom edits will be erased. Therefore you have to either take a backup of the extension before updating and re-apply the changes or duplicate the extension, place it in child theme while making sure function names are changed.
 +
 
 +
Child theme: BuilderChild-Acute
 +
 
 +
Layout width: 980px
 +
 
 +
'''1.''' Edit wp-content/themes/Builder/extensions/portfolio/lib/image-size.php
 +
 
 +
Change
 +
 
 +
<pre class="brush:php;">
 +
add_image_size( 'it-portfolio-thumb', 350, 150, true );
 +
</pre>
 +
 
 +
to
 +
 
 +
<pre class="brush:php;">
 +
//add_image_size( 'it-portfolio-thumb', 350, 150, true );
 +
add_image_size( 'it-portfolio-thumb', 450, 193, true );
 +
</pre>
 +
 
 +
'''2.''' Edit wp-content/themes/Builder/extensions/portfolio/style.css
 +
 
 +
Change
 +
 
 +
<pre class="brush:css;">
 +
.portfolio-post-wrap {
 +
display: inline-block;
 +
width: 32.8%;
 +
vertical-align: top;
 +
}
 +
</pre>
 +
 
 +
to
 +
 
 +
<pre class="brush:css;">
 +
.portfolio-post-wrap {
 +
display: inline-block;
 +
/* width: 32.8%; */
 +
width: 49%;
 +
vertical-align: top;
 +
}
 +
</pre>
 +
 
 +
and
 +
 
 +
<pre class="brush:css;">
 +
.portfolio-post img {
 +
width: 100%;
 +
max-width: 350px;
 +
height: auto;
 +
margin: 0;
 +
}
 +
</pre>
 +
 
 +
to
 +
 
 +
<pre class="brush:css;">
 +
.portfolio-post img {
 +
/*width: 100%;
 +
max-width: 350px;*/
 +
max-width: 450px;
 +
height: auto;
 +
margin: 0;
 +
}
 +
</pre>
 +
 
 +
'''3.''' Refresh the page on the front-end for which Portfolio extension is being applied. If the new sized thumbnails do not appear, install and run [http://wordpress.org/extend/plugins/regenerate-thumbnails/ Regenerate Thumbnails] plugin.
 +
 
 +
== Displaying archive/category title above the output of Portfolio extension ==
 +
 
 +
[[File:2012-06-22 10-03-56.png|727px|thumb|none]]
 +
 
 +
'''1.''' Copy the extension from parent Builder directory into the child theme under extensions directory so that wp-content/themes/''BuilderChild-themename''/extensions/portfolio is present.
 +
 
 +
'''2.''' Edit wp-content/themes/''BuilderChild-themename''/extensions/portfolio/functions.php.
 +
 
 +
Above
 +
 
 +
<pre class="brush:php;">
 +
<div class="loop-content">
 +
</pre>
 +
 
 +
paste
 +
 
 +
<pre class="brush:php;">
 +
<div class="loop-header">
 +
<h4 class="loop-title">
 +
<?php
 +
the_post();
 +
 +
if ( is_category() ) { // Category Archive
 +
$title = sprintf( __( 'Archive for %s', 'it-l10n-Builder' ), single_cat_title( '', false ) );
 +
}
 +
else if ( is_tag() ) { // Tag Archive
 +
$title = sprintf( __( 'Archive for %s', 'it-l10n-Builder' ), single_tag_title( '', false ) );
 +
}
 +
else if ( is_tax() ) { // Tag Archive
 +
$title = sprintf( __( 'Archive for %s', 'it-l10n-Builder' ), builder_get_tax_term_title() );
 +
}
 +
else if ( is_day() || is_time() ) { // Day-Specific Archive
 +
$title = sprintf( __( 'Archive for %s', 'it-l10n-Builder' ), get_the_time() );
 +
}
 +
else if ( is_month() ) { // Month-Specific Archive
 +
$title = sprintf( __( 'Archive for %s', 'it-l10n-Builder' ), get_the_time( 'F Y' ) );
 +
}
 +
else if ( is_year() ) { // Year-Specific Archive
 +
$title = sprintf( __( 'Archive for %s', 'it-l10n-Builder' ), get_the_time( 'Y' ) );
 +
}
 +
else if ( is_author() ) { // Author Archive
 +
$title = sprintf( __( 'Author Archive for %s', 'it-l10n-Builder' ), get_the_author() );
 +
}
 +
else if ( function_exists( 'is_post_type_archive' ) && is_post_type_archive() && function_exists( 'post_type_archive_title' ) ) { // Post Type Archive
 +
$title = post_type_archive_title( '', false );
 +
}
 +
else { // Default catchall just in case
 +
$title = __( 'Archive', 'it-l10n-Builder' );
 +
}
 +
 +
if ( is_paged() )
 +
printf( '%s &ndash; Page %d', $title, get_query_var( 'paged' ) );
 +
else
 +
echo $title;
 +
 +
rewind_posts();
 +
?>
 +
</h4>
 +
</div>
 +
</pre>
 +
 
 +
== How to change number of posts when using Featured Image Grid & Showcase extension ==
 +
 
 +
Copy the extension to your child theme and edit its functions.php.
 +
 
 +
Ex.: Copy <code>wp-content/themes/Builder/extensions/image-grid</code> to <code>wp-content/themes/BuilderChild-Default/extensions/image-grid</code> (create extensions directory in child theme directory if doesn't exist) and edit <code>wp-content/themes/BuilderChild-Default/extensions/image-grid/functions.php</code>.
 +
 
 +
Set your desired number of posts in the following line:
 +
 
 +
<pre class="brush:php;">
 +
'posts_per_page'      => 6,
 +
</pre>
 +
 
 +
== Showing products from a specific WP e-Commerce category in Slider extension ==
 +
 
 +
[[File:2012-07-24 20-41-37.png|800px|thumb|none]]
 +
 
 +
When Slider extension is applied to a layout or view and that layout is used in a listing page (Ex.: Posts page, archives), the sliding images will be featured images attached to the blog posts. When you have WP e-Commerce plugin activated and would like to show images attached to products belonging to a specific WPEC category in the Slider, follow this:
 +
 
 +
Copy the extension to your child theme and edit its functions.php.
 +
 
 +
Ex.: Copy <code>wp-content/themes/Builder/extensions/slider</code> to <code>wp-content/themes/BuilderChild-Depot/extensions/slider</code> (create extensions directory in child theme directory if doesn't exist) and edit <code>wp-content/themes/BuilderChild-Depot/extensions/slider/functions.php</code>.
 +
 
 +
Change
 +
 
 +
<pre class="brush:php;">
 +
$args = array(
 +
'posts_per_page' => 6,
 +
'order'          => 'date',
 +
'meta_key'      => '_thumbnail_id'
 +
);
 +
</pre>
 +
 
 +
to
 +
 
 +
<pre class="brush:php;">
 +
$args = array(
 +
'posts_per_page' => 6,
 +
'order'          => 'date',
 +
'meta_key'      => '_thumbnail_id',
 +
'post_type'      => 'wpsc-product',
 +
'wpsc_product_category' => 'product-category'
 +
);
 +
</pre>
 +
 
 +
In the above replace <code>product-category</code> with the slug of WP e-Commerce category from which you would like Product Thumbnails to be shown in the slider.
 +
 
 +
If you would like to know how to replace the standard blog posts that appear below the slider with products added in WP e-Commerce (screenshot below), see [http://ithemes.com/forum/topic/30464-builder-child-depot-change-slider-to-products-category/page__view__findpost__p__141706 this] forum topic.
 +
 
 +
[[File:My Test Site 2012-07-24 21-26-07.png|344px|thumb|none]]
 +
 
 +
== Displaying Slideshow at the top of Magazine layout ==
 +
 
 +
[[File:2012-08-08 10-16-27.png|545px|thumb|none]]
 +
 
 +
If you would like to display PluginBuddy Slideshow above the posts when using Magazine extension, follow this:
 +
 
 +
Copy the extension to your child theme and edit its functions.php.
 +
 
 +
Ex.: Copy <code>wp-content/themes/Builder/extensions/magazine</code> to <code>wp-content/themes/BuilderChild-Expansion-Blue/extensions/magazine</code> (create extensions directory in child theme directory if doesn't exist) and edit <code>wp-content/themes/BuilderChild-Expansion-Blue/extensions/magazine/functions.php</code>.
 +
 
 +
Above
 +
 
 +
<pre class="brush:php;">
 +
<?php if ( have_posts() ) : ?>
 +
</pre>
 +
 
 +
add
 +
 
 +
<pre class="brush:php;">
 +
<div id="my-slideshow-container"><?php echo do_shortcode('[pb_slideshow group="0"] '); ?></div>
 +
</pre>
 +
 
 +
In the above replace <code>0</code> with the ID of Slideshow group that you would like to be shown.
 +
 
 +
The following has been added at the end of child theme's style.css (WP dashboard -> Appearance -> Editor) in this particular example:
 +
 
 +
<pre class="brush:css;">
 +
#my-slideshow-container {
 +
    margin-bottom: 4em;
 +
}
 +
 
 +
.magazine-post-wrap {
 +
    width: 43% !important;
 +
}
 +
</pre>
 +
 
 +
== How to show Read More below each excerpt when using 'Teasers Layout - Image Left' extension ==
  
<gallery widths=200px caption="Before and After">
+
<gallery widths=192px heights=598px>
File:Magazine-extension-before.png
+
File:Builder Responsive Test Site 2013-01-25 15-19-06.png|Before
File:Magazine-extension-enhanced.png
+
File:Builder Responsive Test Site 2013-01-25 15-19-45.png|After
 
</gallery>
 
</gallery>
  
Download [http://www.mediafire.com/?n8tq671sd13tbqi this] file, extract its contents to your computer and upload the "magazine-enhanced" folder to a directory named "extensions" under your child theme. Create extensions directory if it doesn't exist.
+
When 'Teasers Layout - Image Left' extension is applied to a listing page 'Read More' link appears only if the post has more than 60 words. If you would like to show Read More at the bottom of every excerpt regardless of the number of words in the post, follow this:
  
Edit the layout that's being used by your Posts page and apply "Magazine Enhanced" extension.
+
'''1.''' Copy the extension to your child theme under <code>extensions</code> directory and edit its <code>functions.php</code>.
  
If you would like to change the dimensions of the thumbnail image (currently it is 150 x 150):
+
Ex.: Copy <code>wp-content/themes/Builder/extensions/post-teasers-left</code> to <code>wp-content/themes/BuilderChild-Acute-Purple/extensions/post-teasers-left</code> (create extensions directory in child theme directory, it doesn't exist by default) and edit <code>wp-content/themes/BuilderChild-Acute-Purple/extensions/post-teasers-left/functions.php</code>.
  
# set the width and height in line 16 of the extension's functions.php
+
'''2.''' Below
# set the the same width and height as in the above step in extension's style.css around line 23
+
  
 +
<pre class="brush:php;">
 +
<?php the_excerpt(); ?>
 +
</pre>
  
******(Note added by user of this extension, not original author)********
+
paste
  
When I install it there is an issue when you click on 'read more' it keeps showing the same excerpt with thumbnail and never shows the full post content. Also for some reason I am only getting 1 long narrow column rather than 2 side by side.
+
<pre class="brush:php;">
 +
<p><a href="<?php the_permalink(); ?>" class="more-link">Read More &rarr;</a></p>
 +
</pre>
  
== Styling ContactBuddy ==
+
'''3.''' Change
  
http://ithemes.com/styling-contactbuddy-using-ithemes-builder-extensions/
+
<pre class="brush:php;">
 +
function excerpt_more( $more ) {
 +
global $post;
 +
return '...<p><a href="'. get_permalink( $post->ID ) . '" class="more-link">Read More&rarr;</a></p>';
 +
}
 +
</pre>
 +
 
 +
to
 +
 
 +
<pre class="brush:php;">
 +
function excerpt_more( $more ) {
 +
global $post;
 +
return '';
 +
}
 +
</pre>
 +
 
 +
== How to right align "Read More" box and move it up a bit when using 'Teasers Layout - Image Left' extension ==
 +
 
 +
In this example, Builder Child Theme - Adept is the active theme.
 +
 
 +
[[File:Screen Shot 2013-01-27 at 11.59.02 AM.png|774px|thumb|none|Before]]
 +
 
 +
[[File:Screen Shot 2013-01-27 at 10.18.35 AM.png|795px|thumb|none|After]]
 +
 
 +
'''1.''' Copy the extension to your child theme under <code>extensions</code> directory and edit its <code>functions.php</code>.
 +
 
 +
Ex.: Copy <code>wp-content/themes/Builder/extensions/post-teasers-left</code> to <code>wp-content/themes/BuilderChild-Adept/extensions/post-teasers-left</code> (create extensions directory in child theme directory, it doesn't exist by default) and edit <code>wp-content/themes/BuilderChild-Adept/extensions/post-teasers-left/functions.php</code>.
 +
 
 +
'''2.''' Change
 +
 
 +
<pre class="brush:php;">
 +
return '...<p><a href="'. get_permalink( $post->ID ) . '" class="more-link">Read More&rarr;</a></p>';
 +
</pre>
 +
 
 +
to
 +
 
 +
<pre class="brush:php;">
 +
return '...<p class="more-link-para"><a href="'. get_permalink( $post->ID ) . '" class="more-link">Read More&rarr;</a></p>';
 +
</pre>
 +
 
 +
'''3.''' Add the following at the end of child theme's <code>style.css</code> (WP dashboard -> Appearance -> Editor):
 +
 
 +
<pre class="brush:css;">
 +
.more-link-para {
 +
margin-top: 0;
 +
float: right;
 +
}
 +
</pre>
 +
 
 +
== How to show comments count below post titles when using Portfolio extension ==
 +
 
 +
[[File:Builder Responsive Test Site 2013-02-01 20-42-21.png|800px|thumb|none]]
 +
 
 +
'''1.''' Copy the extension to your child theme under <code>extensions</code> directory (create extensions directory in child theme directory, it doesn't exist by default) and edit its <code>functions.php</code>.
 +
 
 +
Ex.: Copy <code>wp-content/themes/Builder/extensions/portfolio</code> to <code>wp-content/themes/BuilderChild-Covell/extensions/portfolio</code> and edit <code>wp-content/themes/BuilderChild-Covell/extensions/portfolio/functions.php</code>.
 +
 
 +
'''2.''' Below
 +
 
 +
<pre class="brush: php; gutter: false;">
 +
<span class="portfolio-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></span>
 +
</pre>
 +
 
 +
paste
 +
 
 +
<pre class="brush: php; gutter: false;">
 +
<?php do_action( 'builder_comments_popup_link', '<div class="entry-meta"><span class="comments">', '</span></div>', __( '%s', 'it-l10n-Builder' ), __( '', 'it-l10n-Builder' ), __( '(1 Comment)', 'it-l10n-Builder' ), __( '(% Comments)', 'it-l10n-Builder' ) ); ?>
 +
</pre>
 +
 
 +
'''3.''' Add the following at the end of child theme's style.css (WP dashboard -> Appearance -> Editor):
 +
 
 +
<pre class="brush: css; gutter: false;">
 +
.portfolio-post-wrap .entry-meta {
 +
text-align: center;
 +
}
 +
 
 +
.portfolio-post-wrap .entry-meta .comments a {
 +
color: #cfab8e;
 +
font-size: 0.9em;
 +
}
 +
</pre>
 +
 
 +
== How to show a certain number of posts for a particular category page while showing another number of posts for other pages when using Magazine extension ==
 +
 
 +
See #1 in [http://ithemes.com/forum/topic/37954-patterned-background-image-and-pagination/#entry173712 this] forum post.
 +
 
 +
== jQuery Masonry Extension for Pinterest-Like Posts Display ==
 +
 
 +
[http://masonry.desandro.com/ jQuery Masonry] comes included in WordPress core library beginning 3.5.
 +
 
 +
I (Sridhar) have modified a copy of iThemes Builder's magazine extension into <code>masonry</code> extension with some help from Ronald.
 +
 
 +
When this extension is applied to a layout and this layout applied to any webpage in the site that has a list of posts, the posts will automatically appear in boxes in a Pinterest-style display. Included in the extension is [http://www.infinite-scroll.com/ Infinite Scroll] jQuery script which automatically loads next set of posts as the user scrolls down.
 +
 
 +
[[File:2013-02-18 15-50-34.png|407px|thumb|none]]
 +
 
 +
[[File:2013-02-18 15-55-30.png|407px|thumb|none|Next Page link disappears as the user scrolls down and next set of posts will auto load]]
 +
 
 +
[http://websitesetuppro.com/ Live Demo] (with few modifications on top of the extension)
 +
 
 +
'''1.''' Go [https://github.com/srikat/Masonry-Extension here] and click on ZIP button to download the extension. Extract the downloaded zip file and rename the resulting folder to <code>masonry</code>.
 +
 
 +
'''2.''' Using a FTP client or cPanel file manager, navigate to wp-content/themes and inside your active theme (should ideally be a child theme of Builder).
 +
 
 +
'''3.''' Create a directory named <code>extensions</code> if one doesn't already exist.
 +
 
 +
'''4.''' Upload the <code>masonry</code> folder from step 1 into the above <code>extensions</code> folder.
 +
 
 +
[[File:Screen Shot 2013-02-18 at 4.03.46 PM.png|484px|thumb|none|Example]]
 +
 
 +
'''5.''' In WordPress dashboard, go to My Theme -> Layouts & Views and edit the layout that is being used for your Posts (blog) page or archive page. If there is currently no such layout, create (either from scratch or by duplicating an existing one) layout(s) that you wish to be applied to your site's Posts (blog) page and/or archives.
 +
 
 +
From Extension dropdown, select <code>Masonry Layout</code>.
 +
 
 +
[[File:2013-02-18 16-09-03.png|693px|thumb|none|Example]]
 +
 
 +
Save the layout.
 +
 
 +
'''6.''' Now visit the page that uses above layout to see extension in action.
 +
 
 +
<u>Note</u>:
 +
 
 +
<pre style="white-space: pre-wrap">
 +
The extension is set to show posts in 3 columns by default in a 960px wide layout.
 +
 
 +
Therefore you might want to ensure that content module does not have any sidebar.</pre>
 +
 
 +
<pre style="white-space: pre-wrap">
 +
Also depending on which child theme is being used, only 2 columns might be appearing. This can be fixed by adjusting the width of ".builder-module-content .hentry" as noted in the extension's style.css.
 +
</pre>
 +
 
 +
<pre style="white-space: pre-wrap">
 +
Width of each post block can be changed in extension's style.css. Note the CSS and comments for ".builder-module-content .hentry"
 +
</pre>
 +
 
 +
<pre style="white-space: pre-wrap">
 +
This should be considered as unofficial extension and support is not guaranteed.
 +
</pre>
 +
 
 +
== How to remove date when using Teasers Layout - Image Left extension ==
 +
 
 +
Before:
 +
 
 +
[[File:Screen Shot 2013-04-23 at 11.39.26 AM.png|576px|thumb|none]]
 +
 
 +
After:
 +
 
 +
[[File:Screen Shot 2013-04-23 at 11.39.00 AM.png|589px|thumb|none]]
 +
 
 +
'''1.''' Copy the extension to your child theme under <code>extensions</code> directory (create "extensions" directory in child theme directory, it doesn't exist by default) and edit its <code>functions.php</code>.
 +
 
 +
Ex.: Copy <code>wp-content/themes/Builder/extensions/post-teasers-left</code> to <code>wp-content/themes/BuilderChild-Default/extensions/post-teasers-left</code> and edit <code>wp-content/themes/BuilderChild-Default/extensions/post-teasers-left/functions.php</code>.
 +
 
 +
'''2.''' Change
 +
 
 +
<pre class="brush: php; gutter: false;">
 +
<?php printf( __( 'Posted on %s', 'it-l10n-Builder' ), '<span class="the_date">' . get_the_date() . '</span>' ); ?>
 +
</pre>
 +
 
 +
to
 +
 
 +
<pre class="brush: php; gutter: false;">
 +
<?php //printf( __( 'Posted on %s', 'it-l10n-Builder' ), '<span class="the_date">' . get_the_date() . '</span>' ); ?>
 +
</pre>
 +
 
 +
== How to add a widgetized sidebar under Magazine extension's content area ==
 +
 
 +
If content module does not have a sidebar and if you would like to add a 3-column sidebar below it, it is pretty straight forward to add a widget bar module below the content module.
 +
 
 +
However, when content module has a sidebar and you would like to add a multiple widget columns below the content area then the following method can be used.
 +
 
 +
[[File:WordPress Dev Site 2013-04-25 10-46-12.png|425px|thumb|none]]
 +
 
 +
'''1.''' Add the following in child theme's <code>functions.php</code> before closing PHP tag, if any:
 +
 
 +
<pre class="brush: php; gutter: false;">
 +
// register our sidebar
 +
add_action('widgets_init', 'register_my_content_sidebar');
 +
function register_my_content_sidebar() {
 +
 
 +
        $sidebar = array(
 +
                'id' => 'my_content_sidebar',
 +
                'name' => __('Content Sidebar'),
 +
                'description' => __( 'This widget section ...' ),
 +
                'before_widget' => '<div id="%1$s" class="widget %2$s">',
 +
                'after_widget' => '</div>',
 +
                'before_title' => '<h4 class="widget-title">',
 +
                'after_title' => '</h4>'
 +
);
 +
 
 +
        register_sidebar($sidebar);
 +
}
 +
</pre>
 +
 
 +
'''2.''' Copy the extension from parent Builder directory into the child theme under extensions directory so that (for example,) wp-content/themes/BuilderChild-Default/extensions/magazine is present.
 +
 
 +
Edit wp-content/themes/BuilderChild-Default/extensions/magazine/functions.php.
 +
 
 +
Above
 +
 
 +
<pre class="brush: php; gutter: false;">
 +
<?php else : // do not delete ?>
 +
</pre>
 +
 
 +
add
 +
 
 +
<pre class="brush: php; gutter: false;">
 +
<?php // add the sidebar
 +
if ( is_active_sidebar( 'my_content_sidebar' ) ) {
 +
echo '<div class="my-content-sidebar">';
 +
        dynamic_sidebar( 'my_content_sidebar' );
 +
        echo '</div>';
 +
}
 +
?>
 +
</pre>
 +
 
 +
[[File:2013-04-25 10-53-10.png|800px|thumb|none]]
 +
 
 +
'''3.''' Add the following at the end of child theme's <code>style.css</code> (WP dashboard -> Appearance -> Editor):
 +
 
 +
<pre class="brush: css; gutter: false;">
 +
.my-content-sidebar {
 +
    float: left;
 +
    padding-left: 1em;
 +
    padding-right: 1em;
 +
}
 +
 
 +
.my-content-sidebar .widget {
 +
    width: 32%;
 +
    float: left;
 +
    overflow: hidden;
 +
    margin-right: 1em;
 +
}
 +
 
 +
.my-content-sidebar .widget:last-child {
 +
margin-right: 0;
 +
}
 +
</pre>
 +
 
 +
Thanks to Ronald for providing the base code [http://ithemes.com/forum/topic/42546-is-there-a-way-to-put-a-widget-under-the-content-block/#entry188701 here].

Revision as of 16:10, July 25, 2013

Contents

Introduction

An extension extends or overrides the structure and/or style of a child theme. This is done via functions.php (to alter the structure) and style.css (to alter the style). An extension is nothing but a directory which typically has functions.php (optional), style.css plus optionally a corresponding images directory.

By default, Builder ships with 6 extensions which are designed to be used for displaying a listing of entries like Posts page or a category page or a archive. The default extensions reside in extensions directory under parent Builder directory. If you would like to make any changes to the extension files, copy the extension directory from parent Builder into child theme under a directory named extensions.

An extension is applied to either a layout or a view.

For the sake of documentation, let us consider this site: http://localhost/builder3/

There is a category in this site named Issues and the URL of this category page is http://localhost/builder3/category/issues/

Screenshot: http://d.pr/cUJa

The reason why this category page is not using the default layout (Right Sidebar in this example) is because a view is present that associates Archives view with Full Width layout by default in Builder.

Video

How to apply (use) an extension

Example 1

Scenario:

Front page shows a static page.

Page titled "Blog" is set as Posts page.

The above two can be set in WP dashboard at Settings -> Reading.

How to apply "Teasers Layout - left" extension to the Posts page:

Case A

You have created a layout named "Blog Layout" to be used for your site's Posts page, i.e., for sitename.com/blog

1. Go to My Theme -> Layouts & Views -> Views. Add a Blog view to specify that Posts page uses "Blog Layout" layout. More info on this here and here.

2. Edit "Blog Layout", select "Teasers Layout - left" from the Extension dropdown and save the layout.

Case B

You do not want to use a separate layout for the Posts page.

Go to My Theme -> Layouts & Views. Add a view as shown in the image below.

494px|thumb|none

Note: If the default layout uses an extension, that extension will take precedence over the one created in the above view. In such cases, create a separate layout for the Posts page and use it as explained in Case A above.

List of extensions that Builder comes with

Featured Image Grid & Showcase

To apply Featured Image Grid & Showcase extension to Issues category page, we should add a view like so:

Extn-1.png

Screenshot of the category page on site:

Featured-image-grid-showcase.png

Note:

  1. The images that appear on the page are featured images added in the posts.
  2. The output will not show any post that does not have a featured image.

Featured Image Slider

Displays Featured Image & Post Title of first 6 posts in a custom slider and the Featured Image, Post Title & Excerpt for the remaining posts.

Featured-image-slider-1.png

Page Not Found message appears below the slider because there are only 3 posts. If we add 1 more,

Featured-image-slider-2.png

Magazine Layout

Magaine-extn.png

Portfolio Layout

Portfolio-extn.png

Teasers Layout - Image Left

Teasers-images-left.png

Teasers Layout - Image Right

Teasers-images-right.png

Miscellaneous

  • It is not possible to override the parent or child theme's template files like index.php, archive.php, single.php, page.php. If any such files are present in an extension, they will simply be ignored.
  • When an extension has functions.php, it will be executed (for the page using that extension) after the theme's functions.php has been executed.
  • How to Apply an Extension to a CPT Archive page in iThemes Builder (Forum topic)

Examples of customizing Extensions

Styling ContactBuddy

http://ithemes.com/styling-contactbuddy-using-ithemes-builder-extensions/

Showing posts from a category on a separate Page and applying an extension

Every category in WordPress by default will have a auto-generated page visible at a URL like http://yoursite.com/category/category-a (where category-a is the slug for a category titled Category A). We call this category page. It is straight forward to use a extension on this page by going to My Theme -> Layouts and Views, then Views tab, and adding a view to set a layout for our desired category page.

For example,

Setting-layout-category-page.png

applies "Full Width" layout to http://localhost/builder3/category/issues/ (http://localhost/builder3 is just for example, it can very well be www.yoursite.com) and uses Magazine layout for the display of posts.

The result is:

Magazine-extn-category-page.png

Let's say we want to have all posts from Issues category appear on a Page titled Issues List and use Magazine extension, follow the steps below. i.e., the objective is to have http://localhost/builder3/issues-list/ appear like the above screenshot.

1. Copy the extension that you would like to be use from parent directory into child directory

Ex.: from wp-content/themes/Builder/extensions/magazine to wp-content/themes/BuilderChild-Thinner/extensions/magazine

Note: If the child theme directory does not contain extensions directory, create it.

2.

a. Rename the extension.

b. Edit functions.php to remove the if ( ! is_singular() ) ... limitation. Add query_posts() call just above the loop to restrict the posts from your desired category.

Ex.:

a. Rename wp-content/themes/BuilderChild-Thinner/extensions/magazine to wp-content/themes/BuilderChild-Thinner/extensions/magazine-issues

Edit wp-content/themes/BuilderChild-Thinner/extensions/magazine-issues/style.css.

Change

Name: Magazine Layout

to

Name: Magazine Layout for Issues List Page

b. Edit wp-content/themes/BuilderChild-Thinner/extensions/magazine-issues/functions.php.

Change

// Calling only if not on a singular
			if ( ! is_singular() ) {
				add_action( 'builder_layout_engine_render', array( &$this, 'change_render_content' ), 0 );
			}

to

// Calling only if not on a singular
			//if ( ! is_singular() ) {
				add_action( 'builder_layout_engine_render', array( &$this, 'change_render_content' ), 0 );
			//}

Add

<?php $paged = (get_query_var('paged')) ? get_query_var('paged') : 1; query_posts("cat=18&paged=$paged"); ?> <!-- Change 18 to ID of category from which posts should be shown -->

immediately above

<?php while ( have_posts() ) : // the loop ?>
2012-02-27 12-51-10.png

3. Create a layout and apply the extension from the previous step.

Ex.:

Step3.png

4. Create a Page in which you would like to have the posts from the specific category appear and set the layout to the one created in above step.

Ex.:

Step4.png

That's it!

If you would like to show posts from another category similarly on another Page, repeat the above process to create a new extension while remembering to specify the category ID and apply it to the Page.

Update

One extra step has to be done in addition to the above to apply the above method in the case of Featured Image Grid & Showcase.

Change

global $post, $wp_query;
			
			$args = array(
				'ignore_sticky_posts' => true,
				'posts_per_page'      => 9,
				'meta_key'            => '_thumbnail_id',
				'paged'               => get_query_var( 'paged' ),
			);
			
			$args = wp_parse_args( $args, $wp_query->query );
			
			query_posts( $args ); // Query only posts with a feature image set.

to

global $post/*, $wp_query;
			
			$args = array(
				'ignore_sticky_posts' => true,
				'posts_per_page'      => 9,
				'meta_key'            => '_thumbnail_id',
				'paged'               => get_query_var( 'paged' ),
			);
			
			$args = wp_parse_args( $args, $wp_query->query );
			
			query_posts( $args );*/ // Query only posts with a feature image set.

Modifying Portfolio extension so that 2 images appear per row rather than 3

Before:
Portfolio-3-images-per-row.png
After:
Portfolio-2-images-per-row.png

Note:

  1. The width and height values used in the steps below are to be taken only as an example and are not to be treated absolute. They may have to be changed depending on child theme you are using and the layout width.
  2. We are going to edit the extension in parent theme directly. When Builder is updated, our custom edits will be erased. Therefore you have to either take a backup of the extension before updating and re-apply the changes or duplicate the extension, place it in child theme while making sure function names are changed.

Child theme: BuilderChild-Acute

Layout width: 980px

1. Edit wp-content/themes/Builder/extensions/portfolio/lib/image-size.php

Change

add_image_size( 'it-portfolio-thumb', 350, 150, true );

to

	//add_image_size( 'it-portfolio-thumb', 350, 150, true );
	add_image_size( 'it-portfolio-thumb', 450, 193, true );

2. Edit wp-content/themes/Builder/extensions/portfolio/style.css

Change

.portfolio-post-wrap {
	display: inline-block;
	width: 32.8%;
	vertical-align: top;
}

to

.portfolio-post-wrap {
	display: inline-block;
/* 	width: 32.8%; */
	width: 49%;
	vertical-align: top;
}

and

.portfolio-post img {
	width: 100%;
	max-width: 350px;
	height: auto;
	margin: 0;
}

to

.portfolio-post img {
	/*width: 100%;
	max-width: 350px;*/
	max-width: 450px;
	height: auto;
	margin: 0;
}

3. Refresh the page on the front-end for which Portfolio extension is being applied. If the new sized thumbnails do not appear, install and run Regenerate Thumbnails plugin.

Displaying archive/category title above the output of Portfolio extension

2012-06-22 10-03-56.png

1. Copy the extension from parent Builder directory into the child theme under extensions directory so that wp-content/themes/BuilderChild-themename/extensions/portfolio is present.

2. Edit wp-content/themes/BuilderChild-themename/extensions/portfolio/functions.php.

Above

<div class="loop-content">

paste

<div class="loop-header">
				<h4 class="loop-title">
					<?php
						the_post();
						
						if ( is_category() ) { // Category Archive
							$title = sprintf( __( 'Archive for %s', 'it-l10n-Builder' ), single_cat_title( '', false ) );
						}
						else if ( is_tag() ) { // Tag Archive
							$title = sprintf( __( 'Archive for %s', 'it-l10n-Builder' ), single_tag_title( '', false ) );
						}
						else if ( is_tax() ) { // Tag Archive
							$title = sprintf( __( 'Archive for %s', 'it-l10n-Builder' ), builder_get_tax_term_title() );
						}
						else if ( is_day() || is_time() ) { // Day-Specific Archive
							$title = sprintf( __( 'Archive for %s', 'it-l10n-Builder' ), get_the_time() );
						}
						else if ( is_month() ) { // Month-Specific Archive
							$title = sprintf( __( 'Archive for %s', 'it-l10n-Builder' ), get_the_time( 'F Y' ) );
						}
						else if ( is_year() ) { // Year-Specific Archive
							$title = sprintf( __( 'Archive for %s', 'it-l10n-Builder' ), get_the_time( 'Y' ) );
						}
						else if ( is_author() ) { // Author Archive
							$title = sprintf( __( 'Author Archive for %s', 'it-l10n-Builder' ), get_the_author() );
						}
						else if ( function_exists( 'is_post_type_archive' ) && is_post_type_archive() && function_exists( 'post_type_archive_title' ) ) { // Post Type Archive
							$title = post_type_archive_title( '', false );
						}
						else { // Default catchall just in case
							$title = __( 'Archive', 'it-l10n-Builder' );
						}
						
						if ( is_paged() )
							printf( '%s – Page %d', $title, get_query_var( 'paged' ) );
						else
							echo $title;
						
						rewind_posts();
					?>
				</h4>
			</div>

How to change number of posts when using Featured Image Grid & Showcase extension

Copy the extension to your child theme and edit its functions.php.

Ex.: Copy wp-content/themes/Builder/extensions/image-grid to wp-content/themes/BuilderChild-Default/extensions/image-grid (create extensions directory in child theme directory if doesn't exist) and edit wp-content/themes/BuilderChild-Default/extensions/image-grid/functions.php.

Set your desired number of posts in the following line:

'posts_per_page'      => 6,

Showing products from a specific WP e-Commerce category in Slider extension

2012-07-24 20-41-37.png

When Slider extension is applied to a layout or view and that layout is used in a listing page (Ex.: Posts page, archives), the sliding images will be featured images attached to the blog posts. When you have WP e-Commerce plugin activated and would like to show images attached to products belonging to a specific WPEC category in the Slider, follow this:

Copy the extension to your child theme and edit its functions.php.

Ex.: Copy wp-content/themes/Builder/extensions/slider to wp-content/themes/BuilderChild-Depot/extensions/slider (create extensions directory in child theme directory if doesn't exist) and edit wp-content/themes/BuilderChild-Depot/extensions/slider/functions.php.

Change

$args = array(
						'posts_per_page' => 6,
						'order'          => 'date',
						'meta_key'       => '_thumbnail_id'
					);

to

$args = array(
						'posts_per_page' => 6,
						'order'          => 'date',
						'meta_key'       => '_thumbnail_id',
						'post_type'      => 'wpsc-product',
						'wpsc_product_category' => 'product-category'
					);

In the above replace product-category with the slug of WP e-Commerce category from which you would like Product Thumbnails to be shown in the slider.

If you would like to know how to replace the standard blog posts that appear below the slider with products added in WP e-Commerce (screenshot below), see this forum topic.

My Test Site 2012-07-24 21-26-07.png

Displaying Slideshow at the top of Magazine layout

2012-08-08 10-16-27.png

If you would like to display PluginBuddy Slideshow above the posts when using Magazine extension, follow this:

Copy the extension to your child theme and edit its functions.php.

Ex.: Copy wp-content/themes/Builder/extensions/magazine to wp-content/themes/BuilderChild-Expansion-Blue/extensions/magazine (create extensions directory in child theme directory if doesn't exist) and edit wp-content/themes/BuilderChild-Expansion-Blue/extensions/magazine/functions.php.

Above

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

add

<div id="my-slideshow-container"><?php echo do_shortcode('[pb_slideshow group="0"] '); ?></div>

In the above replace 0 with the ID of Slideshow group that you would like to be shown.

The following has been added at the end of child theme's style.css (WP dashboard -> Appearance -> Editor) in this particular example:

#my-slideshow-container {
    margin-bottom: 4em;
}

.magazine-post-wrap {
    width: 43% !important;
}

How to show Read More below each excerpt when using 'Teasers Layout - Image Left' extension

When 'Teasers Layout - Image Left' extension is applied to a listing page 'Read More' link appears only if the post has more than 60 words. If you would like to show Read More at the bottom of every excerpt regardless of the number of words in the post, follow this:

1. Copy the extension to your child theme under extensions directory and edit its functions.php.

Ex.: Copy wp-content/themes/Builder/extensions/post-teasers-left to wp-content/themes/BuilderChild-Acute-Purple/extensions/post-teasers-left (create extensions directory in child theme directory, it doesn't exist by default) and edit wp-content/themes/BuilderChild-Acute-Purple/extensions/post-teasers-left/functions.php.

2. Below

<?php the_excerpt(); ?>

paste

<p><a href="<?php the_permalink(); ?>" class="more-link">Read More →</a></p>

3. Change

function excerpt_more( $more ) {
	global $post;
	return '...<p><a href="'. get_permalink( $post->ID ) . '" class="more-link">Read More→</a></p>';
}

to

function excerpt_more( $more ) {
	global $post;
	return '';
}

How to right align "Read More" box and move it up a bit when using 'Teasers Layout - Image Left' extension

In this example, Builder Child Theme - Adept is the active theme.

Before
After

1. Copy the extension to your child theme under extensions directory and edit its functions.php.

Ex.: Copy wp-content/themes/Builder/extensions/post-teasers-left to wp-content/themes/BuilderChild-Adept/extensions/post-teasers-left (create extensions directory in child theme directory, it doesn't exist by default) and edit wp-content/themes/BuilderChild-Adept/extensions/post-teasers-left/functions.php.

2. Change

return '...<p><a href="'. get_permalink( $post->ID ) . '" class="more-link">Read More→</a></p>';

to

return '...<p class="more-link-para"><a href="'. get_permalink( $post->ID ) . '" class="more-link">Read More→</a></p>';

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

.more-link-para {
	margin-top: 0;
	float: right;
}

How to show comments count below post titles when using Portfolio extension

Builder Responsive Test Site 2013-02-01 20-42-21.png

1. Copy the extension to your child theme under extensions directory (create extensions directory in child theme directory, it doesn't exist by default) and edit its functions.php.

Ex.: Copy wp-content/themes/Builder/extensions/portfolio to wp-content/themes/BuilderChild-Covell/extensions/portfolio and edit wp-content/themes/BuilderChild-Covell/extensions/portfolio/functions.php.

2. Below

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

paste

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

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

.portfolio-post-wrap .entry-meta {
	text-align: center;
}

.portfolio-post-wrap .entry-meta .comments a {
	color: #cfab8e;
	font-size: 0.9em;
}

How to show a certain number of posts for a particular category page while showing another number of posts for other pages when using Magazine extension

See #1 in this forum post.

jQuery Masonry Extension for Pinterest-Like Posts Display

jQuery Masonry comes included in WordPress core library beginning 3.5.

I (Sridhar) have modified a copy of iThemes Builder's magazine extension into masonry extension with some help from Ronald.

When this extension is applied to a layout and this layout applied to any webpage in the site that has a list of posts, the posts will automatically appear in boxes in a Pinterest-style display. Included in the extension is Infinite Scroll jQuery script which automatically loads next set of posts as the user scrolls down.

2013-02-18 15-50-34.png
Next Page link disappears as the user scrolls down and next set of posts will auto load

Live Demo (with few modifications on top of the extension)

1. Go here and click on ZIP button to download the extension. Extract the downloaded zip file and rename the resulting folder to masonry.

2. Using a FTP client or cPanel file manager, navigate to wp-content/themes and inside your active theme (should ideally be a child theme of Builder).

3. Create a directory named extensions if one doesn't already exist.

4. Upload the masonry folder from step 1 into the above extensions folder.

Example

5. In WordPress dashboard, go to My Theme -> Layouts & Views and edit the layout that is being used for your Posts (blog) page or archive page. If there is currently no such layout, create (either from scratch or by duplicating an existing one) layout(s) that you wish to be applied to your site's Posts (blog) page and/or archives.

From Extension dropdown, select Masonry Layout.

Example

Save the layout.

6. Now visit the page that uses above layout to see extension in action.

Note:

The extension is set to show posts in 3 columns by default in a 960px wide layout.

Therefore you might want to ensure that content module does not have any sidebar.
Also depending on which child theme is being used, only 2 columns might be appearing. This can be fixed by adjusting the width of ".builder-module-content .hentry" as noted in the extension's style.css.
Width of each post block can be changed in extension's style.css. Note the CSS and comments for ".builder-module-content .hentry"
This should be considered as unofficial extension and support is not guaranteed.

How to remove date when using Teasers Layout - Image Left extension

Before:

Screen Shot 2013-04-23 at 11.39.26 AM.png

After:

Screen Shot 2013-04-23 at 11.39.00 AM.png

1. Copy the extension to your child theme under extensions directory (create "extensions" directory in child theme directory, it doesn't exist by default) and edit its functions.php.

Ex.: Copy wp-content/themes/Builder/extensions/post-teasers-left to wp-content/themes/BuilderChild-Default/extensions/post-teasers-left and edit wp-content/themes/BuilderChild-Default/extensions/post-teasers-left/functions.php.

2. Change

<?php printf( __( 'Posted on %s', 'it-l10n-Builder' ), '<span class="the_date">' . get_the_date() . '</span>' ); ?>

to

<?php //printf( __( 'Posted on %s', 'it-l10n-Builder' ), '<span class="the_date">' . get_the_date() . '</span>' ); ?>

How to add a widgetized sidebar under Magazine extension's content area

If content module does not have a sidebar and if you would like to add a 3-column sidebar below it, it is pretty straight forward to add a widget bar module below the content module.

However, when content module has a sidebar and you would like to add a multiple widget columns below the content area then the following method can be used.

WordPress Dev Site 2013-04-25 10-46-12.png

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

// register our sidebar
add_action('widgets_init', 'register_my_content_sidebar');
function register_my_content_sidebar() {

        $sidebar = array(
                'id' => 'my_content_sidebar',
                'name' => __('Content Sidebar'),
                'description' => __( 'This widget section ...' ),
                'before_widget' => '<div id="%1$s" class="widget %2$s">',
                'after_widget' => '</div>',
                'before_title' => '<h4 class="widget-title">',
                'after_title' => '</h4>'
);

        register_sidebar($sidebar);
}

2. Copy the extension from parent Builder directory into the child theme under extensions directory so that (for example,) wp-content/themes/BuilderChild-Default/extensions/magazine is present.

Edit wp-content/themes/BuilderChild-Default/extensions/magazine/functions.php.

Above

<?php else : // do not delete ?>

add

<?php // add the sidebar
	if ( is_active_sidebar( 'my_content_sidebar' ) ) {
		echo '<div class="my-content-sidebar">';
	        dynamic_sidebar( 'my_content_sidebar' );
        echo '</div>';
	}
?>
2013-04-25 10-53-10.png

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

.my-content-sidebar {
    float: left;
    padding-left: 1em;
    padding-right: 1em;
}

.my-content-sidebar .widget {
    width: 32%;
    float: left;
    overflow: hidden;
    margin-right: 1em;
}

.my-content-sidebar .widget:last-child {
	margin-right: 0;
}

Thanks to Ronald for providing the base code here.

Personal tools
Namespaces
Variants
Actions
iThemes Codex
Codex Navigation
Toolbox