• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WriteNowDesign - Wordpress and Ecommerce Website Design

WordPress, Joomla, Ecommerce Website Design

  • Home
  • Prices/Packages
  • WordPress
  • Services
  • Portfolio
  • Blog
  • About
    • Testimonials
    • Locations
    • Online Payment
  • Contact
  • Show Search
Hide Search

Call 303-907-6133 Email

How to Add a Featured Image to a Genesis Post or Page

April 26, 2015 by Pat Fortino

Most Genesis templates provide the ability to add a WordPress Featured Image to a post and to display the Featured Image on the Blog page. But what if you also want to display a Featured Image on a single post or page? And what if you want to use a Featured image with a size different than the Featured Image used on your blog page? The following tutorial explains how to add a featured image to a genesis post or page.

I ran into this exact problem last week and spent an hour searching for an answer. I found several links that supposedly provided an answer, but they required a paid subscription to view it. Fortunately, I found one link that provided the code to display a Featured Image on top of the post. With a bit of experimentation, I figured out how to put a Featured Image anywhere in a post or a page.

IMPORTANT: This tutorial is for Html5 Genesis templates only. You can use it on XHTML Genesis templates, but you need to look up the correct Genesis XHTML hook.

To add a Featured Image to both post and page, add the following code to your theme’s functions.php file:

/* Code to Display Featured Image on top of the post */
add_action( 'genesis_entry_content', 'featured_post_image', 8 );
function featured_post_image() {
  if ( !is_singular( array( 'post', 'page' ) ))  return;
	the_post_thumbnail('large'); /*you can use medium, large or a custom size */
}

The code above will allow you to add a featured image to a single post or page. Note that this will not affect the blog page featured images sizes. Furthermore, it will not automatically add a featured image to every post and page. The post or page must already have a featured image assigned to it.

Featured Image Code Options

Featured Image Only on Page

Replace this: if ( !is_singular( array( ‘post’, ‘page’ ) )) return;

With this: if ( !is_singular( ‘page’ ) return;

Featured Image Only on Post

Replace this: if ( !is_singular( array( ‘post’, ‘page’ ) )) return;

With this: if ( !is_singular( ‘post’ ) return;

Use a Different Image Size

Replace This: the_post_thumbnail(‘large’);

For example, with this: the_post_thumbnail(‘medium’);
Where medium is the featured image size.

You can find your default image size in the WordPress Admin page under Settings > Media. The default WordPress image sizes are as follows:

  • thumbnail
  • medium
  • large
  • full (original size of the image when you upload it)

Furthermore, it is likely that your Genesis theme has custom image sizes. To find out what these are, open your themes function.php and search for add_image_size.
For example:

//* Add new image sizes
add_image_size( 'home-bottom', 150, 150, TRUE );
add_image_size( 'home-middle', 332, 190, TRUE );
add_image_size( 'home-top', 700, 400, TRUE );

 Change the Image Insertion Point

In the code I provided, the image is inserted below the title and header info, at the top of the content, inside the entry-content div. See the image below.

Screen Shot 2015-04-26 at 10.47.00 AM

To move the image above the title, change this:

add_action( 'genesis_entry_content', 'featured_post_image', 8 );

To this:

add_action( 'genesis_before_entry', 'featured_post_image', 8 );

See the image below.

Screen Shot 2015-04-26 at 10.48.00 AM

Filed Under: Genesis, Wordpress How To Tagged With: attorney, genesis Leave a Comment

Previous Post: « How to Modify WordPress Language Files
Next Post: Really Simple Share Update Adds Google Search Box to Every Page »

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Related

Primary Sidebar

Blog Categories

Call Today

Get a Free Quote

303-907-6133

Subscribe to News

News about WordPress, WooCommerce, & Technology

What’s New

  • WPForms Not Sending Notifications
  • Add Terms and Conditions WooCommerce
  • Fix WordPress AMP Validation Errors
  • Use the Classic Editor with Gutenberg Block Editor
  • Add a Message at Top or Bottom of WooCommerce Checkout Page
  • How to Link to a PDF in WordPress

Find Us On…

  • Facebook
  • LinkedIn
  • RSS

Call 303-907-6133 Email

© 2004–2023 · WriteNowDesign · Sitemap · Log in · Return to Top

 

Loading Comments...