7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.2 Pulling in Categories

We want to display a list of categories. In this lesson, we'll hit the /categories endpoint and use its response to build a menu.

3.2 Pulling in Categories

We know how to retrieve posts and include the author information with the WordPress restful API. But we also want to incorporate categories, because that allows us another way of viewing posts. So, before we get started, there's a few things that you need to set up. First of all, I have added a second category. Now to do that, you go to posts and then categories and then just add a new category. I've called mine 'this is a second category' just so that we know without a doubt that this is a second category. And once you have that second category, you want to assign that to one of your posts. So you will want to edit and then scroll down to where you can specify the categories and choose the category that you want. Then click update, and you will be good to go as far as that is concerned. Now as far as the code, we want to add a couple of references to jQuery and to the bootstrap JavaScript library. So what I did is i just used the CDM for jQuery and I used a local file for bootstrap. The reason why I'm using the local file is because I'm using bootstrap locally to begin with. So you will need to add those references to your index HTML because we are going to be adding some navigation to our website, at least as far as the UI is concerned. We're going to use bootstrap's navigation UI, to display our categories and we're going to use a drop down menu to do that. So let's go to app js and let's go ahead and start incorporating our site navigation. So we're going to create a new component simply called site nav. Let's go ahead and import that as well, so let's say, imports site nav, from and we don't have this file yet, but we will here in a moment. We'll call it site nav and then, let's just add that file. So, new file, we'll call this sitenav.js. We want to import react from react. And then we'll write a class, site nav extends react, component. And as far as the render method is concerned, It's going to be fairly simple. So I'm going to paste in some HTML because, well, it's a lot of typing. So here is our navigation. It's very simple. All it has is a link to home. It says Headless WordPress and then we are going to have a drop down. And that drop down is where we're going to display our categories. So let's save this, let's make sure that it looks okay in the browser. And it certainly does not, and there's the problem. You likely forgot to export your component. Yes, I did. So this is going to be export default class site nav, we'll let this refresh. Once again, we have an issue, and it's the render method. We did not return anything, that's kind of important. So, we will return. Now, we should see something, and we do. So, we have WordPress. Or Headless WordPress, then we have categories and our categories will be listed underneath there. So we need to go to our API class, and we need to add a method for retrieving our categories. So let's just call it categories, we could incorporate a category ID here, I don't know if we're actually going to need that so we're going to omit that at first. And if we need to then we will add it again. Now, the embed flag is not used here so we can just get rid of that completely. And the URL, instead of posts, is going to be categories. Now, before we go any further, let's look at the payload of the categories in white. So in my HTTP debugger we are going to make a request for categories. And there's nothing really surprising here. We're going to have an array of objects, and those objects are of course going to have information about the categories. So the first one in my list is the one with an id of two, the name is 'this is a second category', and then there's the slug that I created for it. The second object is the uncategorized category, which is kind of a misnomer, but that's what they did. Now, one thing of note here. Underneath the links key there is this wp:post_type and then we have a URL. This is a very important URL because this allows us to retrieve our posts, but notice what we're doing here. Notice what the URL is doing here, it's adding categories=2. So, whenever you want to filter the post based upon a category, you use the category query parameter and you set that to the categories that you want to include. You do the same thing with authors and tags as well. So, this is how you can filter your posts. So, if we wanted to retrieve our posts, we would need to then retrieve the URL for this wp:post_type, so we'll keep that in mind. So we have our method for retrieving our categories. So let's go ahead and use that inside of our site nav component. And I'm going to cheat a little bit and just copy some of the code that we have for component did mount and this is for the post list. Only reason why I'm doing this is to save some time. So, copying and pasting, recalling categories, and then we're going to set the state. Now we also need our constructor here so let me go ahead and copy and paste that. And we will get started displaying our categories. So the first thing we need to do, of course, is build these LI elements that will serve as the items in the drop-down menu. So we'll say, let items = we'll say this.state.data and that's gonna be a problem because our state has posts. We aren't working with posts, we are working with categories. And I'm going to use data because data's easier to type than categories. So we will use the map method and we will need two things. We need the item within the array that we are working with. Then we also need the index so that we can set the key property on our LI element. So key = index and there is going to be a link here but we haven't set that up yet. And we of course will, but let's do that in a few moments. For right now, let's just output the names so that we can make sure that everything is working okay. So we'll say, item, I believe the property is name. If not, we will definitely find out. And that should be it, no, we need to import API from API, and that should be it. So let's make sure that the browser works, it does. We did not output the items, did we? So let's go back to site nav and we want to output the items. So now we should see our items within the categories and we do, it of course isn't styled because we don't have that link there. But there's nothing stopping us from going ahead and adding the link and then in the next lesson you'll add the components and code for actually performing that navigation. So, we want to import link. And we get that from react-router. But this is react-router-dom. So that is all we need from that package. And then inside of the LI elements, we'll simply have our Link element. And we are going to have a URL that says category, followed by the category ID. So, this is going to take us to, I guess we can call the category component that is going to display a post-list but instead of being a general post-list, it's going to display the posts for the given ID. So, in the next lesson we get to have some fun with inheritance, or we get to re-factor our code to use some wrapper components. I don't know what we'll do yet, we'll just have to find out. So we have our Link element, at least the opening tag. We need the closing tag. And this link is not going to work, but as far as the browser in concerned, it's going to display the items within the drop down correctly. So, we have our categories listed, we have them as part of the UI, so that the user can click on them. Now, in the next lesson we just need to add the ability to display our posts based upon the given category.

Back to the top