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.