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

WP SITES

2785

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

  • Try Premium
  • Log in

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.

Featured Image

Reader Interactions

Comments

  1. Francis Porter says

    January 20, 2014 at 12:35 pm

    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

    Log in to Reply
    • Brad Dalton says

      January 20, 2014 at 12:39 pm

      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' );
      Log in to Reply
      • Francis Porter says

        January 20, 2014 at 2:30 pm

        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

        Log in to Reply
        • Brad Dalton says

          January 21, 2014 at 1:42 am

          Add it at the end of your child themes functions.php file.

          You can control the output using conditional tags.

          Log in to Reply
  2. Marco says

    January 3, 2014 at 7:07 am

    Hi Brad, thanks for this useful tutorial.
    is also possible with Video or images not Featured?

    Log in to Reply
    • Brad Dalton says

      January 3, 2014 at 10:08 am

      Yes but the code would be specific for each.

      Log in to Reply

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.