Web Savvy Mama Blog: What do you want to learn today?

Do you have a topic you'd like to see covered? Feel free to drop me a note. Please make sure to mention that it's blog related in the message. If I pick your topic I'll include a link back to your website!

WordPress: Creating the Loop

Tutorial navigation:
Starting Your Custom Theme
Creating the Loop
Creating the Footer
Creating the Sidebar
Adding Comments
Finishing Your Custom Theme
The loop is the part of your page that holds the content of your blog. Your posts and pages. It’s called a the loop because it loops repeatedly on the page, starting anew with each post. Make sence? Open theloop.php and we’ll get started!

Insert this code to start the loop:

<?php if (have_posts()) { ?>

Now we’ll start actually grabbing the posts. Anything you put after this will be repeated in every post. Lines, borders etc as well.

<?php while (have_posts()) { the_post(); ?>

Now we’ll start formatting what’s included in the posts. The example tags I give are just basics. You can change these to use different formats and move them around to suite your needs. The links provide more examples and uses of each tag.

<?php the_title(’<h3>’, ‘</h3>’); ?> Title, this tag inserts the title of the post. This example wraps the title in header tags.

<?php the_time(’F j, Y’); ?> at <?php the_time(’g:i a’); ?> Time/Date, this tag gives the time and date the post was added. Shown are 2 tags that combine the date and time. You can use these both, only one or another combination.

<?php the_author_nickname(); ?>  Author tag, this tag includes who the post was made by. The shown tag includes the author’s display name. There are several different author tags including ones that show first name, last name or link to the author’s website or other posts. See link for more information.

<?php the_category(’, ‘); ?> Category, this tag displays the categories that the post is attached to.

<?php edit_post_link(’edit’); ?> Edit post, this tag appears only to the administrator/author of the post.

<?php the_content("more"); ?> Content, this displays the content of the post. The "more" between is what displays if you use the text displayed when the <!–more–> Quicktag is used. The quick tag is used when creating the post. The author inserts the tag <!–more–> and the text after that is excluded from teh post leaving a link that the reader clicks to view the full post.

<?php comments_popup_link(’No comments yet’, ‘1 comment so far’,
‘% comments so far’, ‘comments-link’, ‘Comments are off for this post’); ?> Comments, this tag shows the number of comments and allows the reader to click to add a comment as well.

<?php the_permalink(); ?> Permalink, this tag displays the permalink for your post. You can combine this to display the full URL or to a text link.

<!– <?php trackback_rdf(); ?> –>
 Trackback, this tag shows the RDF information to track back to your post when posted elsewhere. Also known as Pingback.

These are just a smidge of the possibilities. You can find more tags on the WordPress Template Tag list . Now that your loop is complete you’ll want to close the loop. Add these tags to the end and save your file.

<?php } ?>
<?php } else { ?>
<?php } ?>

Here is an example of a finished loop. This loop layout is show on the Web Savvy Mama blog.

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

<?php the_title(’<h3>’, ‘</h3>’); ?>
Posted: <?php the_time(’F j, Y’); ?> at <?php the_time(’g:i a’); ?> | by <a href="<?php the_author_url(); ?>"><?php the_author_firstname(); ?></a> <br>
Filed under: <?php the_category(’, ‘); ?>
<?php edit_post_link(’edit’); ?>
<?php the_content("more"); ?>
<?php comments_popup_link(’No comments yet’, ‘1 comment so far’,
‘% comments so far’, ‘comments-link’, ‘Comments are
off for this post’); ?>
| <a href="<?php the_permalink(); ?>">permalink</a>
<p><img src="http://websavvymama.com/blog/wp-content/themes/websavvy/images/blogline.gif" />
<!– <?php trackback_rdf(); ?> –>
<?php } ?>
<?php posts_nav_link(); ?>

<?php } else { ?>
<?php } ?>

Continue on to WordPress Themes: Creating the Sidebar

Technorati Tags:

3 Responses to “WordPress: Creating the Loop”

  1. Web Savvy Mama » WordPress Themes: Starting Your Custom Theme Says:
    February 3rd, 2007 at 7:06 pm

    […] navigation: Starting Your Custom Theme Creating the Loop Creating the Footer Creating the Sidebar Adding Comments Finishing Your CustomTheme […]

  2. Web Savvy Mama » WordPress Themes: Creating the Footer Says:
    February 3rd, 2007 at 7:09 pm

    […] navigation: Starting Your Custom Theme Creating the Loop Creating the Footer Creating the Sidebar Adding Comments Finishing Your CustomTheme […]

  3. Web Savvy Mama Says:
    February 27th, 2007 at 8:05 pm

    […] Tutorial navigation: Starting Your Custom Theme Creating the Loop Creating the Footer Creating the Sidebar Adding Comments Finishing Your Custom Theme […]

Leave a Reply


You must be logged in to post a comment.