How To Add Scroll To Top Button To Your WordPress Website With Custom Icon and Text

The scroll to top button is not something you are unfamiliar with. There are many websites use that feature. WordPress’ themes tend to support that feature out of the box too. My theme has a button to scroll to the top of the page when I’m reading a long post too. However, the button is not what I like. I could go and modify the code to change the button but that would be very time consuming and it’s not the best practice. So, I decided to make a plugin that enables users to add a Scroll to top button to their site.

What’s the difference between this plugin and other plugin? You may ask. Well, the difference is you can fully customize the button as you like. You can change the image, make it hidden on mobile devices (if you like). You can also change the width, height, padding and the position of the button on the screen.

Sounds good? Let’s meet the plugin.

How to use the Ultimate Scroll to Top button

So, the plugin only has one screen for all of its settings. Here are all of them:

Ultimate scroll to top button plugin settings

 

As you can see, you can set the button’s width and height in many different units. You can use pixel, em, rem, %… I would recommend you use a square ratio (1:1). However, if you find a different ratio works for you, don’t hesitate.

The padding box allows you to enter the padding value of the icon. This is the padding for all sides. You can specify the value in px, rem, % just like width and height. However, make sure you enter the unit along with the number. For example 4em, 5%…

There are two possible positions for the scroll to top icon. They are bottom left and bottom right. I hardly imagine a scroll to top button stays at the top of the page. However, you can correct me and I’ll add more positions for you.

Now, the most important part of the plugin is the content of the button. As you can see, you can set the content of the icon with a full-featured text editor. Here, you can put whatever you want: text, image or even videos. However, I would recommend you use png images. There are plenty of up arrow, scroll to top button on the internet. One place I usually go to get the icon is flaticon.com. They have many good icons you can use for the scroll to top button.

After that, you can click on save changes and see the scroll to top button appears on your site.

If you need video instructions, here it is:

 

Conclusion

It’s a plugin I made because I find the scroll to top button should be flexible. There are room for improvements, of course. If you have any question and suggestions, please let me know.

How To Hide WordPress Blog’s Admin Bar Without Using A Plugin

Admin bar is a a section stays at the top of your page that lets you quickly access your admin dashboard. It also allows you to access features such as create new page, post… However, sometime it gets in the way. For example, it makes the website look different for logged in and non logged in users. With the current version of WordPress, hiding the admin bar is extremely easy.

How To Hide WordPress Blog’s Admin Bar Using Customized CSS

In order to hide the bar when you view the frontend of your site, simply go to Appearance->Customize:

Go to appearance->customize in WordPress

You will see a screen somewhat similar to this one:

I said somewhat similar because some themes may have more options, some may have less. However, with modern themes, you should see there is a section called Additional CSS. In my case, it stays at the bottom of the panel. Let’s click on that. You will see a new panel appears as below:

Additional CSS panel

Now, enter the code at the end of the text box:

#wpadminbar {
  display: none;
}
html {
  margin-top: 0 !important;
}

Then, click on Publish button.

If you view your page now, you should see the admin bar disappear.

How does the code snippet work?

If you know CSS, the code above is very simple to understand. The first rule applies to a div with the id #wpadminbar. That’s the admin bar you see on the front end (and also, in your dashboard). The display: none rule makes sure that the admin bar will not display.

The second rule is to remove the margin-top of html document. By default, the html element has a 32px margin-top (set by WordPress). Setting the margin to 0 makes the gap between your site and your browser’s viewport disappear.

Here is the result:

If you want to make the bar appear again, simply remove that code snippet in your Customize CSS box.

That’s how you can hide the admin bar in WordPress. I hope the post is helpful to you.

Have a great day!