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 schema.org 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.

Microdata

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.

 

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.

[php]
//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>
<pre>
<!– end .post_body–></pre>
<div class="clear"></div>
<pre>
‘;
return $post_meta;
}
}
[/php]

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.

New Website progess – 22/03/2013

Website ScreenshotScreenshot of new Peebles Website

This is the latest screenshot of our new website footer.

It’s a mixture of static content and dynamic PHP feeds. The coffee total is updated by calculating the number of days this year * 2 as we drink two cups of coffee per day.

The Last.fm total is calculated by using their API to hook into our account and display the total number of tracks we have played.

And the design and layout has been helped/hindered by too much Malt Whisky.

What are your thoughts so far?