 Hi, good evening everyone. My name is Edmund and today I'll be talking about hooks and introductions to WordPress development. Probably, I hope it's not as scary as it sounds. I'll try to make it less tacky and more of, hopefully, the main takeaway is for you all to understand why WordPress is such a powerful and extendable software. A bit of myself, about myself, I'm a developer. I've been working with WordPress for about, I think, 4 to 5 years. I'm working at this local agency called Nerdmedia, where we focus on WordPress sites and we build web applications as well. So, a bit of my background. I studied Internet and multimedia back in school when I was in Poly. Didn't really like it. Maybe because of the exams or projects. We, in school, just want to have fun. So, after that, I didn't expect myself to continue programming or web-related stuff after I finished school. And then, somehow or another, I managed to, at first I got into project management with WordPress sites. That was my first encounter with WordPress. I think it was back in version 3 or something. And then, slowly, I began to, I mean, when I'm managing developers, a lot of issues I wish that I can solve myself. I don't have to wait for them. So, slowly, I went to do some research and then learn about the basic HTML and CSS, things that I did learn in school because back then, we were still using Photoshop to slice all the images in very old school. So, from then on, I decided, I actually realized that, actually, it's not so bad, it's quite fun. And then, gradually, I got, I got in one to WordPress development, learned all the core concepts. And so, right now, I'm a developer doing applications and websites solely on WordPress. Okay, so, maybe just a show of hands. How many of you have not heard of the term hooks? Okay, and how many of you are actually looking to go into WordPress development? Okay, okay, that's good. I was, I was afraid that no one is gonna raise up their hands. Now, I'll probably just end my talk. But, so, what is hook? Is this, I'll just go through some definitions, probably you guys will not understand. But, at the end, I'll show you guys some code examples. Hopefully, it will give you guys a clearer picture. So, this is a generic term. Hi, this is a generic term to describe this place in a code base to, that allows custom functions from outside the application to get hooked into the program. For example, in WordPress code base, we have this, imagine, this huge function that creates a post, for example. And then, at the end of the post, the function, they place a hook over there. So, what this hook does is it allows developers, plugin developers to create their own functions to hook into that area of the code. So, when the code gets processed, when it reaches that part of the hook, all functions attached to the hook will get executed. So, in my opinion, this is one of the most important concepts to understand when it comes into WordPress development, because it is the most common way to interact with WordPress. You do not want to modify the original files, because when you update the software, everything gets erased. So, hooks is extremely important to know when you are looking into doing plugin development or theme development or just basic custom changes. So, there are two kinds of hooks. One is the action hook and one is the filter hook. So, for action hook, you can think of it as something that allows you to execute functions, do something. It is all about doing something. A very good example is when you save a post in the backend in WordPress, you can create a custom function that allows you to send an email to whoever you want when you publish the post. So, that is an example of an action hook. It allows you to do something. In this case, it allows you to send email to the person after you click on the post, publish a post. Another example is adding a notification bar at the top of maybe your navigation section. So, maybe you are running an e-commerce site and you want to add a promotional bar at the top, 10% off the kind of stuff. So, with this hook, it allows you to place your content above the navigation bar. So, if you were to do this and if you were to look into the source code, you will see that there is a hook before they generate that navigation bar. So, what the hook does is it runs the hook first, which is where your functions get executed and then after that, it runs the navigation bar. So, that is why your function will appear above the section. So, for action hooks, these are the four functions associated with action hooks, but the two most commonly used ones are do action and act action. So, this is something that I will run through later at the end. And for today, I will not touch on has action and remove action, because I think you don't really need to know this too in order to utilize this action hook. Okay, and next is filter hook. So, for actions, looking at doing something, always trying to execute functions. For filter, we are looking to change something. Changing, it's about manipulating or changing data. A very good example is your WooCommerce add to cart button. So, because by default, you cannot change the text. They don't have that option in their admin for you to change the text. So, what do you do? I mean, other than install a plugin, you can use a simple hook that allows you to change the add to cart text. Just a one-liner for you to make this change. And also, another use case is, so imagine you have a blog post content. And at the end, you want to add additional text. For example, you can check if the user is logged in. You want to add the text log out. And if the user is not logged in, you want to add the text sign up or log in. So, with filter, you're actually changing the entire content by appending text to it. So, for filters, we have these four functions. And same thing, we are just going to touch on apply filters and add filter. And the other two we'll hopefully touch on it next time. Okay, and so this is just to summarize the key differences between actions and filters. For action, like what I mentioned, it's all about executing custom functions, doing something, sending a tweet when you publish a post, inserting your custom table, for example, before the footer, or inserting an image after the footer. It's all about doing something. For filters, it's about changing data. You can choose not to change the data as well. Maybe if in your function, if it fails a certain condition, for example, if you're checking, oh, I want to change this blog post content only if the ID is one. So, if the ID is one, and then your filter will fire, and then your content will be changed. But if the ID is not one, it will just return the original content. So, over here I mentioned, for filters, we have to return a value because the hook gives you access to the original value. So, what you need to do is, no matter whether you're changing it or not, you need to return the value back in your function. And for actions, you don't really need to return anything. You can just run your own custom features if you want. So, over here, action users do action and add action and filters, apply filters and add filter. Okay, so I came across this analogy on, I think it was WPShout.com. So, it describes WordPress as this large factory that generates web pages. And then, so imagine this factory, it has its own internal workers doing some stuff, but it doesn't do everything by themselves. Most of the stuff, they hire contractors from outside to do it. So, these contractors, they don't belong into the factory. They don't belong inside the factory. They are outside waiting for WordPress to invite them in. And how WordPress invites them in is by using this giant hook. So, you can imagine this person as maybe a custom function, writing this hook into WordPress to do its stuff. So, this is an example of an action hook after Nef menu. So, for example, maybe this in this hook appears in the process where WordPress is creating a navigation menu. So, this hook could be at the end of the process. And then, if they want to allow, and if the contractor, if they want to do something after the whole creation of the menu is done, they can write this hook into the factory. And then, this is the name of your custom function, the one that you are attaching to the hook, which gets brought into the factory, which and then it will be executed. So, for actions, action hook, you'll just be brought into the factory and then you just do your own stuff. It's always about doing executing functions. But for filter hook, it's a bit different. I mentioned that filter hook has to return something because you're given a value. So, what this hook does for filter hook, it brings the contractor in between the line of full-time workers. So, they slot them as part of their process. And then, the contractor gets handed the value, the original value. So, maybe the boss tells them that you can do whatever you want, change whatever you want. But at the end, you have to return the value back to me. If not, the whole process will not continue with your break. So, that is what returning value is about when using filter hook. So, it depends on what, for example, if you use a filter hook in the... Stripe? Stripe, I don't think they... I mean, if you have a plugin that uses Stripe. So, maybe they allow you to change certain data and for example, maybe they allow you to change the text on pay now text in Stripe, for example. At the checkout page, you click the button. There's a pay now button, right? Maybe the text, the original text is pay now. And maybe the plugin has a filter that allows you to change that text. So, you can use the filter and change pay now to, I don't know, let's do it or something. So, there are, like in WordPress, there are so many hooks. It allows you to change the blog title, the content, the excerpt, almost everything you can imagine, which is one of the reasons why it's so customizable. So, we'll talk about why hooks are so useful and why you should use them and not be like the person. Okay. So, it's the recommended way to customize and extend WordPress. There are other ways as well, including creating, overriding your templates in the shell team. But if you are looking to do, make changes to your site. The first method is to always look and see if there's a hook for it. And it makes it easier to debug as well because every hook is, it's in charge of a specific process. So, imagine if your website for the blog title, it's not showing correctly, showing some weird characters. So, you probably know where to look for it because there's this filter that allows you to manipulate the title. Maybe another plugin that you have is causing some changes to it. So, at least you know you can narrow down to where to find, how to debug. And it also reduces the reliability of external plugins. So, how many of you actually, when you're looking to do something to your site? The first thing that comes to your mind is, or the first thing that you ask in a Facebook group is, is there a plugin to do this or do that? Okay. And then you probably get replies from other people saying that, oh yeah, you can download this plugin. Sometimes they even introduce you something that you have to pay, like a premium plugin that does 20 other things, but actually you only need to do one thing. So, with hooks, you can, basically the plugins that you download or you purchase, they're just using the same thing. So, as a developer, I think the first thing you should ask yourself is, instead of, is there a plugin to do this? I think it should be, is there a hook to look into to change this, to change that? And when you look into, when you are researching on hooks, you'll probably look into the documentation or source code to understand how it works. So, when that happens, it gives you a better understanding of how this plugin developer is executing certain functions. Why is he placing the hook over there? Every hook is placed strategically at that place. It's not just randomly all over the code. So, when you read through the source code and the documentation, it makes you understand, oh, so this is why the developer created a filter for this, because he wants to allow other people to change this text. He wants to allow other people to insert certain things at this part of the program. And this will be extremely valuable, especially when you're looking into creating your own themes and plugins in the future. And it also allows for reusable custom functions. So, when you create hooks, you're using, all your custom functions are probably going to be inside your functions.php file or inside a small little plugin. So, what you can do is, if it's in the plugin, you can just reuse it for every site that you have. For example, for my case, I created this simple little plugin that allows me to change the login, the login logo, the WordPress logo. It allows me to replace that logo with whatever I want. So, I'll just install that plugin into all my client side, and then we'll just replace the logo with the client's logo. Just a simple hook that allows me to do that. And most importantly, I think, with folks, you don't have to touch all the WordPress, all the call files anymore. Be it WordPress, be it the theme or the plugins, because you know when you edit the call files, everything will get erased when you update the software. So, this is, actually it's the most important reason why you should use hooks. Because a lot of us are, maybe when we first start out, we are tempted to just go in and edit the file inside. Because it's just one line, I can just change the value and then that's it. But in the future, when you update something and then you realize that, oh, my site is broken, why? And then you have to go back to that file and then find out which is the line of code that you actually edited. So, hopefully, I've convinced you so far that hooks is actually a very useful thing to use in WordPress development. And I will show you some examples. Hopefully, it's not so scary. I actually truncated some of the code to make it as short as possible but still understandable. Okay, so this is an example of an action hook. This is actually taken from one of the WooCommerce scripts. It's in the thank you page. So, this do action is actually the action hook. The first parameter it receives is, I should have used this one. So, the first parameter it receives is the name of the hook. So, in this case, it's WooCommerce underscore thank you. And then the second one, it's arguments. In this case, it provides the order ID for your custom function. And we'll get into that in a bit. But this is the most important part of the hook. So, if you're looking to insert... Okay, so this hook is actually found in this thank you.php file. Okay, what this entire condition does is, it checks if the order is successful. So, if the order is successful, it will show you the order table. I'm sure you guys have already seen the summary table for the customers. And if the order fails, and they'll show you an error message. So, that is what the condition is doing over here. And at the end, WooCommerce allows the insert two hooks for us to use. So, in our case, we're looking at this one, WooCommerce underscore thank you. And then it passes the order ID. Okay. And this, how can you utilize this hook? For example, that was the do underscore action. So, if we want to use our custom function inside that hook, we have to use this function add underscore action. So, just now I was saying there's do action and add action. Do action is the hook. And add action allows you to add your function into that hook. So, this add action takes in four parameters. One is, this is the name of the hook that you want to hook into, which is the same. So, it must correspond with the name here. So, next is the name of the function, which we will be creating. And next, we have the priority. So, imagine if you create two custom functions, and you want to hook them into the same place. So, how does WordPress decide which one to run first? So, that's where priority comes into the picture. So, the function with the lower priority will get executed first. For example, if I want to insert a picture, and I want to insert a picture and some content, but I want the picture to be above the content. So, what you can do is to make this maybe priority five and then make the function that outputs the content to a priority higher than five. And arguments over here, by default, it accepts one argument. So, over here, if your hook provides you with one argument, then the number one will be used here. If your hook provides you with two arguments, and if you want to use both of them, then you can change the number to two. Okay, so, this is how our custom function is going to look like. So, this is the name of our custom function, which is the same as this one. And this is the argument that we're using, that the hook is providing the other ID. Okay, so, what we can do in this case is, we can check. If the other ID is 888, with the ID 888, we can display this text out. Congratulations, you are a lucky winner. But if the other ID is not 888, we will display a sorry message. So, this is your custom function, and the whole thing will look something like this. This is the function, and this is where you use your add action. So, you can place this code snippet in your functions.php, or you can place it, you can create a plugin to input everything inside. And the output for this will be something like over here. So, this is the typical WooCommerce thank you page. As you can see, because the other number is not 888, it fills the condition. So, at the bottom, because the do action hook is placed after the table. So, our message, our function will get executed after the table, which is here. We are showing the battleup next time message. And, okay, next we have filters. So, filter, we are using apply filters and add filters. And the first argument is the same thing. It's the name of the filter we want to hook into. In this case, we are using the thank you order receive text. And the next one, this is the default value of the content. So, in this case, it's showing the message thank you with the exclamation mark at this page over here. It's showing this message in the thank you page. So, what we can do with this is that if we want to change the thank you message, we can create a function and hook into this filter here. And how will that look like? So, we use the add filter instead of add action, because we are dealing with filters. So, the first one is the name of the filter. So, it must be the same as the one over here. And the next one is the same, the name of our custom function. And this also has priority and arguments as well. So, how will this look like in the function? Very simple. So, this too must be the same, because this is the name of the function. And for filters, I was saying we have to always return something. So, for all your filter functions, we have to have this argument inside. This represents the original data that we are using. So, what this does is it takes the original data. This value variable represents the original data, which is the thank you message here. So, what we're doing is we are taking that message, and we're changing it to something like this. Thank you for your purchase. We hope you like the item. And at the end, the most important part, if not, if you miss this out, you get an error. So, the most important part is to return the value. So, even if you don't change the value, for example, even if you might create some conditional statement over here, if the other ID is same, it will change it to this message. If not, we want to return the default value. So, we will just return this value without changing anything, and it's fine. As long as you return something, WordPress will just continue to process the rest of the code. Okay. And this is how it looks like. Not how the whole thing looks like. You can put this in your function's PHP or in a plug-in as well. So, this is how it looks like on the thank you page. So, previously, the default message was only thank you. But right now, it's showing the filtered content. And just to summarize again, filter actions is all about doing something. Like what we showed, what we saw in the example is about doing something. We inserted some content, inserted some text. You can insert pictures or whatever at the bottom of your, I mean, in the footer or in your navigation, wherever there's a hook, action hook, it allows you to do something about it. And for filters, we are always changing data. We're always manipulating data. In the case of our thank you page, we are changing the thank you message after the order is completed. And another difference is filters must always return a value if not the whole site will show some error. So, even if you are not changing the data, you still need to return something. And for actions, we're using do action and add action. And for filters, we're using apply filters and add a filter. Okay, I think that's, that's the end of my talk. I hopefully, hopefully that hopefully you guys understand the concept of hooks and why is it so important, so useful. So, even if you're not a developer, at least by now, hopefully you will know why it's WordPress such an extendable system. Why it allows people to just come in and do so many things. So, when someone asks you why it's WordPress or powerful, at least you can tell them it's about hooks. And that's all I have. Hopefully, you guys learned something today. Okay, so for example, if you want to create this function, you can insert it in the functions.php file inside your theme. But preferably, you have a child theme. Okay, let me see if I have a working example. Oh, yeah, definitely. You have to, you have to FTP into your server and then you go into the file directory. So, oh no, it's not showing here. Okay, so in a typical WordPress working directory, you have something like this. A theme folder and then all your themes inside. So, when you click on to, when you click into each theme, there is this functions.php file over here. So, what you can do is to open this file and then insert your custom functions inside. But, you can actually do it any part of the file. Okay, let me just find mine. No, it's okay. Let me try and make it clear. So, when you open the functions.php file, this is for the 2019 theme. You can just scroll, you can just put your custom function anywhere. Usually, I put it at the bottom. So, just over here, and then you can just do your function and then create your own function and add the hook over there. But, preferably, you should, I don't know about, I always create a child theme when I do developments because when you create your functions, when you create, when you edit the functions.php of the main theme, when you update the theme, all your functions will be erased. It's the same as updating, why we don't update WordPress directly, why we don't update plugins directly. So, what we usually do is to create a child theme. So, that is another topic by itself. But, it's usually a good practice to create a child theme. And you're saying, where can you find the list of hooks to look? Let me see. So, one place would definitely be the WordPress Codecs. They have the list of hooks there and I think there is this site that shows you this one. Adam Brown.info. So, over here, it shows you, you can find all hooks and then all including filters and actions. So, it even shows you the version, whether this hook is still in use or whether it has been deprecated or it's still active. So, Adam Brown.info is a good place and another one is of course the WordPress Codecs itself. I think they don't really list out the entire hooks over there. It's more like, if you know what hook you want to use but you don't really know what it does or how many arguments it receives and then you can search for that hook in the WordPress Codecs. For example, if I want to look for the hook safe underscore posts and then it brings you to the Codecs. So, over here, it explains to you what this hook does. So, this hook is fired when you save a post. Like what I mentioned just now, if you want to send out an email or a tweet after you publish a post, you can use this hook. So, this Codecs is good when it comes to explaining what the hook does but I don't think it shows you the complete list of hooks. Any other questions? Just to elaborate more on the Codecs, it shows, it's actually a documentation of all the hooks that are public for use. It's not used internally. Yeah, correct. So, usually we refer the Codecs for the documentation of these hooks. At the same time, WordPress itself is updating the way that they are doing the documentation. Developers handbook, is it? Yes. The updated version is on developers.org. I think it's developer.org. So, developer.org is where they are consolidating all the various development resources for any WordPress developers. Or even you scroll down, you will cover things like, yeah, any developer, starting developers. Or even if you are designing Gutenberg blogs, which is a new text editor that WordPress has. Everything is all consolidated here. So, at least right now, there is this one single source for you to find all your WordPress related information. So, if you are looking to go into WordPress development, this is definitely one place you want to start. It explains all the APIs it has, hooks, short quotes, the kind of stuff. So, your theme will have different books and actions and filters as well, depending on what theme you use and also what plugin. So, if you're using WooCommerce and you wanted to move some areas around, you can do that as well. Yeah. For WooCommerce, usually plugins, they have their own documentation of the themes they use. You will not be able to find it here, because this is just the themes that you'll find in WordPress. Those plugins, developers, they have their own documentation, like WooCommerce has one where it explains to you the hooks that it uses. Any other questions? No? Okay. Thank you then.