Build a simple custom theme – Part 1

Step 7: Insert date below blog title

On your blog page, below each blog post comes additional information about this post. This info is often referred to as ‘entry metadata’. Our design requires that the date appear directly below the title instead, and that the entry meta only contains, the categories and a link to comments.

To change this, let’s open up the file index.php.

Notice the line that says:

<?php get_template_part( 'inc/meta' ); ?>

This line basically tells our theme to go and grab the meta.php file which is in the inc folder.

Opening up the meta.php we can see the code that generates all of the entry meta, including the date. Let’s cut out the date component and paste it under our title in the index.php file. We can then wrap that piece of code with some HTML and give it a class. So you should now have something like this in your index.php, just below the title:

<p class="date"><?php the_time('F dS, Y'); ?></p>

Going back to your meta.php, delete all of the extra stuff and you should be left with the following:

<div class="entrymeta">
  <p>Filed under: <?php the_category(', ');?> | <?php comments_popup_link( 'No Comments &rarr;', '1 Comment &rarr;', '% Comments &rarr;' ); ?></p>

Once these changes are applied, you should now be able see the layout stipulated in our design on the main blog page, but as soon as you navigate to an individual post or view an archive that change will be lost. In order to have consistency, you will need to repeat the process with the single.php, archive.php and search.php templates.

Of course, now that you’ve moved things around, CSS tweaking is needed.

You’ll need to add a style for the date and change the colour of the .entrymeta styles like so: {
.entrymeta {
	margin:10px 0;
	color: #99619f;
	border-top:solid 1px #99619f;
.entrymeta p {
	padding:3px 0;

Go ahead and play with the colours a bit and use the PSD as a guide.

Comments are closed.