Adding Markup to Your WordPress Footer Without Theme Changes, An Action Hook Example

As a complement to our last Quick Guide, this week we’re going to offer an example of what it’s like to use your first action hook in WordPress. In this case, we’ll use the wp_footer action to add some markup to our WordPress footer. As the video details, you’ll probably want to do this for very basic HTML in the theme most times, but this way works with absolutely any theme you might run. Speaking of the video, if watching is your preference:

If you prefer to learn via words. Here’s the basic process that the video walk through.

wp_footer: How to Add Content to a Site’s Footer without Modifying Your Theme

    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 is in every WordPress think in the form of a wp_footer function call (we know it’s weird). This means that what we do here will appear before the markup for the page has totally closed and been transmitted back to the client.
    3. Write that 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 appear in the final page if you want it to.

Our Final Code to Add HTML (that you can see) To 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>'; 
}

This isn’t exactly code that aligns with best practice—inline styles are no one’s idea of great design—but we’re using them here to keep this simple. If we just echo the div or a word, it’s likely that nothing will show up. The div with a background color, will show up on the theme we used in the video (Twenty Sixteen) and most other themes pretty prominently.


Add a Comment

Your email address will not be published. Required fields are marked *