How to Add a Custom “Back to Top” Button to WordPress (No Plugins)

Have you ever found yourself scrolling through a 3,000-word “Ultimate Guide”, and then you realize you need to get back to the main menu at the top? It’s not a very fun experience, and it often leads to users simply hitting the “Back” button and leaving your site entirely.

The solution to the problem is simple: a Back to Top button. This small, floating element provides a “teleportation” link to the header of your page. While many WordPress themes have this feature, they often require a ton of code, are hard to customize, or make you pay to unlock all the features.

Today, we’re building a professional, high-performance Back to Top button from scratch. It’s lightweight, it only appears when needed, and it features five distinct styles to match your brand perfectly.

The Psychology of the “Safety Net”

A Back to Top button acts as a psychological safety net for your readers. When a visitor sees that button appear, they feel more comfortable going deep into your content because they know they aren’t “trapped” at the bottom of a long page.

1. Improved Mobile Navigation

On mobile devices, “flick-scrolling” to the top of a long article can be tedious and just annoying. A single-tap button saves the user time and physical effort, which is a key win for accessibility.

2. Boosted Engagement

By making it easy to return to your navigation menu, you increase the likelihood that a reader will click on another one of your articles or check out your “Services” page instead of closing the tab.

3. Clean and Modern Aesthetics

Adding a custom-coded, animated button gives your site a “premium” feel that outshines the cookie-cutter look of standard WordPress themes.

Build Your Custom Button

Use the tool below to select your aesthetic. Whether you want a Glassmorphism look for a modern tech blog or an Industrial square for an editorial site, we’ve got you covered.

<!-- START BACK TO TOP BUTTON -->
<button id="backToTop" title="Go to top">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="18 15 12 9 6 15"></polyline></svg>
</button>

<script>
(function() {
    /* --- CONFIGURATION SETTINGS --- */
    const CONFIG = {
        showAfter: 300,      // Pixels to scroll before button appears
        bottom: "30px",      // Distance from bottom
        right: "30px",       // Distance from right
        smooth: true         // Enable smooth scrolling
    };

    const btn = document.getElementById("backToTop");
    btn.style.bottom = CONFIG.bottom;
    btn.style.right = CONFIG.right;

    window.onscroll = function() {
        if (document.body.scrollTop > CONFIG.showAfter || document.documentElement.scrollTop > CONFIG.showAfter) {
            btn.style.display = "flex";
        } else {
            btn.style.display = "none";
        }
    };

    btn.onclick = function() {
        window.scrollTo({ top: 0, behavior: CONFIG.smooth ? "smooth" : "auto" });
    };
})();
</script>

<style>
    #backToTop {
        display: none;
        position: fixed;
        z-index: 9999;
        cursor: pointer;
        width: 50px;
        height: 50px;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
        background: #1e293b; color: #fff; border: none; border-radius: 50%; box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    }
    #backToTop svg { width: 24px; height: 24px; }
    #backToTop:hover { transform: translateY(-5px); opacity: 0.9; }
</style>
<!-- END BACK TO TOP BUTTON -->

How to Install the Button in WordPress

Because this button needs to be accessible on every page, we recommend a site-wide installation.

Step 1: Add the Code

1. Go to your WordPress Dashboard.
2. Navigate to Appearance > Theme File Editor (or use a plugin like “Code Snippets”).
3. Paste the code into your footer.php file, just before the closing </body> tag.
   • Note: Using a “Custom HTML” block in your footer widget also works perfectly and is often safer!

Step 2: Configure Your Scroll Depth

By default, the button is set to appear after 300 pixels of scrolling. This ensures it doesn’t clutter the screen when the user is already at the top.

• To change this, find showAfter: 300 in the script and change it to your preferred height.

Understanding the “Smooth Scroll” Logic

Standard “Jump Links” can be jarring. They snap the user to the top of the page instantly, which can be disorienting. Our code has the native browser scrollTo function with behavior: "smooth".

This creates fluid, high-end animation that scrolls the user back up at a natural pace. While it’s a small detail, it’s the difference between a “cheap” site and a professional one.

FAQ: Performance and Customization