Real Estate Technology

Make sure you have read the first chapter and have done everything I’ve been explaining there. In this part, I will show you how to create the wordpress loop. The loop is the most important portion of your theme. It takes care of displaying posts and articles.

Step 3 - The Loop

Open the index.php file. It should still be empty. Now fill in:

<?php get_header(); ?>
<div id=”main”>

First line will include header template to the index.php file. This is extremely useful and saves lot of time. When you’ll need to change something in the header, instead of modifying all files you’ll just need to edit the header.php. Secondly, we open the main div which will contain all content (you can customize it in the stylesheet).

Now let’s move to the wordpress loop… This is how it begins:

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

The loop continues with the post title and metadata. The whole post is inside div named post. The entry (the content of the post) got its own div named entry. This makes it easy to style the look and feel of your articles. I have also included two dotted lines - one above and the other one below the post title. It will visually divide the articles and make page orientation easier.

<div class=”post” id=”post-<?php the_ID(); ?>”>
<div style=”border-bottom:1px dotted #000;”></div>
<h2><a href=”<?php the_permalink(); ?>” title=”<?php the_title(); ?>”><?php the_title(); ?></a></h2>
<div class=”entry”>
<div style=”padding-bottom:5px;border-bottom:1px dotted #000;”>
<p class=”postmetadata”>
<?php the_time(’l, F jS, Y’) ?> | <?php _e(’Filed under:’); ?> <?php the_category(’, ‘) ?> <?php _e(’by’); ?> <?php the_author(); ?> | <?php comments_popup_link(’No Comments »’, ‘1 Comment »’, ‘% Comments »’); ?> <?php edit_post_link(’Edit’, ‘ | ‘, ‘ ‘); ?>
</p>
</div>
/* The <br /> tag is here to pull down the post content one line below - so there will be a gap between metadata and the content */
<br />

Function the_content() will display the content of the post. If you’d like to show only short samples of the articles, replace the_content() with the_excerpt().

<?php the_content(); ?>

Don’t forget to close the divs:

</div><!– close entry –>
</div><!– close post –>

The loop ends with endwhile;

<?php endwhile; ?>

First thing under the loop is the navigation div. At the end of the page, there will be Next Page or Previous Page link so your visitors will be able to get to the following pages contaning older posts.

<div class=”navigation”>
<?php posts_nav_link(); ?>
</div><!– close navigation –>

Here we define what will be displayed if the loop fails to retrieve any posts or articles. In this case, Not Found message will show up.

<?php else : ?>
<div class=”post” id=”post-<?php the_ID(); ?>”>
Not Found
</div><!– close post –>
<?php endif; ?>

Finally, we need to close the main div and include sidebar and footer templates:

</div><!– close main –>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Let’s see the complete code now. This is how your index.php file should look now (the loop is bold):

<?php get_header(); ?>
<div id=”main”>
<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
<div class=”post” id=”post-<?php the_ID(); ?>”>
<div style=”border-bottom:1px dotted #000;”></div>
<h2><a href=”<?php the_permalink(); ?>” title=”<?php the_title(); ?>”><?php the_title(); ?></a></h2>
<div class=”entry”>
<div style=”padding-bottom:5px;border-bottom:1px dotted #000;”>
<p class=”postmetadata”>
<?php the_time(’l, F jS, Y’) ?> | <?php _e(’Filed under:’); ?> <?php the_category(’, ‘) ?> <?php _e(’by’); ?> <?php the_author(); ?> | <?php comments_popup_link(’No Comments »’, ‘1 Comment »’, ‘% Comments »’); ?> <?php edit_post_link(’Edit’, ‘ | ‘, ‘ ‘); ?>
</p>
</div>
<br />
<?php the_content(); ?>
</div><!– close entry –>
</div><!– close post –>
<?php endwhile; ?>
<div class=”navigation”>
<?php posts_nav_link(); ?>
</div><!– close navigation –>
<?php else : ?>
<div class=”post” id=”post-<?php the_ID(); ?>”>
Not Found
</div><!– close post –>
<?php endif; ?>
</div><!– close main –>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Step 4 - More Loops

Open the archive.php and copy and paste everything in the index.php. The only thing you’ll probably need to change is the_content() to the_excerpt() (so categories and archives won’t show whole posts, just short extracts).

Open the page.php file and copy and paste there:

<?php get_header(); ?>
<div id=”main”>
<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
<div class=”post” id=”post-<?php the_ID(); ?>”>
<div style=”border-bottom:1px dotted #000;”></div>
<h2><a href=”<?php the_permalink(); ?>” title=”<?php the_title(); ?>”><?php the_title(); ?></a></h2>
<div class=”entry”>
<div style=”padding-bottom:5px;border-bottom:1px dotted #000;”>
<?php the_time(’l, F jS, Y’) ?> | <?php edit_post_link(’Edit’, ”, ”); ?>
</div>
<br />
<?php the_content(); ?><br />
<?php link_pages(’<p><strong>Pages:</strong> ‘, ‘</p>’, ‘number’); ?>
</div><!– close entry –>
</div><!– close post –>
<?php endwhile; ?>
<?php else : ?>
<div class=”post” id=”post-<?php the_ID(); ?>”>
Not Found
</div><!– close post –>
<?php endif; ?>
</div><!– close main –>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

As you can see, the loop is almost the same as the previous two. We have just cut short the metadata section (no need for category and comments information). There is also a small addition to the code just under the the_content():

<?php link_pages(’<p><strong>Pages:</strong> ‘, ‘</p>’, ‘number’); ?>

That’s just in case that the content would be divided into more pages.

That’s all for now. In the third continuation, I will teach you what should be in the single post template (single.php) and how to make the comments part, too.

Related articles: Part I, Part III Part IV

Tags: how to make own wordpress theme

This entry was posted on Wednesday, March 26th, 2008 at 1:31 pm and is filed under Wordpress. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.