Using the wp_footer Action Hook to Modify Your Site’s Footer (Without Theme Changes)

This week’s text and video Quick Guide shows how to use WordPress’s wp_footer action hook to make changes to your site’s footer—without editing your theme.

In addition to being an intro to the wp_footer hook, this Quick Guide is also a great way to learn your first action hook in WordPress. As the video describes, this method of editing your site’s footer using WordPress’s hooks system will work with just about any theme you might run.

Here’s the video guide:

And here’s a text guide to the steps that the video walks through:

How to Use wp_footer to Add Content to Your Site’s Footer

1. Open your plugin file in a text editor.
2. Add the line add_action('wp_footer', 'your_function_name');. (It’s probably good not to name your function your_function_name we’re just using that as a stand-in.) The wp_footer action hook appears in almost every WordPress theme, so the code we run here will appear before the markup for the page has totally closed and been transmitted back to the client.
3. Write your function (your_function_name()) to generate your markup. Make sure that function echos the markup. Because this is an action hook, you don’t return something back to WordPress. Rather it is your duty to make it print to the final page if you want it to.

Code Example: Using wp_footer to Add Visible HTML to the Footer of Any WordPress Theme

Here’s the code we ended up showing in the video, in its full final form:

add_action('wp_footer', 'wpshout_action_example'); 
function wpshout_action_example() { 
    echo '<div style="background: green; color: white; text-align: right;">WPShout was here.</div>'; 
}

The code demo above will add HTML to a WordPress site’s footer. You’ll see a div with the text “WPShout was here.” on a green background at the bottom of your WordPress page, whether you add this HTML to your site’s footer using your theme’s functions.php or your own custom plugin.

(As a note, adding inline styles like style="background: green;", as we’re doing above, is generally not great design. We’re using them to keep the demo simple.)

Learning More about wp_footer and WordPress Hooks

Complementing this Quick Guide on using wp_footer, an action hook, is our Quick Guide on using a filter hook. And to learn more about the workings of WordPress’s hooks system—which includes both actions and filters—see our in-depth introduction to the topic:

WordPress Hooks, Actions, and Filters: What They Do and How They Work

Thanks for reading! If you have any questions about the wp_footer WordPress hook, or about actions and filters generally, we’re always listening in our Facebook group.