An essential part of WordPress development is making modifications or adding functionality to what’s already in place from WordPress Core, a theme, or a plugin.
If you’re familiar with the WordPress template hierarchy, a theme’s functions.php file, or even just the search function of your code editor, it’s tempting to find what you want to change and make your modification.
“Child theme!” you might be yelling right now. If you make a change to a theme, plugin, or WordPress Core file, the moment it updates, you’ll lose your change. A common technique to avoid this is to duplicate that file, add it to your child theme, and make your change there. Then, no matter how many times the parent theme’s header.php file gets updated, you’ll always have your version of the file that has the changes you need!
What happens when the parent theme gets an update, though? You’ll want those updates as well as your changes. You can review the changes made to the parent theme, add them to your file, and then you will have your modifications as well as the most recent update. In some scenarios, this is exactly the way you’d go about this, but often, there’s a better way.
Enter, WordPress hooks.
Hooks
Hooks are tools that enable you to make modifications to your website without making changes to entire template files. There are two types of hooks: Actions and Filters, and chances are, if you’ve done some basics of building a WordPress site, you’ve already used at least one of these. Have you enqueued a CSS or JavaScript file to add your custom CSS or JavaScript library? If so, you’ve already used a hook, specifically, an Action.
Actions
Actions are points in template files that pause, let you add what you need, then continue on. You aren’t making any modifications to what would happen without your intervention. An example of an Action, noted above, would be adding additional style or script files to a site.
If you have some custom CSS in a file, you’ll need to load that file on your site’s pages. One way to do it would be to go into every header PHP file in your theme (and create child theme files if you didn’t have them already) and add the same <link> tag in each. This would become cumbersome, requiring you to change every header file each time the CSS file’s name or location was changed or whenever the parent theme updated. With an Action, you can automatically inject your style tag in every header file, regardless of if the template is used from the parent or child theme.
The wp_enqueue_scripts Action fires on every page when it’s ready to load scripts and styles. You can utilize that to say, “I need this script to load on all of my pages” in one place with the following in your functions.php file:
function hall_enqueue_style() {
wp_enqueue_style( 'hall', 'style.css', false );
}
add_action( 'wp_enqueue_scripts', 'hall_enqueue_style' );This will add your styles to your entire site, without having to make and maintain changes to template files.
We’ll explore more advanced Action opportunities in a future post, but other examples of using Actions are:
- Adding messaging at the top of your WooCommerce store’s Checkout page
- Adding an email signup box to the bottom of your site’s pages
- Adding a new Custom Post Type
- You can even remove functionality that was added with an Action by the theme or plugin with your own remove_action.
Filters
Filters differ from Actions in that they modify, or filter, what is happening on the page. Your Filter takes something in, modifies it, and then passes along your modified version. Sometimes you might be filtering just one element, like the word count setting for excerpts of your blog posts. In this scenario, your Filter takes the default setting that gets passed along to the function (55 words) and instead passes more/fewer words along.
Other Filters, such as those used to modify items in a menu, may need to take in more information. Maybe under certain conditions, like if a user is logged in, you want to add a link for a certain page on the site to the main menu. You can use the wp_nav_menu_items Filter to take in both a list of the existing menu items and some details about the menu to determine what the Filter might need to do:
function hall_add_item_to_main_menu( $items, $args ) {
if (is_user_logged_in() && ‘header’ === $args->theme_location {
$items .= '<li><a href="'. get_permalink( /** your page id **/ ) .'">Page Title</a></li>';
}
return $items;
}
add_filter( 'wp_nav_menu_items', 'hall_add_item_to_main_menu', 10, 2 );In a future post, we’ll discuss more advanced Filters as well as instructions for creating your own hooks to utilize in your plugin or theme. Search within the themes and plugins you’re using now to see how they are utilizing hooks. Start thinking about how you might be able to use Actions and Filters to clean up your template files or make changes to your site that you didn’t think were possible before. For more WordPress development assistance, contact the web development experts at Hall.
Subscribe via RSS
