Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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.

<!-- START WRAPPER BLOG --> 
<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>
        </article>

    </section>

    <?php endwhile; else: ?>
    <?php endif; ?> 
</section>
</div>
<!-- END WRAPPER BLOG --> 

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.

     <script>
        $(".up-arrow").click(function(){
        $('#_btnUp').show('up-arrow', function(){
        });
        });

        $(".down-arrow").click(function(){
        $("#_btnDown").hide('down-arrow',function(){
        });
        });
     </script>  

http://cl.ly/image/2I0H2O2i2L24

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

share|improve this question
    
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 '12 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 '12 at 23:01
add comment

1 Answer

up vote 0 down vote accepted

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:

<?php
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.

share|improve this answer
    
Thanks I'll have to fiddle around with this concept a little more :) Thanks for the example code, and guidance! - Matt –  Monstr92 Sep 23 '12 at 23:01
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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