Utilizing the WordPress Loop to Display Posts in Archives and Pages

by on December 26, 2015

Utilizing The WordPress Loop to Display Posts, in Archives and Pages

Utilizing the WordPress Loop to Display Posts in Archives and Pages

  •  
  •  
  •  
  •  

< Back to Chapter 7 – Creating Custom Post Type and Taxonomies in WordPress

This is the 9th chapter of WordPress Development for Noobs’, and here we’ll talk about an extremely crucial part of WordPress development; working with ‘The Loop.’ This is a particularly powerful part of working with WordPress because it is the way we display the basic building block of WordPress websites besides page content. With <?php the_content(”) ?>, each WordPress loop default is to show all of the posts of the type you specify, but you can modify it to show only a certain number, display them chronologically or alphabetically. Then you can wrap elements of the post in HTML as well, and style them however you want with classes.

What you will learn in this article:

How the WordPress loop works and why it makes WordPress awesome.

WordPress is special in its ability to loop through posts and in this way you can style the blog loop one time and it works for all of the posts. I find this an incredible asset for easy development once one gets a decent understanding of it, and I think you will, too. WordPress was once a meager blogging platform, but in this day and age of content-heavy websites, the core of its functions, such as ‘the loop’, really shine and allow people to showcase their site’s content whether it be blog articles, locations, symptoms, doctors or products. Anything that can be categorized and sorted and that you want to show in a unique way, you can use the WordPress loop for.

small-blue-legoSetting up the Loop:

What we’ll be doing here is just communicating with the database via PHP, and saying if you have posts. Display them while you got ’em. Show the title, the thumbnail image for the post, and a little bit of the post so people can see what it’s about. If there aren’t posts yet, tell the visitor that.

All you need to start with the loop is this simple snippet:


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

 <h2><?php the_title() ;?></h2>
 <?php the_post_thumbnail(); ?>
 <?php the_excerpt(); ?>

<?php endwhile; else: ?>

 <p>Sorry, no posts to list</p>

<?php endif; ?>

 

Don’t let me over-complicate it for you, just get started using the loop on your site now. Experiment with it and start getting your hands dirty, because no amount of reading will fully prepare you. You have to have real things you want to do, and you will come up against roadblocks and look for solutions. Google and Stack Overflow are your best friends while developing.

small-blue-legoExamples of formatting in an archive loop:

Now you can implement some HTML with your loop. You just always want to start and end your PHP before adding the HTML. at the end. Other than that, you can just use your standard HTML and CSS classes. Here’s a nice simple example of incorporating in some HTML. Feel free to copy it into your site or just learn from the principles demonstrated here.

<div class="posts-wrapper">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<article id="post-<?php the_ID(); ?>" <?php if(is_category('featured')): ?>class="featured-post"<?php endif; ?>>
	<h1 class="post-title"><?php the_title() ;?></h1>		

	<p class="date-and-category">
		Published on <?php the_time('M j, Y'); ?> 
		by <?php the_category(', '); ?>
		in <?php the_category(', '); ?>
	</p>

	<div class="post-content"><?php the_content(); ?></div>

	<div class="prev-next-links">
		<ul>
			<li class="next-post"><?php next_post_link(); ?></li>
			<li class="prev-post"><?php previous_post_link(); ?></li>
		</ul>

	</div>

</article>

<?php endwhile; else: ?>

	<p>Sorry, this post does not exist</p>

<?php endif; ?>
</div>

As you can see, I’m simply adding some basic HTML with CSS classes to elements so I can style them in my CSS file.

small-blue-legoSome last considerations

How to use the WordPress loop to display posts in Pages or other places in your WordPress site

 

small-blue-legoWhy you would want to do this:

What if you want a listing of posts in your footer? Or want to use posts in your sidebar? You don’t have to use a plugin for bits and pieces like this! Just drop a loop like the one below into your template.

small-blue-legoSetting up your loop:

<?php 

	$args = array( 
		'orderby' => 'title',
		'post_type' => 'cpt-name'
	);
	$the_query = new WP_Query( $args );

?>

<?php if ( $the_query->have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?>

	<h1 class="the-title"><?php the_title() ;?></h1>			
	<div class="post-excerpt"><?php the_excerpt(); ?></div>

<?php endwhile; else: ?>

	<p>Sorry, there are no posts to display</p>

<?php endif; ?>

If you are using more than one loop per page, you’ll want to clear out each loop with this sweet little nugget of glory.

<?php wp_reset_query(); ?>

You just need to drop it in-between loops, so the database query knows to reset, and it makes it possible to list another grouping of posts with no problems. It’s crazy how much of the core functions of WordPress we can quickly go over in these blog posts of 1,000 words or less. Really, what I’ve presented here about the WordPress loop and this basic set of PHP snippets is incredibly valuable for getting up and running with WordPress development. The next post will go deep into using something called the “Advanced Custom Fields” plugin, this one being for developers, and it makes creating sites so client’s can edit them wonderfully simple. Stay tuned.

Thank you so much for reading “Utilizing the WordPress Loop to Display Posts, in Archives and Pages” in the WordPress for Noobs series. I’m a huge fan of helping people create WordPress websites they can be proud of. I do web design in Minneapolis and am happy to help whether you’re a prospective client, fellow designer or developer, or just someone looking to learn more about WordPress. Drop in a comment or tweet me @timbdesignmpls on Twitter.

Green LegoUsing Advanced Custom Fields to Supercharge WordPress Editability

 


  •  
  •  
  •  
  •  

Ready to get started?

Get a free consultation now