Step 1: Create a New Page Template

If you’re familiar with WordPress, you may know that you can create Page Templates that differ from the “index.php” page template. All you need to do when creating a new Page Template is save your new file as a unique file name (with a few exceptions) in your Theme directory, and put the following code at the top of the file:

This little snippet of code defines your file as “My Cool Template”, or whatever template name you give it. There’s plenty more about making Page Templates at the WordPress Codex, in the Pages section.

Step 2: Assign a Page Template to a Page

Once you’ve got your page templates set up, you can assign a specific page template to one of your pages in the ‘Pages’ section of your WordPress Admin. All that you need to do is get into ‘Edit’ mode for a page, then in the ‘Attributes’ section on the right, select your template under the ‘Template’ section. It’s that easy. (If you want more info on different page attributes that can be set, check out WordPress Support for Page Attributes.)

Step 3: Update the Menu List Items

Once the page templates have been set up, it’s time to set up the top nav list items to be smart enough to be classified  as “active” if the page being viewed is an instance of that page template.

(Note: When I was creating my custom template, I hard-coded my nav links because I knew exactly what links I wanted to have, and because I wasn’t interested in my theme being shared and used by others. With that said, the logic below may need to be edited if used for a template whose navigation is built dynamically.)

In the code where the navigation items are built, I initially had the following syntax used for each menu item:

This is your standard menu list item syntax for a menu item that’s hard-coded. It’s smart to use the bloginfo('url') function inside of the href to get the URL of your blog, and then append any additional directories to the end (if needed). This way, if you switch URLs, or do end up sharing the theme with others, it won’t be hard-coded to just one URL. But each <li> tag needs to have the ability to be appended with class="active" if the page being viewed is on a page with a given page template. For that, we need to add in another function (is_page_template()), and wrap it inside of a conditional statement:

The is_page_template() function checks the page against the file name of the template passed into it. When used inside a conditional statement, it will return a true or false value, depending on whether or not the page being viewed uses that template. And after applying this “active” logic to our list items, and as long as the CSS file has a style for linked list items classified as active (i.e. li.active a), any list item whose conditional statement returns a true will have the ‘active’ class assigned to it.

That’s a Wrap

So there you have it. A simple bit of conditional logic (assuming you’re decently familiar with PHP) that you can put into your menu list items so the links can be classified according to the page being viewed. Until next time, happy coding!

For those tech-nerds out there (you know who you are), you may appreciate that the theme is a completely custom WordPress theme.  Previously I had piggy-backed another nice theme and tweaked it to my heart’s content.  Nothing wrong with that, but as I said, it no longer matched my sites redesign.  The cool part is, I (obviously) learned a lot about building WordPress themes in the process, including a handful of neat PHP tricks (some used in my theme, others stashed in my back pocket for use later on down the road).  If you keep an eye out, you may even see one or two of these tricks surface in future posts.  Not making any promises — just throwing it out there.

With all that said, I hope you like the new blog theme design.  I’m sure I’ll be tweaking it along the road, adding new functionality, nit-picking details down to the pixel, and other good stuff us web designers/developers like to do.  But for now, it’s time to take a little breather, sit back and relax.