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.

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 Install Optimizely on WordPress

If you’ve spent any time working in digital marketing or analytics, you’re already familiar with the power of A/B testing.  A/B testing (and it’s more complicated brother multivariate testing) allows site owners to find out optimal combinations of site design and content for their visitors without having to directly ask/inconvenience the user.  All it takes to improve a website is forming a hypothesis of something that could work better, creating multiple versions of a page (or other content), setting up the experiment…and the money flows in faster than you can count it.  At least, that’s the hope!

At the enterprise level, there are plenty of testing tools such as Omniture Test & Target, SiteSpect, WebTrends Optimize, and Monetate, but these tools are cost-prohibitive to all but the largest websites.  Google provides Google Website Optimizer (for free!), but that has often been viewed as difficult to manage, especially for dynamically created websites.  That’s where Optimizely comes in.

Optimizely’s tagline is “A/B testing software you’ll actually use”, a reference to complication (and I think indirectly, the expense) of other testing tools in the marketplace.  Optimizely claims is that you can start testing after adding a single line of JavaScript code…and here’s how you do it.

Continue reading

Page Navigation For WordPress Twenty Eleven

By default, most WordPress themes (including Twenty Eleven) have relatively weak page-to-page navigation.  Users can improve content structure on their WordPress blogs by using categories, tags, and custom menus, but one navigation element that’s a bit more difficult to modify are the “Next Page/Previous Page” links.  These links are great if you want to move a page at a time, but if your blog has lots of pages, users won’t easily be able to navigate very deeply into your content.  That’s where a page navigation menu comes in handy.

Here’s how to implement page navigation, using a plugin and a simple modification to the WordPress Twenty Eleven theme.

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