Can’t find a theme that works? Consider these two WordPress frameworks

Can’t find a theme that works? Consider these two WordPress frameworks

Choosing a WordPress theme is going to be the biggest factor in how your website looks and performs. There are thousands of themes out there. Where do you start? Choosing the wrong theme could cause a lot of unnecessary hassle. How to you find a theme that does exactly what you want?

How to Choose a Theme

If you are new to WordPress, the fastest way to get started is to search through  online resellers such as ThemeForest, Elegant Themes or Simple Themes. They offer a wide choice of themes with prices ranging from $25 to $50.  The advantage to buying through these services  rather than using a free theme is that these go through a review process; you have a basic reassurance that theme is well built and will support WordPress upgrades, plugin installations, and future additions.

A professional theme will usually have these advantages:

  • Support: If you have a question, where do you turn? A reseller will provide basic support and  some theme authors will offer comprehensive support.
  • Configurable options: You can change fonts, colors, background images. and more from within the WordPress admin panel.
  • Ease of customization: If you know a little CSS or PHP, the theme is structured to make those edits simpler.
  • Professional extension: Many themes will include extensions for portfolios, slideshows, calendars, e-commerce, and more.

But at some point you might just not find the theme that fits what you are looking for. If you have picked some basic skills with WordPress, you might want to try to building your own. This is where a framework comes in.

WordPress Frameworks

What is a WordPress framework? It is simply a basic theme with little styling,  that is meant to a secure and flexible basis for any look you might want to build on top of it.

Here some things you might want to do that are usually standard options in a framework:

  • Change a two column page layout to three columns
  • Make the design responsive for mobile phones and tablets
  • Change the sidebars on different pages
  • Add an additional navigation above the logo
  • Insert a list of new blog titles in your footer
  • Add a row of widgets on the home page
  • Place a slideshow on the home page

All this would be difficult to do with a theme that didn’t have these options already built in. You might be able to make the changes but why spend time stripping out design from a theme to replace it with another?

A well-built framework has considered most of the modifications you would want to make and has built in the flexibility. Two of the most popular, Headway and Genesis, use two very distinct approaches to building your theme. Here is an overview.

Headway Themes

Headway Themes is unlike most frameworks. It is less like a  theme and more like a plugin that gives you theme building tools using a drag-and-drop method. Inside of the WordPress admin,  activating Headway opens an editor window in another browser tab. There are two editors, a Grid Editor and a Visual Editor. I used Headway to build this site and here is a screenshots of the Grid Editor.

headway grid editor
Use the Headway Grid Editor to create a page layout by the drag-and-drop method

The Grid Editor is where you define the basic elements of the page: Header, Content Area, Footer, Widgets, Slider and more. You first define the width of the page and then begin to drag and drop boxes on a gridded background. By default, the Content element features the post or page content for that page but you can modify and build custom combinations of post titles, feature images and meta data, or even include content from a different pages.

The Visual Designer (see below) lets you modify the colors, fonts, margin and padding, and backgrounds. When you hover over an element that element is framed by blue border. You then have the option to change its style, either for that individual instance or for the general class that the element represents.

Headway Visual Editor
The Headway Visual Editor lets you modify the style for each element on the page

The tricky part with Headway that took a bit for me to pick up is how layout and design is picked up from page to page, that is, how the parent/child relationship works. If you just copy a page template to create a new page, the elements won’t be connected to original page. If you make changes to the original page, they won’t be picked up down the line. To repeat an element you need to indicate the item as “mirrored”. By default, Headway creates several  bases pages to build on, the Front Page, the Blog Index, the Single Page, and the Archive. Since some sites use the home page as the blog index it can get confusing. Spend some time familiarizing yourself with how Headway handles this before you begin.

The advantage to the drag-and-drop method of building a page is that you can create a very complex layout very quickly with knowledge of CSS or PHP (though of course that helps). A good example is a single-page site, one that features section after section of content on one long scrolling page. This is usually pretty difficult to build and you are usually limited to the themes out there that offer this but in Headway the process goes pretty smoothly.

The drawback is that you are working outside of the WordPress environment. A Headway layout created in Headway needs to continue to be edited in Headway. You are limited to Headway support team to help you out (though Headway support is very responsive so this might not be a problem.) And some people have complained that it creates a lot of bloated code that can get in the way as the site gets more complex.

Genesis by StudioPress

Genesis is a poplular WordPress framework theme offered by StudioPress. You can either buy Genesis separately or bundled along with other themes that StudioPress offers.

The strength of Genesis is the amount of thought that went into making a  theme that is easy to modify. Standard features include  1-, 2-, or 3-column layouts, breadcrumbs, and blog page filters. The website also offers a huge library of tutorials to make it easy to make changes. I found a very easy tutorial how to create a “widgetized” home page (that is, a row of boxes that features a blog index, navigation menu, custom text, things like that). If you can’t find what you are looking for there you can probably get help in its well-attended forums. There are also a number of plugins available to make modifications even easier, such as

  • Simple Hooks: add HTML text, or PHP code, anywhere on a page you want: before the header, after the footer, in between the post title and meta data, etc. Simply enter what you want in the box provided. (see screen shot below)
  • Simple Sidebars: create custom sidebars and apply them to select pages. Supports websites with multiple columns.
  • Simple Edits: change what metadata appears with each post (e.g., author, date) and what goes in the footer.
genesis
The Genesis Simple Hooks plugin makes it easy to add content to any section of a page that you want

What is the advantage of using Genesis? Well besides the reasons ones mentioned above, you are working within the WordPress admin. You can use the tools Genesis gives you or you can work with WordPress directly. If you plan to pass your theme off to someone else to work on or to resell it you are not beholden to any third party. The drawback? It can still be it a  challenge to build a complex site without in-depth knowledge of CSS or PHP.

The Verdict

Headway or Genesis? Well it depends of course what your needs are. If you are building a complicated layout and are the only responsible for  managing the site theme, then Headway offers a very powerful web builder that allows complex customization. If you are building WordPress themes that others will maintain and enjoy the challenge of  building from scratch with some knowledge of CSS and PHP, then Genesis offers a  trust-worthy and well-planned framework to get you started.

 

Anything on your mind?