Two column lists in Wordpress redux

Sep20th
2008
••

This is long overdue follow up to my Two Column Lists in Wordpress article. If you take a look at the example page you will notice the first example ended up counting wrong. This was my fault for not debugging properly. At the time I didn’t have a lot of posts to count. If you view the second exmple on the page you will see the total post count is correct now. I’ll try to explain the best I can the fixes to the issue.

What I ened up doing was to query the database for all posts public, private and draft. I also asked for all posts that had empty content or empty titles. This, I presume, would give me an actual count of all “posts” whether or not they are actually there anymore or even being used. This should give me accurate results. ince the original article has most of the logic behind this in it, I’m just going to recap here and then explain a little about anything new that was added.

First look back at the CSS used:

#text #liz { margin: 0; padding: 0 0 0 30px; }
#text #liz li { padding: 0; margin: 0; }
#text #liz span { width: 230px; float: left;}
#text #liz span.right { display: inline; margin: 0 0 0 30px;}

Pretty straight forward stuff. Now the PHP to query the database for all posts.

$numposts = YOURDATABASE->get_var("SELECT COUNT(*) FROM YOURDATABASE->posts WHERE post_type = 'post' and post_status = 'publish'");
$numpostspublish = YOURDATABASE->get_var("SELECT COUNT(*) FROM YOURDATABASE->posts WHERE post_status = 'publish'");
$numpostsdraft = YOURDATABASE->get_var("SELECT COUNT(*) FROM YOURDATABASE->posts WHERE post_status = 'draft'");
$numpostsprivate = YOURDATABASE->get_var("SELECT COUNT(*) FROM YOURDATABASE->posts WHERE post_status = 'private'");
$numpostsemptycontent = YOURDATABASE->get_var("SELECT COUNT(*) FROM YOURDATABASE->posts WHERE post_content = ''");
$numpostsemptytitle = YOURDATABASE->get_var("SELECT COUNT(*) FROM YOURDATABASE->posts WHERE post_title = ''");

The whole shebang:

<?php
$numposts = YOURDATABASE->get_var("SELECT COUNT(*) FROM YOURDATABASE->posts WHERE post_type = 'post' and post_status = 'publish'");
$numpostspublish = YOURDATABASE->get_var("SELECT COUNT(*) FROM YOURDATABASE->posts WHERE post_status = 'publish'");
$numpostsdraft = YOURDATABASE->get_var("SELECT COUNT(*) FROM YOURDATABASE->posts WHERE post_status = 'draft'");
$numpostsprivate = YOURDATABASE->get_var("SELECT COUNT(*) FROM YOURDATABASE->posts WHERE post_status = 'private'");
$numpostsemptycontent = YOURDATABASE->get_var("SELECT COUNT(*) FROM YOURDATABASE->posts WHERE post_content = ''");
$numpostsemptytitle = YOURDATABASE->get_var("SELECT COUNT(*) FROM YOURDATABASE->posts WHERE post_title = ''");
?>
<?php $count = 0 ?>
<?php query_posts(''); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<?php $count++; ?>
<?php endwhile; endif; ?>
<?php $zo = $numposts/2; ?>
<?php $zoo = round($zo); ?>

<ol id="liz">
<span>
<?php query_posts('posts_per_page='.$zoo); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<li><a href='<?php the_permalink() ?>'><?php the_title(); ?></a></li>
<?php endwhile; endif; ?>
</span>
<span class="right">
<?php query_posts('offset='.$zoo); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<li><a href='<?php the_permalink() ?>'><?php the_title(); ?></a></li>
<?php endwhile; endif; ?>
</span>
</ol>

Take a look at the example page again.

Now lets make something better looking and shoot for some cross browserness.

New CSS:

#text #erica { margin: 0 0 0 30px; padding: 0;}
#text #erica li { padding: 0 0 0 0; margin: 0; list-style: none outside; position: relative;}
#text #erica span { width: 230px; float: left;}
#text #erica span.right { display: inline; margin: 0 0 0 30px;}
#text #erica span.num { position: absolute; margin: 0 0 0 -26px; text-align: right; width: 20px; }

Adding some new CSS like list-style: none outside takes off the bullets and the outside removes the default bullets position in IE so that the multiline links will line up on the left side.

Some new code to play with:

<ul id="erica">
<span>

<?php query_posts('posts_per_page='.$zoo);
$count = 1;?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

<li><?php echo "<span class='num'>".$count++.")</span>"; ?><a href='<?php the_permalink() ?>'><?php the_title(); ?></a></li>
<?php endwhile; endif; ?>
</span>
<span class="right">
<?php query_posts('offset='.$zoo); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

<li><?php echo "<span class='num'>".$count++.")</span>"; ?><a href='<?php the_permalink() ?>'><?php the_title(); ?></a></li>
<?php endwhile; endif; ?>
</span>
</ul>

The changes to this code are

$count = 1;

echo "<span class='num'>".$count  .")</span>";

Here’s another example.

I’m just starting the count at 1 and then echoing out the count.) to make a UL look like an OL. I do not know how a screen reader will handle this so use at your discretion.