When you are first getting in to programming everything seems pretty logical. You decide what you want to achieve, you google it, and for the most part you will find a basic example that you can look at and understand what’s going on and why the code is written the way it is. Then you get into hooks and things get weird for your newbie mind.
Most platforms have a collection of hooks that you can do an infinite number of things with. WordPress has a really great collection of hooks that are well documented and catalogued. In fact, a bunch of my tutorials here use WordPress actions.
Let’s define some things.
Hooks: code provided by your platform (eg: WordPress ) that lets you hook into some functions and features that exist in the core.
There are two types of hooks found in WordPress.
Actions: hooks that allow you to trigger your own functions at a specific point on the page or during a process.
Filters: hooks that allow you to manipulate data before presenting it to the browser.
In WordPress and other platforms you generally have your theme which contains both your template pages that contain HTML structure and you have your functions file which contains everything else. WordPress is actually unique in that some of the functions bleed into the presentation (the HTML / Template files) and you find logic in the form of loops in your theme files. Platforms that keep the presentation from the logic are generally considered cleaner. The method of separating your logic from your presentation is generally referred to as OOP (Object Oriented Programming). I could go deeper in to this but it’s really all you need to know for now.
The idea of using hooks helps keep things more OOP-like by keeping all of your logic out of your template files and in a nice organized spot independent of the HTML/ presentational code.
A Simple Example
It’s easier for me to show you how these things work and speak in terms of absolutes instead of trying to explain concepts and ideas. For our example we are going to add some content into the
<head></head>tags of your theme.
Thinking logically, we know that we need to run a function that does something/anything and that this function most likely it going to have to be triggered at a certain point during the creation of the theme on the page, so we can checkout the actions reference guide to find the right action for our purpose.
wp_head is where it’s at!
According to the codex, wp_head “is triggered within the
<head></head>section of the user’s template by the wp_head() function. ” This is exactly what we want. This will run whatever code we want exactly where we want it.
The meat and potatoes of understanding hooks (actions & filters)
WordPress has a whole bunch of code at it’s core that makes it super desirable to developers. It’s these hooks that make WordPress the time saving tool it is. Instead of having to create code from scratch to work with your data, you can find an existing function and alter it or at to it to suite your needs.
In terms of the an action, there is some code in the WP core that has an “opening” or hook in the function you want to alter where it looks to see if you’ve done anything with it. If you don’t call the action, it moves forward. If you did call the action, then it runs your code in line with it’s process as if your code was written right into the core. It’s kind of like WordPress left some blanks for you to fill in if you wanted to, but if not – it’s cool.
The basic syntax of an action hook looks like this:
// come up with a name for your function
function add_my_js()
{
//this is the stuff you want to happen when your hook is triggered
echo "<script> alert("Page is loading..."); </script>";
}
//now that the function is complete, we tell WP to trigger the 'add_my_js' function we just created to the wp_head action
add_action('wp_head','add_my_js');A quick explanation:
This is so super simple and the code comments explain most of it. Basically you create a function that seemingly stands alone. You can name the function whatever you want to, just make sure it’s something unique so you don’t accidentally step on the toes of some existing functions.
Since we are using the wp_head hook, we want to simply output some javascript in the header of the document without writing it directly into the theme using a simple php echo. This is especially useful if you are creating a plugin or writing something that isn’t theme specific. Allowing you to change themes without loosing this script. Awesome, right?
Once your function is complete, you need to tell it when to run. Simply creating a function doesn’t do anything, you need to tell it when to trigger. At the bottom of the code you see add_action(). That’s the magic! In the add_action you simply put your action that you want to use (in our case, wp_head) and then the function you want it to run, which is our custom add_my_js that we created.
These actions aren’t just for doing stuff with the theme. You can make things happen during events as well. For instance, you can send an email when someone creates a new blog post using wp_insert_post, or you can change the output main loop by using pre_get_posts. Browsing through the actions reference and filter reference before you start going deep into coding is always a good thing to do. It could save you a lot of time.
Hopefully this helps you. If you have any questions or are confused on any aspect of this, please post your questions and comments below.
Keep in mind this is a tutorial for absolute beginners to PHP and WP therefore I did not go in to the details of OOP and WordPress.