• Skip to main content

Victor Font Consulting Group, LLC

The DEX Intranet Specialists

Call Us:

+1 919-604-5828

  • Home
  • Care Plans
    • Care Articles
    • Optional Subscriptions
  • Consultations
  • Products
    • Code Snippets
    • Public GitHub Repositories
    • Gist Snippets
    • Pastebin Snippets (Free)
    • Free Plugins
  • FAQs
  • Support
    • Graphic Design
  • Contact
    • Speakers
    • Portfolio
  • Resources
    • Free WordPress Video Training
    • Tutorials
    • Articles
    • Cybersecurity
    • EU Referral Network
You are here: Home / Computers and Internet / Programming / WordPress / Child Themes / Genesis HTML5 "Return to Top" Tutorial

Genesis HTML5 "Return to Top" Tutorial

By Victor M. Font Jr.
February 8, 20147 Comments

Genesis HTML5 "Return to Top" Tutorial

Author's note: When I originally wrote this article, the source code for this feature was available on a public site. I had no reason to include it here since it was readily available. Since that time, the source code has been placed behind a paid membership. Thanks to a comment posted by Dave below, I have now published my version of the source code in this post: Genesis HTML5 Go To Top Source Code. This source code also includes the jQuery component that provides the smooth scrolling feature, which is missing from this article. Please enjoy the article and source code. I apologize for any inconvenience.

The Problem

As StudioPress released their new HTML5 mobile responsive themes, users discovered that the [footer_backtotop] shortcode no longer worked. As I was browsing the StudioPress forum, I came across this post: http://www.studiopress.com/forums/topic/return-to-top-link-in-html5-themes-how-to-set-it-up/. Within the thread, a user with the screen name of welshgirl asked another forum member, Sridhar Katakam, to clarify a very technical post he references on his blog.

About Shridar Katakam

Shridar is an independent WordPress consultant with 8 years of experience in WordPress theme installation, customization, administration, maintenance, support, documentation, troubleshooting and converting PhotoShop designs to WordPress websites. He is a prolific writer and expert "go-to" technical resource with 765 posts on the StudioPress forum as of this article. I visit his blog regularly and learn from him. He always provides great content albeit it's a bit more on the technical side of things.

Why I Wrote This Article

At the risk of stepping on Shridar's toes, (for which I apologize in advance), I decided to write this tutorial to hopefully satisfy welshgirl's request. I've been planning for some time to write a book about the Genesis Framework to include as Volume 4 or 5 in my Winning With WordPress Series. Answering questions like these provides me with the impetus to move forward with yet another book project. I've already written and published 10 books and am working on 4 more right now that I plan to publish within the next few months. The Genesis Framework book (if it comes to fruition) and another on Formidable Pro are targeted for the end of the year. It's all pretty exciting since the University of North Carolina Charlotte just selected my Winning With WordPress Basics 2nd Edition as a textbook for one of their classes.

HTML5 Anchor Tags

To understand why Shridhar's code works, it's important to first learn something about HTML5 anchor tags. There is a lot of technical documentation that confirms what's being taught here on the World Wide Web Consortium (W3C) website. If you are not familiar with the W3C, it is the international community that develops open standards to ensure the long-term growth of the Web.

Almost everyone with an exposure to building a website is familiar with the primary use of anchor tags—<a></a>. They are generally used as hyperlinks, which basically means that they take you somewhere, usually to another website, or a page or post within your website. To make a hyperlink work, you have to include the href="URL" property. The value assigned to the href attribute specifies the URL of the linked page. In HTML5, if the <a> tag has no href attribute, it is simply a placeholder for a hyperlink.

There are several possible values for URL. They are:

  • An absolute URL—points to another web site (like href="http://www.example.com/default.htm")
  • A relative URL—points to a file within a web site (like href="default.htm")
  • A hashtag ( # )—links to a HTML element with a specified id within a page (like href="#top"). When clicked, scrolls page to target element.
  • Other protocols (like https://, ftp://, mailto:, file:, etc..)
  • A script (like href="javascript:alert('Hello');")

What Changed in Genesis

When examining the source code for non-HTML5 Genesis sites, the document structure includes the following <div id="wrap"> tag right after the opening <body> tag. At run time, the [footer_backtotop] shortcode generates this hyperlink <a href="http://example.com/#wrap">Return to Top of Page<a> When the user clicks on the Return to Top of Page hyperlink, the action tells the browser to scroll the page up to the <div id="wrap"> tag, which is at the top of the page. If the div tag was located anywhere else in the document, the browser would scroll the page to that particular location.

The structure for Genesis HTML5 sites no longer includes the <div id="wrap"> tag. The [footer_backtotop] shortcode still generates the same hyperlink regardless of whether the child theme uses the newer HTML5 or older XHTML structure. That's why when a user clicks on the Return to Top of Page hyperlink on a HTML5 site, nothing happens. There is no <div id="wrap"> tag in the source code for the browser to scroll the page to.

The Tutorial

Shridar's code creates a new Return to Top of Page shortcode that works in HTML5 with the new Genesis structure. To add his code to your site, you must edit your functions.php file, and we'll be using the built-in WordPress theme editor to do so. Select the theme editor by clicking Appearance/Editor from the Admin menu.

Access the Built-in WordPress Code Editor

When the editor panel opens, the editor should open with your current theme's style sheet visible in the editor window. If your are running a multisite installation, the style sheet for your site's primary domain should be visible in the editor window. You can select a different theme by using the "Select theme to edit:" dropdown on the upper right. Select the theme you want to edit and click the Select button.

Built-in WordPress Theme Editor

On the right is a list of your theme's editable files. The file we want to edit is titled Theme Functions (functions.php), which is highlighted on the right in the above image. Click on Theme Functions to open the functions.php file in the editor window.

This is important, before we take another step and make changes to functions.php, we have to create a backup copy just in case something goes wrong. To create a backup copy, click anywhere in the editor window and select all the text using control-A (PC) or command-A (Mac). Use control-C or command-C to copy the selected text to the clipboard. Create a new file in Notepad (PC) or Textedit (Mac) and paste the code in the clipboard into the new file (control-V or command-V). Save the file as functions.php.

If you make a mistake or miscopy even one character as you edit your theme's functions.php file, when you attempt to test your site you may receive a PHP error like the one below:

Parse error: syntax error, unexpected '&' in /home/example/public_html/sandbox/wp-content/themes/parallax-pro/functions.php on line 176

Don't panic! You can simply replace the functions.php file with the backup copy you made earlier through ftp or your host's console/dashboard. Once you restore the backup, refresh your browser and start over.

To add the code, we're simply going to copy the code from Shridar's website and paste it into your functions.php file. First up is the code to create the new shortcode.

Cut and Paste Code into functions.php

  • Select all of the code. Alternately you can click the view raw link on the button to open the code in a new browser tab or window.
  • Scroll to the bottom of your functions.php file.
  • Hit return a couple of times to add a blank line at the bottom of your functions.php file
  • Paste the code into the functions.php file at the bottom
  • Save the functions.php file.

The custom shortcode creates a new hyperlink <a href="#" class="top">. href="#" doesn't specify a HTML element's id name. Nevertheless, it does have a corresponding location—the top of the page. Clicking an anchor with href="#" will move the scroll position to the top. The class="top" attribute provides a different opportunity to enhance the visual appeal of your site. A browser can sometimes make the scroll motion appear choppy. Cut and paste Shridar's second function into the bottom of your functions.php file just as you did earlier to smooth out the scroll motion for any link having a class="top" property.

The last step is to add the new shortcode to your theme's footer area. This can be done in two ways. If you are using the Genesis Simple Edits plugin, replace the [footer_backtotop] shortcode with the new [footer_custombacktotop] shortcode.

Genesis Simple Edits shortcode

If you are not using the Genesis Simple Edits plugin, cut and paste the third code snippet from Shridar's site into the bottom of your functions.php file. Save all of your changes and you're good to go!

 

  • 2shares
  • Facebook0
  • Twitter0
  • Pinterest0
  • LinkedIn2
  • Print
  • SMS0

About Victor M. Font Jr.

Victor M. Font Jr. is an award winning author, entrepreneur, and Senior IT Executive. A Founding Board Member of the North Carolina Executive Roundtable, he has served on the Board of Advisors, of the North Carolina Technology Association, the International Institute of Business Analysis, Association of Information Technology Professionals, Toastmasters International, and the North Carolina Commission for Mental Health, Developmental Disabilities, and Substance Abuse Services. He is author of several books including The Ultimate Guide to the SDLC and Winning With WordPress Basics, and Cybersecurity.

Reader Interactions

VictorFont.com runs on the Genesis Framework

Genesis FrameworkThe Genesis Framework empowers you to quickly and easily build incredible websites with WordPress. Genesis provides the secure and search-engine-optimized foundation that takes WordPress to places you never thought it could go.

Check out the incredible features and the selection of designs. It's that simple—start using Genesis now!

Click here to download The Genesis Guide for Absolute Beginners (PDF - 1.4 MB)

Leave a Reply Cancel reply

Your email address and website will not be published. Required fields are marked *
Posting a comment means that you agree with and accept our Comment & Product Review Policy

Comments

  1. Ataul Ghani

    September 27, 2016 at 1:08 pm

    It’s really good tips, this will be helpful for all. I was looking for this type writing last few weeks and finally got it. Thank you!

    Reply
  2. Ataul Ghani

    May 12, 2016 at 3:13 am

    Nice tutorial buddy. I really appreciate it. Thank you!

    Reply
  3. Arav

    April 3, 2016 at 9:35 am

    You can also use a simple link (or code it into an HTML button)

    Go To Top

    in the footer/footer-widget if you simply want to go to the top, without the smooth scrolling part.

    Reply
  4. Dave

    December 4, 2015 at 4:00 pm

    I added this

    //* Add a back to top instruction – CUSTOMISED

    add_shortcode(‘footer_custombacktotop’, ‘set_footer_custombacktotop’);
    function set_footer_custombacktotop($atts) {
    return ‘
    Return to top of page
    ‘;
    }

    to the functions/php in agency pro and it doesn’t seem to work, get page errors

    I had to type it in manually but don’t think i made a mistake (couldn’t copy and paste as your example is an image ?)

    Reply
    • Victor M. Font Jr.

      December 5, 2015 at 8:04 am

      Thanks for pointing this out Dave! I wrote this article quite a while ago. When I wrote it, I included links to the source code that is now only available through a paid membership. At the time I wrote this, the source code was public. But thanks to you, I’ve taken my version of the source code and placed it in this post: Genesis HTML5 Go To Top Source Code. The source code also includes the jQuery component that provides the smooth scrolling feature.

      Reply
  5. Justin

    November 20, 2015 at 9:12 am

    Thanks a lot Victor, exactly what I was searching for the the “back to top of page” link working on my website. Very helpful!

    Reply
    • Victor M. Font Jr.

      November 20, 2015 at 9:25 am

      You’re welcome Justin.

      Reply

Call: +1 919-604-5828

Send us an E-mail

Accessibility Statement | Affiliate Marketing Disclosure | Capability Statement

Cookie Policy | Comment & Product Review Policy | Privacy Policy | Site Map | Terms & Conditions

Copyright © 2003–2023 Victor M. Font Jr.

Return to top of page