Mac's WordPress Tips

This template is a variation of the one that shows posts or pages by first letter of title with a selected number of posts per page.

The template is written for the Twenty Ten theme.  You will probably need to modify it to tweak the appearance or work with a different theme.  The embedded CSS should really be moved to your stylesheet.

<?php
/*
Template Name: A-Z Pages by Letter

A WordPress template to list page titles by first letter.

You should modify the CSS to suit your theme and place it in its proper file.
Be sure to set the $posts_per_row and $posts_per_page variables.
*/

// This function should go in functions.php
function mam_posts_where ($where) {
   global $mam_global_where;
   if ($mam_global_where) $where .= " $mam_global_where";
   return $where;
}
add_filter('posts_where','mam_posts_where');

$posts_per_row = 3;
$posts_per_page = -1;
$pageURL = 'http';
$post_type = 'post';

if ($_SERVER["HTTPS"] == "on") {$pageURL .= "s";}
$pageURL .= "://";
if ($_SERVER["SERVER_PORT"] != "80") {
 $pageURL .= $_SERVER["SERVER_NAME"].":".$_SERVER["SERVER_PORT"].$_SERVER["REQUEST_URI"];
} else {
 $pageURL .= $_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"];
}

$letters = $wpdb->get_col(
"SELECT DISTINCT LEFT(post_title,1) AS first_letter FROM $wpdb->posts
WHERE post_type = '$post_type' AND post_status = 'publish'
ORDER BY first_letter ASC"
);

$first_letter = ($_GET['first_letter']) ? $_GET['first_letter'] : $letters[0];
?>

<?php get_header(); ?>

<style type="text/css">
.letter-group { width: 100%; }
.letter-cell { width: 5%; height: 2em; text-align: center; padding-top: 8px; margin-bottom: 8px; background: #e0e0e0; float: left; }
.row-cells { width: 70%; float: right; margin-right: 180px; }
.title-cell { width: 30%;  float: left; overflow: hidden; margin-bottom: 8px; }
.clear { clear: both; }
</style>

<div id="main-background">

   <div id="main-column">
      <h1><?php the_title(); ?></h1>

      <div class="margin-top"></div>

      <div id="a-z">

         <?php
         $mam_global_where = " AND LEFT(post_title,1) = '$first_letter' ";
         $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
         $args = array (
            'posts_per_page' => $posts_per_page,
            'post_type' => $post_type,
            'orderby' => 'title',
            'order' => 'ASC',
            'paged' => $paged,
            'caller_get_posts' => 1
         );
         query_posts($args);
         $mam_global_where = '';  // Turn off filter
         if ( have_posts() ) {
            $in_this_row = 0;
            while ( have_posts() ) {
               the_post();
               $first_letter = strtoupper(substr(apply_filters('the_title',$post->post_title),0,1));
               if ($first_letter != $curr_letter) {
                  if (++$post_count > 1) {
                     end_prev_letter();
                  }
                  start_new_letter($first_letter);
                  $curr_letter = $first_letter;
               }
               if (++$in_this_row > $posts_per_row) {
                  end_prev_row();
                  start_new_row();
                  ++$in_this_row;  // Account for this first post
               } ?>
               <div class="title-cell"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></div>
            <?php }
            end_prev_letter();
            ?>
            <div class="navigation">
            <?php
            foreach ($letters as $letter) {
               $url = add_query_arg('first_letter',$letter,$pageURL);
               echo "<a href='$url' title='Starting letter $letter' >[ $letter ]&nbsp;&nbsp;</a>";
            }
            ?>
            </div>
         <?php } else {
            echo "<h2>Sorry, no posts were found!</h2>";
         }
         ?>

      </div><!-- End id='a-z' -->

   </div><!-- End class='margin-top -->

</div><!-- End id='rightcolumn' -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

<?php
function end_prev_letter() {
   end_prev_row();
   echo "</div><!-- End of letter-group -->\n";
   echo "<div class='clear'></div>\n";
}
function start_new_letter($letter) {
   echo "<div class='letter-group'>\n";
   echo "\t<div class='letter-cell'>$letter</div>\n";
   start_new_row($letter);
}
function end_prev_row() {
   echo "\t</div><!-- End row-cells -->\n";
}
function start_new_row() {
   global $in_this_row;
   $in_this_row = 0;
   echo "\t<div class='row-cells'>\n";
}

?>