{"id":135977,"date":"2015-01-11T08:00:01","date_gmt":"2015-01-11T13:00:01","guid":{"rendered":"http:\/\/premium.wpmudev.org\/blog\/?p=135977"},"modified":"2015-03-05T01:02:45","modified_gmt":"2015-03-05T06:02:45","slug":"back-to-top-button-wordpress","status":"publish","type":"post","link":"https:\/\/wpmudev.com\/blog\/back-to-top-button-wordpress\/","title":{"rendered":"Add a Dynamic “Back to Top” Button to Your WordPress Site"},"content":{"rendered":"

User experience is often an overlooked aspect of website design, which is unfortunate, really, because it plays an important and essential role in ensuring visitors can easily use and navigate your site.<\/p>\n

It’s in your best interests to make your visitors’ experience seamless and as effortless as possible. After all, you want them to spend time on your site, read your content and even buy your products or services if you offer any.<\/p>\n

A small feature that many sites offer is a “back to the top” button, which allows users who have scrolled through pages of content to quickly return to the top of the page. This feature is especially useful for sites that contain a lot of information or have infinite scroll.<\/p>\n

In today’s Weekend WordPress Project we’ll show you how to add a dynamic “back to the top” button to your site in a few quick and easy steps.<\/p>\n

Before You Begin<\/h2>\n
\"An<\/a>
An example of the back to top button we’ll be creating.<\/figcaption><\/figure>\n

The button we’re going to create will site in the bottom-right of the page, will be fully responsive, fade into visibility when you scroll down and smoothly scroll up to the top of the page when the button is clicked. Neat, right?<\/p>\n

First, there one incredibly important\u00a0action you should take before you start.<\/p>\n

The steps to set up the button are simple, but it will require editing theme files. For this reason, it’s important that you backup your style.css<\/em> and functions.php<\/em> files in the theme where you want the button to appear. While you’re at it, back up your whole site just to be safe and because it’s a good habit.<\/p>\n

If you want to add a back to top button to an existing theme, it’s WordPress best practice to create a child theme so that any changes you make will not be erased by future updates of the original theme. If you’re not sure how to do this, you can check out our\u00a0article\u00a0on\u00a0how to create a child theme<\/a>.<\/p>\n

All set? Let’s go!<\/p>\n

Copy and Upload the Script<\/h2>\n

Access your site’s files via\u00a0FTP or cPanel and navigate to your theme’s JavaScript folder, which will be in\u00a0wp-content > themes > your-theme > js<\/em>.<\/p>\n

The location of this file may differ from theme to theme, but usually, you’ll find it here. If your theme doesn’t contain a js<\/em> folder, then go ahead and create one.<\/p>\n

In this folder, create a new file called topbutton.js<\/em>. You can name this file whatever you’d like, but if you do change the name, keep in mind that you will also need to change every reference to it in the code you add. Either way, add the following code In the new file:<\/p>\n

Loading gist ddb0b3d69de45583c93e<\/a>

Please update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n

You can adjust how fast the button scrolls to the top by editing the number beside var speed =<\/code> toward the top. The higher the number, the slower the automatic scroll will be.<\/p>\n

Similarly, you can adjust the speed of the fade animation by editing the number beside var duration =<\/code> and how many pixels are scrolled on a page when the button appears by by editing the value for var offset =<\/code>.<\/p>\n

This script is set up to display the button after you’ve scrolled 100 pixels on a page. It’s set low so it’s easier for you to test out even if you have a fresh install with very little to no content.<\/p>\n

Realistically, you may very well want to change these values to whatever suits your specific needs. Once you have successfully created this new file, you’re ready to move on\u00a0to the next step.<\/p>\n

Make a Button<\/h2>\n
\"Make
Click on your uploaded button’s image in your media library to find the URL you need to complete this step.<\/figcaption><\/figure>\n

Use your favorite image editing software to create a button, purchase a button image or find one with a GPL licence that you can use for free. Upload it to your site and make a note of the image’s direct link. We’ll need it for the next step.<\/p>\n

Once you’ve uploaded the image file, you can find the URL you need by viewing your media library and clicking on the thumbnail of your button. An in-line popup will appear and on the right-hand side you’ll find the link.<\/p>\n

If you don’t like the idea of adding an image and you’d rather add text, this is also\u00a0possible.<\/p>\n

Keep in mind that the text will likely inherit the color, size and font of your theme so styling the button through CSS\u00a0will take a bit of skill. The results will be very specific to your theme so using an image for the button as we are doing\u00a0here is a much simpler solution.<\/p>\n

Keep this page open and head on over to the next step.<\/p>\n

Edit the style.css<\/em> File<\/h2>\n

Open\u00a0your theme’s CSS\u00a0stylesheet add the following code anywhere you see fit as long as it’s not in between already existing tags and code. At the very bottom is a great place for it.<\/p>\n

Alternatively, if you’ve previously installed a plugin such as Simple Custom CSS<\/a>, you can add the code right into the area provided. Don’t forget to hit the\u00a0save button!<\/p>\n

Loading gist f1be1a77724194099066<\/a>

Please update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n

Don’t forget to replace the image link in this snippet of code with your button’s URL you noted in the previous step. If you don’t change the link, no button will appear so don’t forget this step.<\/p>\n

4. Edit functions.php<\/em><\/h2>\n

In order for the JavaScript file you created to have any effect, you need to tell WordPress you want to use the file. You can do this by creating what’s called an enqueue script in your theme’s functions.php<\/em> file.<\/p>\n

The best place to add the following code is at the very end of the file, that way it will be less likely that it will interfere with other code.<\/p>\n

Loading gist 814a0025c3235a3a5b04<\/a>

Please update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n

Once you’ve either edited and saved the file directly through your control panel or you’ve used FTP to upload the edited file\u00a0\u2013 and replace the old one\u00a0\u2013 you’re all set to start the next step.<\/p>\n

Add the Button Link<\/h2>\n

The last step is to add the actual link to the pages of your site so the back-to-top button will appear.<\/p>\n

You could put this link in every page template you have or in the header.php<\/em> file, but since the button will appear at the bottom of the page, let’s put it in your footer. It will keep things nice and simple in case you decide to make future changes.<\/p>\n

\"You
I placed the link above the footer tag in the footer.php file when testing out this button in the Twenty Fifteen default theme.<\/figcaption><\/figure>\n

Open your footer.php<\/em> file which will most likely be found in the wp-content > themes > your-theme<\/em> folder.<\/p>\n

The button is set to hover separately over all content of the page at the very bottom, right-hand corner so it doesn’t matter where you put the button link as long as it’s not smack dab in the middle of other code. Placing it between the footer or a div<\/code> tag is usually a good spot.<\/p>\n

If you decide to change the position of the button in the CSS\u00a0stylesheet, keep in mind that where you put the button link may actually matter. It may appear exactly where you placed the link in the footer.<\/p>\n

The CSS\u00a0is currently set to a fixed position of 5\u00a0pixels from the bottom and right-hand side of the window so it shouldn’t currently be a problem. Here’s the link you will need to add to your\u00a0footer.php<\/em> file:<\/p>\n

Loading gist 1e0a020f891ed5850dca<\/a>

Please update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n

You may notice the the link doesn’t actually have any text or button associated with it. This is because we’ve already established the button image with CSS\u00a0so it’s not necessary to add it.<\/p>\n

It’s also made clear that we are using a class<\/em> instead of an id<\/em> to define the link and its properties. This is simply so you can be free to add more similar buttons to your page, rather than being confined to one button per page. Changing this is not necessary.<\/p>\n

The moment you’ve been waiting at the edge of your seat for has arrived! Go ahead, visit a page in your site that requires\u00a0a lot\u00a0of scrolling\u00a0and check out your\u00a0new “back-to-top” button.<\/p>\n

Final Thoughts<\/h2>\n

Now your site’s visitors will be able to view your content\u00a0with a bit more ease. If you’re not too keen on editing your theme’s files yourself, not to worry, there’s an easier alternative.<\/p>\n

Scroll Back to Top<\/a> \u00a0automatically adds a back-to-top button to your site \u2013 no coding necessary. If you would like to change the button’s size, color, location and other options, this is entirely possible. You can access the customization options through the admin dashboard under Settings > Scroll Back to Top<\/em>. It’s a very straight forward plugin that’s easy to use and it looks great, too. It’s certainly a sleek alternative to coding your own solution.<\/p>\n

Now\u00a0you’re ready to make your visitors’ experience a better one with each and every click.<\/p>\n

What other changes would you like to add to your site to increase your users’ experience? Let me know in the comments below.<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"

Adding a “back-to-top” button to your website is a small feature that can pack a punch when it comes to improving user experience. Find out how easy it is to add one to your site in today’s Weekend WordPress Project.<\/p>\n","protected":false},"author":54213,"featured_media":136032,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"blog_reading_time":"","wds_primary_category":0,"wds_primary_tutorials_categories":0,"footnotes":""},"categories":[1117,263],"tags":[10045,9798],"tutorials_categories":[],"class_list":["post-135977","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-multisite","category-tutorials","tag-customization","tag-weekend-wordpress-projects"],"_links":{"self":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/135977","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/users\/54213"}],"replies":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/comments?post=135977"}],"version-history":[{"count":2,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/135977\/revisions"}],"predecessor-version":[{"id":147930,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/135977\/revisions\/147930"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media\/136032"}],"wp:attachment":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media?parent=135977"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/categories?post=135977"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tags?post=135977"},{"taxonomy":"tutorials_categories","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tutorials_categories?post=135977"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}