The wp_footer() WordPress PHP action allows developers to add custom scripts, styles, or other elements just before the closing </body> tag of a WordPress site.
Usage
add_action('wp_footer', 'your_custom_function');
function your_custom_function() {
// your custom code here
}
Parameters
None
More information
See WordPress Developer Resources: wp_footer()
Examples
Add Google Analytics Tracking Code
To add the Google Analytics tracking code to your WordPress site, replace UA-XXXXXXXXX-X with your tracking ID.
add_action('wp_footer', 'add_google_analytics');
function add_google_analytics() {
?>
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXXXX-X"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-XXXXXXXXX-X');
</script>
<?php
}
Add a Back to Top Button
To add a simple “Back to Top” button on your site, this code will insert the HTML and JavaScript code.
add_action('wp_footer', 'add_back_to_top_button');
function add_back_to_top_button() {
?>
<a id="back-to-top" href="#" style="display: none;">Back to Top</a>
<script>
var btn = document.getElementById('back-to-top');
window.onscroll = function() {
if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
btn.style.display = 'block';
} else {
btn.style.display = 'none';
}
};
btn.onclick = function(event) {
event.preventDefault();
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
};
</script>
<?php
}
Add Custom CSS
To add custom CSS to your WordPress site, use the following code and modify the CSS styles as needed.
add_action('wp_footer', 'add_custom_css');
function add_custom_css() {
?>
<style>
/* your custom CSS styles here */
body {
background-color: lightblue;
}
</style>
<?php
}
Add Custom JavaScript
To add custom JavaScript to your WordPress site, use the following code and modify the JavaScript as needed.
add_action('wp_footer', 'add_custom_js');
function add_custom_js() {
?>
<script>
// your custom JavaScript code here
document.addEventListener('DOMContentLoaded', function() {
console.log('Hello, WordPress!');
});
</script>
<?php
}
Add a Cookie Consent Popup
To add a simple cookie consent popup to your WordPress site, use the following code and modify the message and styles as needed.
add_action('wp_footer', 'add_cookie_consent_popup');
function add_cookie_consent_popup() {
?>
<div id="cookie-consent" style="display: none; position: fixed; bottom: 0; width: 100%; background-color: rgba(0, 0, 0, 0.8); color: white; text-align: center; padding: 20px;">
This website uses cookies to ensure you get the best experience on our website. <button id="accept-cookies" style="background-color: white; color: black; padding: 5px 10px; margin-left: 10px; cursor: pointer;">Accept</button>
</div>
<script>
var cookieConsent = document.getElementById('cookie-consent');
var acceptCookies = document.getElementById('accept-cookies');
if (!localStorage.getItem('cookieConsent')) {
cookieConsent.style.display = 'block';
}
acceptCookies.onclick = function() {
localStorage.setItem('cookieConsent', 'accepted');
cookieConsent.style.display = 'none';
};
</script>
<?php
}