On today’s episode, we are going to talk about hooks, actions and filters right here on Your Website Engineer podcast episode number 346. Hello, everybody. Welcome back to another episode of Your Website Engineer podcast. My name is Dustin Hartzler. And today, we’ve got some great information when it comes to hooks, and actions and filters. Kind of a more developer level podcast today that continues with the theme of this month. Last week, we talked about the template hierarchy in WordPress, and before that, we customized WordPress to fit our specific needs. So, today, we’re going to look into hooks, filters and actions.

Alright. Today, let’s dive into some announcements. The first one is coming from WordPress.com and the headline is, “You can now schedule your social media posts from WordPress.com.” You can also do this from the jetpack plans if you have a professional and a premium plan, you can go ahead and do this as well, but it gives you the ability to go to the sharing menu inside of the WordPress editor and you can pick when you want this to go out. You can pick the day and the time and it will automatically tweet out or send a Facebook post or a LinkedIn post when you have those set up. You also can preview them so you can see exactly what they look like, and you can see all the previous shares so you can see how many people have shared your post before it’s published again. So, this is something if you wanted to send out a tweet or a Facebook post for the first time, or if you wanted to do it for the second time or third time, you can do this now with this automatic sharing feature. So, that’s from WordPress.com.

In the Jetpack space this week, Jetpack professional plans now introduce unlimited access to the 200 plus commercial themes. So, if you are using the Jetpack professional plan which comes in at $299 a year or $25 per month, you now have unlimited access to more than 200 commercial themes. There have been the free themes from WordPress.com in there for a while, and now you will see these premium ones if you’ve upped it. If you just have a free version of Jetpack, then you will see the ability to upgrade to a higher plan when it comes to Jetpack. So, that is that in the way of Jetpack.

And the next piece of information comes in the ecommerce space, so that kind of is all three of the pieces of the puzzle from automatic. But, this is for iThemes Exchange. And, this announcement is that AJ Morris acquires iThemes Exchange. So, this used to be part of iThemes’ suite of products. This is their ecommerce solution, and that has been released or now is in the hands of AJ Morris. So, it is a transition period probably through the middle of August. You’ll still get support from iThemes.com, but after that, then it’s going to go over to AJ Morris and his team. So, I’m sure if you are a subscriber, you got information about that in the last couple of weeks.

And, the last fun announcement that I have today is something from a website called Doesmysiteneedhttps.com. And, I just recommend going over and checking out the site because it’s a lot of fun. There are some cool things on there. But, in big text across the top, it says, “Yes. Your site needs https.” And, then, it goes through a bunch of different quotes and some answers. So, the first one is like, “But, my site doesn’t have forms or collect information from users.” And then, the answer is, “It doesn’t matter. Https protects more than just form data. It keeps the URLS, the headers, the contents of all transferred pages confidential.” There’s another remark that says, “I can’t afford a certificate.” “But the certificates these days are free.” “Https is difficult to set up and maintain.” “And now, most of it is just handled by your web posting company.” So, there’s a lot of good information on here especially if you are working with clients or somebody that says, “Oh, I don’t need an https certificate. I don’t need that SSL certificate.” Then, you want to point them over to this page at Doesmysiteneedhttps.com

Alright. Moving right along here, we’re going into the plugin of the week and there’s more than 50,000 plugins. Can you believe that? In July 2017, there are more than 50,000 of these free plugins on the WordPress repository. Today, I want to share with you one called Admin Menu. This one’s a cool one. It is a newish plugin. I mean, it doesn’t have but 100 active installs, but this gives you the ability to go in and you can rearrange your admin menu, and you can remove and get rid of menu items that are no longer needed, or maybe you rearrange them and you make them much easier and much simpler for your clients to use. And so, that’s what Admin menu does. There’s a pro version as well, but you can go in and they’ve got a demo and they’ve got it all set up. The pro version’s featured over on CodeCanyon.net And, it’s just a great way to be able to customize that left-hand menu area of WordPress without knowing any code or writing any code, or hiding things in some other way. So, that’s Admin Menu, and you can find that in the show notes for episode number 346.

Alright. Today, let’s dive in and talk about hooks, actions and filters. And, this is going to be yet another somewhat hard of a podcast to try to explain via audio. I’m going to do my best to put some examples in the show notes for this episode. But, I wanted to just kind of dive in and talk about them because if you’ve been in the WordPress development for any given amount of time, you can’t ignore hooks for very long before you have to kind of dive in and just try to figure out how they work. So, modifying WordPress is a no-no. Like, we never want to go in and just modify WordPress to make it do what we want. But, we’ve given us these opportunities to go in and change functionality by using hooks. So, that’s kind of, in a nutshell, the hooks are places in the code, and these are just not in WordPress, but they’re also found in themes, they’re found in plugins. But, these are areas in the code that allow you to hook into them and make some sort of action or do something that’s a little bit different. So, let’s dive in and get the real definition.

A hook is a generic term in WordPress that refers to places where you can add your own code or change what WordPress is doing or outputting by default. There are two types of hooks. There are actions and there are filters. An action in WordPress is a hook that triggered at a specific time when WordPress is running to let you take an action. This includes creating a widget when WordPress is initializing or sending a tweet when somebody publishes a post. A filter in WordPress allows you to get and modify WordPress data before it’s sent to the database, or before it’s sent to the browser. Some examples of a filter would be customizing how excerpts are displayed or adding some custom code to the end of a blog post, or making all your blog posts display in comic sans and all capital letters in blue text. Like, you can filter out all of that even in the dashboard. You can do all of the text and turn it into comic sans.

So, at first it may be a little confusing to figure out whether it’s an action or filter, but the important difference to think about is when you work with a filter, you’re going to receive a piece of data, and then at the end of the function, you have to return the data back. So, if you’re going to do something with text, for example, maybe you want to make sure all of your titles in your WordPress site across the entire site have capital case, or they call it title case sometimes. So, what you can do is you can use a filter to look for the title, and then, it will go and convert everything to upper case letters for the first letter of every word. And so, you think about you’re taking the data, you’re taking the titles of your post, and then you’re going to make them all upper case, and then you’re going to give the titles back and then WordPress will display them as capital letters. That’s just one example that I thought of here as we’re talking about filters. When there’s an action, you are not receiving or modifying data. You’re simply just given a place in WordPress’s runtime where you can execute your code.

Okay, so, let’s talk about just some reasons to use hooks. Maybe these examples will trigger some things in your mind and then we’ll talk about, we’ll try to dive in and give some real-world examples. So, why would you want to use hooks? Maybe you want to change the behavior of something that’s going on in WordPress. Maybe you don’t like the way that your WordPress theme is doing something. Maybe you don’t like the way that this plugin is actually operating, but you don’t want to go in and modify the code because if you update the plugin later, like I’ve talked about before, you’re just going to override all those changes and you’re going to lose them. So, that’s one reason. Maybe you want to make changes easily. Once you’ve understood the concepts to make a action or a filter, then maybe you want to just make some incredibly quick and complex changes very quickly. That’s another thing you can do hooks for. Or, maybe it’s a reason that you want to do the same thing on every site. Well, instead of going in to modifying or doing things, you can create this little snippet of code, and then use that snippet of code on every one of your websites.

You can change your theme’s behavior at the source rather than trying to retrofit an inappropriate solution with html and CSS. I know that I’ve done this before like, “Oh, I’m not exactly sure what I should be doing here. Maybe I’ll just try to hook on to this ID in this class and then just kind of fudge it with some CSS.” Well, you don’t necessarily have to do that. You can hook in, you can take out what you don’t need, instead of just hiding it with CSS. That’s another thing that you can do. You can make your own changes easy to understand, easier to debug because your code is reduced to a minimum. You’re not dealing with the thousands of lines of code inside of WordPress or the thousands of lines of code in a plugin or theme. And so, that’s another reason that you may want to use a hook with an action or a filter. You can enable or disable your changes really easily because even though your code is small, it’s just one part of a function’s .php file. Maybe you put it into a custom functionality plugin. You can toggle it on and off and you can see exactly why that error is happening or what reason there may be some issue if you’re doing some sort of troubleshooting.

And, your changes are relatively upgrade-proof because you no longer need to copy or paste or duplicate WordPress or any themes or plugins or core files. I know in the past, I’ve done this. Back in the day before I knew that you don’t make modifications to a theme or a plugin, I would make the adjustments right in the plugin and then, I would make detailed notes of where I’ve changed things line, by line, by line and where I made these adjustments. So then, if the plugin updated, I could just go back and I can revert all of those changes. So, that’s another thing. If you’re using a hook, you can just go ahead and it’s always going to work whether you upgrade or not.

And then, another really cool thing is you can share knowledge and swap snippets of codes with other users. A great example of this is the storefront theme from WooCommerce. This is one that there’s a lot of snippets online and it’s like, “How do you do this?” And then, people can have a four or five-line snippet which is a hook that will say, “Oh, here’s how you do this and here’s how you modify this.” They use hooks all the time within WooCommerce. Maybe you want to rearrange how the product is displayed and you want the add to cart button at the top instead of the bottom. And maybe you want the product details at the top instead of the bottom, or whatever. You can just rearrange the order that those hooks are called in, and it will go ahead and work exactly the way you want it to. So, that’s a reason why to use hooks. I’m sure you’ve all seen these before if you’ve Googled some sort of code, like, how do I do this or what do I do this, and if the answer has been, “Take this information, this bit of code and paste it into your functions.php file,” most of the time that’s either an action or a filter doing something to modify the data for your theme, or your plugin or a WordPress core.

So, let’s talk about just a little bit of how they work. Let’s talk about an action first. So, what we can do with these actions is it basically tells WordPress when to add this additional code. So, what this may look like, is, say for example – and this is kind of a silly example – but, say this person – let’s call him Joe. Say Joe, you want to send him to get paint when comes to your house. When Joe comes to your house, tell him to go to the store and buy some paint. So, what you would do is you have to say – you’d add this action – you’d have to say after Joe arrives, send Joe to get paint. And then, you’d write the actual function that says, “If Joe has keys, and if Joe has a car, and if Joe is at my house, then say, ‘Joe, please go to the store.’” And, you set this whole function up, and then the function will run after Joe arrives. So, that’s kind of one way to think about an action. We watch for a particular thing to happen – Joe arriving at our house. That was the first thing we did. Once we did, then we did something. We sent him to the store to get paint. In programming terms, this is added an action to call the “send Joe to get paint” function, which prints the message to the page, and it says, Joe, please go to the store. Okay. That’s an action. That’s what an action is.

Now. Another made-up scenario is a filter. And let’s say when Jack comes by bragging about how he’s the best, tone down his boasting. This is a silly one, but let’s just go ahead and look at this. This is what it may look like in php. You’ll add a filter that will say, “Jack’s boast,” and then it will run the function, “cut the boasting.” And then, you can have a function that says, “cut the boasting,” and then it says, basically, “replace every time he says ‘best’ with ‘second best’ and then spit that back out.” And then, say at the end then, “however Joe may outshine me in any day.” So, you can go ahead and you can – you’re basically saying whatever Jack’s saying, we’re going to change every word that says “best,” we’re going to change it to “second best,” and then we’re going to truncate on the end of it. We’re going to say, “But, Joe can outshine me any day in anything.” So, we can do that.

That’s kind of what a filter is. So, what do we do there? We looked for a particular thing that we wanted to change, and this was Jack’s boast. So, every time Jack was boasting, we want to change it. When we found it, we changed “best” to “second best,” and then we added another phrase at the end. In programming terms, we filtered the output by calling the “cut the boasting” function, which replaced part of the string and appended another string, like the part at the end that says, “However, Joe can outshine me every day.” There’s an argument in this, and it basically says, “I’m the best,” as a basis for our change, and then, we return the string at the end of the function. It’s very important at the end of every filter that you return something; otherwise it’s not going to work. Otherwise, as the program runs, there’s going to be no output for Jack’s boasting. It’s just going to be blank all of the time.

So, those are just two examples, and I’ve got links in the show notes, or I actually have the code in the show notes that you can go and look at and see exactly how they work and how these two actions in filters work. So today, I just wanted to share with you what a hook is and how filters and actions are different. And so, remember and action is we’re going to do something at this given point in time, and a filter is, okay, we have this information. We’re going to do something else with it before we give it back to WordPress. So, that’s what a hook and a filter are. And, you can do amazing things. You can do tons of things. There are so many plugins and themes that have these hooks built into them so you can go ahead and make the customizations that you need. It’s a lot of fun and you can do a lot of amazing things. It’s really fun in the support world to say, you know, when somebody asks, “How do you do this?” and you can write this four-lined function and it can make all the changes. It’s really cool and I highly encourage you, if you’re interested in writing any sort of code, go ahead and check out the show notes for this episode and just kind of dive in and play with hooks, make and action, make a filter and just see what happens.

That’s what I want to share with you this week and until next week, take care and we’ll talk to you again soon. Bye bye.