WordPress Hooks
Hooks are a way for one piece of code to interact/modify another piece of code. In the context of WordPress, they provide means for plugins, themes, and even WordPress itself to interact with WordPress core functionality. If you've worked with Javascript and callbacks you may be familiar with the concept of callbacks. There are two types of hooks: Actions and Filters. We'll discuss them in more detail below. WordPress provides many hooks that you can use, but you can also create your own so that other developers can extend and modify your plugin or theme. ## Filters Filters allow you to intercept and modify data as it is processed like what you need to do to add the `defer` attribute to scripts on the page or change other areas of your WordPress pages. In this example, we add the defer attribute to certain scripts but not others. This should make the scripts non-render-blocking and help, a little bit, with performance. The script was discussed in detail on [Adding async/defer to WordPress site](https://publishing-project.rivendellweb.net/adding-async-defer-to-wordpress-site) so I won't go into detail about it here but the idea is that we've changed selected script tags before they are printed on the page. ```php function rivendellweb_js_defer_attr($tag){ // List scripts to work with $scripts_to_include = array( 'prism.js', 'fontfaceobserver.standalone.js' ); foreach($scripts_to_include as $include_script){ if(true == strpos($tag, $include_script )) // Add defer attribute return str_replace( ' src', ' defer src', $tag ); } return $tag; } add_filter( 'script_loader_tag', 'rivendellweb_js_defer_attr', 10 ); ``` ## Actions Actions allow you to add functionality at specific points in the page lifecycle; for example, you might want to add an inline script to the footer of all content pages or insert additional HTML at some points of the page. The hook in the example inserts inline scripts needed to run [Fontface Observer](https://fontfaceobserver.com/) using [Recursive](https://www.recursive.design/) as the font, defined in CSS. ```php function rivendell_add_ffo() { ?> Edit on Github