2.4 Hooking the Function to an Action Hook and Adding Styling

Hello, and welcome back to Tutsplus course on WordPress plug-in development. In this part of the course, we will continue with our plug-in to output a section menu. So, you may remember, that in an earlier part of the course, we added an action hook to the sidebar.php file in the theme. So let's take a look. So if we go back to WP content and themes, here's our tutsplus plugin development theme and sidebar.php. So you've got two options here. You can either hook it to action that you've added to your theme, which is what I'm gonna do. And the reason I like to do that is because it gives me a lot more flexibility. I can put that hook in all the template files in my theme if I want and then within my function by specifying which pages I might want the sidebar menu to appear, it'll only appear in the relevant places. And also, if I want to add extra code in that spot I can do so later by hooking into the exact same action hook. So I like action hooks, but what you could do instead Is simply type The name of the function, which is tutsplus section menu. So, if I type tutsplus section menu in the spot in my fame where I want the menu to appear, it will output that function and it will behave in exactly the same way as if I hooked it to you. So that's one way of doing it if you don't want to add a hook to your theme, I'm not going to do that. Instead. I'm gonna keep that hook there. And then I'm going to use add action in my plug-in file to hook it to that hook. So add action has two parameters. The first one is the name of the hook, so we get that from the sidebar. So I'll paste that in there. And then the second one is the name of the function. Which is tutsplus section menu. So, I'll paste that in there. And then I save my plugin file and go back to my site. So, let's refresh the locations page and see what we get. Right, as you can see here, my sidebar has completely disappeared. So, let's take a look and see where there might be a problem. So if I inspect my code, we can see here, here's my section class section menu. And in the h2, there's nothing there. So let's take a look at the code for that in the plugin. Here's the code for the h2. And I can see a typo here, which I really should have spotted when I was typing it. I'll try saving that and see if that works. And here's my locations. So let's take a look at where they appear. What's happening now is that they're appearing below the content. They're not appearing over here in the sidebar as they should. And that's because I need to add some additional styling. So what I'll do is I'll use the same classes that my fame uses for these widget areas over in the sidebar. So let's inspect the code. So I've got an aside, Id secondary and then I've got a section with a class of widget matter. I've also above that, let me just move this across a bit so that we can see. I won't be able to resize this so we can see what it would look like. Let's just, here we go. So we can see a bit better. What that will look like on a wider layout. So here for my secondary sidebar, we have got layout styling for sidebar, which puts it over here on the right and adds in what looks like a margin. And then under that, we've got a widget and that add some styling for this border here and the title. So I'm gonna add both classes sidebar and widget to my plugin. The element I need to look at is this one here, section class equal section menu. So I'm gonna change that to section menu, sidebar widget. Now, you could either do this by just using the CSS that's already in your theme. Or alternatively, you could add styling to your section menu, either in your plugin or in your theme. And in the later part of the course, I'll show you have to include a style sheet for your plugin and that's dialing for the content that's output by the plugin. So if I save that and go back to my site, I'm gonna close this inspect window and go back to 100%. I'll refresh it. And there we are. We've got locations, pages Beijing, Cape Town under New York, San Francisco. So let's see if we can get rid of that pages there. So the way we do that is by adding an extra parameter to our arguments, forget pages. And for WP_list_pages. And that is title list item. Let me put that in quotes. So that now is gonna be empty. So that is to ensure that no first level title appears. So let's save that and go back and look at site and you can see that now gone. Now I want my location title to look more like these title here with the styling they've got. So let's take a look at inspecting the code for that. So Class equals widget title. So, I'm gonna add class = widget title. To my H2 here. And again I'll save that get rid of the inspection and refresh, and there we go. So I've now got a nice list of locations when I'm in my main location's page that look just like the other side bars in my theme. And if I click on one of those locations, I get the same side bar menu here. Because that's detecting that this is further down in the tree. It's finding the top level page, which is locations, and it's using that as the parent. So let's take a look at other parts of the site. So about us also has some sub pages. And if I go to any of those, you'll see that the same about us menu applies. If I go to blog, it does not appear because of the conditional tag that I used. And also if I go to home it does not appear because the homepage does not have any sub pages. And I think the same will apply to contact. So that is how you create a plugin for a sidebar section menu in your site. In the next part of the course will move on to creating another Plugin. And this one will be quite different because it will customize the WordPress admin screens. See you next time and thanks for watching.