Creating a WordPress Theme — Part 3
In the previous post in this sub-series, we learned how to start displaying content on our WordPress blog. Today, we will start working with individual posts and pages.
To start off, we will first need to split our template into several sub-template files. These contain different parts of the template, such as the header, footer and sidebar.
Create a new file called header.php. Inside of index.php, select everything from the top of the file to the end of the header. In this case, it's the end of the header <div>. Paste it into header.php. At the top of index.php, insert the following code.
<?php get_header(); ?>
WordPress knows that the header will be in header.php, so it will grab it from there.
Next, create a file called sidebar.php. This file contains — you guessed it — the sidebar. Cut out the entire sidebar <div> from index.php and paste it into sidebar.php. Then, where you removed the sidebar in index.php, add in this code:
<?php get_sidebar(); ?>
This pretty much does the same thing as
get_header(), except with the sidebar.
Finally, we need to put the footer into a separate file. Select everything from the beginning of the footer in index.php to the bottom of the file, and paste it into a new file called footer.php. To get the footer from footer.php, use the following code.
<?php get_footer(); ?>
Creating the template for WordPress pages is quite easy, now that our index.php file is much simpler than it was before.
Create a new file called page.php and copy the contents of index.php into this new file. Find the divs for the "latest posts" and "latest work" boxes and delete them. We won't be needing those on our individual pages.
Next, change the ID of the "featured post" box to "content", and delete the current <h2> inside of it. This box is basically the same as the old "featured post" box, but changing the ID will make it simpler to make changes to it in the CSS.
Also, delete the following code from this box.
<?php $sticky = get_option('sticky_posts'); rsort( $sticky ); $sticky = array_slice($sticky, 0, 1); ?>
This was used to display only sticky posts here, but we don't need that here.
Now, simply change the <h3> tags around
to h2, and remove the <a> tags around it, to remove the link. After all, the title of the page doesn't need to be a link to itself, if you're already on that page.
the_content(); because we don't want to only show an excerpt of the page.
The next part is to create the template for single posts. In a new file called single.php, copy in the entire contents of page.php. For now, the single post template will be similar to the page template, with a few changes.
Post Meta Data
Post meta data basically shows some information about the post, such as the author, the date and categories. To add this into our theme, simply add in the following line of code above the line containing
<p class="postmetadata"><?php the_date(); ?>, in <?php the_category(', '); ?>, by <?php the_author(); ?>.</p>
This is a simple line of post meta data, showing the post's date, the categories, and the posts's author. There are many other things that you can add, such as tags and information about comments. To learn more about post meta data, check out the WordPress Codex.
As always, be sure to leave a comment if you have any questions about today's article!