Builder Extensions

(Difference between revisions)
Jump to: navigation, search
m (Introduction)
(Showing posts from a category on a separate Page and applying an extension)
Line 69: Line 69:
 
== Showing posts from a category on a separate Page and applying an extension ==
 
== 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 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.
+
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,
 
For example,
Line 89: Line 89:
 
Note: If the child theme directory does not contain ''extensions'' directory, create it.
 
Note: If the child theme directory does not contain ''extensions'' directory, create it.
 
   
 
   
'''2.''' Rename the extension and edit functions.php to change names of functions and references to these functions so they are unique. No two extensions (irrespective of whether they reside in the child theme or parent) can have the same function names. Also remove the <code>if ( ! is_singular() ) ...</code> limitation. Add query_posts() call just above the loop to restrict the posts from your desired category.
+
'''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.:
 
Ex.:
Line 95: Line 99:
 
'''a.''' Rename wp-content/themes/BuilderChild-Thinner/extensions/magazine to wp-content/themes/BuilderChild-Thinner/extensions/magazine-issues
 
'''a.''' Rename wp-content/themes/BuilderChild-Thinner/extensions/magazine to wp-content/themes/BuilderChild-Thinner/extensions/magazine-issues
  
'''b.''' Edit wp-content/themes/BuilderChild-Thinner/extensions/magazine-issues/style.css.
+
Edit wp-content/themes/BuilderChild-Thinner/extensions/magazine-issues/style.css.
  
 
Change  
 
Change  
Line 109: Line 113:
 
</pre>
 
</pre>
  
'''c.''' Edit wp-content/themes/BuilderChild-Thinner/extensions/magazine-issues/functions.php.
+
'''b.''' Edit wp-content/themes/BuilderChild-Thinner/extensions/magazine-issues/functions.php.
  
 
Change
 
Change
  
 
<pre class="brush:php;">
 
<pre class="brush:php;">
function builder_magazine_layout() {
+
// Calling only if not on a singular
</pre>
+
if ( ! is_singular() ) {
 
+
add_action( 'builder_layout_engine_render', array( &$this, 'change_render_content' ), 0 );
to
+
}
 
+
<pre class="brush:php;">
+
function builder_magazine_layout_issues() {
+
</pre>
+
 
+
In the above, ''builder_magazine_layout_issues'' is just the name of function, it can be anything else as well like say ''builder_magazine_layout1'', anything but ''builder_magazine_layout'' because this function already exists in magazine extension (of the parent theme).
+
 
+
Change
+
 
+
<pre class="brush:php;">
+
add_filter( 'excerpt_length', 'builder_magazine_excerpt_length' );
+
add_filter( 'excerpt_more', 'builder_magazine_excerpt_more' );
+
 
</pre>
 
</pre>
  
Line 135: Line 127:
  
 
<pre class="brush:php;">
 
<pre class="brush:php;">
add_filter( 'excerpt_length', 'builder_magazine_excerpt_length_issues' );
+
// Calling only if not on a singular
add_filter( 'excerpt_more', 'builder_magazine_excerpt_more_issues' );
+
//if ( ! is_singular() ) {
 +
add_action( 'builder_layout_engine_render', array( &$this, 'change_render_content' ), 0 );
 +
//}
 
</pre>
 
</pre>
  
Line 151: Line 145:
 
</pre>
 
</pre>
  
Change
+
[[File:2012-02-27 12-51-10.png|800px|thumb|none]]
 
+
<pre class="brush:php;">
+
remove_filter( 'excerpt_length', 'builder_magazine_excerpt_length' );
+
remove_filter( 'excerpt_more', 'builder_magazine_excerpt_more' );
+
</pre>
+
 
+
to
+
 
+
<pre class="brush:php;">
+
remove_filter( 'excerpt_length', 'builder_magazine_excerpt_length_issues' );
+
remove_filter( 'excerpt_more', 'builder_magazine_excerpt_more_issues' );
+
</pre>
+
 
+
Change
+
 
+
<pre class="brush:php;">
+
function builder_magazine_excerpt_length( $length ) {
+
</pre>
+
 
+
to
+
 
+
<pre class="brush:php;">
+
function builder_magazine_excerpt_length_issues( $length ) {
+
</pre>
+
 
+
Change
+
 
+
<pre class="brush:php;">
+
function builder_magazine_excerpt_more( $more ) {
+
</pre>
+
 
+
to
+
 
+
<pre class="brush:php;">
+
function builder_magazine_excerpt_more_issues( $more ) {
+
</pre>
+
 
+
Change
+
 
+
<pre class="brush:php;">
+
if ( ! is_singular() ) {
+
add_action( 'builder_layout_engine_render', 'builder_magazine_layout_change_render_content', 0 );
+
}
+
</pre>
+
 
+
to
+
 
+
<pre class="brush:php;">
+
add_action( 'builder_layout_engine_render', 'builder_magazine_layout_change_render_content', 0 );
+
</pre>
+
 
+
Change
+
 
+
<pre class="brush:php;">
+
function builder_magazine_layout_change_render_content() {
+
remove_action( 'builder_layout_engine_render_content', 'render_content' );
+
add_action( 'builder_layout_engine_render_content', 'builder_magazine_layout' );
+
}
+
</pre>
+
 
+
to
+
 
+
<pre class="brush:php;">
+
function builder_magazine_layout_change_render_content_issues() {
+
remove_action( 'builder_layout_engine_render_content', 'render_content' );
+
add_action( 'builder_layout_engine_render_content', 'builder_magazine_layout_issues' );
+
}
+
</pre>
+
 
+
[http://d.pr/KpLs Here] is the complete modified functions.php file as an example.
+
  
 
'''3.''' Create a layout and apply the extension from the previous step.
 
'''3.''' Create a layout and apply the extension from the previous step.
Line 235: Line 159:
 
[[File:Step4.png|628px|thumb|none]]
 
[[File:Step4.png|628px|thumb|none]]
  
That's it.
+
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.
  
 
== Modifying Portfolio extension so that 2 images appear per row rather than 3 ==
 
== Modifying Portfolio extension so that 2 images appear per row rather than 3 ==

Revision as of 01:28, February 27, 2012

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.

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. Another post should also appear on the page but isn't. This is currently a bug and shall be fixed soon.

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

Miscelleneous

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

Examples of custom 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.

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.

Personal tools
Namespaces
Variants
Actions
iThemes Codex
Codex Navigation
Toolbox