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.

I want to show the posts under a category in my page.The first 5 posts should be shown when the page loads and When the user clicks the next button/link next 5 posts should be shown. Currently I show all posts under the category.The following is the template I use to show all the posts under that category.I know I need to change the code.But I don't know how to change. Please Help.

  <div id="bloggers">
<?php $bloggers = new wp_Query("category_name=bloggers-blog&order=ASC&orderby=ID");?>
<?php 
    while ($bloggers->have_posts() ) :$bloggers->the_post(); 
    $blogger_name = get_post_custom_values("blogger_name");
    $blogger_desig = get_post_custom_values("blogger_desig");
    $blogger_profile = get_post_custom_values("blogger_profile");
?>
<div id="blogger_contents">
    <h1 style="font-weight:bold;font-size:16px;margin-top:10px;"><?php the_title();?></h2>
    <div id="blogger_image">
        <?php
            if ( has_post_thumbnail() )  { 
                the_post_thumbnail();
            }
        ?>
    </div>
    <div id="blogger_name">
        <?php 
            if( is_array( $blogger_name ) )
            {
                foreach($blogger_name as $key => $value );
                echo "$value</n>"; 
            }
        ?>
    </div>
    <div id="blogger_desig">
        <?php 
            if( is_array( $blogger_desig ) )
            {
                foreach($blogger_desig as $key => $value );
                echo "$value</n></n>"; 
            }
        ?>
    </div>
    <div id="blogger_profile">
        <?php 
            if( is_array( $blogger_profile ) )
            {
                foreach($blogger_profile as $key => $value );
                echo "$value</n>"; 
            }
        ?>
    </div>

    <div id="options_to_connect" class="<?php the_ID();?>">
        <a class="lbp-inline-link-1 cboxElement " href="#">Options To Connect</a>
    </div>
</div>

<?php endwhile; ?>
<?php wp_reset_query(); ?>
<a href="#" class="prev">prev</a>
<a href="#" class="next">next</a>
</div>

I need to show only 5 posts and when clicking on next I need to show the next 5( Currently There is only one) Any suggestions for this? Hope I have made myself clear.

share|improve this question
1  
...when the viewer slides to the see? - this not clear at all, same for the link. –  dalbaeb Mar 31 '13 at 3:01
    
You see the profiles with some images of some people in that page...On the right upper side u can see two buttons which when clicked shows the rest of the profile.. –  MidhuN Mar 31 '13 at 7:05
    
You want to build this with or without AJAX? –  dalbaeb Apr 1 '13 at 7:05
3  
I'm considering adding a close vote for this question. This question is not clear, doesn't show any research effort and asks for a "do this job for me" answer. Please define your question better, show us what you've already tried, etc. Plus: This question as well asks the community to do the research for a slider, etc. for you. –  kaiser Apr 2 '13 at 0:59
4  
It is simple to you, but your attempt to communicate it is far from simple. From what i gather your question is "How do I make a carousel", to which the answer is: "Ask somewhere else". This is a JS question not a WordPress question. You already know how to output all the posts, you just don't know how to put them in a carousel. That you have done no prior research, and that you basically asked us to do your work for you is offensive and does you no favours ( wether you intended this offence is irrelevant, it happened, deal with it ) –  Tom J Nowell Apr 2 '13 at 11:30
show 2 more comments

3 Answers

up vote 1 down vote accepted
+50

You can use carousel javascript to get the desired output. There are various carousel available, you can use some thing like jcarousel.

Download the js and css from the jcarousel website and en-queue it in your theme to use it. Note : You will have to manage the dependencies of it with jQuery.

Let me know if you need more help.

share|improve this answer
add comment

To limit the query to 5 posts add the parameter posts_per_page=5 to the WP_Query class, that way you will get 5 posts per page, and you can format them the way you want, using CSS.

<?php $bloggers = new WP_Query("category_name=bloggers-blog&order=ASC&orderby=ID&posts_per_page=5");?>

Codex > WP_Query is always there to help, see Pagination Parameters section.

share|improve this answer
    
Please Read the Question fully..!!!!!! –  MidhuN Apr 2 '13 at 5:24
3  
@MidhuN please say what your issues with answer are instead of just implying it doesn't fit. –  Rarst Apr 2 '13 at 12:10
add comment

You need to use css and jquery to create the slider effect you want to. I don't think you need ajax, since the page would load all posts and with the display property you would hide some.

share|improve this answer
    
Can you give me of an example for doing it? –  MidhuN Apr 1 '13 at 11:58
    
Can you explain using code? @togh_j –  Maya Sharma Apr 1 '13 at 14:12
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.