Go To The Top Of The Page

This is a plugin to enable you to easily install a link to jump to the top of the page. This is a useful feature to include in long pages. To include the link just put the tag back to top where you want the link to appear. The text of the link can be changed in the Settings/Go To Top menu. This version includes the ability to add a pop-up text box, as implemented in the standard HTML anchor title parameter.

There is an example of this plugin in action at the bottom of this page.

Download

Click here to download a copy

Installation

UnZip the package downloaded above into your WordPress site’s /wp-content/plugins folder. Go to your WordPress admin control panel and select the Plugins section. You should find the plugin listed. Click on the Activate link to put it into operation.

Configuring

Go to the Settings/Go To Top menu item. You should see a page similar to this…

Go To Top Admin Page

The Link Text is the text that will appear on the rendered page
The Help Box Text is the text that will appear in the pop-up help box that most browsers render from the title attribute.

When you have made your changes you must click the Save Changes button to commit the changes to the WordPress database.

Limitations

You can put as many of these links as you want on a page but the whole operation of this plugin requires that there is an HTML anchor <a name=”bgf_top”></a> immediately after the <body..> tag. As there is no hook in WordPress that enables the insertion of text at this specific location this could break this plugin if you are using a theme that you have not written yourself. You could always hack the theme’s header.php file but that is a very bad idea as if and when the theme is updated your hacking efforts will be overwritten and anyway hacking in this way is not recommended.

One way round this problem is to run your WordPress site with a child theme. This is actually a lot easier that you may think.

Creating a Child Theme – Quick and Dirty Method

Create a folder in your WordPress site’s /wp-content/themes folder and give it a unique name. A common naming convention is to name the folder the same as the parent theme with the addition of -child. For example if the theme of this site is in /wp-content/themes/twentytwelve then the new folder could be called /wp-content/themes/twentytwelve-child.

In the child theme folder create a file called style.css an in it put…

/*
Template: <your-theme-name>
*/

@import url(“../<parent-theme>/style.css”);

N.B. You should substitute your theme’s name for the <your-theme-name> text and the name of the parent theme for the <parent-theme> text shown above you should put the name of the folder containing the actual parent you are basing your child theme on. E.g. if you are using the Twenty Twelve theme you will find it is stored in a folder called /twentytwelve and so that line on your style.css file should read… @import url(“../twentytwelve/style.css”);

This is the least you can get away with here and will result in an entry on the Themes page of your WordPress control panel that has no screen shot and will be attributed to Anonymous. You really should put rather more information in this file.

Now copy the header.php file from the parent folder to your new folder and edit the copy. You need to find the <body…> tag and place the extra code immediately after it. E.g if you are using the Twenty Twelve theme you will find the following code at about line 34…

<?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
<div id=”page” class=”hfeed site”>
<header id=”masthead” class=”site-header” role=”banner”>

The <body…> line is shown in green above. DON’T ALTER ANYTHING just add the anchor text as mentioned above…

<?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
<a name=”bgf_top”></a>
<div id=”page” class=”hfeed site”>
<header id=”masthead” class=”site-header” role=”banner”>

The additional text is shown in red above. Save the edited file.

back to top

Comments are closed.