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;
}
3
  • 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. 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. 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.

This site is temporarily in read only mode and not accepting new answers.

Not the answer you're looking for? Browse other questions tagged .