Chapter 7: Using Theme Frameworks to Simplify Customization
In This Chapter
Getting familiar with theme frameworks
Exploring popular theme frameworks
Recognizing common framework features
As theme development for WordPress became a more complex task, theme designers began to realize that they were using the same snippet of code and functions repeatedly to accomplish the same tasks in every theme they built. When it came time for them to upgrade their theme (for example, when WordPress released a new version with new features), they found themselves updating the same functions and adding the same features over and over to several themes they had developed. This is how theme frameworks were born. Essentially, a theme framework is a single theme that is a foundation for other themes to be built from.
Chapter 5 of this minibook discusses child themes, including how to build them. With theme frameworks, the parent theme (the framework) contains all the WordPress functions and template tags, and you can build child themes on top of them. The nice thing about this setup is that the original theme developer has to update only one theme, the framework, to provide upgrades to all of his theme offerings (the child themes).
Frameworks come with the tools developers can use to make a custom theme with great efficiency. Using a framework that provides these tools is much faster than building your own tools every time you want to modify a standard theme.
In this chapter, I explore some of the popular theme frameworks and the tools these frameworks contain that make them appealing to developers who want to create a custom theme.
Understanding Theme Frameworks
Many theme frameworks are available in the WordPress market. The goal of these frameworks is to allow you to create custom websites and themes without requiring you to be an expert programmer. Creating custom layouts, designs, and functionality can be difficult, and theme frameworks bridge the gap.
At its core, a theme framework is still just a WordPress theme. You install it and activate it just like any other theme. The real power of theme frameworks is usually found through theme options, child themes, and layout customization. One of the most important parts of using theme frameworks is starting with the right one for your project.
When you install a theme framework, you might be surprised to find limited or no styling in the theme. Generally, theme frameworks are meant to be blank canvases that you easily fill with your own color styles. The goal for a framework is to get out of your way when developing. By doing so, it allows you to use tools that are provided instead of having to remove a lot of unnecessary elements and styling.
Think of it like a toolbox. All the tools you need are packaged nicely inside. You take out only the tools that you need for a given project.
Discovering Popular Frameworks
Many theme frameworks are available from a variety of sources. Here’s a look at a few of the more popular theme frameworks.
Theme Hybrid
The Theme Hybrid framework (see Figure 7-1) features 15 custom page templates and 8 widget-ready areas. Additionally, six child themes are available from the Theme Hybrid website at http://themehybrid.com. Theme Hybrid also supports a series of add-on plugins that are specific to this theme. These add-ons include such features as a Tabs plugin, Hooks plugin, and Page Template packs.
Figure 7-1: A home page with a new installation of Theme Hybrid.
The Hooks plugin in particular can be very handy if you’re unfamiliar with PHP programming because it provides you with a graphical interface to latch into hooks, which I explore later in this chapter.
Theme Hybrid, its child themes, and all its add-on plugins are available free. You can download them from http://themehybrid.com or from WordPress Extend at http://wordpress.org/extend/themes/hybrid.
Key features:
Theme Options menu
Supports child themes
Add-on plugins to extend functionality
Carrington
The Carrington theme's developers set out to create a framework that would allow them to stop re-creating the same key features every time they needed to make an advanced WordPress theme. (See Figure 7-2.) By doing this for themselves, they created a tool that others can now use for theme development. Carrington takes a different approach from many other theme frameworks; it doesn't use the parent/child theme relationship. Instead, Carrington uses a unique system of template files to determine how different types of content display in your theme. This approach helps prevent bugs in code because there is less code. Carrington's developers offer several themes built from the base framework. Check out their website at http://carringtontheme.com.
The Carrington theme’s features include
Unique template file system
Fast development of complex themes
Predeveloped themes using the framework
Figure 7-2: A home page with a new installation of Carrington.
Thematic
Thematic (see Figure 7-3) features 13 widget-ready areas, grid-based layout samples, and styling for many popular plugins. About 20 child themes are available directly from the Thematic website, as are many more from third-party sources. Downloading Thematic won't cost you a dime. You can download the theme free at http://wordpress.org/extend/themes/thematic. Numerous child themes are available free as well, whereas others are commercially supported.
The Thematic theme’s features include
Theme Options menu
Supports child themes
Figure 7-3: A home page with a new installation of Thematic.
Genesis
Genesis (see Figure 7-4) includes six default layout options, a prerelease security audit from WordPress lead developer Mark Jaquith, and a comprehensive array of SEO settings. Another great feature of Genesis is a built-in theme store in the WordPress Dashboard that allows you to easily choose, purchase, and activate one of more than 18 child themes. Like other frameworks, Genesis has some theme-specific plugins that add functionality. You can purchase Genesis from StudioPress (http://studiopress.com) for $79.95, and it includes one child theme. Additional child themes are available for $24.95.
The Genesis theme’s features include
Theme Options menu
Supports child themes
Add-on plugins to extend functionality
Six default layout options
Figure 7-4: A home page with a new installation of Genesis.
iThemes Builder
iThemes Builder (see Figure 7-5) sports a built-in layout editor that allows for infinite combinations of layouts. Widget areas can be created on the fly in the layout editor with no limit to the number you can create. Other key features include a style manager to customize the look of the site, a slew of in-theme SEO options, and integration with popular plugins like BuddyPress. You can purchase a copy of iThemes Builder from iThemes at http://ithemes.com/purchase/builder-theme. The price is $127 for unlimited sites and includes over 15 child themes.
Key features:
Theme Options menu
Supports child themes
Add-on plugins to extend functionality
Figure 7-5: A home page with a new installation of iThemes Builder.
Headway
Headway's layout combinations are virtually limitless, thanks to a what-you-see-is-what-you-get (WYSIWYG) style editor for creating layouts. The visual editor allows you to drag and drop parts of your theme (known in Headway as Leafs) and resize them to fit your needs. Headway also features a built-in design manager that allows you to select colors and images for your sites design. Headway, shown in Figure 7-6, can be purchased from http://headwaythemes.com for $87 for use on up to two sites, or $164 for use on unlimited sites.
The Headway theme’s features include
Drag-and-drop layout editor
Built-in design manager
Infinite widget areas
Figure 7-6: A home page with a new installation of Headway.
Common Framework Features
Theme frameworks offer a host of features to make your life easier when it comes to building a website. Individual frameworks offer many unique features but also share a common set of features. These common features generally allow for faster and easier development of your WordPress website.
Theme functions
Most themes include a functions.php file that contains functions for the theme, but some theme frameworks take this to the next level. They offer customization options using these functions that rival many plugins.
In the Genesis theme, a custom function allows you to create new widget areas. The genesis_register_sidebar() function, which takes care of the heavy lifting for widgetizing a new area, gives you some options to easily customize it. The following example shows how you might use this function in your theme's functions.php file:
genesis_register_sidebar(array(
'name'=>'My New Widget',
'description' => 'This widget is new.',
'before_title'=>'<h4 class="mywidget">',
'after_title'=>'</h4>'
));
This function allows you to enter a few customizations into the function, such as a name for your widget, a description, and any HTML that you want to appear before and after your widget.
Many standard themes also provide functions that are used in the theme, but theme frameworks offer many additional custom functions that the theme doesn’t. The custom functions help you make the theme do exactly what you need for a specific site.
Theme functions can vary greatly, so most theme authors have ample documentation through their site or forums where you can get more information about available functions.
Hooks
Many theme frameworks provide hooks to allow you to access and modify features of the theme. Hooks may seem a little advanced, but with a little practice, hooks are quite efficient at modifying a theme. Theme frameworks provide hooks to allow you to latch in to functions of the theme and call or modify them at a specific time.
The two types of hooks are
Action: Events during the loading of the theme when you can latch in a specific function. For example, if you want one of your functions to execute at the same time a file in the theme is loaded, you can use an action to hook the function to that file’s load.
Filter: Allows you to modify data while it passes to the theme or to the browser screen. Some theme frameworks allow you to filter the classes the theme applies to elements.
You can find an example of modifying your theme with hooks in iThemes Builder. For example, consider the hook to add meta data: builder_add_meta_data. This can be useful for SEO in your theme.
To add custom meta output, the default function can be replaced with a custom one. To do that, remove the existing action and add your own, like this:
<?php
remove_action('builder_add_meta_data','builder_seo_options'),
add_action('builder_add_meta_data','my_custom_builder_seo_options'),
?>
The default SEO options were removed with remove_action and replaced with a new function called my_custom_builder_seo_options. Now, you need to define what my_custom_builder_seo_options will do.
<?php
function my_custom_builder_seo_options() {
/*Add custom seo options here.*/
}
?>
This creates a basic PHP function where you can define what custom SEO options you want in the theme.
Because many frameworks have 100 or more hooks, most of them provide documentation (through their websites or forums) of what hooks are available, what each hook does, and what parameters are available to modify how the hook works.
Child themes
Some frameworks allow you to modify the theme by using child themes. (Find out more about the parent/child theme relationship in Chapter 5 of this minibook.) Child themes can be as simple as a stylesheet, but they derive their power from the parent theme’s template and function files.
Like a regular theme, a huge advantage of using a child theme is to protect any customizations you make from being overwritten if a newer version of the theme comes out. For frameworks, this is especially important because changes to the core theme may be more frequent than regular themes due to the need to add more hooks, functions, or options over time.
Theme Hybrid, Thematic, Genesis, and iThemes Builder all extend their frameworks through child themes. Many frameworks provide child themes for free; others build child themes to sell.
Layout options
The ability to change the layout of a framework is important for many users. Different frameworks use different methods of achieving this. Some use template files to allow the reorganization of the layout; others provide an interface to create layouts from scratch.
Headway, for example, provides a unique layout editor, as shown in Figure 7-7. The layout of the theme is created through a drag-and-drop interface that allows you to organize, size, and style the layout in one location.
Figure 7-7: Headway’s layout editor.
Styling
Many theme frameworks incorporate methods that let you customize the style of the website without needing to know CSS. (See the section on CSS and stylesheets in Chapter 4 of this minibook.) Frameworks that use a what-you-see-is-what-you-get (or WYSIWYG) style editor, such as Headway, allow you to easily match your theme’s colors and design to your branding. Additionally, many editors include color pickers so you don’t have to use hexadecimal values to choose colors.
Other common elements that can be styled are borders, fonts, and headers.
Customizing Theme Frameworks
You may find that you’re changing the same elements every time you set up a website by using a theme framework. Here is a list of where to start when customizing a theme framework for a website:
Add a custom header or logo image. Adding a nice header graphic to a site makes it look unique from the beginning. If graphics aren’t your specialty, use a good designer for your header graphic. This crucial element will catch your visitors’ eyes as soon as they hit the page.
Change the colors of the background and links to match the header and branding of the site. Many frameworks provide a simple interface to do this; others require you to open the style.css file to change the color. Either way, changing the background and link colors to match the site adds cohesiveness throughout the branding of the site.
Consider the home page layout: This is based on what the site is trying to achieve. If you want the site to focus on the blog, you might place it on the front page with a left or right sidebar. If your site is more static, you might create a layout with many widget areas on the home page that display things from around the site. The home page is the landing point for many of your site’s visitors, so it’s important to consider its layout early in the process.
Decide how to lay out the inside pages and blog post pages. The pages are just as important as the home page. The form and function of the page and blog post layouts needs to be well planned to accommodate for the parts of the site that you want every user to see. These might include ads in the sidebar or an e-mail newsletter sign-up at the bottom of every post. In the case of pages, you might include information on your products and services in the sidebars and feature areas.
Add a contact form to the site: Don’t overlook one of those most vital items to install on almost every site. Some frameworks offer built-in contact forms that you can add to any page.
If your theme framework doesn't offer a built-in contact form, many free plugins include this functionality, such as Contact Form 7 from http://contactform7.com. If you're looking for a more robust form plugin, Gravity Forms by Rocket Genius (http://gravityforms.com) is one of the best form-creation plugins. It is a premium plugin but well worth the price.