My initial thoughts on the Genesis Framework for WordPress

I’ve recently started using the Genesis Framework. Genesis is a paid-for theme developed by StudioPress which acts as a solid foundation for a WordPress site.

Here are a number of things I’ve discovered about Genesis since I started using it.

All Genesis themes are child themes of the Genesis framework

A child theme is a derivation of another theme, the parent theme. The child theme takes much of its code from the parent, but has some different code of its own. The Genesis framework (parent) must be installed first before you create or install your (child) theme. The basic Genesis install is fairly spartan. StudioPress sell a number of child themes, but note that not all of them are responsive. If you are looking for a free child theme for Genesis, Darryl Bueckert’s site is a good resource. This site lists premium child themes too.

Genesis offers a number of useful features built-in

Using Genesis cuts down on the number of plugins you may need, as its theme settings allow you to configure the following:

• Layouts – by default, there are six to choose from. You can have one or two sidebars in different arrangements, or full width content for your page layouts. You can add up to 9 new layouts using the Genesis Layout Extrasplugin.
• SEO – Genesis allows you to manage your SEO site-wide and on a per-page basis. If you decide to use another SEO plugin such as WordPress SEO by Yoast, the Genesis SEO settings are disabled.
• Breadcrumbs – these navigational aids can be enabled on a number of different post and page” types. If you don’t want them on the homepage, leave the option unchecked.
• Comment settings – comments and trackbacks can be disabled by default on pages, posts or both.
• Archive settings – you can choose to display full posts for your archives, or post excerpts, and have the option to include your featured image with each post and configure its size
• Header and Footer Scripts – boxes to add your own scripts, or ones such as the code for Google Analytics.

There are different page templates to choose from

You can use the Blog template to show posts from a single category, or all categories excluding the ones of your choice.  Selecting the Archive template will automatically generate a site map for you – saving you the time and effort of configuring a plugin for the same job.

You can replace the default image logo with your own, but it’s not that intuitive

There is more than one way of changing the logo, but it’s not that straightforward.

1. You may have the option to have an image logo under Genesis > Theme Settings. Under Header, there will be text which reads “Use for site title/logo:” and a dropdown with Dynamic text or Image logo. Make sure the latter is selected. You then need to replace the logo.png file AND the [email protected] file in the /images/ folder of your child theme. Logo.png should be 320 x 164px, and the 2x version 640 x 328px. If you don’t have any logo files there, add them.
2. If you can’t see a Header section in your Genesis theme settings, go to Appearance > Header.Upload a logo of a predetermined size (the size is set in the functions.php file of your child theme).
3. If you can’t be bothered with all that, and want a responsive logo to boot, install and activate the Genesis Club Lite plugin. From your dashboard, go to Genesis Club Lite > Display and in the Responsive Logo section, put in the URL of your logo. Check the box that says “Remove Blog Title Text”. If you have option 1 enabled, make sure that you choose Dynamic text from the dropdown, else you’ll end up with 2 logos!  This way, you can have a logo that’s wider than 320px if you choose to. One caveat: if you put any widgets in the Header Right widget area, your logo will shrink  again to fit in the widget area. Here’s an example, using the Genesis Sample Theme:

Told you it was complicated…

Adjusting the width of the page content is straightforward

The default max-width of the #wrap div which contains your content is 1152px. This can be increased using CSS. Here’s an example:

#wrap {
margin: 0 auto;
max-width: 1300px;
background-color: white;
padding: 0px 15px;
}

Making a sidebar background colour stretch uniformly down the full length of the page is surprisingly difficult

I tried to do this and still haven’t found a solution.  The background colour only shows down to the end of the last sidebar widget. I’m sure it’s not that hard in other themes – Twenty Fourteen has a long black sidebar, for example. If anyone knows how to do this in a Genesis theme, please let me know!

Genesis has its own functions, and makes heavy use of action and filter hooks

Genesis has a number of shortcodes built-in for use in posts and the footer. (What is a shortcode? It’s a shorthand way of writing a piece of code.) It also has a number of CSS classes built-in, allowing the building of multiple column layouts. The Genesis Shortcodes plugin packages these column classes into shortcodes and adds other new ones.

So something like this:

[one_half_first]Column 1[/one_half_first][one_half]Column 2[/one_half]

will generate

Creating a page template is a little trickier than with one of the default WordPress themes. Instead of using WordPress functions such as

get_header();

or

get_sidebar();

the Genesis page template contains just one line of uncommented code:

genesis();

This does not give us much of a clue on how to create our own templates! The answer is that we need to remove the calls to some of the Genesis functions and add our own. This tutorial on creating a Genesis custom page template ended up being what I was looking for to achieve this.

If you’re looking to change something in a specific area of a page, the Genesis Visual Hook Guide is a brilliant resource for finding the hook you need. It even comes in the form of a plugin now. The Genesis Simple Hooks plugin also helps with this process. The large number of hooks means that you can add new content almost anywhere, which is a real plus.

Documentation is fairly minimal

The documentation supplied by StudioPress, An Introductory Guide to the Genesis Design Framework for WordPress, is just that – an introduction. While there are code snippets and simple tutorials on StudioPress’  site, there are not many practical examples. Unfortunately the StudioPress support does not cover PHP or CSS coding.

There is StudioPress forum support (if you are a customer), but not all threads are answered – it depends on who is looking. StudioPress.tv has some videos, which are helpful, but there are only 11 of them, with no new ones having been added for a year.

I got the impression that you could learn about theme customization by purchasing all the StudioPress themes, as each one comes with its own documentation. But of course that costs money… though existing customers get a discount on the bundle.

Genesis developer community to the rescue

Fortunately a number of developers have produced more in-depth Genesis tutorials, Here are some of the ones I like:

• Carrie Dils – Carrie has tutorials on selecting a Genesis theme, and customizing specific themes and Genesis sites in general.
• Philip Gledhill – lessons for the Genesis newbie, and more.
• Bill Erickson – Bill is an experienced WordPress developer who has produced many excellent WordPress tutorials with code snippets, some of them Genesis-specific.
• Genesis Tutorials.com – Step-by-step instructions from Christopher Cochran, but not updated since 2012.

Overall

Genesis is a really powerful, cleanly coded and versatile framework, and I can see why it’s the #1 choice for many WordPress developers. It just has a few quirks to be aware of. I think the framework  could become more popular still with more lessons on using it to its fullest effect.

Category: WordPress Tags: child theme, CSS, framework, Genesis