Design a Wordpress 2.7 Theme – Day 2 : File Separating and The Loop

Mar

2009

3replies

Introduction

You have your basic page structure, but there are none of your posts visible. Because there is a lot of PHP needed, and because it can get messy some times, Wordpress give you an easier way to separate your template theme pages into different files. With Wordpress, you can and it is extreemly easy!

File Separation

Open any IDE, and make five new pages

header.php
sidebar.php
footer.php
page.php
single.php

Now go into you index.php, cut everything from the top to the end of <div id=”primary”, and place it in the header.php. Then go back into your index.php and type <?php get_header(); ?>. This tells your index,php to import the header file

We are now going to do the same for the sidebar and the footer. Cut from <!–END PRIMARY –> to <!–END CONTENT –></div> and place it into sidebar.php. Then in index.php type <?php get_sidebar(); ?>.

And finally from <div id=”footer”> to </html> place everything into footer.php, and in index.php finally type <?php get_footer(); ?>

Your index.php should now have three lines of PHP code. You now have the basis of a Wordpress themes, without the post or pages, or sidebar, ooh and your missing all your styling. Basically you have most of the grunt work done. You should be so proud. Lets move onto more interesting things shall we?

NOTE: These are proprietary tags i.e. if you type in <?php get_menu(); ?> and hope to have menu.php imported, this will not work.

The Loop

The loop is where your posts are displayed. It is called The Loop because it loops a script to display several posts dynamically.

Add the following between your header and sidebar import

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

<?php endwhile; ?>

<?php endif; ?>

This code checks for posts, repeats the number of posts until finished, then it ends the script. Simple enough. Now in between <?php while(have_posts()) : the_post(); ?> and <?php endwhile; ?> type in the following code

Download loopentry.txt here

Conclusion

So at the end of this lesson you should:

Have six files with index.php, single.php and page.php importing the header, sidebar and footer.
The loop displaying your posts
A navigation at the bottom to get you go backwards and forwards.

On Day 3 of our Design a Wordpress 2.7 Theme, we will be covering the dynamic sidebar and other adding functionality to our footer. Make sure you Subscribe to my RSS, if you don’t want to miss the rest of these posts.

Also please go back and have a look at the other tutorials in the post.