iThemes Builder WordPress Theme Framework – A First Look

Builder is a WordPress Theme Framework by iThemes – a one-stop shop for WordPress themes, plugins and training according to the tagline of the website. The first version of Builder was released in December 2009. The current version is 3.5.3.

iThemes Builder installs like a regular WordPress theme. After installation it is recommended that you upload a child theme so that you can make any desired modifications without affecting the framework itself.

For the purpose of this review, the Default Child Theme was used, since it mimics the default settings of Builder Core – the actual framework.

iThemes Builder Core includes a Layout Engine, also known as the Layout Editor. With this Layout Engine you easily create the page layouts of your website.

The design of the website is shaped with the Style Manager or Style Editor. The Style Manager is a plugin which you will need to install seperately. Unless you prefer to edit the CSS styles manually, which is of course also an option.

iThemes Builder MyTheme Panel

Builder adds a MyTheme Panel to the WordPress menu bar, just above the Appearance Module. The MyTheme menu includes four pages:

• Start Here
• Settings
• Layouts & Views
• Style Manager

The Start Here page presents to you three short videos and links to resources on the web – like the codex and the support forum. Watching the screen cast will make you familiar with the concepts of iThemes Builder.

The Settings page serves three horizontal tabs: Basic, SEO, and Import/Export.

The tab of the SEO tab states a coming soon message. However a separate Builder SEO plugin is available from the iThemes Member Panel. This plugin adds a page SEO & Meta to the MyTheme panel. Installing a third party plugin is another option when you prefer to customize WordPress default SEO settings.

The Import/Export tab comprehends three meta boxes. The Site Exports lists already created export files. This overview is not only informative, the links in this list offer shortcuts to importing or re-downloading earlier exports.

The Export Data allows you to create a file with the Layouts and Views and/or the Theme Settings for backup purposes or transfers. The Import Data lets you upload such a file.

Builder’s Basic Settings

The Basic tab of the Settings page is where you customize your Builder installation. It contains toggle boxes for:

• Menu Builder
• Analytics and JavaScript Code
• Favicon
• Identify Widget Areas
• Comments
• Gallery Shortcode
• Theme Features
• Widget Content

With the Menu Builder you can create four different kinds of navigation menus: selected pages, selected categories, all WordPress pages, and WordPress Custom Menus. In order to add any of these menus to page layouts, you will need to add a Navigation module (a widget area for a menu) with the Layout Editor to that page.

The Analytics and JavaScript Code box includes two text areas where you can enter your JavaScript for web analytics and web tools. When you use Google Analytics, Woopra, or GoSquared, you only need to enter your ID, domain or site token.

The Favicon box gives you the means to manage this small image. You can choose one of the favicons packed with Builder, upload your own, use the child theme’s favicon or disable the favicon completely.

Builder install with 39 widget areas, the sum of the widget areas of the default page layouts. The Identify Widget Area lets you configure when the widget areas should be identified on the front-end. Your options are: only areas without widgets, always, or never. In addition, you set who should be able to see these identifications: only administrators, any logged in user, or everybody.

Within the Comments section, you can set for which content type the comments, comments counts, the comment form, and the comments are closed message will appear. You can enable or disable these for posts, pages, and media. In addition, you can customize the “Comments are closed” text.

Nowadays, Gallery items are displayed in three columns. Earlier versions of Builder used a Free-flowing list. The Gallery Shortcode settings allow you to set your preferences how to render galleries – either in columns or free-flowing.

The Theme Features box lets you enable or disable a number of built-in features:

• Duplicate Sidebar – allows you to clone the widgets of another sidebar, simply with the Duplicate Sidebar widget
• Widget Content – allows you to add any kind of content you can create with the WYSIWYG editor
• Plugin Features – allows you to enable or disable plugins
• Builder’s Extensions – partial stylings which can be applied to Layouts and Views
• WordPress Admin Bar – only controls the Builder specific additions to the Admin Bar
• Header Flush – can come in handy in case of conflicts caused by plugins

The Widget Content, a custom post type, allows you to easily create and manage widget content. This way you can add text, images, links, lists – anything you can create with the WYSIWYG editor to a widget area. You can add these custom widget posts to a widget area with the Widget Content widget.

Next tot the Duplicate Sidebar widget and Widget Content widget, Builder installs with a third custom widget; the Header widget, which allows you to customize the Site Title, the Tagline as well as the presentation of these tags.

Creating Layouts with iThemes Builder

Builder installs with nine preformatted layouts like Left Sidebar, Right Sidebar, Full Width, and Image Header, giving you a head start when developing your website. Let us examine the possibilities of the Layout Editor by creating our own custom layout.

First we have to enter a name for our new layout: 1040 Right SB.

When setting the Width of the page layout, you can choose from Narrow (600px), Medium(780px), Wide (960px) or set your custom width. Since we prefer a width of 1040px, so we select Custom. A Custom Width field appears, where we enter 1040.

Now we have to decide whether we want to select an extension. Extensions add styling and functions to a layout. Builder offers six extensions:

• Featured Image Grid & Showcase – displays the featured image in a grid layout with color box popup
• Featured Image Slider – displays the featured image and post title of first 6 posts in a custom slider and the featured image, post title and excerpt for the remaining posts
• Magazine Layout – displays the featured image, post title and content excerpt in a grid layout
• Portfolio Layout – displays the featured image and post title in a grid layout
• Teasers Layout, Image Left – displays the featured image (floating left), post title, post meta and excerpt as teasers
• Teasers Layout, Image Right – displays the featured image (floating right), post title, post meta and excerpt as teasers.

In fact, there is a seventh option: No Extension, which displays a traditional blog-style layout. This is our first layout, so let’s start simple – No Extension.

We do not want to hide widget areas, so we accept the suggestion – No. Hiding (temporarily) widget areas of a layout leads to a less crowded list of widget areas on the WordPress Widget page. You can quickly hide and show widget areas from the Layouts & Views >> Layouts tab.

We have not used the Style Manager yet, so there are now Styles to add at this point. We leave this option blank for the moment.

Now that we have configured the prerequisites, we can continue with the actual layout.

When you  click the Add Module link a wizard pops up. You can choose from:

• Content – the area where your pages, posts and lists will be displayed
• Footer – at the bottom of the page
• Header – page header
• HTML – like a text widget that allows you to add HTML, PHP and shortcodes
• Image – reserves an area for an image
• Navigation – adds a navigation bar for categories, pages and custom WordPress menus
• Widget Bar – offers up to five widget locations

We want a top navigation, a header, a main navigation, a content area of course, and a footer. Every time you choose a module a new dialogue wizard appears asking for more relevant details.

When you add a Navigation Module, for example, you can select the desired Navigation Type like a certain custom WordPress menu.

And when adding a Content Module, you will be asked how many sidebars you want, where you want them and how width they have to be. Pretty straight forward and simple.

When done, you can always add more modules by clicking the Add Module link on the spot where you would like to add that module. Like for example a Below Content widget area between the Content and the Footer.

Building With A View

What we have now is a nice layout for our blog. However, a slider on the homepage would be very nice. Since we only want to see the slider on the homepage, we do not need to create – or duplicate – a layout. All we have to do is add a View.

A View is basically an additional styling applied to one or more page types. Like a slider only on the homepage, or post excerpts on archive pages while displaying the full content of posts on the home page. You can assign different layouts to the following page types:

•  404
• Archives
• Attachment
• Author
• Category
• Date Archive
• Home
• Page
• Post
• Post Type
• Search
• Singular
• Tag

So, let us switch to the Views tab (Layout & Views >> Views) to add that a slider to the homepage. Builder ships with one additional View, named Archives. This Archives View applies to category, tag, author and date pages.

Pushing the [Add View] button, triggers a dialogue screen that prompts us to select a View. The goal is adding a slider to the homepage, so the choice from the drop-down menu – listing all above mentioned Views – is Home.

We select Home for this View, choose the 1040 Right SB Layout created earlier, add the Featured Image Slider Extension and click the blue [Save] button. Done. Now we have home page with a slider on top of the blog feed.

Up until this moment, we have explored Builder, created a Layout and added a View in order to display a slider on the homepage. Despite all this, our blog still has a very minimal appearance, so let’s see what the Styling Manager can do for us.

Adding Style to a Builder Website

When entering the Styling Manager for the very first time, you encounter a blank screen with only a [Create Style] button. Hitting that button launches the Style Manager and brings you to the Editor page. This page comprehends:

• a header at the top, where we can enter the name for our style and choose to apply it to the entire site (globally)
• toggle boxes allowing you to style general page elements and modules
• a preview box instantly showing you the results of the styling – you can even browse the site within the Preview box
• a CSS Preview box that displays the actual CSS code of the point-and-click actions
• Custom CSS box – a text area where you can enter any CSS manually

There are toggle boxes, grouping options, for the following components:

• Site Background
• Site Font
• Links
• Headings
• Container
• Post/Page Content Styling
• Comment Styling
• Header Module
• Content Module
• Navigation Module
• Image Module
• Widget Bar Module
• Basic Module Styling
• HTML Module
• Footer

It would be beyond the scope of this post to list all options, but here are the options concerning the Post Title:

• Text Options
  • font family, font size, font color, font weight, text decoration, and text transform
  • links – font color, font weight, text decoration, and text transform
  • links in hover state – font color, font weight, and text decoration
• Spacing – margins, padding
• Background – color, image, attachment, repeat, positioning
• Borders – color, width, style

The image above (716×11,797px, 456 KB) is a page shot of the Style Editor. Although all toggle boxes have been opened, not all options of the individual boxes are shown. Nevertheless, it gives you a pretty good impression of the level of detail in which you are able to configure the styling of a website created with iThemes Builder. The entire styling can be achieved by point-and-click – without coding.

The design created with the Style Manager is not stored in the child theme’s style.css, but in a custom stylesheet located in \wp-content\uploads\builder-style-manager folder. This stylesheet has the name as entered at the top of the Style Editor page.

iThemes Builder Recap

iThemes Builder Core is the framework that allows you to build and style website from scratch. The Page layouts are created with the Layout Manager. The design with the Style Manager. You can create both simply by point-and-click – without the need to enter a single line of code or CSS.

Besides the Builder, iThemes also offers Child Themes and Blocks. Child Themes bundle specific layouts and designs. iThemes offers currently about 60 Child Themes for its Builder Framework.

Blocks are sort of Builder specific plugins adding a custom post types. The Restaurant Block for example adds custom post types for Menu Items and Locations. The other two blocks currently available are Church Block and Events Block.

iThemes Builder is available with three plans:

• $80 Foundation Pack – comes with the Builder Core, 5 Foundations Themes, Style Manager plugin, and 1 year of support and updates
• $197 Developer Pack – includes the Builder Core, 60 Child Themes, Style Manager and LoopBuddy plugins, and 1 year of support and updates, and new Child Themes released during the first year
• $387 All Access Pass – Developer Pack plus 80 iThemes Classic Themes

iThemes offers customers willing to renew their license a 25% loyalty discount.

The LoopBuddy plugin allows you to overwrite the default WordPress loop. This loop displays the blogfeed. With LoopBuddy’s Layout Editor and Query Editor you can create your own custom loop. PluginBuddy can be purchased separately or as part of the PluginBuddy Pack, which also includes BackupBuddy. Basically, these plugins work with every WordPress theme.