Adding A “Back to Top” Dynamic Link for Quick Navigation

in WordPress Tutorials
Easy WordPress tutorial videos for beginners.

WordPress enabled blogs and websites can become quite crowded and lengthy, especially if the admin has configured the blog to display more than ten recent posts. If a reader were to scroll down through the entire front page (or any lengthy blog page) and reach the bottom, they would subsequently have to scroll all the way back up to the top of the page. This wastes quite a bit of time.

The best way to return readers to the top of the page is by adding a dynamic link that transports them quickly. This allows them to continue reading further posts or navigate to other areas of your site without the frustratingly slow scroll times.

The code to implement such a link is simple and involves editing your active WordPress theme’s “header.php” file. Since this is a main source file make sure you do a complete backup before you start, just in case something goes awry.

Open the root directory of your blog using your preferred editing method and navigate to the “wp-contentthemes” directory and then choose the theme you are currently using on your WordPress blog or site.

After doing so, open the “header.php” file and look for the closing head tag and opening body tag which should look something like this:

</head>
<body>

After you have found both tags above you must paste the following bit of code directly after the opening body tag. Sometimes the body tag has additional parameters and extra commands within the bracket, if that is the case just make sure you add the following code AFTER the closing bracket of the body tag:

<a name="top"></a>

So basically after pasting the above code, the final product should look something like this:

</head>
<body><a name="top"></a>

After that step has been done you may save your “header.php” file and move on. But now you must decide where you would like to place the link, in this case the link to return to the top of the page would probably do best all the way on the bottom of every page. If that is the case then you should add the link into your “footer.php” file, however you are free to add it anywhere you wish.

The link should be pasted exactly as it it seen here:

<a href="#top">Back to top</a>

The "Back To Top" LinkThat’s it! After you’ve pasted the above link where you want the dynamic link to appear you can save your edited file and navigate around your page to your heart’s content!

Easy WordPress tutorial videos for beginners.

Comments (3)

Easy WordPress tutorial videos for beginners.
  • Comment by mark taylor
    mark taylor
    says:

    It would be really good to turn the link into a button, how would i do that?

  • Comment by Aaron Summers
    Aaron Summers
    says:

    Brilliant and simple, I will be using this in my projects.

    i thought i would add a small improvement you could include a class to the footer and style the text or even add a img src=”htt p://” class=”” and use an image for the link!

    I have a nice css image rollover and preloader tutorial on my blog that works with this nicely.
    this is the link

    http://asummersdesign.com/blog/2011/03/add-custom-interactive-images-to-wordpress/

    nice work though.

  • Comment by Laurent Holdrinet
    Laurent Holdrinet
    says:

    Quick and useful tip, thank you!

Easy WordPress tutorial videos for beginners.