Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
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.
Get unlimited access to all courses for just $25/month.Become a member