How to add an extra CSS file to your Genesis Framework

/0 Comments/in , , , /by

Genesis Framework.

We use and love the Genesis Framework by Studiopress and their varied and versatile  themes play a big part in our business. But we don’t just grab a theme, paste content into it and invoice the customer. Each site uses bespoke styling using css and Genesis functions in the functions.php file.

Adding an extra css file to Genesis Framework child theme

Normally we just roll these in to the existing files but it’s always a worry that when the theme developer updates their theme. Our updates will be over-written.

This is where this very handy tip by Chris Cree comes in use. Instead of adding your custom css edits or new classes to the existing stlye.css file, either mixed in with the original code or if you’re organised, at the bottom of the file. Use this PHP function to load an extra css file and place your code there.

You can grab the code from this post or on our Gist on GitHub

[php]
add_action( ‘wp_enqueue_scripts’, ‘wsm_custom_stylesheet’ );
function wsm_custom_stylesheet() {
wp_enqueue_style( ‘custom-style’, get_stylesheet_directory_uri() . ‘/custom.css’ );
}
[/php]

Ok, so what are the downsides?

Some WordPress and website developers argue that adding additional server calls is detrimental to performance and you should try to minimise them by amalgamating  code but personally we feel that with all the otehr overheads of Wordpess and plugins. Loading an extra css file will be negligible.

How to add onload to the body using Genesis add_filter

/2 Comments/in , , , /by

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:

onload="initialize()"">

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

/0 Comments/in , , , /by

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.