• Tweet
• Share

• Tweet
• Share

Part 1 – “Tools For The Task” and “Preparation”
Part 2 – “Layout And Structure” and “Designing WordPress Themes in Photoshop”
Part 3 – “Photoshop to XHTML in 24 Hours”
Part 4 – “Cleaning Up Your XHTML”
Part 5 – “Preloading Images with Javascript and CSS”
Part 6 – “Marking Up is Hard to Do” and “The Anatomy of a WordPress Theme”
Part 7 – “Beginning with PHP for WordPress”

WordPress is a state-of-the-art publishing platform with a focus on aesthetics, web standards, and usability as the makers proudly proclaim at wordpress.org. The keyword there being ‘publishing’ and the most important part of the WordPress publishing engine is the element that allows content to be published online easily and automatically. This element is called the the loop.

While I can’t get into all the operational mechanics of how WordPress works here, I can refer you to a page that does offer more in depth analysis (here). What is important to this tutorial is that the WordPress theme we designed in Photoshop needs this PHP function (along with a few others) to correctly fetch content from the database. Let’s examine four critical functions:

<?php query_posts();?>
Requests the database of content, should be placed near the top of index.php
just after the request <?php get_header(); ?>

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
this is The Loop and it should be placed prior to
where you want your content to print

<?php the_content(''); ?>
Calls and prints the content of your blog according to the settings in the
admin section or php functions called before it.  This should be placed wherever
you want your blog posts to go within the <div> tags.

<?php endif; ?>
Closes the loop.

Using the code from Part 7 as an example:

<?php get_header(); ?>
<?php query_posts();?>

    </div>

	<div id="post">
	  <div class="entry">
	<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

		<div class="posts">
	<?php the_excerpt(''); ?>
     		</div>

	<?php endif; ?>
	  </div>
     </div>

<?php get_footer(); ?>

You may notice that the <div> tags with id and class=”posts”elements. These are styling anything they contain. My id=”post” is printing my photoshoped content area. The area with id=”class” is formating how my content will be formated. Do I want to justify text? Do I want to use a text-transform on the first letter? Change the color of text? All those types of styles should be applied to this class to be passed on to the text inside the container.

These three lines alone are essentially all you need for index.php in your theme. However, you’ll notice that we’re missing a few important items. We need to call and style the posts name, permalink, and meta data individually. This means we need to add the following:

<a href="<?php the_permalink() ?>"><?php the_title(); ?></a>
Requests the post tile and links to it. Place this before the post content.

<?php the_time('F j, Y'); ?> at <?php the_time('g:i a'); ?>
<?php comments_popup_link('| No Comments', '| 1 Comment;', '| % Comments;'); ?>
Requests various types of information related to the post.  Place this just after the previous line.

<?php the_category(', ') ?> <?php the_tags('| Tags: ', ', ', ''); ?>
<?php edit_post_link('| Edit', '', ''); ?></p>
This calls the footer meta information for each individual post.
Place this after the content but before you close the loop.

After placing these codes my index.php looks something like this:

<?php get_header(); ?>
<?php query_posts("showposts=2");?>

	<div id="post">
	<div class="entry">
		<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

   	<span class="postname"><a href="<?php the_permalink() ?>"><?php
 the_title(); ?></a></span>

    	<p class="postinfo">

		<?php the_time('F j, Y'); ?> at <?php the_time('g:i a'); ?> <?
php comments_popup_link('| No Comments', '| 1 Comment;', '| % Comments;'); ?></p>

	<div class="posts">
    		<?php the_content(''); ?>
         	<p class="postinfo">Posted in <?php the_category(', ') ?> <?php
 the_tags('| Tags: ', ', ', ''); ?> <?php edit_post_link('| Edit', '', ''); ?>
</p>

     	</div>

		<?php endif; ?>
	</div>
	</div>

    		<?php get_footer(); ?>

In Part 9 we’ll be discussing how to correctly markup header.php, footer.php and footer.php and in Part 10 we’ll create the other pages WordPress needs.