A to Z list of posts with Pagination for Custom Post Type

3 Views

Thanks for taking an intrest

I am looking for some to provide a clear, good practice, example (or link to an existing one) of how to create an A to Z list of posts with Pagination for Custom Post Type in the latest version of WordPress based on the scenario below.

There are two existing questions I have found on this site but neither answer the question clearly or definitively.

Read More

To keep things simple for me to explain the scenario and for those responding. I am basing my explanation around a website all about Fruit. When trying to use the answers given I am hoping this will be easy for I and other learners to follow the replys and intergrate it into their own code.

Basic Structure

  • I have created a Custom Post Type called “Fruits“.
  • I have created a series of Posts within Fruits, each with a Post Title
    of a particular fruit e.g. “Bananas”.
  • I have created a Page Template within which is the following div:<div id="MyAtoZArea" class="MyAtoZStyle"></div>.

Output

  • Within the div I would like code that will display a list of all the
    posts in the custom post type “Fruits”.
  • I would like to wrap the output in an unordered list <ul> with each title being a different list item <li>
  • I would like the list to be sorted alphabetically by the Post Title.
  • As each letter of the Alphabet changes I would like it to be inserted. For example:

A
Apples
Apricots
B
Bananas

  • I would like for letters of the alphabet not to be shown if there are no applicable posts. For example:

A
Apples
K
Kiwi
S
Strawberrys

  • Finally I would like to show a maximum of 20 posts, using pagination to show the next 20 and so on.

Can you help? If so post below.

All constructive guidance and comments are welcome.

Post Views: 3

Related posts

2 comments

  1. I would do it like below. The following code you should post in your template:

    <?php
//get the posts first
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$args = array(
     'paged' => $paged,
     'posts_per_page' => 20,
     'post_type' => 'fruits',
     'post_status' => 'publish',
     'orderby' => 'title'
);
$fruits = new WP_Query( $args );
?>
<ul>
<?php
//loop through all the posts in the custom query
if( $fruits->have_posts() ) {
  $current_first_letter = '';

  while($fruits->have_posts() ) {
    $fruits->the_post();
    $title = the_title();
    if (is_string($title)) {
        $first_letter = $title[0]   
        //output a first letter list item with a custom class to be styled differently in your css if it is a new first letter     
        if ($first_letter != $current_first_letter) {
            echo '<li class="divider"'> . strtoupper($first_letter) . '</li>';
            $current_first_letter = $first_letter;
        }
    }
    ?>
    <li><?php the_title(); ?></li>
    <?php
  }
}
?>
</ul>

//pagination
<?php if ($fruits->max_num_pages > 1) { // check if the max number of pages is greater than 1  ?>
  <nav class="prev-next-posts">
    <div class="prev-posts-link">
      <?php echo get_next_posts_link( 'Older Entries', $fruits->max_num_pages ); // display older posts link ?>
    </div>
    <div class="next-posts-link">
      <?php echo get_previous_posts_link( 'Newer Entries' ); // display newer posts link ?>
    </div>
  </nav>
<?php } ?>

//restore original post data
<?php wp_reset_postdata(); ?>

    You could easyly alter your code to also display labels for letters without posts

  2. Please use this below code. The following code you should use in your post type template: it’s really work for me… I have also tested this code…. See screenshots 1. http://prntscr.com/dxzi22 (full A to Z) 2. http://prntscr.com/dxziih (Full A to Z with Pagination)… you need do to some CSS for that… 

    <?php
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$args = array('paged' => $paged,'posts_per_page' => -1,'post_type' => 'services','post_status' => 'publish','orderby' => 'title','order' => 'asc');
$fruits = new WP_Query($args);
if($fruits->have_posts()){
  $current_first_letter = '';
  $t = array();
  $s = array();
  while($fruits->have_posts()){
    $fruits->the_post();
    $title = get_the_title();
    if(is_string($title)){
        $first_letter = strtoupper($title[0]); 
        if($first_letter != $current_first_letter){
            $t[] = $first_letter;
            $current_first_letter = $first_letter;
        }
    }
    $s[$first_letter][] = get_the_title();
  }
}

$t = array_unique($t);
$tc = count($t);
$sc = count($s);
for($i=0; $i<$tc; $i++){
    ?>
    <div>
        <h4><?php echo $t[$i]; ?></h4>
        <ul>
        <?php
        foreach($s as $key => $value){
            if($key == $t[$i]){
                $vc = count($value);
                for($j=0; $j<$vc; $j++){
        ?>
            <li><?php echo $value[$j]; ?></li>
        <?php
                }
            }
        }
        ?>
        </ul>
    </div>
    <?php
}
if($fruits->max_num_pages > 1){ ?>
  <nav class="prev-next-posts">
    <div class="prev-posts-link">
      <?php echo get_next_posts_link( 'Older Entries', $fruits->max_num_pages ); ?>
    </div>
    <div class="next-posts-link">
      <?php echo get_previous_posts_link( 'Newer Entries' ); ?>
    </div>
  </nav>
<?php } ?>
<?php wp_reset_postdata(); ?>

Comments are closed.