WordPress Featured Post Slider

The question:

Alright, I have almost finished up a clients project in WordPress, but I have hit a wall. I am not really great with jQuery (and I have yet to find a plugin to achieve what they are looking for). The client wants an automatic slider on the homepage that pulls in featured posts out of their five categories. I have scoured the net for plugins to achieve the “look” they want, but to no avail.

The look in question can be seen here.

Does anyone know how to go about this?

The Solutions:

Below are the methods you can try. The first solution is probably the best. Try others if the first one doesn’t work. Senior developers aren’t just copying/pasting – they read the methods carefully & apply them wisely to each case.

Method 1

This is one of those things you probably have to do yourself, even though there are some slider plugins, they are difficult to customize.

Using a jquery slider is pretty straightforward, they are usually just controlled with ID’s and CLASS’s, so you can wrap any WordPress code, for instance a wp_query (for featured posts).

toscho’s answer pretty much covers it, I tend to use Jquery Tools a lot since it has great docs and tons of functionality, http://flowplayer.org/tools/index.html

Method 2

Check out the AnythingSlider for WordPress plugin. Should do everything you need it to do.

Method 3

I have used the Anything Slider to do this. A checkbox added to the post editor …

enter image description here

… and a simple query later …

// excerpt from my slider class
public function list_slider_items()
{
    $posts = get_posts(
        array(
            'meta_key' => 'featuredpost'
        ,   'meta_value' => 'on'
        )
    );

    if ( empty ( $posts ) or ! is_array( $posts ) )
    {
        print '<!-- no posts found -->';
        return;
    }

    $out = '<ul id=slider class=noprint>';

    foreach ( $posts as $post )
    {
        $out .= '<li>' . get_the_post_thumbnail( $post->ID, 'slider-img' )
            . '<span class="slider-cat-list">'
            . get_the_category_list( ' · ', 'single', $post->ID )
            . '</span>'
            . '<h2><a href="' . get_permalink( $post->ID ) . '" rel="nofollow noreferrer noopener">'
            . get_the_title( $post->ID )
            . ' <span class=more-link>Weiterlesen</span></a></h2></li>';
    }

    print $out . '</ul>';
}

… and it is nearly done.

You have to tweak the stylesheet very much. It’s a mess. But in the end you get a slider that can contain any HTML, is usable for keyboard users and fits to a percentage width.


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Comment