Quote rotator in the sidebar

You don’t need a plugin for that (and I can’t imagine that one would exist for that). A plain simple function, that you call in your sidebar, is enough:

The Query

function quote_posts_list()
{
// Retrieve 5 random posts:
$posts = get_posts( array(
    'numberposts'   => 5,
    'orderby'   => 'rand',
    'tax_query' => array(
        'taxonomy'  => 'post-format',
        'terms'     => array( 'quote' ),
        'field'     => 'slug'
    )
) );
// Echo the posts and wrap each post in a div element containing the quote
// inside a blockquote element
echo '<div id="quoterotator">;
 foreach ( $posts as $p )
    echo "<div><blockquote id='{$post->ID}' class="rotator-quote">{$post->post_content}</blockquote></div>";
echo '</div>';
}

This would simply be placed in your functions.php file and called in you desired sidebar.

The Script and jQuery Plugin definition

You then just would have to add some jQuery: (Use this plugin and place it inside a folder named /js inside your theme).

// inside functions.php:
function add_jquery_rotator()
{
    wp_register_script( 'jquery-rotator', get_stylesheet_directory().'/js/jquery.jshowoff.min.js', array( 'jquery' ), 0, true );
    wp_enqueue_script( 'jquery-rotator' );

    jQuery( document ).ready( function($) {
        $( '#quoterotator' ).jshowoff(
        {
             // add your options here - see linked source docu for more details
        } );
    ) };
}
add_action( 'wp_enqueue_scripts', 'add_jquery_rotator' );

Note

This ↑ is not tested. If it’s not working, check your errors, enable WP_DEBUG to true in your wp-config.php file and check for typos.

Happy rotating. 🙂

Leave a Comment