Creating Custom Category Pages

Now that you’ve picked a theme, created a custom post type, and added a bit of
sample content, you’re ready to start reengineering your site. Your goal is to remove
the “bloggish” details that don’t really fit, and make your site feel like a fine-tuned
custom creation.
The first challenge is to give your visitors a decent way to browse Distinct Furnishing’s
products. Right now, WordPress sorts the products the same way that it sorts
posts—in reverse-chronological order, based on the date you published the post.
While that makes sense for a blog, a news website, and many other types of sites, it
isn’t terribly useful in a product catalog. Visitors who arrive at Distinct Furnishings
probably won’t want to see every item crowded into a somewhat disordered single
page of tiles . Instead, they’ll want to focus on the type of furniture they
need—like a sofa, chair, or table.

This is clearly a job for the WordPress category system. As you already know, you can
browse posts by category by putting the category name in the web address, like this:
Of course, you won’t expect your visitors to type this address on their own. Instead,
you’ll supply the links in a post or page, in the Categories widget, or in a menu. Menus
are the most common way that visitors navigate sites.

The menu approach is probably the best browsing experience you can create without
editing your theme. However, it’s not perfect. It has several shortcomings:

• You can’t display different categories of products in different ways. For example,
you might want the sofa-browsing page to look different from the
tables-browsing page.

• You can’t display additional information about a category.

• You can’t control the order of products within a category—WordPress still puts
them in reverse-chronological order by publication date.

However, you can control all these options by customizing the category page template
(also known as a category archive page), which creates the page . For example, when you visit a web address like
sofas, the category page grabs the products in the Sofas category and displays them.
The stock category page does a decent enough job, but you can do better by editing
your theme.

Creating Custom Category Pages

Cleaning Out the Template

The first step in creating this sort of custom home page is to find the template you
want and prepare it for editing. In virtually all modern themes, the index.php template
is the one you want. It creates a home page with the standard list of posts. (The
only exception is if your theme has a home.php file—if it does, edit that template
instead.) To get started, choose Appearance→Editor and then pick “Main Index
Template (index.php).”
In many ways, the index.php template is like the category.php template you considered
in the first part of this chapter. The heart of both is a loop that extracts and
displays posts. The most significant difference is that category.php uses a narrower
query that includes the posts in just a single category.
You could keep the standard loop in the index.php template and simply change the
way it displays each post. You’ve seen examples that use this technique to highlight
new posts  and change the post order. But here makes
a more radical change—it grabs several separate post lists, by category, and then
displays them. The easiest way to make this happen is to remove the existing loop
entirely and add all new code. In most themes, that means deleting everything
inside the content <div>.
In the PinBlack theme, deleting the loop leaves you with this exceedingly simple

<?php get_header(); ?>
<div id=”content” class=”clearfix”>
</div> <!– end #content –>
<?php get_footer(); ?>

All this template does is add a header and footer to a page. In between is a great
big empty section where you can slot in your own content.

NOTE Remember, the header template (header.php) isn’t just a header—it has the HTML markup that begins
each page, which includes the title, style sheet links, background, and menu. Similarly, the footer template (footer.
php) includes the HTML that ends every page. So even in a simple stripped-down template like the one shown
above, your site ends up with a fully formatted home page, albeit one that doesn’t have any content in it.

Cleaning Out the Template

Adding a Category Description

The first and easiest change you can make to the category page template is adding
a category description. Many themes, including PinBlack, automatically display the
category description on the category page. You don’t even need to edit your theme.
When you first create a category, it doesn’t have a description, but you can easily
add one to the category record. Start by choosing Posts→Categories to see a list
of all your categories, and then click the Edit link under the category you want to
edit. Then type the category description in the Description box.
TIP Although the Description box doesn’t give you the editing conveniences you get when editing a post or
a page, you can still type in any HTML you want. For example you can insert <img> elements that show pictures,
<a> elements that create links, and formatted <div> elements that use classes from the style.css file.

Adding a Category Description

Defining a Custom Post Type with a Plug-In

Creating a custom post type with code really isn’t that bad. As long as you have
the right code in hand, it’s a simple case of copy, paste, and edit. However, even
WordPress gurus get tired of writing code—and exasperated by the way minor typos
can cause big-time headaches.
The problem gets worse if you get more ambitious and decide to add custom taxonomies
to your site. custom taxonomies let
you attach extra bits of information to your custom post types. For example, Distinct
Furnishings might use custom taxonomies to add color, style, and price information
to its products. The problem is that every custom taxonomy needs to be registered
in code, much like every post type, and that adds up to a tedious afternoon.

For all these reasons, most WordPress developers use some sort of plug-in to create
custom post types. Two of the best and most popular are Custom Post Type
( and Types (
Both work the same way: They add tools to the dashboard that let you define new
posts types and new taxonomies, no coding required.
For example, if you install and activate the Custom Post Type UI, you can follow
these steps to create a custom post type:

1. Choose CPT UI→Add New in the dashboard menu.
This brings you to a management page where you can create a new custom post
type (using the boxes on the left) or a new taxonomy (on the right).

2. Fill in three key details: the name of your custom type, the plural and singular
labels, and an optional description (Figure 14-6).

3. Click Advanced Options.
You’ll see a whack of extra settings (all of which are explained, somewhat tersely,
in the function reference at

4. In the Supports section, select the features you want with your custom
post type.
To duplicate the code-only example you saw earlier, you need to tick the Title,
Editor, Featured Image, and Excerpt checkboxes.

5. In the Built-in Taxonomies section, add a checkmark next to Categories if
you want your custom post type to use categories.
You can also switch on the Tags checkbox to use tags with your custom post type.

6. Click Create Custom Post Type.

The Custom Post Type UI plug-in creates the code that builds your custom post
type. You’ll see it in the dashboard menu, exactly as if you added the necessary
code to the functions.php file.

To modify your new custom post type, you need to use the plug-in. Choose
CPT UI→Manage Post Types to see all the post types you created, and to edit
or delete any of them.

Defining a Custom Post Type with a Plug-In

Editing Custom Post Types

I created a custom post type and added some posts that use
it. Now I want to change the custom post type. Is that safe?
You can return to your functions.php file and edit your custom
post type any time, without causing a problem. For example,
you can change the labels that appear in the dashboard,
the features that your custom post type supports, and the
taxonomies it uses.
You might, for instance, create a custom post type for products
that doesn’t support categories, then add some product posts,
and then decide that you actually do want to use categories. No
problem—just change the code in functions.php. When you go
back and edit one of your product posts, the category-picking
box will magically appear.
If you want to remove a custom post type, you can delete
the block of code that creates it in functions.php. However,
you should delete the posts that use your custom post type
first. Otherwise, those posts will continue to live, zombie-like,
even though you can’t see or manage them in the dashboard.
There’s one detail that you should probably never change once
you create a custom post type: its lowercase name. This is the
detail you supply as the first argument you pass to the register_
post_type() function. If you change the name,
WordPress assumes you removed the old custom post type
and you’re adding a new one. As a result, any posts that use
the old custom post type will disappear from the dashboard,
which obviously isn’t what you want.

Editing Custom Post Types