3

I am trying to set up a featured content section of my blog. This will contain two sticky posts.

I have a custom loop which will only display the two sticky posts, in the loop I then get a content-featured.php template which has the structure of the sticky posts.

In the main post div I use post_class(). I know I can pass a value like post_class('featured') but I would like to have a different class name for each sticky post, i.e. featured-0, featured-1.

I have attempted to create a function in functions.php, but as I know very little about PHP, I am struggling to get it to work. Here's what I have:

//add classes to sticky posts
function gwad_sticky_classes( $classes, $class ) {
    $sticky = get_option( 'sticky_posts' );
    if ( $sticky ) {
        $query = new WP_Query( $sticky );

        $sticky[0] ='featured-0';
        $sticky[1] = 'featured-1';

    }

    return $classes;
}
add_filter( 'post_class', 'gwad_sticky_classes', 10, 2 );

As you can see, I don't have a clue what I'm doing, any help would be greatly appreciated.

3

Here's a solution that adds additional sticky classes, one for the post ID and one for the sticky post counter.

/**
 * Adds .featured-{$post_id} and .featured-{$sticky_counter}
 * class names to sticky posts.
 *
 * @param array $classes An array of post classes.
 * @param array $class   An array of additional classes added to the post.
 * @param int   $post_id The post ID.
 *
 * @return array
 */
add_filter( 'post_class', 'gwad_sticky_classes', 10, 3 ); 
function gwad_sticky_classes( $classes, $class, $post_id ) {

    // Bail if this is not a sticky post.
    if ( ! is_sticky() ) {
        return $classes;
    }

    // Counter for sticky posts.
    static $gwad_sticky_counter = 0;

    $classes[] = 'featured-' . $post_id;
    $classes[] = 'featured-' . ++$gwad_sticky_counter; 

    return $classes;
}

Edit: Here's an alternate version that avoids using the static variable:

add_filter( 'post_class', 'gwad_sticky_classes', 10, 3 ); 
function gwad_sticky_classes( $classes, $class, $post_id ) {

    // Bail if this is not a sticky post.
    if ( ! is_sticky() ) {
        return $classes;
    }

    global $wp_query;
    $classes[] = 'featured-' . $post_id;
    $classes[] = 'featured-' . ( string ) ( $wp_query->current_post + 1 );

    return $classes;
}
  • 1
    Awesome, it adds featured-1 and featured-2 to the different sticky posts, this is exactly what I was looking for so I can style them diffrently. Thank you. – Destiny2Gamer Jun 17 '17 at 20:13
  • 1
    I think you might simplify it alot with is_sticky() and third $post_id input parameter for the filter – birgire Jun 17 '17 at 20:43
  • 1
    Good call @birgire! I've updated the answer. – Dave Romsey Jun 17 '17 at 21:08
1

As an alternative, you can do this with straight forward css. The post class will contain the sticky class by default. So in twentyseventeen theme for example, where the loop is in a div "main":

#main .sticky:nth-of-type(1) {
   color: red;
}

#main .sticky:nth-of-type(2) {
    color: blue;
}

will do the trick.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.