Free Tutorial For Genesis: Add A Full Width Image Above Your Content

Have you ever wondered how to place an entry-header above a hero image on single-post pages? In order to accomplish this, we are going to make some tweaks to our functions.php, and our sounds scary but it's not. It would be better to do these using FileZilla, check out my tutotial on Wealthy Affiliate How to use FTP to upload themes and plugins the easy way

Essentially, we’re creating a custom “Hero Image” that appears above each page of post on your website. They look pretty good and it's very easy to do. Here's an example with Genesis Authority Pro at StudioPress or study the image below.

How To Adding An Image Above Your Content

I do not take full credit for this tutorial. A question arose on StudioPress' forum which caused me to investigate how to add an entry-header above a hero image on single-posts and pages. Please remember is always better to use FileZilla to add your codes even though Im giving you instruction via your WordPress Editor.

  1. It is recommeded you load Regenerate Thumbnails onto your site.
  2. Copy the code below and now add it to your Genesis child theme functions.php file, which can be found in your WordPress Dashboard → Appearance → Editor. 
  3. The sizing is 1400px - 400px, you can change this to any size you want.
  4. Save your file.
  1. Now add the following code to your child theme’s style.css and save.

Even though this code is set to 100%, you can have it any size you wish.

How Else Can I Help You?

As with all Genesis themes, they have the potential to be customized how you like. You can add extra widgets and code snippets if you feel the need. Trust me, it’s easier than you think to add and takeaway css coding in their functions.php and style.css, they designed it this way to make it easy for you.

Check out my Free Tutorials For Genesis Themes for more help

Today, there are many plugins available for WordPress themes, but when you own a Genesis theme you might prefer to use Genesis plugins for your website because their coding is compatible; as such, you'll have peace of mind knowing that you won't experience any incompatibility issues.

These can be found in my article Top Genesis Plugins That Provide Easy Customizations & Extensions.

Theme of the Month at StudioPress

Don't have a quality theme? 

StudioPress no longer nominate a theme of the month, they do however, produce a monthly top ten which can be found in my regularly up-to-date article. 

So, if you're looking to alter your Genesis theme then that's cool, it's easier than it looks. But, if you're 'for whatever reason' you're fed up of coding and think you might like another Genesis, then take a read of my article Top 10 Best Selling Themes From StudioPress – You’ll Love This Month These are literally StudioPress' top sellers...take a look because you might be surprised what you see!

Genesis are considered one of the best themes because they’re sophisticated, offer lightweight top-notch coding, are SEO optimized, are HTML 5, are schema ready, updates are a breeze, security is tighter than ever, and can easily customized. There are so many positives to using Genesis that the list is endless. 


You're talking to Sharon May...I love all things creative. Why not use my years of expertise to fast track your website? Today, let me show you how to make the right choices that will deliver! Explore the amazing things you can do when creating a website. Give yourself more power and less worry over what you can trust!

Click Here to Leave a Comment Below