The Search Template and The Page Template are vital to any complete WordPress Theme. And they’re both really easy to code.
I hate the Comments Template. There, I said it. It can be a confusing mess.
Luckily for you, I’ve sorted it out. Confusing still, yes. But sorted out. For this tutorial on the Comments Template, I’m basically going to walk you through what’s going to happen, show you some custom code snippets you’ll need to add to your
inc/template-tags.php file, and then drop the whole thing on you. Hopefully, it’ll start to make sense. But at the very least you’ll have a wicked comments template.
You’ve built an index of all your posts, now you need to create a template to frame each piece of content (or missing content) on its own. In this lesson, you’ll create templates for single posts, post attachments, and 404 error pages.
Index.php is the most crucial WordPress Theme Template. Not only because WordPress needs to use it if you’re missing any of its brother and sister templates (like,
tag.php) but because the work we do here, getting this template right, will help us breeze through the rest of our templates (with the exception of the dreaded comments template; that’s just plain difficult no matter how you look at it).
Now we get into the nitty-gritty: building up your
header.php and validating your theme with an HTML Doctype. There’ll be a lot of PHP in this lesson, but don’t despair. We’re also going to do two essential (and kinda neat) search engine optimization techniques and add some more things to your
We’re just about ready to start building our theme’s template files. Before we do this, however, it’s time for a quick briefing on data validation and sanitation, an important procedure we’ll take to ensure that our theme follows best security practices.
We’ve got a file structure in place, now let’s start adding things to them!
First, we’re going to add some PHP functions to our theme. These functions will serve a variety of purposes, including:
- adding support for WordPress features such as custom backgrounds, headers, post formats, etc
- setting up theme defaults
- acting as “containers” for code we can reuse throughout the theme
While the most minimal of WordPress Themes really only need an index.php template and a style.css file (or just the style file if it’s a Child Theme) most need something a little more solid.
Let’s create the directories and files that will make up our _s-based theme, Shape.
Now we’re starting to get into the real meat of WordPress Theme development: coding the HTML structure.
The Goals of Any HTML Structure
When coding a web site, you should have 2 goals in mind: lean code and meaningful code. That is, using as little markup (HTML tags) as possible and making sure that the markup is meaningful by using semantic class and ID names that refer to their content, not how they “look” (class=”widget-area” instead of class=”sidebar-left”).
Before we get started building any WordPress Theme, we’re going to need to get our development tools in place. In this post, we’ll run through the best of the best and build ourselves a cross-platform WordPress Theme test environment that would do a professional Theme developer proud.