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:

https://wpshout.com/wordpress-hooks-actions-filters-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.


6 Comments
Most Voted
Newest Oldest
Inline Feedbacks
View all comments
Morgan
December 11, 2020 6:26 am

Hello, i want to remove my footer widget in every woocommerce page

but i can not doing that with this code, please correct if there is wrong with my code

// removefooter
add_action(‘init’, ‘fp62_remove_footer’);
function fp62_remove_footer() {
if(is_woocommerce() && is_cart() && is_checkout()) {
remove_action(‘storefront_footer’, ‘storefront_footer_widgets’, 10);
}
}

Jason
September 26, 2020 11:57 am

Dude your tutorial was a lifesaver!

I was going to have to pay someone to do this for me.

Yilmaz Sarac
June 7, 2020 8:54 am

Thank you for tutorial. What if we add code to function.php or place in footer.php?

David J Forer
March 17, 2020 7:39 pm

I really love your tutorials as they are quick, fairly simple and very actionable. This helped me with a quick change on a client site. Cheers

Profesor Yeow
September 4, 2019 12:26 pm

Thanks for the code!!

Barbara Carlos
August 17, 2019 11:18 am

Thanks David, your tutorial was very helpful. The codes work on my blog perfectly.