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

WP SITES

2784

Original Genesis Tutorials & 6000+ Guaranteed Code

Snippets

  • Consultation
  • Full Access
  • Log in

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

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

  • Add Class To 1st Post On First Page Of Paginated Archive Page
  • Add Custom Body & Post Classes To First Post In Loop On Home Page

Reader Interactions

Comments

  1. Clive says

    January 19, 2016 at 1:46 pm

    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

    Log in to Reply
    • Brad Dalton says

      January 19, 2016 at 4:27 pm

      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:

      if ( ! is_front_page() || get_query_var( 'paged' ) >= 2 )
      return;
      Log in to Reply
      • Clive says

        January 19, 2016 at 8:13 pm

        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

        Log in to Reply
        • Brad Dalton says

          January 20, 2016 at 1:50 am

          What was the 2nd question?

          Log in to Reply
          • Clive says

            January 20, 2016 at 7:46 am

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

          • Brad Dalton says

            January 20, 2016 at 11:38 am

            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/

          • Brad Dalton says

            January 25, 2016 at 2:36 pm

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

  2. Aaron says

    August 18, 2014 at 6:15 pm

    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!!!

    Log in to Reply
    • Brad Dalton says

      August 18, 2014 at 6:23 pm

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

      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