Taking Your Camera on the Road

I talk a lot about the powerful features and ability to customize WordPress on our site. One of the behind the scenes power WordPress "tricks", if you will, featured on our site is found on our site's front page. It involves some queries that ask several rather uniquely styled questions, and generates what you see based upon the answers from the database. Let me explain this better.

When you view the "home" page or front page of our site, you are greeted with a combination of excerpts or full short posts. On the left side of each post is a green bar. Each post features the title and post categories. Each post also features the excerpt summary, or first paragraph or two of the post, or the full length short post.

Each excerpt on our page is defined by a green bar along the left edge. The first excerpt at the top uses the "more" tag to define the excerpt section within the post. The second excerpt is an explicitly defined excerpt using the Excerpt textarea window in the Write Post panel. The third excerpt is the full post. Note there is not "Continue Reading" link at the end of the post.

Now, let me break that down into PHP query talk. Inside of the WordPress Loop, which generates the page results from your database, is a query. The default query states "if there are posts, show the posts". Very simple. It looks like this:

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

A query is a bit of code that begins with an IF and then provides the answers based upon something like this in plain English:

If X then Y else Z

In PHP query language, the terms "if" and "then" are replaced by "if" and "else". The query looks more like this:

If X else Y else Z

Most people use queries to say something like "if this post is in category 4, print it with a red background" or "if this post is in category 6, don't show it". Or they use queries to alphabetize the posts found on the front page, or to only show posts from a specific category, leaving the rest visible through category templates or other means. These are the traditional and most requested types of front page queries.

There are also two other elements to the query that need to be considered. They are two WordPress template tags, the_content() and the_excerpt().

Used within the WordPress Loop, the_content() displays the content of the post. It features a parameter which allows the site administrator to use a tag called "more" in a post. This shows the post's beginning content until the "more" tag as an excerpt. If the "more" tag is not used, then the whole post is shown on mutli-post pages. The post author or administrator controls where the "more" tag is used.

The other tag is the_excerpt(). It replaces the_content() tag and displays one of two things. Either the explicit excerpt as written in the Excerpt textarea box on the Write Post panel, or the first 120 words of the post. It is used to force only excerpts to be seen on the multi-post pages.

Generally, a WordPress site owner or Theme author will use one or the other template tag. The problem is that I'm not your ordinary user.

That's right. I had to have something different, something to challenge the WordPress experts. I challenged them, and this is what Michael Adams of MDAwaffe came up with just for me.

I wanted to use the explicit excerpt, the "more" tag, and the two template tags and have WordPress do the work of figuring out when I needed which, and to use it appropriately. The question put forth on the front page of our site is this:

If post content has an explicit excerpt,
                       display the explicit excerpt.
If post content uses the <--more--> to mark the ending post of the excerpt,
                       display this excerpt.
If post content uses NO EXCERPT,
                       display the entire post.

Here is the loop, without all the styles and references so you can see the actual code that asks the three questions. Comments are in place to help you follow the process.

<!-- Start of the Loop -->
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<?php if ( $post->post_excerpt ) : // If there is an explicitly defined excerpt ?>
    <!-- Display explicit excerpt-->
        <?php the_excerpt(); ?>
<?php else : // If there is not an explictly defined excerpt ?>
    <!-- Display post or post until READ MORE tag -->
        <?php the_content(); ?>
<?php endif; // End the excerpt vs. content "if" statement ?>
<?php endwhile; else: ?>
    <!-- Display Page Not Found Page if post is not found -->
<?php endif; ?>

The key is in the line that says:

<?php if ( $post->post_excerpt ) : ?>

It provides the condition that looks for the explicitly defined excerpt. The rest of the query within the Loop is fairly normal.

The template tag the_content() has a parameter to set the "read more" statement. The template tag the_excerpt() does not.

This created a bit of confusion. It meant that if I set the_content() to say "Continue Reading", it would only show up on the posts that used the "more" tag and not on the posts that used the_excerpt() template tag. Not very consistent looking. I needed to add the same look and text for the "Continue Reading" tag to the explicit excerpts.

The usage of the "more" within the_content() looks like this:

<?php the_content('<span class="readmore">CONTINUE READING <?>

The addition of a "faked more" tag to work with the the_excerpt() tag looks like this:

<?php the_excerpt(); ?><br />
<div class="readmore"><a href="<?php the_permalink(); ?>">CONTINUE READING </a></div>

Here is the entire customized Loop query. Note the use of the clearfix CSS style which is discussed in the article on WordPress Tips and Tricks on Themes and Templates.

<!-- Start of the Loop -->
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<?php if ( $post->post_excerpt ) : // If there is an explicitly defined excerpt ?>
<div class="excerpt-post clearfix">
<h2 id="post-<?php the_ID(); ?>">
<a href="<?php the_permalink() ?>" rel="bookmark" accesskey="s"><?php the_title(); ?></a>
</h2>
<div class="catslist"><?php the_category(' and '); ?></div>
<div class="entry">
<?php the_excerpt(); ?><br />
<div class="readmore">
<a href="<?php the_permalink(); ?>">CONTINUE READING</a>
</div>
</div> <!--end of entry -->
<!-- <?php trackback_rdf(); ?> -->
</div><!-- end of excerpt-post -->
<?php else : // If there is not an explictly defined excerpt ?>
<div class="excerpt-post clearfix">
<h2 id="post-<?php the_ID(); ?>">
<a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a>
</h2>
<div class="catslist"><?php the_category(' and '); ?></div>
<div class="entry">
<?php the_content('<span class="readmore">CONTINUE READING</span>'); ?>
</div><!-- end of entry -->
<!-- <?php trackback_rdf(); ?> -->
</div><!-- end of excerpt-post -->
<?php endif; // End the excerpt vs. content "if" statement ?>
<?php endwhile; else: ?>
<h2 class="center">Page Not Found</h2>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<p><?php _e('To help you find the information you seek,
we recommend you check out our
<a title="Camera on the Road Site Map" href="sitemap.php">Site Map</a>
to help track down what you are looking for.'); ?></p>
<?php include (TEMPLATEPATH . "/searchform.php"); ?>
<?php endif; ?>
<!--end Loop -->

More WordPress Resources

This a powerful example of one of many options and queries possible within the WordPress Loop. For more information see the following resources:

• WordPress Tips and Tricks - Template Files, Styles, and Themes
• The WordPress Loop
• The WordPress Loop in Action
• Customizing the WordPress Read More Tag
• WordPress Template Tags
• New to WordPress Template Tags? Stepping Into Template Tags
• WordPress Conditional Tags
• Alphabetizing WordPress Posts
• Common WordPress Support Questions
• Creating Multiple Single Posts for Different Categories

Authors, photographers, teachers, and public speakers, Lorelle and Brent VanFossen, travel extensively with their camera and pen in hand to bring you a variety of articles on nature and travel photography including basic nature photography and the photography business, writing, travel, recreational vehicles, web page design, and life on the road. All images, design, and content are copyrighted and protected by law.

You can find related articles to this topic in our WordPress and Photography categories. The previous post is CNET - Top 10 downloads of the past 10 years and the next post is WordPress Backup Week July 23-30 - Get Backed Up. Customizing the WordPress Loop for Excerpt Queries, Issue Number 732, by Lorelle VanFossen, was updated July 14th, 2005.

You can follow comments through the RSS 2.0 feed and you can find more feeds on our Feeds List. Your comment is welcome, as are trackbacks from your site.

Related Articles

• Solving the WordPress Excerpt Problem - Sorta
• WordPress Resources List
• WordPress Tips and Tricks - Administration Panels
• Clearfix CSS Hack: Solving Stair Stepping Images
• Search WordPress Codex and Forum from the Admin Panels
• List of WordPress Plugins
• WordPress Tips and Tricks - Template Files, Styles, and Themes
• WordPress Article Series Plugin: In-Series

Submit Article: BlinkList | Blogmarks | Digg | Del.icio.us | Ekstreme Socializer | Feedmarker | Furl | Google Bookmarks | ma.gnolia | Netvouz | RawSugar | Reddit | Scuttle | Shadows | Simpy | Spurl | Technorati | Unalog | Wink | Yahoo MyWeb2