How to Add a “Back to Top” Button in WordPress (Feat. Kadence Theme)

Author:Issac Hours Updated:

When it comes to Google rankings, one of the most fundamental factors is how well your website or blog delivers a pleasant user experience. Today, we’ll look at how to add a “Back to Top” button, a simple yet powerful tool to enhance that experience on your site or blog.

Why Add a “Back to Top” Button?

Have you ever scrolled all the way down a long post, only to realize you want to revisit something earlier in the article? Then you probably found yourself rapidly spinning the scroll wheel back up—an annoying and inefficient experience, especially when the content is long.

That’s where a Back to Top button—like the upward arrow you may see in the lower right corner of this blog—comes in handy. It can significantly improve user experience by letting your readers return to the top with a single click.

Creating a “Back to Top” Button with the Kadence Theme in WordPress

With the Kadence Theme in WordPress, adding a “Back to Top” button is incredibly easy using the Customize feature.

To get started, go to:
Appearance > Customize > General > Scroll To Top

image 26
Customizing the Scroll To Top Menu

On the next screen, simply toggle the “Enable Scroll To Top” option at the top of the page to turn it on — and you’re done!

WPlaybook Profile Picture - Issac Lee
Back button activation screen

Set up devices to show

The Back button is set to be visible on PCs and tablets by default. Toward the bottom of the section is the Visibility setting, shown below.

Visibility settings screen
Back button Visibility preferences

If you want to make it available in a mobile environment, click the last cell phone icon to activate it.

Advanced Settings

Most people can stick with the default settings, but if you’d like to fine-tune the behavior and appearance of the button, you can do so using the options available below.

If you click on the image above, you can view it in more detail — feel free to follow along as we walk through each option:

  • You can choose from 4 different shapes for the Go Up icon button.
  • You can set the Go Up button size differently for PC, tablet, and mobile phone.
    • See the second box in the picture? Click PC, tablet, and mobile phone in order from the left to set the optimal size.
    • You can adjust the screen position of the Go Up button.
  • You can adjust the screen position of the Go Up button.
    • For Side Offeset, determine how far from the right (or left) it should be
    • For Bottom Offest, determine how far from the bottom it should be

Caveats

If you’re using AdSense anchor ads, be especially mindful of where you place your Back to Top button. Placement conflicts can hurt both your site’s UX and ad performance.

Here are the settings currently used on WPlaybook, which you can use as a reference:

  • PC environment: Icon Size 1.2em, Side Offset 30px, Bottom Offset 30px or 150px (if you have anchor ads)
  • Mobile experience: Icon Size 0.7 em, Side Offset 5 px, Bottom Offset 30 px

Conclusion

Today, we looked at how to add and customize a “Back to Top” button in the Kadence WordPress theme.
If you’re curious about other ways to customize your WordPress site, be sure to check out our WordPress Customization Collection post for more tips and tutorials.

관련 글 보기