Title: Back to top button for any WordPress theme no plugin required

Date: Monday, June 26, 2017

Home Back To Top
Back To The Top Button

The Issue:

We have a WordPress website that contains a lot of post content that we can find ourselves getting lost within as the menu for this particular website is not sticky. What we need to do is create a link or a button on our page to scroll us back to the very top.
Here is how to create the "back to the top" link without the use of a plugin or editing any of your WordPress Theme template files.
We will use a smooth scrolling effect with JQuery for a better user experience and to avoid the flash to the top as we normally see with a plain hyperlink.

The Solution:

No plugins required!
Add some code to the functions.php file in your current theme. (or child-theme if you have it activated.)

The Example:

Visit Avon Valley Contractors for an example of the code working for this child theme.

Step 1 - Creating a link in the footer

Let's create a link that will be located in your theme's footer.
Add the following code to your function.php file:

 

Step 2 - Adding Link Styles

Let's create some style for our hyperlink and place it to the bottom right of our theme's page. We will place the style in the WordPress header using wp_head. Place the code below just below the code in step 1 into our functions.php file.

 

Step 3 - Adding The Scrolling Effect

Let's add a scrolling effect by including the code below just under the code in step 2 in our functions.php file. The link will be displayed on your page if you scroll down more than 400 pixels from the top of the page and will remain hidden at the very top of our page.
Please Note: You can change the pixel height on line 6 of our code if you would like to set the link/button to display sooner or later on your page.

 

Footer

Result:

With 3 easy steps with including some code to your functions.php file within your WordPress Theme folder you're able to achieve the same results as other WordPress Scroll To The Top plugins.

Back To Top Button

How to add an image button?

FIND: In step 1 on line 3 locate the following line:

REPLACE: and replace it with the following code:

Please Note: In this example you will need to replace yourdomain.com with your actual domain name and full path to your folder. We suggest uploading your own image or icon to your webserver and add the correct path to that image into the code above.

The Completed Code in Functions.php

 

 

Share This Post

Please subscribe to my feed!

Title: Facebook 10 Tips To Boost Organic Reach In 2016

Date: Monday, June 26, 2017

Facebook Social Media Marketing As you may have already noticed your Facebook post audience on your business page have declined in the past weeks. Your post on your business page won't reach your entire audience every time. The best way to have your post show in the news feed of your audience is to publish […]

Share This Post

Title: Announcement: Terms and Agreements for Constructive Visual

Date: Monday, June 26, 2017

We have recently updated our Terms and Agreements page effective of 6th October 2012. Please visit our Announcement page for more information.  

Share This Post