To add a “Back to Top” button on your WordPress website, you can use a combination of HTML, CSS, and JavaScript. The button will appear at the bottom right corner of the page and allow users to quickly scroll back to the top.
Here’s an example code snippet that you can add to your theme’s functions.php file:
function wpsnippets_add_back_to_top_button() {
echo '<a href="#" id="back-to-top" title="Back to Top">↑</a>';
}
add_action( 'wp_footer', 'wpsnippets_add_back_to_top_button' );
This code snippet creates a custom function wpsnippets_add_back_to_top_button() that echoes the HTML markup for the “Back to Top” button. The function is then hooked to the wp_footer action, which ensures that the button is added to the footer of every page.
Next, you’ll need to add some CSS to style the button and position it correctly. You can add the following CSS code to your theme’s stylesheet or in the WordPress Customizer:
#back-to-top {
display: none;
position: fixed;
bottom: 20px;
right: 20px;
z-index: 9999;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
background: #000;
color: #fff;
border-radius: 50%;
font-size: 24px;
}
#back-to-top:hover {
background: #555;
}
This CSS code hides the button by default (display: none;) and positions it at the bottom right corner of the page. It also styles the button with a background color, border radius, and hover effect.
Finally, you’ll need to add some JavaScript to handle the scrolling functionality. You can add the following JavaScript code to your theme’s functions.php file or in a separate JavaScript file:
jQuery(document).ready(function($) {
$(window).scroll(function() {
if ($(this).scrollTop() > 200) {
$('#back-to-top').fadeIn();
} else {
$('#back-to-top').fadeOut();
}
});
$('#back-to-top').click(function(e) {
e.preventDefault();
$('html, body').animate({scrollTop: 0}, 800);
});
});
This JavaScript code uses jQuery to detect when the user scrolls down the page. If the scroll position is greater than 200 pixels, the “Back to Top” button will fade in. Otherwise, it will fade out. When the button is clicked, it will smoothly scroll back to the top of the page using the animate() function.
Once you’ve added the PHP, CSS, and JavaScript code to your WordPress theme, the “Back to Top” button will be displayed on your website, allowing users to easily navigate back to the top of the page with a single click.
Examples
Example 1: Adding a “Back to Top” button using HTML and CSS
This example demonstrates how to add a “Back to Top” button to a WordPress website using HTML and CSS. The button will appear at the bottom right corner of the page and will scroll the user back to the top when clicked.
HTML:
<button id="back-to-top">Back to Top</button>CSS:
#back-to-top {
display: none;
position: fixed;
bottom: 20px;
right: 20px;
z-index: 99;
font-size: 16px;
border: none;
outline: none;
background-color: #555;
color: white;
cursor: pointer;
padding: 15px;
border-radius: 4px;
}
#back-to-top:hover {
background-color: #333;
}JavaScript:
window.addEventListener('scroll', function () {
if (window.pageYOffset > 100) {
document.getElementById('back-to-top').style.display = 'block';
} else {
document.getElementById('back-to-top').style.display = 'none';
}
});
document.getElementById('back-to-top').addEventListener('click', function () {
window.scrollTo({top: 0, behavior: 'smooth'});
});The HTML code creates a button element with the ID “back-to-top”. The CSS code positions the button at the bottom right corner of the page and styles it. The JavaScript code listens for scroll events and shows or hides the button based on the scroll position. It also adds a click event listener to scroll the page to the top when the button is clicked.
Example 2: Adding a “Back to Top” button using a WordPress plugin
This example demonstrates how to add a “Back to Top” button to a WordPress website using a custom plugin. The button will be automatically added to all pages and posts.
<?php
/**
* Plugin Name: Back to Top Button
* Description: Adds a "Back to Top" button to the website.
*/
function wpsnippets_add_back_to_top_button() {
echo '<button id="back-to-top">Back to Top</button>';
}
function wpsnippets_enqueue_back_to_top_scripts() {
wp_enqueue_script( 'back-to-top', plugin_dir_url( __FILE__ ) . 'back-to-top.js', array( 'jquery' ), '1.0', true );
}
add_action( 'wp_footer', 'wpsnippets_add_back_to_top_button' );
add_action( 'wp_enqueue_scripts', 'wpsnippets_enqueue_back_to_top_scripts' );
The plugin consists of two functions. The wpsnippets_add_back_to_top_button function outputs the HTML code for the button. The wpsnippets_enqueue_back_to_top_scripts function enqueues a JavaScript file called “back-to-top.js” that handles the button’s functionality. The add_action calls hook these functions to the appropriate WordPress actions.
Example 3: Adding a “Back to Top” button using a WordPress theme
This example demonstrates how to add a “Back to Top” button to a WordPress website using a custom theme. The button will be automatically added to all pages and posts.
<?php
/**
* Functions.php
*/
function wpsnippets_add_back_to_top_button() {
echo '<button id="back-to-top">Back to Top</button>';
}
function wpsnippets_enqueue_back_to_top_scripts() {
wp_enqueue_script( 'back-to-top', get_template_directory_uri() . '/back-to-top.js', array( 'jquery' ), '1.0', true );
}
/**
* Footer.php
*/
if ( is_active_sidebar( 'back-to-top' ) ) {
dynamic_sidebar( 'back-to-top' );
}
In the functions.php file of the theme, the wpsnippets_add_back_to_top_button function outputs the HTML code for the button. The wpsnippets_enqueue_back_to_top_scripts function enqueues a JavaScript file called “back-to-top.js” that handles the button’s functionality. In the footer.php file, the dynamic_sidebar function is used to display a widget area with the ID “back-to-top”. This allows users to easily customize the button’s appearance and position using the WordPress Customizer or a plugin.