Build a basic component

(Note: click here to download the exercise files referenced in this video.)

Let’s start by wiring up the core related post component. Under template-parts/content, you’ll find entry_related.php. It’s a new file that contains what you see below: it’s just an h2 that gets output:

Then, there is an entry.php file in the same folder. Down below the article element, there is a conditional statement that says if we’re on a single post, then get the template part entry_related. (Which is the one we just looked at that outputs the h2.)

Next, start a development process by running “npm run dev” in your terminal so you can see the output in the browser. You should see a “Related posts” section appears after the main post, but before the previous and next navigation:

In this video, we’re going to build the basic component that exposes a template function we can use in entry_related.php to pull in some content. The first step is to create component folder and file. You’ll remember, all components sit under the “/inc” folder. You can see them here, and each component contains a folder and then a file inside just called “components”.

Next, create a new folder called “Related_Posts” and inside it, create a new file called “Component”. (Make sure to capitalize both the folder name and Component.php.)

Now, we want to introduce you to one of the most advanced coding techniques out there: stealing code. There is no point writing code from scratch if part of the work is already done, and you just need to modify that work.

What we need to start is a different component that does something similar to what we want to do, and there are several options available here.

The one I’m going to use is the Comments component. The reason is the Comments component does the two things I need the most in my component:

-First, it exposes a function, so it creates a new template tag that is used somewhere else in the theme, and I need to do the same: I need to expose the template tag I can use.

-Second, it enqueues a script: in action_enqueue_comment_reply_script(), it enqueues a script. The functionality is going to be Javascript-based, so we need to be able to enqueue a script.

I’m going to show you how that works. I’ll scroll down and highlight stuff I think I will need. Let’s see, we’ll go all the way down to here, this template_tags function, just copy it, paste it in, ah-ha, we have a new component! Well, not quite, we have to do some changes here. So off the top, we need to give it a proper name. So right now it’s Comments, we need it to be Related_Posts, and then we have to give it an actual name space. So again, Related_Posts. Then we have a list of all the dependencies and functions that are used inside this script, but since I don’t use any of these core functions here, I’m just going to take all of those out. But I’m going to leave Component_Interface and Templating_Component_Interface in place. That’s because I’m going to create a component, so Component_Interface needs to be there, and the Templating_Component_Interface is what allows us to expose template tags to the rest of the themes so we can actually use them. All right, scrolling down, you can see here it says class for managing component UI, I’m going to say class for related posts. Then it says that this class exposes a template tag called wp_rig the_comments, so I’m going to change this later, once I’ve created my function. Then we set up the actual class, and the entire component is wrapped inside this class, and you can see the class implements Component_Interface and Templating_Component_Interface, which are these two dependencies up here. Inside the class, there are a couple of things we need to do. First, we need to set up a unique identifier for this theme component, so I’m going to give this identifier related_posts so that it becomes an entity of its own right in WordPress. Then directly below, we have this initialize function that allows us to initialize different things, like add_action calls. I’m just going to take the actual call out but leave the initialize function in place, so we can use it later. Then scrolling down, we have this section, get template tags to expose as methods in the Template_Tags class. So this Template_Tags function is the one that allows us to build the custom function inside the component, and then expose it as a template tag to the rest of the theme. What we do here is give the new function a name or label, and that will be the label we use to actually call the template tag out in the theme, and then we point at a function inside the class here. And to make it simple, it’s a good idea to keep these the same. The function I’m going to build is called display_related_posts, and I’ll just take that and copy it and paste it in over here. And then of course I need to actually create that function, so directly underneath, I’ll set up a comment for myself. Display the related posts. I’m going to make some space so you can see what’s going on, and then here, I’ll set a public function display_related_posts, and inside this public function I want to just echo out, like that. Then I need to close my class so that my PHP is complete. And I can save the component file. Now that I’ve created this component, I need to register it with WordPress so it’s aware that this component exists in the first place. That’s done under the inc folder, in a file called theme.php. If you scroll to the very bottom of theme.php, you’ll find this protected functions get_default_components, and these are all the available components in the theme. So all you have to do here is add your new component to this list, and it is the folder name you’re looking for here, so mine is called Related_Posts. Then the final thing we need to do is call our new function, call display_related_posts. From entry_related, so in place of this call here, I’m going to go inside and say wp_rig, because we now have this function exposed, and output display_related_posts. And I can take away this, because that’s the end of the PHP file. Go back in my browser, and if everything works correctly, it’ll now say Related Posts here. Just to make sure this is actually the new code, I can say New Related Posts, like that. Let it reload, and it says New Related Posts. Okay, so now we have a component, we’ve exposed the function, and everything works the way it’s supposed to.

More from this course: