In today’s WordPress tutorial I wanted to share a handy little WordPress plugin that will leave your site so much more friendly for your site visitors. We’ll go over how to install a back to top button on your blog. What are they and why do you need one?
Well, if you’ve ever visited a blog page with a ton of vertical content (like a shop or blog page with lots of posts), you’ve no doubt gotten frustrated with the endless scrolling and scrolling and scrolling…. and, well, scrolling. If you’re toward the end of page, you need to give your users a quick way to easily land back at your main menu / important content at the top of your site.
SOLUTION: Enter the back to top button. Ah. So much better.
PSST. We love Amy’s site that runs on our Meadowbrook theme. She’s got a killer back to top button installed. I’ve installed one on my own site too and I’m here to show you how you can easily install one as well.
Anyhow, here’s how to install a back to top button on your blog.
First, install the free plugin called WPFront Scroll Top. This plugin is well-coded and plays nicely with Angie Makes feminine WordPress themes. Basically, this plugin does what it says and allows for some nice customization options… including uploading some custom back to top image buttons. I’ve included a download of some of these FREE back to top buttons below. You’re welcome! :)
Here’s how to easily install this plugin with your own back to top images. You’ll need to make sure you have a self-hosted WordPress site with the ability to install free 3rd party plugins. Here’s how to get your back to top button installed in no time. Psst… scroll below for the video tutorial.
- First, download the free plugin.
- Upload and activate the plugin in the plugin section of your dashboard.
- Navigate to the new WPFront Scroll Top section in your WordPress dashboard.
- Now, make things look how you want them to! Here’s what the interface looks like.
There’s a bunch of confusing options and ugly back to top buttons. Ick. Leave the defaults set, then… scroll to the very bottom where it says custom url. This is where we’ll put the custom url for the custom image you upload via your WordPress media tab.
Upload your back to top image under the media tab in your WordPress dashboard. Click the image after upload and copy the url. (Apple C to copy.)
Then, simply insert it the code you’ve copied (Apple V to paste) and save.
Viola! Your back to top product should appear in the bottom right of your site on the front end. Hooray! You’ve just installed your back to top button.
Here’s a quick video how-to.
And now for the buttons. Feel free to download some lovely back to top buttons below.