Grow your CSS skills. Land your dream job.

WordPress: Pagination on a custom query on Homepage

  • # October 3, 2011 at 1:24 pm

    Hello again, Guys!

    Hope you’re all having a grand time. I wanted to have a pagination on a custom query that I wanted to show at the bottom of my homepage. Any ideas guys on how to do this? Please see attached link of my design that I wanted to look like

    http://i.imgur.com/SJ0AY.png

    Thank you advance :)

    All the best,

    Val

    # October 3, 2011 at 2:42 pm

    Thank you TheDoc! I did stumbled upon that blog and I can’t seem to understand it (forgive me I’m not that advance in WordPress :D )

    Here’s the code I’m using in my index.php file


    < ?php $recent = new WP_Query(); ?>
    < ?php $recent->query('cat=5&showposts=10'); ?>
    < ?php while($recent->have_posts()) : $recent->the_post(); ?>

    < ?php the_title(); ?>


    < ?php endwhile; ?>

    Can you tell me how it should it be?

    Thank you so much :)

    Val

    # October 3, 2011 at 4:06 pm

    Based on your image you would have to do something like this for your query:

    < ?php $args = array(
    'posts_per_page' => 6,
    'paged' => get_query_var('paged')
    );
    query_posts( $args ); ?>

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

    < ?php endwhile; ?>

    < ?php else: ?>

    < ?php endif; ?>

    And then you’ll need to add in the pagination after your endwhile.

    # October 4, 2011 at 1:21 am

    Ah.. ok will try the code and will let you know the output. Thanks TheDoc! :)

    # October 4, 2011 at 5:48 am

    Hi TheDoc,

    I tried using the code you gave me, also added post navigation link, but the pagination doesn’t seems to be working?

    Here’s the code snippet:

    < ?php $args = array(
    'posts_per_page' => 3,
    'paged' => get_query_var('paged')
    );
    query_posts( $args ); ?>

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

    ">< ?php the_title(); ?>


    < ?php endwhile; ?>
    < ?php posts_nav_link(); ?>
    < ?php else: ?>
    < ?php endif; ?>

    Am I missing something?

    Thanks!

    Val

    # October 4, 2011 at 1:55 pm

    What happens when you click ‘next’?

    # October 4, 2011 at 2:14 pm

    It just displays the same posts :| but I can see the site url changed to ?page=2 though. Am I missing anything?

    # October 4, 2011 at 2:24 pm

    Instead of:
    'paged' => get_query_var('paged')
    …try:
    'paged' => get_query_var('page')

    # October 5, 2011 at 3:17 am

    Ok got it. Will update you the output :)

    Thanks Doc!

    # October 5, 2011 at 4:49 am

    Hi Doc,

    It didn’t worked :|

    # October 5, 2011 at 12:46 pm

    Okay, mucho frustration!

    Let’s try simplifying the loop and getting rid of the ‘else’ stuff and we’ll add a reset:

    < ?php

    $args = array(
    'posts_per_page' => 3,
    'paged' => get_query_var('paged')
    );

    // The Query
    query_posts( $args );

    // The Loop
    while ( have_posts() ) : the_post(); ?>

    ">< ?php the_title(); ?>



    < ?php endwhile;

    posts_nav_link();

    // Reset Query
    wp_reset_query();

    ?>
    # October 5, 2011 at 2:05 pm

    Hehe true, what would I do without CSS Tricks! :)

    Got it, will try again with the code you gave me.

    Thanks Doc!

    Val

    # October 6, 2011 at 1:12 am

    Woohoo! Finally got it working, apparently I also have a main loop at the top part of my homepage I forgot to add < ?php wp_reset_query();?> on that loop. Thanks so much Doc for the help, really appreciate it!

    Thank you CSS Tricks! :D

    Best,

    Val

    # October 6, 2011 at 2:23 am

    But of course – should’ve asked about another loop! Glad you got it sorted.

Viewing 15 posts - 1 through 15 (of 18 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".