This Is Trouble
Share This!

A Quick Way To Greatly Improve Your Genesis Theme

A lot of people running blogs use the Genesis framework, and rightfully so. It’s beautifully designed for simplicity, with hundred’s of stunning themes right at your fingertips. The problem is, Genesis and it’s child themes are so simple that so many people who lack technical knowledge use them. Not that this is necesarily a problem that affects anyone individually, but the result is that there are often dozens of websites that all look very similar in nature. Add in the fact that the themes that StudioPress (the Genesis developer) designs usually lack color, and the result is a lot of beautiful websites that are hard to differentiate between each other.

I’m now on what’s probably my fifth or so different Genesis child theme, and each time I’ve started anew I’ve gotten compliments on how good the site looks. Admittedly, I do have thirteen years of on-and-off web design work in my back pocket, so my ability to dig into the coding and customize beyond the typical cookie cutter Genesis theme is going to go far beyond the average blogger’s technical savvy.

The good news is that it’s really not that difficult.

So I figured today, I’d take a break from the usual lady-killing and self-improvement topic of this blog and give a little tutorial for how to tweak the Genesis framework. You see, Genesis has a lot of magazine styled themes that showcase a high amount of images – especially on the home page. The problem is that much of that magazine style is lost when you navigate to the actual content of the blog itself. By default, most Genesis themes don’t automatically pull the featured image from the blog post. You have to go in and manually add it yourself, which is inconvenient. If you are running a magazine style blog, there’s simply no reason your featured image shouldn’t be a focal part of the post itself; integrated in a way that isn’t disruptive to your actual content.

Here’s how you do it.

How To Add A Featured Image With Genesis Framework To Posts

Things you need to get started:

– A working backup of your functions.php file. You can get these via FTP in your blog’s WordPress directory. You should have a file manager or FTP client open and ready to restore the backups should you make an “oops”.

– The Genesis Simple Hooks plugin, which you can download here.

– A little bit of patience.

Step 1

You’ll need to navigate to your WordPress editor – do so by highlighting appearance in your WordPress Dashboard, and scrolling down to editor at the bottom. By default, style.css will be selected (right hand side). Click on functions.php instead.

You’ll want to add the following code snippet to the very bottom of that file, there is often a disclaimer warning you. Just drop it below that.

//* Add new image sizes
add_image_size( ‘top’, 708, 200, TRUE );

You can edit the image sizes to whatever you want. 708 = width, 200 = height.

 Note that some custom themes have a custom_functions.php file that they encourage you to edit instead; my site actually does, but this is the method that worked for me.

Next, click ‘Update File’ on the very bottom. Let the page refresh and ensure nothing has broken. If your website doesn’t load, don’t panic. Simply restore your backup file. If nothing appears amiss, continue forward.

Step 2

It’s time now to add our “hook” coding in so that our blog will display the post’s featured image at the top. If you want a further explanation of how hooks work, look no further than this article.

Essentially, a hook is a way of adding a feature within the framework of the site to display on all pages; it’s easy to insert a specific item for one post, but to do it across the entire site takes more work.

Highlight ‘Genesis’ in your WordPress Dashboard, and select ‘Simple Hooks’.

About halfway down the page, you’ll see a hook titled: genesis_before_post_title. Add this code into that box and click save (you’ll have to scroll down a bit to find the next save button).

<?php genesis_image( array( ‘size’ => ‘top’ ) ); ?>

Step 3

That’s it, really! Obviously, check out your site and ensure everything looks good on an individual post. All individual posts should now have the featured image, displaying at 708×200, right above the post title. Adjust the size as needed to suit your needs, which I discussed above.

This is what it should look like:

Featured Image On Individual Posts With Genesis

Featured Image On Individual Posts With Genesis

 Step 4 (Optional)

Now you can continue to tweak this a little further, if you so desire. Most likely, the post title is going to be cramped very close to the featured image. This is because the theme’s default is not anticipating an image being there, therefore it’s coded not to have any “padding” between the title and the image. To do that, you can now edit the style.css file I discussed earlier. You can read way more than you probably care to about CSS over at Wikipedia.

Cascading Style Sheets (CSS) is a style sheet language used for describing the look and formatting of a document written in a markup language. While most often used to change the style of web pages and user interfaces written in HTML and XHTML, the language can be applied to any kind of XML document, including plain XML, SVG and XUL. Along with HTML and JavaScript, CSS is a cornerstone technology used by most websites to create visually engaging webpages, user interfaces for web applications, and user interfaces for many mobile applications.

CSS is designed primarily to enable the separation of document content from document presentation, including elements such as the layout, colors, and fonts.

Here’s the tricky part – figuring out which CSS tag you need to edit to achieve the proper effect. The best way to determine this is to use a browser such as Chrome, Firefox or Opera (anything but IE, really – if you’re still using that go back to DOS) and use the ‘Inspect Element’ Feature to determine what the title is.

As you can see in the screenshot below, when I highlight my post title, the element inspection tab shows that it falls under an h1 class ‘entry-title’.


Using Chrome To Inspect Elements


Now that I know that I need to edit ‘entry-title’, I would just search my style.css document to find it. To add the space between my title and image, I added the bolded part below. The rest of it was already in by default.

#content .entry-title {
background: url(images/bg-line.png) repeat-x bottom;
padding-bottom: 20px;
padding-top: 10px;
margin-bottom: 10px;

You’ll probably find all sorts of things you’d like to tweak now that you’re looking at this and realizing it’s not that difficult. If you have specific questions about any of this (or really, anything related to CSS coding – my PHP isn’t too sharp) – just post them below and I’ll do my best to answer.

Conclusion Regarding Featured Image With Genesis

– Beautiful Genesis magazine-style themes are hampered by not having featured images on their individual posts.

– Genesis Hooks plugin is a fantastic way to modify your Genesis theme in a deeper way.

– Make sure you have full backups of everything that you’ll be editing.

– Editing code seems scary, but it’s not that difficult. By methodical and smart.

Again, if you have questions – sound off below!

Tired of living a life where the girls get away from you because of technology? Join Tinder & Texting University and learn how to utilize technology to improve YOUR dating life.

For a limited time, you can join and the first month is FREE. Click here to enroll.

Tweet about this on TwitterShare on FacebookShare on Google+Digg thisShare on StumbleUponShare on Reddit

Copyright © 2013-2016 This Is Trouble - Published by [DBA] Troublesome Media - All Rights Reserved.

Connect With Me: