WP SITES

2785

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

Move Featured Image Before Entry Title On Archive Pages

I’ve already written about how to display your featured image/post image after your title and excerpt on archive pages but how about displaying the image before your entry title?

In this post, i’ll show you exactly how to display your featured image before your titles on any archive page.

Firstly, here’s the default home page view using the Genesis Sample child theme:

featured image after title

Here’s the code to reposition the post image which goes at the end if your child themes functions.php file:

remove_action( 'genesis_entry_content', 'genesis_do_post_image', 8 );
add_action( 'genesis_entry_header', 'genesis_do_post_image', 1 );

And here’s the result after adding the PHP code:

post image align left

The reason the image is aligned left is because of this CSS code which is located on Line 588 of the Sample themes style.css file:

.alignleft {
    float: left;
    text-align: left;
}

If you remove this CSS, this is how your featured image looks.

image before title

Which is the solution this post is focused on however removing the CSS code may effect other elements using that class so here’s another solution.

Please copy ALL the code from the view raw link and paste it at the end of your child themes functions.php file using a text editor like Notepad++

Credit to Bill Erickson for this code.

Reader Interactions

Comments

  1. Hi
    In the Outreach Pro theme on Pages is it possible to have a Featured Image appear below the navigation menu but above all the other content (Breadcrumbs downwards)?
    Thanks

    • Sure. The same image on all pages?

      Use any of these hooks in a custom function:

      genesis_before_content_sidebar_wrap
genesis_before_content
genesis_before_loop

      Something like this:

      PHP

      function img_after_nav() {
if(is_singular('page') ) {
    echo '<div class="image-class"><img src="http://www.example.dev/wp-content/uploads/xxxxxx.png" /></a></div>';
}}
add_action('genesis_before_loop', 'img_after_nav' );

      • Hi Brad
        Thanks for the great swift reply. Would I add this into the theme-functions.php file?
        Is it possible to select which Pages it would appear on or would I have to create separate Page Templates to best implement this?
        Thanks

Leave a Reply