1.2 WordPress Coding Basics: Adding Hooks to Your Themes

[MUSIC] Hello, and welcome to this Tuts+ Coffee Beak course on adding hooks to your theme. In this course, I'm gonna show you how to use two functions to add both action hooks and filter hooks in your themes. Now action and filter hooks are incredibly useful, because they mean that if you or anybody else is adding extra code to your theme at a later date, you don't have to directly edit the theme. Instead of doing that, you could hook a function in from a plug-in or from the function's file within a theme. Or indeed within a child theme of that theme. So let's have a look at the functions we'll be using. Firstly, we've got this do_action function and you use this to add an action hook within your theme. And we'll code that into quite a few places in our theme. And then secondly, we've got the apply_filters function, and this will add a filter hook. Now there's a key difference between the two of these. Do_action is empty, so when you add it, you give it a name and that's it. And then if you attach a function to it, that adds code in in that spot in your theme that's completely new. Apply_filters works differently. Apply_filters, you wrap around existing code or text. So for example, if there's some static text within your theme, you wrap a filter around it. And then anybody who wants to can change that using a function that they attached to that filter hook. So let's start adding these to our theme. Here's the theme that I'm working with, and it's got a number of theme template files. Now I'm gonna start by adding a hook before the content, and I'll do that in my index file. So here I've got a couple of divs surrounding my content. So firstly there's a container which wraps the content and the side bar, and then there's the content itself. So within that, before the loop, I'm gonna add the do_action function. And that's how I add my action hook. So later on in a plug-in or in my themes function file, I could write a function that outputs some extra content there, for example. And I could hook it to this and add whatever I wanted to. Now let's also add one after the content. So I'm gonna copy that and paste it in, Here after my content, And edit it. So now I've got two actions above and below my content. Now I find an after content hook really useful for if I want to add something like some featured posts or some recommended posts based on the posts somebody's currently looking at. Or the other thing you might use it for is a call to action. So after somebody's read a post, they might be inspired to do business with you or buy something from you. And you could add a call to action button or text here, without having to add it manually to every single post or page in your site. So now we've done that to our index file, we also need to add it to other files in our theme. Because otherwise it'll only appear on pages or posts that are using that index template file. So what else do we need to add it to? There'll be the single.php, the page.php, and the archive.php. Now I think it's a bit of a pain having to write it again and again. So instead of doing that, I'm gonna edit the header file. So let's open our header file and our index file, and I'm gonna take this opening code here. So that's the opening container div and the do_action, and I'm gonna add those into my header file. But before I do that, I'm gonna open up the other files that are affected. So the single file, you can see that's got the same code here, the page file, that's the same. The author file, again it's the same. The archive file, which is the same. The 404 file will also be affected, and the search file. So let me show you what I'm gonna do with one of them, and then I'll quickly run through the rest of them. So here's my index file, I'm gonna take this code here, I'll cut it. I'll open my header file, And I'll add it right at the end. So what that does is it transplants that code from my index file to my header file. It makes no difference the way it runs in my theme. It just means I'm only adding that action hook once in my header file instead of having to write it loads. Now you might think that this is all a bit long-winded, because I'm gonna have to edit all of the files anyway, but I think it makes my theme a little bit neater. So I'll save that and that. And then all I need to do now is remove that, the opening divs from my single file. So I'll save that and close it so I know I've done it. From my page file, save it and close it. From my author file, save and close, from archive, From 404, And finally from search. So there's my index file. Now let's do something similar with this here. Now this action here goes before the side bar, not before the footer. So here, let's close the header first, I want to edit the side bar file. So opening the sidebar, I want to close that container, And before it add that action hook. So I'll cut that and add it to my sidebar Just tidy things up a little bit. And you can see how, again, that's the exact same code, but it's just in a different file. So what I'll need to do is delete this closing div from my other template files before the sidebar. So let's open them all up again. So make sure it's this div here that you delete, not the div before the footer. So I'll delete that, save and close, and then I'll repeat for all the rest of them. That's my sidebar, so I'm gonna close that. So I've implemented that in all of my theme template files. Now if you wanted to, you could skip that stage there and you could simply add those action hooks in all of those template files. But I think it's neater just to do it once. So you can see the first one is in my header, do_action tutsplus_before_content, and the second one is in my sidebar, do_action tutsplus_after_content. Now while we're in the sidebar, let's add another action hook. And I'm gonna add one that's actually in the sidebar. So that's an action hook inside my sidebar. Now there's no enclosing markup around that. So if you do attach anything to it, you would need to add an assigned element or something like that, so that you could style it correctly. And what you'd do is you'd use the assign_class sidebar from here. But I'm not gonna add that in my theme, because otherwise it's adding code that might not be needed. So I'm just gonna add that action hook there, so that's an action in my sidebar. And then finally, I'm gonna add an action to my footer, and I'm gonna add it after these widgets. So I've got a do_action tutsplus_after_footer, which is after my container for the footer. Now if you wanted to, you could add it inside that container, but I'm going to add it here so I can use it for a colophon or something like that. And I'm going to also add one before the footer. So I'll edit that so it says before footer. And I'll tidy up my indentation, so I've now added five action hooks to my theme. One before the content, one after the content, one in the sidebar, and one before and after the footer. What that means, if I wanted to add any content or code to those spots in my theme or in my site, using a plug-in or a theme functions file. I could do so at a later date by hooking into those action hooks and not by directly editing the theme files themselves, which makes things much more flexible. Because what it means is that, for example if you're running a multi-site installation and you're using the same theme for multiple sites, you don't have to edit the theme for more than one of them. Well, you don't even have to create a child theme if you don't want to. You could just add a plug-in to each of those sites with the extra code that you needed. So that's action hooks. So the next thing I'm gonna do is add a filter hook and I'm gonna do that here in my 404 file. And I'm going to apply it to this here, get_search_form. Because this gives somebody the option in a plug-in or in the functions file to change what's output here. So to do this, we use the apply_filters function. So what that does is it applies the tutsplus_after_search filter to this code here. So by default, WordPress will simply run this code here, get_search_form. But if I was to attach a function to this filter here, it would change what's output. So instead of being an empty hook, which is what an action hook is. It's a hook that's already got some default content added there, and in that case that's the search form. I find this really useful for things like custom loops, where I might be adding a heading and I can then filter those. So I'll save that, that's my 404 file. And I've just realized I've called it tutsplus_after_search, I want to call it tutsplus_after_404. So my theme now has six hooks. It's got those five action hooks that we added at the beginning, and it's got one filter hook. And that's called tutsplus_after_404. If I wanted to, I could create a tutsplus_404 filter hook and enclose all of the content of my 404 page in it. But instead, I'm gonna make things a bit simpler and just do it for this search form here. So that's how you add action and filter hooks to your theme. What you'll find is having done this, it doesn't actually make any difference to your site at all. The same code is gonna be output, but what makes a difference is later on, when you start writing functions and attaching them to those hooks. And that's covered in another Coffee Break course on Attaching Functions to Hooks. I hope you found this course useful, thanks for watching.