Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Creating custom category pages

From: WordPress 3: Creating and Editing Custom Themes

Video: Creating custom category pages

So we just finished upgrading this custom product page template for our design and that's what we're looking at here, but a page like this is actually going to live at the bottom of the hierarchy of this site. There's going to be a couple of levels above it. This Sprocketizer is going to be in a product category of sprockets, which is going to be within the top level, which is the store page, and the store is going to display all the categories. So, we're going to need a new type of page template in our theme called Category, and that's going to end up looking like this.

Creating custom category pages

So we just finished upgrading this custom product page template for our design and that's what we're looking at here, but a page like this is actually going to live at the bottom of the hierarchy of this site. There's going to be a couple of levels above it. This Sprocketizer is going to be in a product category of sprockets, which is going to be within the top level, which is the store page, and the store is going to display all the categories. So, we're going to need a new type of page template in our theme called Category, and that's going to end up looking like this.

So, the homepage for the store and it's got this header for Sprockets and then two products that are under the Sprockets category and then this header for Sprunklers and this one product that's under the Sprunkler category. This is what the store homepage looks like, and it's going to share that same template. If you are just looking at Sprockets, we just see the header for Sprockets and then just these two products. So, let's get started by creating that new template in our theme. So, I have our whole theme opened in TextMate as a project here.

I'm going to right-click and create a new file and we're going to call it page-category. That's going to be the page that we go ti. So to get WordPress to recognize this new page, we have to do the same thing that we did in our page-product.php, is put this PHP comment up the top of it, so WordPress recognizes it. Put that up here and call it Product Category. So now that this exists, WordPress is going to recognize it. So, I'm going to jump back to the web into our Dashboard and tell our store page to use that new category.

So, in our Template drop-down, it's going to be available to choose this Product Category. So, let's start out Default. I can pick Category. Hit Update. Now, if I open up the store page, here it's just going to be nothing, because it's using this template in which there's nothing in it. So that makes perfect sense. We need to flesh it out though. We're going to use the code from our page-product template, let me just copy and paste all of it over here, and as we've been doing I'm going to remove everything from inside of main-content. Save it.

I'll reload our Store page over here and we have this nice canvas blank space here and we can fill up this main-content with, basically what this is going to look like. Now, this page has some special styling attached to it, like this rectangle here with the centered text inside of it. It has some special CSS only needed on these category's style pages. So we're going to only load it on these category style pages. So, if I jump out to our Finder here, there is a CSS file in our static HTML and CSS template over here called store.css that is just for that.

I'm going to Option+Drag it over here into the CSS folder in our theme, so that that's available. Now, I'm going to open the header.php file in our theme, which has the head element in it, which is where we link out to CSS files, and this is our main style sheet and this is where we added that custom CSS just for page products. We're going to copy and paste that, because we're going to do the exact same thing for page-category, and we'll call it store.css, and save that. So just on the category page that store.css will load.

Then here in the category, this is our opportunity then to create this unique category page. Now, I'm going to I guess cheat a little bit and copy and paste all the code for this into this template, and don't worry. There's a bunch of code here, but we're going to go through it line by line, so you can see how it works. If you want this code, just go to the exercise giles for the next movie and grab the code out of this page-category.php file. So, I'm going to go ahead and save that, but we have a little prep work to do back in the admin of the site to prepare ourselves for this.

So, let's go into that Dashboard and publish the pages that we're going to need in the proper hierarchy. So, we're going to make a new page and we're going to call it Sprockets and this is going to be a category page that has a parent page of store. So you can see that in this drop-down I can select the store page as its parent page and it's going to have a template of Category. It doesn't need any content, I can hit Publish, and then if I go back into this Pages menu, you can see it's got this dash in front of it.

It's a child page now of the store. We'll do another one the same way for Sprunklers. It also has a parent of store and a template of Product Category. Now, each of our product, we've created the Mega Sprocketizer and the Super Sprunkler 2000. The Mega Sprocketizer, I'm going to open it up. It already has a template of Product Page, but I'm going to give it a parent of Sprockets, because it's a sprocket. So this is us setting up this hierarchy.

While we're in here, we're going to give it a couple of extra custom fields, and now if I jump back out into the Finder and then into our product-images folder that were provided by our client, you can see that each product has three images associated with it that they gave us. So, we might as well just put each one of those in as a custom field so we can use them on these category pages. We're not using the large version. We're kind of using the regular version of it. So we might as well put those in there now. Now, I'm going to make a new custom field called product, call it regular, product_regular, and this is the sprocketizer.

So I'm going to call it product-images. This is the file path to that image then, and we'll make one called product_small and that's this mini version. I'll add that custom field there. Now so, it has the right template and it's in the hierarch properly. So, in Pages, I'm going to click to our other product, the Super Sprunkler 2000, just to make sure that it has the proper parent.

It's a Sprunkler, is its parent page. We'll have to flush out its custom fields as well. So, its dimensions we'll make 5' x 3', just the world's biggest widget, and its product_code. It'll just be abc123, and there is three images associated with it. This is the Sprunkler, right. Small, regular, and large.

We'll update that to make sure it's good to go, and now we can see as we're viewing our pages, View in the admin, that everything has a proper hierarchy as it should and each of these pages has the correct template and parent chosen for it. So, we're in our theme. looking at page-category.php. That's the template that's like in charge of displaying these categories.

We're going to do some coding in here. I did that copy and paste. Now, I want to show you how this is all working. One of the very first line is I'm creating this variable called categoriesCF that stands for categories custom field and I'm going to pull in a category with the name of categories right away. And I put an example value below here and this is what this might look like for our store page. So, I'm going to copy that and come back into the admin and paste that in there. This is going to be a value that we're going to attach to every single category page that tells us what we want displayed on this category page.

It's just kind of some custom field trickery of how we've decided to do this. I'm going to start with the store, which is a Category page, we're recycling this template, and make a new custom field called categories, and paste that in there. Now, what is this 43 and 47? I know what Sprockets and Sprunklers are. That's the title of our categories. So that's cool. I'm going to hit Add for now. They're going to represent category ids that we just kind of need to get our hands on in order to output what we want output.

They're the ids of those two pages. So, if I go under Pages, we can figure out what the ids of these pages are by clicking on them. Go under Sprockets and I know this is a little weird, but up in the URL is where you can figure that out. So, Sprockets is 92, and Sprunklers is 94. So 92 and 94 are what we're going to want to put there. So in our Pages and Store, 92 and 94, and then I'll hit Update, until it is going to flash yellow to confirm that that has been saved.

Okay, so we have access to that now. Back in our template, this variable that we just created is going to get_post_meta that value. So this example value, it's really going to be 92 and 94. This is just an example value. It's the comment just telling us what this value is going to return, and there's another category and it explodes and this is a PHP function based on this comma character. So you see this value? It's got this comma in the middle of it. It's going to turn allCategories into an array and then this array is going to have two values in it, and so that allCategories(0).

It's going to be Sprockets|43 here, in case 92. So, how an array works is allCategories(1) would equal the second part of the string. That's what explode is all about. That's incorrect. It should have this pipe character. That's our separator. So, let's go verify that back in the admin for sure, that we used a pipe character ,that we're trying to separate this from this, with one custom field. And that should be a pipe and you can get the pipe character with a Shift+Backslash.

Just make sure that's perfect before we go on. Now, because allCategories is an array, like we've just proved with these two values, we're going to loop through it. What we want this loop to be is every sub category. We're giving it two categories, Sprockets and Sprunklers. We want to loop through that twice. This is going to make it easier for us in the future if we want to add a new category in this way. It'll just drop right in there. It's just we're kind of writing our code to be smart that way. If you want to drop the category, really easy to do. Just change this custom field.

Add a new category? No problem, just change that custom field. So we're going to take then this value, this value. It's going to be exploded again based on the pipe character. So, we're doing this like double explode technique. It's kind of neat. So, it's going to be an array again, and so pieces of 1 then would be the second part of this. This is Sprockets, so this value would be 92. So that's what exploding on a certain character does is it's able to split apart a value based on a certain category.

Now that we have access to those, the page id and the title that we want, we're going to make a new variable called link and it's going to get the permalink of of the page with an id of 92, and we have all the data that we need to start constructing and what we're constructing is this. This is what we're trying to build, the smart dynamic loop that'll be able to build this. We're going to output a div. It wraps the whole thing. We're going to output an

tag that outputs pieces 0.

Now what's pieces 0? It's the title of the category that we're dealing with. Then we're going to start a WordPress loop. Now, we have just loops within loops here, but trust me, it's real smart. We're going to query for how many pages per post. It has -1. Remember when we were in the sidebar, we used the same parameter with query_posts? Only we put one. That's saying we just want one result from the database. -1 says, we want all the results. Every single thing that you find that matches this, return it. It's going to have a post_type of page, which is important that all of our products are published as pages in WordPress. We only want pages as a result.

And then its parent is equal to pieces 1 and pieces 1 is this ID that we passed it way back in this custom field. So, just this line right here is telling us, return to us all child pages of that particular category, and then do the loop. So this is the beginning of the loop, this is the end of the loop. So, as many products as you find, repeat this bit of HTML here, and this bit of HTML are each of these blocks. So, it's just an anchor tag with this special class name on it which styles it just so.

It has a title that's equal to the price, and when I'm inside there, there's an image and we're using the meta product_thumbnail. I think we used a different id here though didn't we? We're looking for the kind of regular- sized version of it, which we called, if we go look into one of our products, just product_regular. Then it outputs the title and it just uses this function, the_title and that's enabled, because we used the_post.

So that's come up a number of times as soon as we do the post that we get access to be able to use these functions like the_title and the post_meta. And then we're going to output the product-code. So, image, title, product-code, just like here, image, title, product-code. This is what we're trying to replicate here. So, let's go ahead and save this and take a look at it. So, if we go back to the web and check out our real store page, which is now a category page, there we go. It looks just like how we hoped it looked.

There's a title for Sprockets and this link to the Sprocketizer page. If I go back, we have a link to the Super Sprunkler 2000, which links to the Super Sprunkler page, and I can go back. So we have perfectly working category page. We could easily create a new product that's a Sprocket and just categorize it as Sprocket and it'll just pop in right here. Likewise with Sprunklers. So, if we click on the Sprockets, it's going to take us to that Sprockets page, but we need to quickly make sure that that's setup as well. So, let's go under to the Store quick and see how this was setup.

We're going to grab all of this, go back under Pages, go back under Sprockets, and make sure that it has that custom field that that category's page is going to be looking for, but since we're on Sprockets here, we're just going to give it the Sprockets portion and hit Add Custom Field. Update. And then for Sprunklers, we're going to do the same thing. Categories, and give it the sprunklers, Add Custom Field, and Update. Now, if we go under the Sprockets page, it's just going to show us products that are under the Sprockets category.

If we go back to Store, and we go to Sprunklers, it's just going to show us categories in the Sprunklers. That's how we're recycling that category page for both the store homepage and subcategories. So that's creating a custom category page using custom fields for our store homepage and category pages. Now, we're ready to move on to other areas of the site.

Show transcript

This video is part of

Image for WordPress 3: Creating and Editing Custom Themes
WordPress 3: Creating and Editing Custom Themes

40 video lessons · 51136 viewers

Chris Coyier
Author

 
Expand all | Collapse all
  1. 6m 44s
    1. Welcome
      1m 19s
    2. Using the exercise files
      5m 25s
  2. 40m 42s
    1. Reviewing the client spec and deciding on WordPress
      6m 50s
    2. Reviewing assets and resources and creating a mood board
      8m 41s
    3. Building a home page mockup
      11m 26s
    4. Finishing the home page
      12m 27s
    5. Planning the rest of the site
      1m 18s
  3. 1h 8m
    1. Starting with a base project
      3m 6s
    2. Writing HTML code for the home page
      12m 7s
    3. Starting the CSS: Creating the header and basic style structure
      11m 28s
    4. Styling the Navigation panel
      10m 59s
    5. Styling the sidebar
      7m 55s
    6. Styling the home page, pt. 1
      8m 20s
    7. Styling the home page, pt. 2
      8m 17s
    8. Finishing the CSS
      3m 14s
    9. Moving on: One page is enough
      2m 43s
  4. 1h 56m
    1. Setting up WordPress and MAMP on a Mac
      6m 7s
    2. Setting up WordPress and WAMP on a Windows computer
      5m 38s
    3. Modifying important settings
      6m 26s
    4. Starting with a blank theme template
      4m 35s
    5. Introducing template file structure
      4m 55s
    6. Breaking up the HTML
      9m 53s
    7. Building the sidebar
      3m 54s
    8. Building the navigation
      7m 20s
    9. Showing one recent post
      4m 1s
    10. Fetching external content
      8m 23s
    11. Creating a custom home page
      3m 30s
    12. Introducing custom fields
      5m 23s
    13. Creating custom product pages
      9m 52s
    14. Creating custom category pages
      15m 39s
    15. Creating the blog home page
      5m 39s
    16. Creating a single blog entry page
      4m 15s
    17. Implementing comments
      5m 57s
    18. Finishing the home page
      4m 45s
  5. 34m 17s
    1. Will this work with WordPress?
      3m 10s
    2. Using JavaScript in themes the right way
      8m 35s
    3. Implementing something fun with JavaScript
      7m 53s
    4. Introducing plug-ins
      6m 31s
    5. Setting up security
      8m 8s
  6. 2m 7s
    1. Goodbye
      2m 7s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed WordPress 3: Creating and Editing Custom Themes.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.