Custom Background & Custom Header

With the templates and CSS in place, let’s round off our theme building by adding a way for visitors to add a personal touch with their own Custom Backgrounds and Custom Headers.

I recommend adding support for these features after you’ve completed the CSS for your theme. It’s faster this way, because you can make the preview of the Custom Header and match your theme’s design. Plus, it’s easier to test the implementation of both backgrounds and headers when your design is complete. Think of them as the final flourish for your theme!

Please Note: The examples in this lesson are based on the design of the Shape Sample Stylesheet from the CSS lesson. If you want your header styles to look like those in the screenshots in this lesson, you’ll need to replace the styles in your current style.css with those from download.

Continue reading “Custom Background & Custom Header”

How To Reset & Rebuild WordPress Theme CSS & Define Your Layouts

CSS can be tricky. It can also be incredibly easy. I had a lot of help getting my head wrapped around CSS when I was first starting out and I take great pleasure in helping others the same way I was first helped: with solid code examples to learn from.
Continue reading “How To Reset & Rebuild WordPress Theme CSS & Define Your Layouts”

The Archive Template

What archive.php does (and all its related templates) is show posts based on a select criteria. A date range, or posts by a certain author, a category, or a tag. So, basically, it’s a lot like index.php.

Our theme will have one multipurpose archive.php template to cover date, category, author, and tag archives.
Continue reading “The Archive Template”

The WordPress Theme Comments Template

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.

Continue reading “The WordPress Theme Comments Template”

The WordPress Theme Single Post, Post Attachment & 404 Templates

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.

Continue reading “The WordPress Theme Single Post, Post Attachment & 404 Templates”

The WordPress Theme Index Template

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, archive.php or 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).
Continue reading “The WordPress Theme Index Template”

The WordPress Theme Header Template

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 functions.php file.
Continue reading “The WordPress Theme Header Template”

Setting Up Your Theme Functions

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

Continue reading “Setting Up Your Theme Functions”