WP SITES

Log in

Add Class To The First Featured Image In Genesis Home Page Loop

—

by

Brad Dalton

This tutorial provides different ways to customize, modify and filter the featured image ( post_thumbnail ) attached to the 1st post in the home page loop.

Register for full access


This solution uses the genesis_get_image_default_args filter therefore only works on Genesis.

It also uses the_post_thumbnail function which works in any theme and enables you to filter the size and any of the wp_get_attachment_image attributes.

Here’s some sample CSS which only changes the style of the first featured image in the loop.

.first-image {
    border: 5px red solid;
}

Only Add Class On 1st Page

The following code only adds the custom class to the first featured image on the 1st page of the archive unlike the first snippet which adds it to the first post on each paginated page of the home page archive:

Register for full access


This tutorial is based on this question:

I’m trying to create a bit of code to put into functions.php that will change the size of the featured image only on the first post on the first page.

Related Posts

Comments

9 responses to “Add Class To The First Featured Image In Genesis Home Page Loop”

  1. Clive Avatar
    Clive

    Hi Brad,

    I have been trying to get the first few (3 to 5) posts to use a different Image size and styling.

    This solution almost works. It does make the first image the chosen size but it repeats for the first image on every page and there are two images.

    An earlier attempt I made using your code to add a widget area (then put a featured post widget in it) did the same thing . It added the widget to the top of every page.

    We are using a theme built on the Genesis Sample theme.

    Currently it is all commented out.
    http://www.mediaevents.ca

    Thank you for your help
    Clive

    1. Brad Dalton Avatar
      Brad Dalton

      I would need to test solutions on an exact copy of your theme to be sure but i know this code will work if added after the function:

      [code]
      if ( ! is_front_page() || get_query_var( ‘paged’ ) >= 2 )
      return;
      [/code]

      1. Clive Avatar
        Clive

        Hi Brad,

        Thank you. That solves the problem of the posts occurring on alll of the pages.

        How should I get you a copy of the theme files. Do you use Drop Box?
        Clive

        1. Brad Dalton Avatar
          Brad Dalton

          What was the 2nd question?

          1. Clive Avatar
            Clive

            The image is the new size but there are two copies of the image.

          2. Brad Dalton Avatar
            Brad Dalton

            This worked fine when i first published however looks like i need to work out a new solution. Updated Here it us http://wpsites.net/wordpress-tips/add-class-to-1st-post-on-first-page-of-paginated-archive-page-like-home/

          3. Brad Dalton Avatar
            Brad Dalton

            Try this Clive http://wpsites.net/wordpress-tips/add-class-to-1st-post-on-first-page-of-paginated-archive-page-like-home/

  2. Aaron Avatar
    Aaron

    Brilliant! This worked perfect and was so much more simple and elegant than than the snippet of code I was trying to rework. THANK YOU!!!

    1. Brad Dalton Avatar
      Brad Dalton

      Great. I think i deserve a link in your footers blogroll don’t you think?

Leave a Reply

Join 5000+ Followers

Get The Latest Free & Premium Tutorials Delivered The Second They’re Published.