Using WordPress Hooks Like A Boss

WordPress Hooks

When you get started with WordPress, you are in awe of the power of Plugins. As you get more exposure you realize that they are often just adding a little bit of code into the hooks that WordPress makes available.

For example, there are a lot of plugins available to insert something into the head tag of your site. But you can also do it without the overhead of a plugin by using the built-in WordPress hook.

If you’re slightly code-phobic that may seem terrifying. So let me share a super simple copy-and-paste example that you can use in your functions.php file.

WARNING: If you make a mistake editing your functions.php file, your site can become unresponsive to web requests – which means you’ll have to fix it via FTP or SSH.

You can find your functions.php file either through the WordPress backend or FTP.

WordPress Actions

The easiest way to insert something into the head of every page on your site is to register a function to be executed when the built-in wp_head action is called.
To do that, you’ll need to add the following line into your functions.php file:

add_action('wp_head', 'my_function');

You probably already have some code in your functions.php file, so add this near the bottom. It will probably end up looking more like this:

/**
 * Customizer additions.
 *
 * @since Twenty Fifteen 1.0
 */
require get_template_directory() . '/inc/customizer.php';

// This is my special function to insert something into the head tag

add_action('wp_head', 'my_function');

At this point, you’ve told WordPress, “when you are building out a page and filling in the head tag make sure you also include my my_function call as well.” The next step is to create the my_function so WordPress can include it.

Since we’re only doing this as an example, all we’ll include is an HTML comment that you’ll be able to see in the code, but won’t be displayed for the world to see.

/**
 * Customizer additions.
 *
 * @since Twenty Fifteen 1.0
 */
require get_template_directory() . '/inc/customizer.php';

// This is my special function to insert something into the head tag

add_action('wp_head', 'my_function');

function my_function() {
    echo '<!-- this is a test -->';
}

Now you can see that the action you’re adding is to insert that silly commented line into the head of your site. Obviously, this is just an example, but you can use this exact procedure to inject whatever you want into the head of your site.

Sometimes all you need is something like that on one page. To do that you can add additional if/then code around the function above, or build out a quick custom field.

Using Custom Fields with Hooks

If you don’t need something injected into every single page on the site, then you can build out a way to only include it on pages where it’s needed. To accomplish this we’ll use WordPress’s custom fields to call a function that is wrapped by a conditional.

First off we need to expose the custom field section because it’s usually hidden by default. Click on the Screen Options tab in the upper right of your WordPress administrative area.

Then click the checkbox to show custom fields.

You can then close the Screen Options tab by clicking on the arrow in the tab and then scroll on down to the newly exposed Custom Fields section. This is where you will create a brand new custom field.

To add a new custom field you click the “Enter New” link (not the button).

Clicking on the “Enter New” link allows you to enter a name for the new custom field. Let’s call ours “custom_head”.

You then complete the new field by adding a value for the “custom_head” field and then clicking on the “Add Custom Field” button.

You have just created a custom field that you can now use almost anywhere.

Now, that custom field is added to the meta data for the post that I added it to. What that means in English is… that little snippet of code that we labeled at “custom_head” is stored in the WordPress database and linked to the post where I first created it. It will also be attached to other posts if I choose to use it again.

NOTE: The next time you want to use that custom field, it will appear in the drop-down menu in the custom fields section, you only have to create it once.

Now you have to head back to the functions.php file to add a little bit of code so that your new custom field can get injected into the head of the document it’s attached to.

Because our snazzy new custom field is stored in the database as meta data, WordPress has provided an easy way to retrieve it using get_post_meta.

Let’s add the new code in a step by step manner. First we’ll be quering the database from within “the loop” so we can ask it for the custom_head meta data for the current post.

/* This is my special function to insert something into the head tag
   by using the custom field called "custom_head". */

add_action('wp_head', 'my_function');

function my_function() {
    global $post;
    echo get_post_meta($post->ID, 'custom_head', true);
}

With the updated code, we can specify what to add to each page. This is another place where I can warn you about messing up your functions.php page and tell you that there are plugins available to do this type of thing. But to run lean and mean, you can follow the examples above.

WARNING: If you are using a theme that is NOT a “child-theme”, then your functions.php file will be deleted and replaced every time you upgrade the theme. Child themes are meant to be used for customizations on upstream parent theme. WPBeginner has a good tutorial on this.

For more good examples you can check out Ed Stafford’s post on how to Use Custom Fields To Add Keyword Metadata to Your Posts and the 2 part series at Perishable Press on custom fields.

Next stop, WordPress Filters.