Advertisement
Articles

WordPress Cheat Sheet: The Loop Code Snippet

by

With the popularity of our old WordPress cheat sheet, we've decided to fire up a new batch of these quick pocket guides that you guys n' gals can download, save to your phones for a fast reference, or even print out and keep next to your desk while you're working on customizing WordPress to do your bidding. Today's cheat sheet: The Loop Code Snippet!

The Loop is easily one of the most powerful and crucial pieces of WordPress to understand, and while there's a lot already written about it, it's also just nice to have a quick reference for the loop in the event that you need a fast refresher.


The Short Loop Snippet

This is the quick and dirty version of the loop. No frills, no extra styling, content, categories, tags, or anything like that.

<?php if (have_posts()) : ?>
	<?php while (have_posts()) : the_post(); ?>
		<?php the_content('Read the rest of this entry »'); ?>
	<?php endwhile; ?>
	<?php else : ?>
	//Something that happens when a post isn’t found.
<?php endif; ?>

The Long Loop Snippet

This example is a little bit more elaborate. It includes a lot of the core WP tags that you're likely to use in a basic, vanilla, WordPress loop. This means that this one may be a little bit more useful as a starting point... but by no means should this be the limit to what you can do with the loop:

<?php if (have_posts()) : ?>
	<?php while (have_posts()) : the_post(); ?>
	<div class="post" id="post-">
		<h2><a href="" rel="bookmark" title="Permanent Link to
		<?php the_title(); ?>"><?php the_title(); ?></a></h2>
		<small><?php the_time('F jS, Y') ?> <!-- by  --></small>
		
		<div class="entry">
			<?php the_content('Read the rest of this entry »'); ?>
		</div>
		
		<p class="postmetadata">Posted in  <strong>|</strong>
			<?php edit_post_link('Edit','','<strong>|</strong>'); ?>
			<?php comments_popup_link('No Comments »', '1 Comment »', '% Comments
		»'); ?>
		</p>
	</div>
	<?php endwhile; ?>
	<div class="navigation">
		<div class="alignleft"><?php next_posts_link('« Previous Entries') ?></div>
		<div class="alignright"><?php previous_posts_link('Next Entries »') ?></div>
	</div>
<?php else : ?>
	<h2 class="center">Not Found</h2>
	<p class="center">Sorry, but you are looking for something that isn't here.</p>
	<?php include (TEMPLATEPATH . "/searchform.php"); ?>
<?php endif; ?>

Don't Miss...

Don't miss out on Our Beginners Guide to The_Loop(), or our Advanced Guide to WordPress Queries, which plays right into the content of this cheat sheet.

Oh, and we'll be doing our best to keep these sheets updated as WordPress grows into new versions, but if you spot an error (or just want to send some love), let us know in the comments!

Related Posts
  • Code
    WordPress
    Mastering WordPress Meta Data: Working With LoopsMetadata
    In the first two parts of this series, we covered what meta data is in WordPress and how to work with the arrays that are typically returned. Now that you've learned to do the detective work necessary to find the structure of an array, it's time to learn to use loops to automate the process of outputting an array. Once you learn this important skill you will never have to write repetitive HTML markup again.Read More…
  • Code
    Theme Development
    Creating a WordPress Theme from Static HTML: Creating an Archive TemplateCreating wordpress theme from html 400
    If you've been working your way through this series, you now have a functioning theme with two page templates. The steps I've demonstrated to this point are: preparing your markup for WordPress converting your HTML to PHP and splitting your file into template files editing the stylesheet and uploading your theme to WordPress adding a loop to your index file adding meta tags, the wp_head hook and the site title and description to your header file adding a navigation menu adding widget areas to the header and sidebar adding widget areas, a colophon and the wp_footer hook to the footer file creating template files for static pages. Read More…
  • Code
    Theme Development
    Creating a WordPress Theme from Static HTML - Creating a Page TemplateCreating wordpress theme from html 400
    So far in this series, I've shown you how to create a fully functioning WordPress theme from static HTML. We've covered the following steps: preparing your markup for WordPress converting your HTML to PHP and splitting your file into template files editing the stylesheet and uploading your theme to WordPress adding a loop to your index file adding meta tags, the wp_head hook and the site title and description to your header file adding a navigation menu adding widget areas to the header and sidebar adding widget areas, a colophon and the wp_footer hook to the footer file. At the moment, your theme only has one template file for displaying content—the index.php file. A powerful feature of WordPress is the ability to use template files for different kinds of content.Read More…
  • Code
    Theme Development
    Creating a WordPress Theme From Static HTML: Adding a LoopCreating wordpress theme from html 400
    In the first three parts of this series, you learned how to prepare static HTML for WordPress and to create a theme by splitting your HTML file into a set of template files and editing the stylesheet. You then uploaded your theme to WordPress and activated it. The theme still isn't displaying any content you add via the WordPress admin however; to do that you need to add a loop to your template files.Read More…
  • Code
    Theme Development
    Creating a WordPress Theme From Static HTML: Creating Template FilesCreating wordpress theme from html 400
    In the first part of this series, I showed you how to prepare your HTML and CSS files for WordPress, ensuring the structure would work, the code was valid and that the correct classes were being used. In this tutorial you'll learn how to take your index.html file and split it up into a set of template files for use by WordPress.Read More…
  • Code
    Theme Development
    How to Create a Homepage With Multiple Listings Using Custom QueriesFrontpage custom queries preview 400
    WordPress gives you a couple of built-in options for your website's front page: a display of your most recent blog posts or a static page of your choice. But what if you want to create something a bit more interesting than that? If your site has a lot of data using categories, taxonomies or custom post types to organize it, you might want to display data of more than one kind on your homepage. The good news is that you can do this using a custom template for the homepage. In this template you write a number of custom queries to list the data in the way you want to. In this tutorial you'll learn how to do the following: Create a custom homepage template for use by your theme Include four queries in that template to display different kinds of data, including three custom queries The queries will list standard posts plus one custom post type registered for this project, called 'animal'. You can find the template file with the four queries in the code bundle.Read More…