How to add “To Top” feature in your WordPress site
By Adarsh Sojitra on April 10th, 2021
WordPress is an open-source cms(web content management system) with mysql backend support. An open-source software that gives you freedom to modify it however you want according to your requirements. In the early years of WordPress, the only porpose of WordPress was to create and manage a blog. As WordPress is getting better and better day by day, WordPress can now create more than a blog.
We can design and manage a blog, e-commerce website, a portfolio, business website, social networks etc. Today wordpress gives backends support to more than 40% of websites that are available on the internet. If you want to have a website, then you don’t need to hire any developer or learn to code if you are using WordPress.
As it is so huge, people need plugins to do everything on their website. One of the best User Experience is the “To Top” button. And yes, We can simply install and activate the plugin to start using it. The name of the plugin is just “To Top” and click here to access the plugin page on WordPress repository.
So, In this article, we are going to learn How to install and configure the “To Top” plugin in WordPress. To Top plugin will give a button on your website, which helps the website user redirect to the top of the page. You can choose the place of the to top button and you can also customize the button. You can give your website’s comparative look and modify its functionality. Let’s take a look at this tutorial about installing and using the to top plugin on your website.
How to install “To Top” plugin in WordPress
Step 1: Firstly, log into your wordpress account dashboard with your username and password.
Step 2: Then, click on the Plugins tab that is available on the left-sided tab section, as you can see in the image below.
Step 3: After you click on the plugin tab, WordPress will redirect you to the plugins management page.
Now click on Add New button that is available on top of the page or Add New tab available on the left-side tab section, as you can see in the below image.
Step 4: Now find and click on the search box from the right-side of the screen. Then, click on the search box and type “To Top” in the textbox.
Step 5: Now, find the To Top plugin from the search result. It has up arrow in black and blue icon. After you find the required plugin, find and click on the “Install Now” button that is available just beside the plugin name, as you can see in the below image. The installation process will take a couple of minutes.
Step 6: After the successful installation, the install button will be replaced by the activate button. In wordpress, we have to activate the plugin just before start using it. So click on the activate button, as you can see in the below image.
Step 7: As the plugin activates successfully, the page will redirect to the installed plugin page with a success message indicating that the plugin is active now.
So this is how we can install and activate the “To Top” plugin in WordPress. However, It also allows us to configure the button and customise the look of the button. Let’s learn How to configure it according to the requirements.
How to configure “To Top” plugin in WordPress
Step 1: Firstly, log in to your WordPress account with administrator username and password.
Step 2: Then, click on the “To Top Settings” tab available on the left-sided tab section, as you can see in the below image.
Step 3: The below image is a configuration page of the To Top plugin. You can find two tabs on the top of the configuration page. The first one is a dashboard tab, and the other one is a features tab.
Step 4: Now, click on the first tab called the Dashboard tab to see the To Top plugin settings.
Live preview: The first setting available on the dashboard tab is a “want live preview?”. If you want to see the preview of the to top button on your website, then you can click on customizer link that is available on the setting as you can see in the following image.
Step 5: After completing the last step, Go to the next option that is basic settings. Click on the basic settings tab to expand the basic settings. Let’s see each setting one by one.
- Scroll offset(px): The first field is scroll offset, as shown in the below image. This setting will help you to appear scroll offset. Click and enter the value in pixel measurement in the textbox.
- Icon opacity(%): The second field is the opacity setting. This setting will help you to increase and decrease the icon opacity setting.
- Style: Now, the following setting is icon style. You’ll find it on the drop-down menu, as you can see in the image below. Click on the drop-down menu and select the style as per your requirement.
Now click on the “Save Changes” button, as you can see in the below image.
Step 6: Now, coming to the next step called icon settings, click on the icon settings tab to expand it, as you can see in the below image.
Step 7: We can change our icon design and relate to icon settings like icon type, icon colour, icon background colour, icon size, and border radius. Let’s see each setting in brief.
- Select Icon Type: The first setting is available to set the icon type from the available list, as you can see in the below image. Choose the icon type and click on the icon to set the default icon on the website.
- Icon Color: This setting will help you set the icon colour, click on the icon box and select the colour as per your design.
- Icon Background Color: This option will help you to set the background colour of the icon. Click on the colour icon and select the background colour.
- Icon size (px): This setting will help you change the icon’s size, click on the textbox, and enter the pixel measurement size. You can also see the preview at the top of the settings.
- Border radius (%): Now, you can also add some radius with this option. Just click on the textbox and type the required radius as per the rules, and you can change the look of the icon.
Now click on the Save Changes button that is available in the last, as you can see in the following image.
Step 8: Now, navigate to the following advanced settings option. Click on the advanced setting tab to expand the tab settings.
Step 9: In this section, You’ll find a couple of different settings related to location and margins. Let’s see each setting in brief.
- Location: The first setting will help you set the to top icon’s location on the web page. Click on the drop-down menu to find some options like bottom left, bottom right, top left, top right. Select the location as per your requirement.
- Margin X (px): This setting will help you set the horizontal margins from the page start. Just click on the textbox, which is available on the front of the label and enter the margin in pixel measurement.
- Margin Y (px): This setting will help you set the icon’s vertical margin on the web page. Just click on the textbox, which is available on the front of the label and enter the margin in pixel measurement.
- Show on wp-admin?: If you want to display the to top icon on the wordpress admin page, you can click on the checkbox and mark it as true. The icon will enable on the wordpress admin panel too.
- Enable auto hide: This setting will make the to top icon auto-hide from the webpage. Click on the check box and mark it as true. This setting will make the icon hide when not in use.
- Auto hide time(secs): Now, the following setting is the to top button’s time setting. You can decide the time when the icon will hide from the webpage. You can set the seconds by typing it on the textbox.
- Hide on small devices: This option will help you hide the To Top button on different small devices like tablet and mobile browser. Just click on the checkbox and mark it as true to disable the To Top button on small devices.
After the changes, click on the “Save Changes” button to save the advanced settings. You can find the save changes button at the bottom of the setting tab.
Step 10: Now, come to the next option that is reset settings, as you can see in the below image. Click on the reset setting tab to expand the settings.
Step 11: In this setting, you can reset all the changes that we made in settings. To reset the setting you have to click on the check box that is available as “check to reset all settings”.
Then click on the “Save Changes” button to start the process of resetting the changes.
Step 13: Then come to the top of the page. Click on the second tab as features options that come near the dashboard options, as you can see in the below image.
Feature list: After you click on the features option features page will open on your screen. In this, you will get some basic information, as you can see in the below image.
So, this is how you can install and configure the “To top” button on your WordPress site. You can also customise this plugin from the “Appearance -> Customize” option in the WordPress. It means that you can configure the look and design of your plugin while you are editing your WordPress theme. It is good as you can consider it as a part of your site’s design.
This plugin is very easy, light and improves the User experience a lot! If you are a blogger who writes long articles, or if you have landing pages that are longer, to top button is must. We hope this tutorial was helpful for you. If you have questions, please let us know in the comments section given below. We are happy to help!