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.
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.
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.
- 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.
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!
