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!

How Your Blog Reader Can Enable Comments Subscription In WordPress

Having visitors participate eagerly in the comment section is one of the most rewarding experience of any blog owners. However, the truth is many times visitors come and leave comment and never comeback. The reason mainly because they forget about the posts they left comments on. So, it would be great if there is a tool to remind them about the conversation they participated when there are new content added to the discussion. Fortunately, there is a plugin does exactly that for you.

How to get your reader subscribe to a post’s discussion using Subscribe to Comments Reloaded

We are going to install a plugin called Subscribe to Comments Reloaded, which you can download from here

After installing and activating the plugin, when you go to a single post on your site (make sure you are not logged in as admin), you will see there is a checkbox under the comment section:

If that’s all you need, you can stop here. Now, if your visitors check that checkbox and post their comment, they will net notified when there is new comment to the post.

However, if you want to fine tune reader’s experience, let’s go to the settings:

There are plenty of options which I’m not going to cover all of them here. However, here are the most important sections:

Comment Form:

Here you can set the text appear on the checkbox, whether to show the checkbox or not, whether to check the checkbox by default or not…

The plugin author did a great job on the management page so I think it’s best to leave it as it is. However, if you want to modify some wordings, feel free to customize the text here.

Now, there is another important tab, that is the Notification tab. This tab allows you to edit the notification email  you send to the subscribers:

Here, you can set the Sender name. By default, it’s your blog’s name. If you want to change this anything you want. However, leave it as your blog’s name will help the subscribers know exactly who is sending the email.

The sender email address is what will display on the sender field of the email. As you can see in the screenshot below from Gmail:

The reply to, if set is the email will receive the reply from your subscribe when they decide to reply to the notification. However, since it’s just a notification, there isn’t a need to get reply. Thus, you can leave this field blank.

In the email content, you can customize it with some placeholders as listed here:

[post_title], [comment_permalink], [comment_author], [comment_content], [post_permalink], [manager_link], [comment_gravatar]

All the placeholders have very clear names, thus, there is no explanation needed.

Conclusion

As you can see, this tool lets your visitors subscribe to the posts they leave comment on (then can also subscribe to the comments without commenting) which increase the likely that they will comeback to visit that post. It’s a win-win situation for you and your reader. The number of options you can customize is just huge. The plugin’s developer has done a great job with this one.