WordPress Featured Post Slider

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?

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

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 …

… 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