How To Customize Wordpress Hook Action Filter Shortcode

WordPress Deportment, Filters, and Hooks : A guide for not-developers

WordPress Hooks

When I was learning how to use hooks in WordPress and the Customizr theme, I got tired of searching for manufactures that explained actions, filters and hooks, in uncomplicated terms. Virtually manufactures are complex, are written for developers, and start like this:

Actions and filters permit you add your own functionality or change your site'southward behaviour by hooking a callback function onto a specific tag in the core code, setting priorities and using parameters and arguments passed to the callback function.

Whoa!

Don't worry. This isn't that sort of article. If you don't empathize anything in that paragraph, but wish y'all did, read on….

The basics

A WordPress folio is made up of a whole load of functions and database queries, with WordPress and the theme working together to output text, images, stylesheets, and other files. The browser interprets all of these and puts them all together into one spider web page.

Throughout its code, WordPress has included "hooks", so that people tin can "hang" their own lawmaking on those hooks. A lot of the Customizr theme code snippets are written in PHP, using them.

At that place are two types of hooks: actions and filters.

Actions allow you to add actress functionality at a specific point in the processing of the page—for instance, you might want to add extra widgets or menus, or add together a promotional message to your folio.
Filters let you to intercept and modify data as it is candy—for example, yous might desire to insert another CSS class in a WordPress HTML element, or modify some of your pages blocks.

In brief: actions do stuff; filters modify stuff.

Getting down to details

When Gill comes by, tell her to become to the store to get some pigment. When Jack comes by bragging about how great he is, get him to say that Gill is better.

Wait, what? I idea this was an commodity nigh actions, filters and hooks? Instead, nosotros're talking nigh big-headed home-improvers? Well yes. These are ways of understanding what's going on when y'all use actions and filters.

Let'southward look at actions and filters in turn.

Actions:

When Gill comes by, tell her to go to the store to go some paint.

We can do this by hooking onto an action claw. That is, we tin use the add_action function (written add_action()) to add functionality—do stuff—at a particular signal.

Sending Gill to the store to get paint might look similar this in PHP:

// Send Gill to become paint add_action( 'after_gill_arrives' , 'send_gill_to_get_paint', 10 , 2 ); part send_gill_to_get_paint( $gill_has_keys, $gill_has_car ) {   // If $gill_has_keys and $gill_has_car are both true   if ( $gill_has_keys && $gill_has_car ) {     repeat 'Gill, please become to the store and get some paint. Cheers!';   } }<br>

What did we just do at that place?

Nosotros watched for a particular thing to happen—Gill having arrived; in programming terms the 'after_gill_arrives' hook;
When information technology happened, we did something—nosotros sent her to the shop to get paint; in programming terms we added an activity to call the send_gill_to_get_paint() part, which prints a message on the folio;
We used the $gill_has_keys and $gill_has_car arguments to perform some basic logic;
We set other information:
- The priority of this activeness: Whether it will run earlier, or after, other functions attached to the aforementioned claw. In this case we ready the priority to 10, the default. If we want another function to run before this, we would give the other part a lower value (which means it will be executed first).
- How many arguments (variables) that the part accepts. These arguments are passed from the action claw to our function. In this instance, we gear up this value to 2.

How did it work?

In simple terms, add_action() tells WordPress to practice something when it arrives at the specified do_action() hook.

But we tin merely use our add_action() in the example to a higher place if nosotros know that the 'after_gill_arrives' activity claw exists in our theme/plugin. Our theme/plugin needs to have something like this in it:

do_action( 'after_gill_arrives' , $gill_has_keys = truthful , $gill_has_car = true );

This tells WordPress to create a hook called 'after_gill_arrives', run any actions that are fastened to this hook, and laissez passer the arguments $gill_has_keys and $gill_has_car to those actions (the 2 arguments nosotros specified higher up).

A uncomplicated add_action() instance

Now let's look at a simple example using the Customizr theme. Let's add some text after the header:

// Add some text after the header add_action( '__after_header' , 'add_promotional_text' ); part add_promotional_text() {   // If nosotros're non on the home folio, do nothing   if ( !is_front_page() )     return;   // Repeat the html   repeat "<div>Special offer! June simply: Free chocolate for anybody!</div>"; }<br>

Inside the Customizr core lawmaking, as the very concluding action in header.php, Customizr has:

do_action ( '__after_header' )

This is where our add_action() is hooking itself.

Y'all tin can also use remove_action() to remove actions from their hooks. For example, this snippet removes the slider from ane identify—using remove_action() to unhook it from where it's currently hooked—and adds it somewhere else.

And how practise we add the remove_action() to the page's code? Yes, that's right: with an add_action(). In the case of snippet for moving the slider, we claw our function in the <head> section at the very top of the page, to make certain it'southward executed afterward all the actions are loaded, just before the residual of the page is built. Take a await at that slider snippet to encounter if it makes more sense to you now.

Filters:

When Jack comes by, bragging most how he'southward the best, tone down his boasting.

We can change Jack'southward boasting comments by hooking onto a filter. That is, we can use add_filter() to modify functionality—alter stuff—at a detail indicate.

Toning downwards his boasting might look similar this in PHP:

// Cut Jack's boasting add_filter( 'jacks_boast' , 'cut_the_boasting'); role cut_the_boasting($boast) {   // Supplant "best" with "2nd-best"   $boast = str_replace ( "best" , "2nd-best" , $boast );   // Append some other phrase at the cease of his boast   $boast = $avowal . ' Still, Gill can outshine me whatsoever day.';   return $boast; }<br>

What did nosotros merely exercise there?

We looked for a detail thing that we wanted to change—Jack's boast that he's the best; in programming terms the 'jacks_boast' filter;
When we establish information technology, we changed it—we inverse "best" to "second-best" and we added some other phrase on the end; in programming terms, we filtered the output by calling the cut_the_boasting() function, which replaced office of the string and appended another string (the "." graphic symbol concatenates two PHP strings);
Nosotros used the $boast statement (in this case a string that says something like "I'm the best!") as the ground for our changes.
We returned a string at the end of the function. This is very important. If you lot don't return a cord in a filter, you might disrupt the functioning of a program (in this case, we would just silence Jack … which may not be a bad thing).

How did it work?

In elementary terms, add_filter() tells WordPress to bandy its information with ours when it arrives at the 'jacks_boast' filter hook. Slap-up!

But we can simply apply our add_filter() filter in the case above if nosotros know that the 'jacks_boast' filter claw exists in our theme/plugin. (If the hook doesn't exist, our function will simply never be called.) Behind the scenes, the theme/plugin has to have something similar this in information technology:

echo apply_filters('jacks_boast', "I'grand the all-time in the globe.");

This tells WordPress to create a hook called 'jacks_boast', apply any filters that are attached to this claw, and pass those filters the string "I'm the best in the world.". If in that location are no filters attached to the claw, so the apply_filters() function volition simply return the string "I'm the best in the world.": effectively a default.

A unproblematic add_filter() example

Now let'south await at an easy example in the Customizr theme. Let'south change the url of the link in the logo:

// Alter url that is linked from logo add_filter( 'tc_logo_link_url', 'change_site_main_link' ); function change_site_main_link() {   return 'http://example.com'; }<br>

Inside the Customizr core lawmaking, in the function that displays the logo (in form-header-header_main.php), Customizr has:

apply_filters( 'tc_logo_link_url', esc_url( home_url( '/' ) ) )

This is where our add_filter() is hooking itself. The esc_url() office eliminates invalid characters etc. in urls and the home_url() office retrieves the home url for the site. And then without any filtering, the 'tc_logo_link_url' filter returns the dwelling house page's address.

In this case, we didn't even take any notice of the incoming arguments (the home url), because we knew we were just going to completely overwrite it.

Recollect: When you use a filter, you must always render something.

Why use hooks?

Now you know how they piece of work, you can run into that understanding hooks is admittedly necessary for anyone developing with WordPress. It's also very useful even if you are non a developer but want to modify WordPress'south—or your theme'southward— behaviour.

With an understanding of hooks, y'all can:

Change nearly anything in WordPress—even quite fundamental things—because a lot of WordPress's core functions utilize actions and filters;
Make changes hands: once you've understood the concepts, you can make some incredibly complex changes very speedily;
Change a theme'southward behaviour at the source, rather than trying to retro-fit an inappropriate solution with HTML and CSS;
Make your own changes easy to empathise and easier to debug, because your lawmaking is reduced to a minimum;
Enable and disable your changes hands because each piece of code is a minor unit in your functions.php;
Make your changes relatively upgrade-proof because yous no longer need to edit or copy WordPress or any themes and plugins cadre files;
Share your knowledge and swap lawmaking snippets with others.

Fully understanding hooks tin take a few hours or (much) longer, depending on your skills, but it volition save y'all days of time in the future.

Try information technology yourself

All the in a higher place examples are working examples. If you accept a test installation of WordPress to play with, you can try using the code above in the functions.php in your child theme. Some things to bear in mind:

In the add_action() example that echoes text for Gill:
- You will need to include the line do_action( 'after_gill_arrives' , $gill_has_keys = truthful , $gill_has_car = true ); in your code, because this activity hook isn't in Customizr.
- If both $gill_has_keys and $gill_has_car are set to truthful, then your website will display "Gill, please go to the store and get some paint. Give thanks yous!" at the height of the page. If yous change either one or both of these values to false, the message will non display.
In the add_action() example to add together promotional text: Don't include the '__after_header' hook in your code, considering this already included in Customizr'due south core code.
In the add_filter() example that changes Jack's words:
- You lot will need to include line echo apply_filters('jacks_boast',"I'g the best in the earth."); in your code, because this filter hook isn't in Customizr.
- Your website volition display "I'm the second-best in the world. Withal, Gill can outshine me any day." at the superlative of the page.
In the add_filter() example to change the logo url: Don't include the 'tc_logo_link_url' filter hook in your code, considering this already included in Customizr'southward core code.

Where to re-create/paste this code?

In your functions.php file. We strongly recommend you create a

child theme.

Retrieve:

you shouldn't edit the theme'southward functions.php, nor should yous put a re-create of information technology into your kid theme.

Where next?

Accept a look at WordPress code, or any themes or plugins code, to come across where there are do_action() and apply_filters() functions. You lot tin search using your favourite desktop search tool. It will requite you lot an idea of the variety of things you lot can customize.

Take a look at the following to extend your cognition farther:

A actually cracking diagram showing the beefcake of a WordPress page, earlier the theme gets to weave its magic.
WordPress Codex: add_action, do_action, remove_action, add_filter, apply_filters
Customizr code snippets using add_action
Customizr code snippets using add_filter

Let us know how y'all get on!