Adding a ‘Back to Top’ Link on WordPress

In a previous post, I discussed how to remove “Powered By WordPress” from the footer of the Scrappy theme.  You might also want to add a “Back to Top” link in the footer, especially if your blog has a lot of vertical distance from the top to the bottom.  Here’s how to do it…

Step 1:  Modifying the Scrappy header.php file

The first step in creating our ‘Back to Top’ link is to modify the header.php file in our WordPress child theme by adding an empty HTML link using the “<a>” tag.  Although you can place an “anchor” like this anywhere you want on your site, we’ll add this empty link to the very top of the page for this tutorial.

Find the line of code in your header.php file that says ‘<div id=page class=”hfeed site”>’.  Here we’ll add our extra line of code with the <a> tag (line 5 of the pastebin):

Normally when using an <a> tag, we would also use an “href” in order to create a link.  However, in this case we’re just defining an empty element in the page that we can refer to later using our ‘Back to Top’ link.

Step 2: Modifying the Scrappy footer.php file

With our anchor in place, we can now add our link.  For this tutorial, we’re going to place the link right above the widget area in the Scrappy footer.

Opening up our footer.php file, we need to look for the code “<div class = “footer-sidebars”>’.  Underneath this line, we’ll add another <a> tag, but this time, we’ll add an “href” tag in order to have a link to send the page back to the top (line 6 of the pastebin):

Notice that the link we have here uses the same “TopOfPage” reference as we did in Step 1, this time with a # sign in front of the word. This lets the page code that we want to point to the “TopOfPage” anchor elsewhere on site. Note also that we don’t need to make any domain-specific references like we would do with a “normal” http://www.-type of link.

Obviously, feel free to change the reference to “Your Text Goes Here” to be whatever message you’d like the link to say :)

Success!

Once you are done with these two changes, the bottom of your Scrappy WordPress theme should look similar to this:

‘Back to Top’ link added to the bottom of the Scrappy WordPress theme

The styling of the link should be right-aligned to your main article width and the link styling will be handled automatically based on the rules set in your CSS file.

Comments

  1. CarrieLorfano says:

    Randy, would you recommend I copy all the code in the parent theme header.php and footer.php files into my child theme so I can make these changes?  Thanks a million!

    • @CarrieLorfano Yes, making a child theme is generally a good idea.  If you make the changes in the theme as it was downloaded from WordPress, any time the theme author makes changes and you update the theme your customizations will get overwritten.

Leave a Reply