The Genesis Framework by StudioPress – A First Look

The Genesis Framework by StudioPress is a WordPress theme framework offering a solid foundation for the development of child themes. With the Genesis Framework you can create your own child themes from scratch or use an existing Genesis child theme to leapfrog your project.

StudioPress offers currently 46 child themes for its Genesis Framework. This review is based on the Sample child theme. It is a bit of a bare-bones child theme, but that is perfect for our purpose – demonstrating the abilities of the Genesis framework.

The Genesis Theme Settings panel comprehends three pages:

• Theme Settings
• SEO Settings
• Import/Export

Let us have a look at the most relevant sections of these page.

The Genesis Theme Settings

The Theme Settings page serves toggle boxes for:

• Information
• Custom Feeds
• Default Layout
• Navigation Settings
• Breadcrumbs
• Comments and Trackbacks
• Content Archives
• Blog Page
• Header and Footer Scripts

Information

The Information box displays the version and release date of the Genesis Framework. If you want to, you can add the version number of the framework and the name of the child theme to the document source of your webpages by checking the appropriate box here.

Instead of notifications and automatic updates, you can also choose to receive an e-mail as soon as updates become available. This might come in handy when you take care of (theme) updates on behalf for your customers.

Custom Feeds

When you prefer Feedburner above WordPress for handling the feeds of your posts and comments, you can enter your Feedburner URLs here.

Default Laoyout

You can set the Default Layout to one column (just the content area), one sidebar left or right of the content area, or even to three columns. In the latter case, you can opt for one sidebar at each side, or two sidebars at the same side of the content area – either left or right. For each individual post, page and user, you have the ability to alter the page layout settings.

Navigation Settings

The Sample child theme supports natively two WordPress 3 menus. By default, both are located between the header and the content area.

In case you would like to see the primary navigation menu at the top of the page, you will find the following code snippet on the StudioPress site:

/* Reposition the primary navigation */
remove_action( 'genesis_after_header', 'genesis_do_nav' );
add_action( 'genesis_before_header', 'genesis_do_nav' );

All you have to do is add these three lines at the bottom of the functions.php file of your Genesis child theme and the primary menu will appear at the top of the page. You do not need to know any PHP to follow this recipe.

The text between the /* and */ is a comment intended for humans, and ignored during the execution. The other two lines are PHP code. When you can read English, you might even understand what is happening here.

Optionally, you can extend the primary navigation menu with either Today’s Date, RSS feed links, the Search Form, or a Twitter link. In the latter case, two additional text fields will appear where you can enter the Twitter ID and replace the default “Follow me on Twitter” text by your own.

Breadcrumbs

In case you want to use breadcrumbs on your site, you can check here on what pages you want those breadcrumbs to appear.

Comments And Trackbacks

This box lets you customize your settings for the comments and pingbacks.

Content Archives

Here you can set your preferences for the index pages of the site, including the homepage. You can choose to display the post content or just the excerpts. When you go for the content, you can limit the number of words you want to display, otherwise the full content of the post will be shown – unless you have applied the Read More tag, in which case the content until the Read More tag will be displayed.

Here you can also opt to include the Featured Image. In addition, you can set the preferred dimension of the Featured Image. The options presented here, are set at the Settings >> Media page.

Suppose you would like to add one or more image  dimensions? No problem, just add a line like this one to the functions.php of your child theme:

add_image_size( 'mydims', 600, 225, TRUE );

The code above adds an image size named mydims with the dimensions of 600 by 225 px.

When you check Include the Featured Image, the Featured Image will show up on index pages, but not on the single post page. When you would like to display the Featured Image also as the first image in a post, you only have to push the Insert into Post button, right next to the Use as a featured image link.

Your preferences for the post navigation are also set at the Content Archives box. You can choose from three options: Older/Newer, Previous/Next or Numeric.

Blog Page

Here you can fine-tune the posts that will be displayed on the index pages. The first dropdown menu lets you select a category. The default choice is All Categories. Additionally, you can include and exclude categories by entering their IDs. Suppose you want to exclude the category uncategorized; simply enter -1 into the text field.

Header and Footer Scripts

This box serves two text areas where you can enter your scripts for the page headers and footers, like Google Analytics.

The Genesis SEO Settings

The SEO Settings page of the Genesis Framework lets you tweak your SEO preferences. This page serves sections for:

• Doctitle Settings
• Homepage Settings
• Document Head Settings
• Robot Meta Settings
• Archives Settings

As soon as you activate a third party plugin to handle your SEO settings, the Genesis Framework will deactivate its incorporated SEO settings and hide the page regarding.

A big plus of using the Genesis SEO Settings for your SEO Optimization above using a third-party plugin, is that you never have to think about the SEO – the Genesis Framework is taking care of it for you.

The Genesis Import/Export Settings

The Import/Export page facilitates the creating of a backup file in .json data format for backup and transfer purposes – when you would like to transfer the theme settings from a local host to a live web environment, for example. With checkboxes, you choose to backup the Theme settings and/or the SEO Settings. At the other end, you can simply import these settings by uploading the .json file.

Exploring The Genesis Framework

Now that we have had a brief look at the theme panel of Sample child theme, let us explore the potential of the Genesis Framework a bit.

Let me start with a confession. Being a non-coder myself, I was a bit confused and even disappointed when I started working with the Genesis Framework. Of course, I had seen lots of good praise about the Genesis Framework, but when I installed the Genesis framework and the Focus child theme – my initial purchase – I thought by myself, “Is this it?”.

The confusion – especially for non-coding newbies like me – is probably raised since a great deal of the flexibility and power of the Genesis Framework is buried inside the code of the framework. In fact, child themes are only utilizing those parts of the framework, relevant to the theme.

However, when I took the time to check out several Genesis resources, I learned how to get more out of the Genesis Framework, and even appreciate it. At the moment the Genesis Framework – and the StudioPress child themes – are generally my first choice for any web project.

How To Add A Slider To A Genesis Child Theme

The Sample child theme incorporates six widgetized areas: Header Right, a Primary Sidebar and a Secondary Sidebar, and three Footer areas. The Secondary Sidebar is only displayed in the three column layouts.

The Sample child theme is not equipped with a slider, or even a widget area where you could drag a  slider to. However, adding a widget area is basically quite easy.

Let us create a widgetized area on the home page so that we can add a slider as shown here above. This is achieved in three easy steps:

1. Add this code at the end of the functions.php in the sample child theme folder

/* Register widget areas */
genesis_register_sidebar( array(
'id' => 'home-featured',
'name' => __( 'Home Featured', 'sample' ),
'description' =>
 __( 'This is the home featured section.', 'sample' ),
) );

/* Reposition the primary navigation */
remove_action( 'genesis_after_header', 'genesis_do_nav' );
add_action( 'genesis_before_header', 'genesis_do_nav' );

2. Create a file home.php file in the sample child theme folder and add this code to the blank home.php file:

<?php
/* Add the home featured section */
add_action( 'genesis_before_content', 'sample_home_featured' );
function sample_home_featured() {

/* Do nothing on page 2 or greater */
if ( get_query_var( 'paged' ) >= 2 )
return;
genesis_widget_area( 'home-featured', array(
'before' => '<div class="home-featured widget-area">',
) );

genesis();

3. Since the slider is positioned directly on top of the loop and the sidebar, I prefer to add a little CSS to create some space below the slider. All we need to do is add the following line to the style.css of the Sample child theme:

.home-featured { margin-bottom: 20px; }

That is it. Now you are ready to add a slider to the Home Featured widget area. In this case, Iig have installed the Genesis Slider.

The Genesis Framework Widgets

The StudioPress Sample child theme installs with seven custom widgets:

In fact, all Genesis child themes from StudioPress are equipped with these seven widgets. Searching the WordPress Plugin Directory for “genesis framework” returns 48 hits (to date). These are plugins specifically developed for the Genesis Framework. Of course, basically all WordPress plugins work just fine with the Genesis Framework.

Here are a couple of plugins developed by StudioPress, giving you the means to unleash some of the power of the Genesis Framework, without coding:

Genesis Connect for BuddyPress – with this plugin you can build a social network for any community. This is the only premium plugin from StudioPress – as far as I have discovered to date – available for $49.95. This is a one-time fee. The plugin comes with the usual “unlimited everything” license.

Genesis Connect for WooCommerce – this plugin allows you to seamlessly integrate WooCommerce with the Genesis Framework and Genesis child themes. It replaces WooCommerce’s built-in shop templates with Genesis-ready versions. To allow easy customization of these templates, and ensure that you do not lose your customizations when the plugin is updated, you can place your own copies of these templates in your child theme’s ‘woocommerce’ folder and customize these copies as much as you like.

Genesis Responsive Slider and the Genesis Slider – these plugins allows you to create a (responsive) slider that displays the featured image, along with the title and excerpt from each post. Both include options for the maximum dimensions, allows you to choose to display posts or pages, what category to pull from, and even the specific post IDs. The sliders include next/previous arrows and a pager along with the option to turn both on or off. You can place the slider of your choice into a widget area.

Genesis Simple Edits – this plugin creates a new Genesis settings page that allows you to modify the post-info (byline), post-meta, and footer area on any Genesis theme. Using text, shortcodes, and HTML in the textboxes provided in the admin screen, these three commonly modified areas are easily editable, without having to learn PHP or write functions, filters, or mess with hooks.

Genesis Simple Hooks – this plugin creates a new Genesis settings page that allows you to insert text or code (HTML, CSS, PHP or shortcodes) and attach it to any of the 52 action hooks throughout the Genesis Framework. So there is no need for the unfamiliar and sometimes tedious process of creating functions in theme files. This plugin gives you an attractive, easy to use interface for modifying your Genesis theme via the hook system.

These action hooks are grouped in 12 categories: WordPress Hooks, Document Hooks, Header Hooks, Content Hooks, Loop Hooks, Post/Page Hooks, Comment Hooks, Ping List Hooks, Single Comment Hooks, Comment Form Hooks, Sidebar Hooks, and Footer Hooks.

To display a telephone number in the top right corner of the web page, you only have to add one line of HTML/CSS into the text area of the genesis_before_header hook as shown above. When you a shortcodes or PHP, you will have to check the appropriate box to make sure that the code is executed properly.

Genesis Simple Menus – this plugin allows you to assign WordPress navigation menus to the secondary navigation menu within the Genesis Theme Framework on a per post, per page, or per tag/category archive basis. The per post, page, category or tag setting overrides whatever menu setting you have in your Genesis Theme setting. It does require that you have your Secondary Navigation enabled in your Genesis Theme Settings.

Genesis Simple Sidebars – this plugin allows you to create multiple, dynamic widget areas, and assign those widget areas to sidebar locations within the Genesis Theme Framework on a per post, per page, or per tag/category archive basis. This plugin allows you to do all this from a simple administration menu, and assign widget areas to sidebar locations with simple drop-down menus within the post/page edit screens, or when editing a tag or category.

Genesis Tabs – this plugin allows you to create a tabbed section, via a widgets, that can display the featured image, along with the title and excerpt from each post. Choose which categories you want to feature in the tabbed section, which post elements you want to show, and save the widget. Place the widget in the feature section of a Genesis child theme.

SEO Data Transporter – this plugin allows you to transfer the SEO data (such as title tags and meta descriptions) you’ve entered in one WordPress theme/plugin to another. It can be difficult to switch themes or dump plugins, and the fact that themes and plugins store their inputted SEO data differently makes it even harder. This plugin remedies that.

Supported Themes: Builder, Catalyst, Frugal, Genesis, Headway, Hybrid, Thesis, Woo Framework
Supported Plugins: All in One SEO, Greg’s High Performance SEO, Headspace2, Meta SEO Pack, Platinum SEO, SEO Ultimate, WordPress SEO

Getting To Know The Genesis Framework

Now that you have learned a bit about some of the possibilities of the Genesis Framework, you might be interested in doing some exploring yourself.

Here are some resources that I can recommend when you want to read and learn more about the Genesis Framework:

• StudioPress 101
• Genesis Guide for Absolute Beginners (PDF)
• StudioPress TV
• StudioPress Tutorials
• StudioPress FAQ

And if you do not mind getting technical, you should check out the Genesis Explained series by Nick the Geek.

Another important knowledgebase – but only accessible for customers – is the StudioPress Forum, where about 20 really engaged and committed Genesis developers are always willing to help out. Usually when I have a question, the answer is already there, because another Genesis user has stumbled into a similar situation already.

Of course, you need the Genesis Framework for your explorations. My first purchase form StudioPress was the Genesis Framework with the Focus child theme. Basically, you can pick any child theme for a start. The Prose child theme has the benefit that you can create your own theme styling by point-and-click – without coding. StudioPress has a nice Theme Selection Tool available.

When you get hooked on Genesis just like I did, you might want to become a Pro Plus Member. Pro Plus Members have access to all StudioPress child themes (46 to date). When I have a new web project on hand, there is usually an existing child theme available that either levels my requirements or otherwise is close enough to make a head start.

What are Your Thoughts on the Genesis Framework?

From my personal experience, I can say that working with the Genesis Framework is like building a relationship – you only get out of it, what you put into it.

When you know how to code, it will definitely be a big plus. A little knowledge of CSS will certainly come in handy – as with every web project. However, knowledge of PHP is not mandatory to work with the Genesis Framework. The plugins mentioned above will reduce the need to program for a great deal. And when you have a question, just drop by at the StudioPress forum.

Hopefully, I have been able to explain why I am so fond of the Genesis Framework. It is flexible, it is powerful, and with the growing collection of child themes there is probably one suitable for my next web project.