Episode 6: Creating the blog.php

After all we are about to make the actual blog portion of our theme, since we planned the theme in a modular manner we have to create a separate template file for the blog, its called blog.php. Make sure that you still remember all our daily stuffs like starting web server, remembering the old class etc.. if so we can start now.

Step 1: Create a blank blog.php file with Intype or the text editor with you.

Step 2: Type in the following code to the text editor with blog.php opened.

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

What just happened ?

• if(have_posts()) – checks to see if you have any post.
• while(have_posts()) – if you do have it, while you have any post, execute the_post().
• the_post() – call for the posts to be displayed.
• endwhile; – sticking to rule #1, this is to close while()
• endif; – close if()

Note: not every set of codes need two parts in order to open and close itself. Some can close by itself, which explains have_posts() and the_post();. Because the_post(); sits outside of if() and while(), it needs its own semicolon to end/close itself.

Step 3: In previous lessons, you learned how to call for your blog’s title by using bloginfo(’name’). Now, you will learn how to call the post titles in between The Loop.

Type <?php the_title(); ?> after the_post(); ?> and before <?php endwhile; ?>

Saving the post and taking a preview will make you aware of what you have just did !

Ok so you can see all the titles of blog posts listed without any definitions.. so we need to make it more better and enrich it with blog features.. Here we go

Step 4: Turning the post titles to Post links are simple as what we did in the case of Blog Title. Exactly like following code.

<h2><a href=”<?php the_permalink(); ?>“><?php the_title(); ?></a></h2>


the_permalink() is the PHP function that calls for the address or location of each post. Remember H1 that we used for the blog title? That’s your web page’s heading. H2 is used for sub-headings. Now that your title links are sub-headings, each gets its own line. Save index.php and refresh the browser to see the change.

Ok So we need to add some more stuffs to the current template file which will print the Post Contents and Meta Information like Category etc…

<?php if ( !get_option('content') ) { the_content('Read more'); } else { the_excerpt(); } ?>

See the changes that the above code has made.. I know there is a smile in yor face ! Now you must be seeing the contents too..

Here is my explanation for what you did now :

You used the PHP function the_content() to call for post entries (content). Right now, your content is just one long line of text, all the way to the window’s right side, because you haven’t styled it yet. Remember the style.css file ? Later on, we’ll use that file to control how everything looks. If you don’t hame much dummy posts make at least 10 or around with the help of Lipsum Gnerator. Dummy post will help you to make everything about the styling and functionality a bit more clear.

Take a look at the source of the web page to know about the help that WordPress did for you. Go to View > Page Source in Firefox to see the page source.

See how WordPress helped you in compiling the post. The get_option(‘content’) Can automatically insert the <p> tag where ever needed and close them appropriately, Not Just Paragraph tags Most of the HTML tags. Now comes the turn of meta information. Its up to the designer of the template. You can make the choice which all Meta information to be there, There is not rule to print the meta information. No one will scold you if you didn’t placed the meta information in your Theme Leave the case of clients when you advances in the WP Development.

Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?>  <?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?>

Type this code bellow the content section and above all closings. And see the Preview after a refresh. Now you can see the Category along with the Comment Count. See WordPress Codex for the snippets to call more meta information.

Now we have almost made a blog design ! the rest is to the CSS, that we will do in the coming classes. More customizations are also needed dont rush.. Slow development is always consistant, Its from my life. So stay tuned Keep following the Official FeatherPot Twitter Feed and RSS.