Let’s assume you know some basic PHP or at least enough to work your way around flow controls like the “IF” statement as well as a “while” loop. You are probably familiar with the basics in PHP functions but are still getting to know how it all ties together in to WordPress. Time to start getting your feet wet in developing your own WP themes or at least reverse engineering the WordPress loop so that you can customize the freebies that are plentiful online. Usually the freebies are not quite what you are look for in regards to displayed information or design. This article and a few others should get you started.

The redux – for whatever reason our “code” plugin was “warped” and some of the code was rendering, which means you were missing out on parts of crucial code to make the loop work for you. It has been fixed. We apologize for any inconvenience.

Related articles:
http://flashbyz.com/blog/dynamic-includes-with-wordpress/ Different sidebars based on location
http://flashbyz.com/blog/excerpt-with-more/ Using excerpt on index.php
http://flashbyz.com/blog/random-images/ Randomizing multiple headers
http://flashbyz.com/blog/custom-login/ branding your WP login

What is The Loop?

The Loop is what makes WordPress go. It’s the most important thing. Everything else is secondary. To be more specific, it cycles through posts, allowing us to display them in any manner we want. The Loop in its simplest form:

if (have_posts()) :
while (have_posts()) : // The Main Loop
the_post(); // Required Call
the_content(); // Get Content
endwhile;
endif;


____________we will convert to__________
Before we display our posts, we have to call our header using the WP hook get_header() and then open “The Loop.”

<?php get_header(); ?>// header.php
<?php if (have_posts()) : ?>


<?php while (have_posts()) : the_post(); ?> // the loop


Notice that before the loop starts, we are actually checking if there are any posts. The if(have_posts()) checks if there are any posts available. If there are posts, we should loop through them.

The while(have_posts()) begins the loop. It will begin a loop cycle, moving through each post available for display. the_post() calls up information about the post that we’ll be using and sets the global $post variable.

<div class="post" id="post-<?php the_ID(); ?>">
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to
<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<?php the_time('F jS, Y') ?> by <?php the_author() ?>


<?php the_content('Read the rest of this entry &raquo;'); ?>
Post Tags: <?php the_tags(' ', ', ', '<br />'); ?>
Posted in <?php the_category(', ') ?>


<?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '%
Comments &#187;'); ?>
</div>


The previous three sections step through what is commonly referred to as the post and content div. We want to wrap all of our post content into one div to kind of hold it all together. We went ahead and added a bit more coding than needed to echo or print to screen our author, time, tags, comments and category links. Keep in mind, the only item needed would be the link (the_title()) to take your visitor to the “post” or “single.php” page. To clarify, in your template pages, you will find a template page more than likely called single.php. That is the template page that displays your full post on a standalone page. the_title() is the WordPress template tag (function) for showing the post title. The get_permalink() template tag gives us the post URL. It’s the permanent link to the post.

the_title_attribute(), anytime you put a post title in the title attribute of a hyperlink, don’t use the_title(). Use the_title_attribute(). This takes care of posts with things such as quotation marks, leaving us with valid XHTML.

Alternately, you can use single_post_title() for displaying a post title in the single.php and page.php templates. Make sense? NOTE: There are two different methods for displaying post content on your home.php or index.php. Full posts or excerpts… for full explanation in how to code for excerpts, visit our article- http://flashbyz.com/blog/excerpt-with-more/

the_category() shows your post categories.
the_tags() displays all of your post tags.

The last part of the post metadata is a link to the comments of the post. The template tag for this is comments_popup_link(). It is important to use this for two reasons: links to a pop-up window for users that are using pop-up comments or links to the post comments for users that are not using pop-up comments.

<?php endwhile; ?>
<?php next_posts_link('&laquo; Older Entries') ?>
<?php previous_posts_link('Newer Entries &raquo;') ?>


The previous snippet is nothing more than links to pages with more posts based on selections made within wp-admin. In your settings under reading, you can select how many posts are to be displayed per page. These links will guide visitors to previous pages that contain that content.

We wrapped ours in div tags to display images for our Next and Previous page links. The coding looks something like:

<div class="bnav">
<div class="previous"><?php next_posts_link('') ?></div>
<div class="next"><?php previous_posts_link('') ?></div>
</div>


Now we must close this thing off to make it all work correctly. We must also display a message in case no posts were found.The next parts should be pretty self explanatory. We have an “else” control that displays a search form if the article is not found.

<?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; ?>


Last but not least, use the wordpress hooks for calling your sidebars and footer information.

<?php get_sidebar(); // sidebar.php ?>
<?php get_footer(); // footer.php ?>

Lets put the just the loop together. The following illustration shows how FBZ’s Alice Theme put the loop into action on its index.php. Not the cleanest coding in the world or setup for localization but it works for us.

<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div class="clear"></div>
<div class="post" id="post-<?php the_ID(); ?>">
<div class="post-comments">
<?php comments_popup_link(__('0'), __('1'), __('%')); ?>
</div>

<h1><a href="<?php the_permalink() ?>" rel="bookmark" title="Permalink to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h1>

<div class="postdata">
Posted by <?php the_author() ?> on <?php the_time('M j, Y') ?> in <?php the_category(', ') ?> <?php edit_post_link('Edit', '&#124; ', ''); ?>
</div>

<?php if (!empty($post->post_excerpt)) : ?>
<?php the_excerpt(); ?>

<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>">Read the full post &raquo;</a>

<?php else : ?>
<?php the_content('Read the rest of the story <img src="image_path" width="37" height="16" />'); ?>

<?php endif; ?>

<p class="single-meta">
<?php the_tags(); ?></p>
</div>

I hope some of you have found at least a part of this helpful. Happy Coding!

Z

Tags: Loop, PHP, Structure, Themes, WordPress