Builder Extensions

(Difference between revisions)
Jump to: navigation, search
(Magazine Extension Enhanced - with post thumbnails)
(Updated the page to be current)
Line 1: Line 1:
 
= Introduction =
 
= 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 and resides under the child theme directory. An extension is applied to a layout.
+
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.  
  
Note: Only style.css and functions.php in an extension will be used. It is not possible to override the parent or child theme's other 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.
+
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''.
  
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.
+
An extension is applied to either a layout or a view.
  
By default, Builder ships with 3 extensions: [http://ithemes.com/codex/images/8/86/Blog-extension-screenshot.png Blog], [http://ithemes.com/codex/images/2/2f/Blue-background-extension-screenshot.png Blue Background] and [http://ithemes.com/codex/images/7/76/Magazine-extension-before.png Magazine] (click on the links to view their screenshots)
+
For the sake of documentation, let us consider this site: http://localhost/builder3/
  
To apply one of these extensions to your desired layout, go to My Theme -> Layouts and select it from the Extension dropdown and save the layout.
+
There is a category in this site named ''Issues'' and the URL of this category page is http://localhost/builder3/category/issues/
  
[[Image:Extension-option-in-layout.png|200px|none]]
+
Screenshot: http://d.pr/cUJa
  
99% of the cases, we leave "Should this Extension disable the theme's style.css file?" to the default, No. If it is set to Yes, then the child theme's style.css will not be applied to (and hence used in) any view that uses this layout.
+
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.  
  
If you would like to edit one of the stock extensions or use your own, then DO NOT edit/add new in extensions directory under the parent Builder directory. Instead, create a new directory named "extensions" under your child theme and then copy the stock extension to it and modify or create a new one in it.
+
== Featured Image Grid & Showcase ==
  
It is important to edit the layout and apply the extension after it is placed in the child theme directory. Only those extensions that are in the child theme's extensions directory will be visible in the dropdown in Layout editor. Those in the parent, i.e., Builder's directory won't be available.
+
To apply Featured Image Grid & Showcase extension to ''Issues'' category page, we should add a view like so:
 +
 
 +
[[File:Extn-1.png]]
 +
 
 +
[[File:Featured-image-grid-showcase.png|800px|thumb|none]]
 +
 
 +
<u>Note</u>:
 +
 
 +
# 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.
 +
 
 +
== 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.
 +
 
 +
[[File:Featured-image-slider-1.png]]
 +
 
 +
Page Not Found message appears below the slider because there are only 3 posts. If we add 1 more,
 +
 
 +
[[File:Featured-image-slider-2.png|780px|thumb|none]]
 +
 
 +
== Magazine Layout ==
 +
 
 +
[[File:Magaine-extn.png|800px|thumb|none]]
 +
 
 +
== Portfolio Layout ==
 +
 
 +
[[File:Portfolio-extn.png|800px|thumb|none]]
 +
 
 +
== Teasers Layout - Image Left ==
 +
 
 +
[[File:Teasers-images-left.png|800px|thumb|none]]
 +
 
 +
== Teasers Layout - Image Right ==
 +
 
 +
[[File:Teasers-images-right.png|800px|thumb|none]]
 +
 
 +
= 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.
  
 
= Sample Extensions =
 
= Sample Extensions =

Revision as of 07:15, August 17, 2011

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

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

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.

Sample Extensions

Magazine Extension Enhanced - with post thumbnails

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

Edit the layout that's being used by your Posts page and apply "Magazine Enhanced" extension.

If you would like to change the dimensions of the thumbnail image (currently it is 150 x 150):

  1. set the width and height in line 16 of the extension's functions.php
  2. set the the same width and height as in the above step in extension's style.css around line 23


******(Note added by user of this extension, not original author)******** 

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.

Styling ContactBuddy

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

Personal tools
Namespaces
Variants
Actions
iThemes Codex
Codex Navigation
Toolbox