So, I'm having trouble trying to figure out how I would go about coding this kind of implementation for a Wordpress site. I have the first part done but am a little confused on how I would go about actually making this work.

So I'll post some of my code, and screenshot that might be able to help you better understand what I am trying to accomplish.

<div id="blog-wrapper">
<section id="blog">

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

    <section class="post">

    <article class="entry">
            <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>  
            <aside class="date"><img src="http://www.test.ital.me/wp-content/themes/2013theme/images/clock.png"><?php the_time('D, jS, Y') ?></aside>   
            <aside class="category"><img src="http://www.test.ital.me/wp-content/themes/2013theme/images/clock.png"><?php the_category(', ') ?></aside>     
            <div class="content"><?php the_content(); ?></div>


    <?php endwhile; else: ?>
    <?php endif; ?> 

So pasted above is what my blog template looks like. It fetches your basic article and just ignore the aside stuff (it's for icons).

Anyways, I'm thinking of linking the articles with some javascript / jquery listed below. So that when #_btnUp is clicked it can cycle to the previos article, and when #_btnDown is clicked is cycles to the next article.

        $('#_btnUp').show('up-arrow', function(){



Posted above is a screenshot of what I'm trying to accomplish.

What I want to happen is if the arrows are clicked it only shows one post / cycles through them. Though, the problem is I don't know how to piece it together. So I'm asking for your help. Does anyone know how to guide me on how to get this accomplished :) Thanks! :D

  • You need to either fetch and load the posts via ajax or load them all and hide it via CSS, then show/hide (namely: .toggle()) their visibility. You could also do this using some jQuery cylce/rotator/slider/etc. plugin. As things stand now, the question is off-topic. Maybe you can bring it on topic after some research.
    – kaiser
    Sep 23, 2012 at 8:45
  • Thanks, I'll give this a try :) And I'll keep fleshing this concept out. Sorry fort he lack of details.
    – Monstr92
    Sep 23, 2012 at 23:01

1 Answer 1


An easier approach would be to load N (around 10 maybe) posts at the time and then just slide between them using jQuery, you could output an <a name="POST-ID"> before each one and use some jQuery sliding body plugin to slide to each <a>.

If you'd like to load via ajax or go to a totally new page with browser window refresh you could use the the function:

function get_adjacent_post( $in_same_cat = false, $excluded_categories = '', $previous = true ){
        //from wp-includes/link-template.php line 1097
$next_post = get_adjacent_post( true, null, false );

to get the next or previous post object which you wil get the post permalink by using:

<?php $permalink = get_permalink( $next_post->ID ); ?>

Hope that helps.

  • Thanks I'll have to fiddle around with this concept a little more :) Thanks for the example code, and guidance! - Matt
    – Monstr92
    Sep 23, 2012 at 23:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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