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 :)


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.

Removing ‘Powered by WordPress’ From Scrappy

My wife started a food blog this weekend and decided to use the “Scrappy” WordPress theme by Caroline Moore.  But like all WordPress themes, there are a few customizations that are usually made to personalize the theme, the first of which is removing “Powered by WordPress” in the footer.

This blog post is essentially the same as my prior blog post about removing “Powered by WordPress” from the Twenty Eleven theme, but of course, for the Scrappy theme!  This post assumes you’ve created a child theme already, so that the changes you make persist even if the theme gets updated by the original author.

Continue reading

How To Remove “This entry was posted in” on WordPress single posts

In prior posts, I’ve commented that I’m a fan of clean, sleek design when it comes to WordPress themes.  I’ve added the “breadcrumb” style navigation to the top of my posts, which makes the “This Entry was Posted in <category>” and “Bookmark the Permalink” text at the bottom of each post redundant.

Here’s how to remove/modify both of these messages through a simple change to the content-single.php file.

Continue reading