Genesis 2.0 Framework for WordPress released

Genesis 2.0

We are really excited by the release of  the brand new version of Genesis 2.0 Framework for WordPress.

Genesis 2.0 is a huge leap forward for the framework. It includes essential web standards like HTML5 and to make your WordPress website as fast, secure, flexible, and findable as it can be.

All new Genesis themes will be fully Mobile Responsive so your site looks as good on a Mobile Phone or Tablet as it does on a PC.

Genesis 2.0 - Mobile Responsive

Brand New Design

Genesis is sporting a fresh new look.

We’ve taken advantage of the new HTML5 markup, as well as some snazzy CSS3, and we think you’re gonna love this.

HTML5 Markup

Genesis has always been on the cutting edge of web technology, and Genesis 2.0 continues in that excellent tradition.

With a single line of code in a child theme, Genesis will now output HTML5 markup in place of the old XHTML tags. Also, every theme we build in the future will be developed on HTML5.


If you’re using a theme with HTML5 enabled, Genesis will also output your markup using microdata.

We did all the research and modified the markup to serve search engines the microdata they’re looking for, so you don’t have to. It’s good to be a Genesis user.

Removing Features

We want to keep Genesis as lightweight as possible for you, nobody wants to use bloated software.

So we’ve removed the “Latest Tweets” widget, the “eNews and Updates” widget, the “post templates” feature, and the “fancy dropdowns” setting. There are some good plugins you can grab and install, if you want to continue using those functionalities.

Boring, but Very Important

We’re always improving. Call it a sickness, but we like to make things work really, really well. Here’s a list of the technical changes in this latest release of Genesis:

  • Better named loop hooks for HTML5.
  • Network Upgrade now upgrades the Genesis database for all sites in a network when running WordPress in multisite mode.
  • Widget classes are now coded in PHP5 format.
  • Admin CSS and Javascript are now minified.
  • Inline HTML comments have been removed to reduce page size.
  • The Scripts option now has its own metabox when editing an entry.
  • Custom Post Type archive pages now have a settings page so you can control the output.
  • Genesis tracks displayed entry IDs so you can exclude entries from showing twice on a page.
  • Entries without titles now display a permalink after the post content.


WordPress 3.6 “Oscar”

We’re really excited about this. The latest version of WordPress is out and looking good. The biggest new feature for us is the HTML5 media player for native audio and video.

User Features

  • The new Twenty Thirteen theme inspired by modern art puts focus on your content with a colorful, single-column design made for media-rich blogging.
  • Revamped Revisions save every change and the new interface allows you to scroll easily through changes to see line-by-line who changed what and when.
  • Post Locking and Augmented Autosave will especially be a boon to sites where more than a single author is working on a post. Each author now has their own autosave stream, which stores things locally as well as on the server (so much harder to lose something) and there’s an interface for taking over editing of a post, as demonstrated beautifully by our bearded buddies in the video above.
  • Built-in HTML5 media player for native audio and video embeds with no reliance on external services.
  • The Menu Editor is now much easier to understand and use.

    Developer features

    • A new audio/video API gives you access to metadata like ID3 tags.
    • You can now choose HTML5 markup for things like comment and search forms, and comment lists.
    • Better filters for how revisions work, so you can store a different amount of history for different post types.
    • Tons more listed on the Codex, and of course you can always browse the over 700 closed tickets.

If we were’t on holiday in Turkey with little internet connection we would have upgraded and embedded a video…

How to add onload to the body using Genesis add_filter

We puzzled about this one for a while but worked out a hack that seems to work although we would appreciate it if anyone can comment with the right way to do it.

We need to add onload="initialize()" to our body tag to enable the Google map API to work.

We came across the

add_filter( 'body_class', 'add_body_class' );

and gave that a try.

Unfortunately the line

$classes[] = 'onload="initialize()"';

resulted in the following:


As it just added it to the list of body classes already in there.

Our sneaky workaround was this:

classes[] = '" onload="initialize()';

Which basically closes off the preceeding classes and adds our onload then uses the original ” from the class list to lose our onload off.

Does it work? Yes it does, but we do feel a little dirty ;-)

Wrapping a Blog post in a div

How to wrap a WordPress Blog post in a div using the Genesis Framework

We needed to wrap our blog posts in a div after the post_info but before the H2 title so we could add styling. As you can see we have our date icon separate from the main blog post and we wanted to apply a background colour to the post but not the date part of it.

In the end we didn’t bother but this is how we went about opening a new div after the post info but before the post title.

Here is our solution:

We use the Genesis Framework on top of WordPress and added a new function before the post title with an opening div.

//Add opening div before the post title
add_action( ‘genesis_before_post_title’, ‘custom_post_div’, 15 );
function custom_post_div() {
echo ‘</pre>
<div class="post_body"><!– start .post_body–>’;

Add the filter to the post_meta with a closing div.
/** Customize the post meta function */
add_filter( ‘genesis_post_meta’, ‘post_meta_filter’ );
function post_meta_filter($post_meta) {
if ( !is_page() ) {
$post_meta = ‘</div>
<!– end .post_body–></pre>
<div class="clear"></div>
return $post_meta;

This works nicely and now wraps the content, including the title and post meta in a class called post_body enabling us to style it.

You may also find our post: How to add an extra CSS file to your Genesis Framework useful as it details how to use a PHP function to add another custom .css file so you can keep all of your edits in one place.