How to Limit Access by IP to Your wp-login.php file in WordPress

Do you want to limit access by IP address to your wp-login.php file in WordPress?

The WordPress login page is often attacked by DDoS attacks and hackers to gain access to your website. Limiting access to specific IP addresses can effectively block such attempts.

In this article, we’ll show you how to easily limit access by IP to your wp-login.php file in WordPress.

Why Limit Access to wp-login.php by IP Address?

The login page for a WordPress website (typically, wp-login.php), is where users go to log in to your site.

As a website owner, it gives you access to the WordPress admin area where you can perform website maintenance, write content, and manage your website.

However, common brute force attacks on the internet are known to target the wp-login.php page to gain access to websites. Even if they fail to get in, they may still be able to slow down your website or even crash it.

One way to deal with this situation is to block the IP addresses where attacks are coming from (We’ll talk about this later in the article).

An IP address is like a phone number that identifies a specific computer on the internet. Hackers can use software to change their IP addresses.

However, more sophisticated attacks use a larger pool of IP addresses and it may not be possible to block all of them.

In that case, you can limit the access to specific IP addresses used by yourself and other users on your website.

That being said, let’s take a look at how to easily limit access to wp-login.php file by specific IP addresses using 3 different ways including cloud security firewall.

1. Limit Access to WordPress Login Page by IP Address

For this method, you’ll need to add some code to the .htaccess file.

The .htaccess file is a special server configuration file that is in the root folder of your website and can be accessed using FTP or the File Manager app on your WordPress hosting control panel.

Simply connect to your WordPress site using an FTP client and edit your .htaccess file by adding the following code at the top.

<Files wp-login.php>
        order deny,allow
        Deny from all
 
# whitelist Your own IP address
allow from xx.xxx.xx.xx
 
#whitelist some other user's IP Address
allow from xx.xxx.xx.xx
 
</Files>

Don’t forget to replace XXs with your own IP addresses. You can easily find your IP address by visiting the SupportAlly page.

If you have other users who also need to log in to your website, then you can ask them to provide their IP addresses. You can then add those to the .htaccess file as well.

Here is another example of the above-mentioned code.

<Files wp-login.php>
        order deny,allow
        Deny from all
 
# Whitelist John as website administrator
allow from 35.199.128.0
 
#Whitelist Tina as Editor 
allow from 108.59.80.0

# Whitelist Ali as moderator
allow from 216.239.32.0
 
</Files>

Now, users with these IP addresses will be able to view the wp-login.php file and login to your website. Other users will see the following error message:

2. Blocking Specific IP Addresses from Accessing Your Website

This method is totally the opposite of the first method.

Instead of limiting WordPress login page access to specific IP addresses, you’ll be able to block IP addresses used to attack your website.

This method is particularly useful for WordPress membership websites, eCommerce stores, or other websites where multiple users need to login in order to access their accounts.

The disadvantage of this method is that hackers can change their IP addresses and continue attacking your website.

Fortunately, many of the common WordPress hacking attempts use a fixed set of IP addresses which makes this method effective in most cases.

Step 1: Finding the Offending IP Addresses You Want to Block

First, you need to find the IP addresses used to attack your website.

The easiest way to find the offending IP addresses is by looking at your server logs. Simply head over to your hosting account control panel and click on the Raw Access logs icon.

On the next page, click on your domain name to download the access logs. This will download a file with gz extension.

You will need to extract the file and open it with a text editor like Notepad or TextEdit.

From here you will find the IP addresses that are repeatedly hitting the wp-login.php page.

Copy and paste the IP addresses into a separate text file on your computer.

Step 2. Blocking Suspicious IP Addresses

Next, you need to log in to your WordPress hosting control panel and click on the IP Blocker icon.

On the next screen, simply copy and paste the IP addresses you want to block and click on the Add button.

Repeat the process to block any other suspicious IP addresses you want.

That’s all! You have successfully blocked suspicious IP addresses from accessing your website completely.

Later on, if you need to unblock one of these IP addresses, you can simply do so from the IP blocker app.

3. Protecting WordPress Login with Website Firewall

As a website administrator, you may not want to spend too much time managing IP addresses that can access your WordPress login page.

The easiest way to protect your WordPress login pages is by using Sucuri. It is the best WordPress firewall that accompanies a comprehensive WordPress security plugin.

Sucuri’s website firewall automatically filters suspicious IP addresses from accessing important WordPress core files without them ever reaching your website.

This method also improves your WordPress performance and speed as it blocks suspicious activities from slowing down your server.

On top of that, Sucuri also comes with a built-in CDN network. It would automatically serve static files like images, stylesheets, and JavaScript from a server closer to your users.

You can easily whitelist the IP addresses of users if they are unable to access WordPress login pages.

Alternative: Cloudflare Free CDN

We hope this article helped you learn how to limit access by IP address to your wp-login.php file. You may also want to see our complete WordPress security guide or see these additional tips for protecting the WordPress admin area.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Limit Access by IP to Your wp-login.php file in WordPress first appeared on WPBeginner.

August 16, 2022 at 02:10PM

How to Export WordPress Form Entries to CSV and Excel

Do you want to export your form responses to a spreadsheet?

If you have a lot of form entries, then exporting them to a CSV or Excel file helps you analyze them. You can even use the form data in other applications.

In this article, we’ll show you how to export WordPress form entries to CSV and Excel formats.

Why Export WordPress Form Entries to CSV and Excel?

WordPress forms are a great way of staying connected with your audience. They help you collect customer leads, get valuable feedback, resolve customer queries, find new product suggestions, conduct surveys, and more.

However, analyzing the data can be difficult if you have a lot of form entries. This is where exporting your data in the form of CSV (comma-separated values) and Excel files comes in handy.

For example, you can find out which products or features your users want the most or uncover common issues people face while using your WordPress site.

Another benefit of exporting WordPress form entries to CSV and Excel is that you can use the data with other applications.

Besides spreadsheet software like Google Sheets and Microsoft Excel, you can upload your form entries to analytics software. For instance, you can use Microsoft Power BI with a CSV or Excel file to create dashboards and other visualizations for your form entries.

That being said, let’s look at how you can create a WordPress form and export form entries to CSV and Excel.

Creating a WordPress Form to Collect Data

Before you can export form entries to CSV and Excel, you’ll need a WordPress form.

The best way of creating a WordPress form is by using WPForms. It’s the best contact form plugin for WordPress and is used by over 5 million websites.

WPForms offers a drag and drop form builder, which makes it effortless to create and customize WordPress forms. Plus, you get pre-built form templates to start quickly and customize the form according to your needs.

You can follow our step-by-step guide on how to create a contact form in WordPress.

WPForms also comes with powerful addons that help you collect online payments, integrate with email marketing services, store users’ geolocation, reduce form abandonment, and more.

For this tutorial, we’ll use the WPForms Pro version because it includes the option to export form entries and offers more features. There’s also a WPForms Lite version that you can try for free.

Exporting WordPress Form Entries to CSV and Excel

Once you’ve added a contact form on your WordPress blog and started getting form submissions, the next step is to export your form entries.

To start, simply head to WPForms » Entries in your WordPress admin panel, and then select a WordPress form to export its entries.

After that, you will see all the entries for the form you selected.

Go ahead and click the ‘Export All’ option.

Next, WPForms will show you different export options for your form entries.

You can choose which form fields to export, as well. By default, the export will include name, email address, and message fields.

However, there are also options to export additional information such as entry ID, date, user agent, user IP, payment status, and more.

From here, simply scroll down to the ‘Export Options’ section.

You can click the ‘Export in Microsoft Excel (.xlsx)’ checkbox to export the data in Excel format. If the box is left unchecked, WPForms will export as a CSV file.

There’s also a custom date range selector to help you export data from a specific time.

Plus, you can use the search feature to filter form entries. For example, you can export forms that only contain or don’t contain a specific name, email, message, ID, and more.

Next, go ahead and click the ‘Download Export File’ button and save the file to your computer.

You’ll now see a message that your export file was successfully generated.

How to Export a Single WordPress Form Entry

WPForms also lets you export a single form entry instead of downloading all the submissions. This is helpful if you have a multi-step form and only require information about a particular lead.

To start, simply go to WPForms » Entries from your WordPress dashboard and select a form to view its entries.

You should now be able to see all your forms. From here, click on the form that contains the single entry you need.

On the next screen, find the entry you want to export, and then go ahead and click the ‘View’ button.

After that, you’ll see details of your form entry.

Simply click the ‘Export (CSV)’ or ‘Export (XLSX)’ options in the Actions metabox on the right-hand side to download the file.

You can now save the CSV or Excel file on your computer and open it in spreadsheet software.

Bonus: Connect WordPress Forms to Google Sheets

Did you know that you can automate the process of gathering form entries and showing them in Google Sheets?

Connecting your WordPress forms with Google Sheets automatically collects the data in a spreadsheet. This makes it easier for team members to access form entries without creating a new WordPress login.

Plus, you don’t have to manually export form entries or collect data to share it with other people. It helps save time and reduces any errors that may occur when manually exporting data.

The best way to set up automation is by using Uncanny Automator. It is the best WordPress automation plugin and helps connect WordPress plugins and third-party apps.

You can follow our detailed guide on how to connect any WordPress forms to Google Sheets for more information.

We hope this article helped you learn how to export WordPress form entries to CSV and Excel. You may also want to see our ultimate guide on WordPress SEO, and our expert pick of the best WooCommerce plugins.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Export WordPress Form Entries to CSV and Excel first appeared on WPBeginner.

August 15, 2022 at 04:30PM

How to Easily Add Custom Code in WordPress (Without Breaking Your Site)

Often while reading WordPress tutorials, you may be asked to add custom code snippets in your theme’s functions.php file or in a site-specific plugin.

The problem is that even the slightest mistake can break your website.

In this article, we will show you an easy way to add custom code in WordPress without breaking your site.

The Problem with Custom Code Snippets (And How to Fix It)

Often you’ll find code snippets in WordPress tutorials with instructions to add them into your theme’s functions.php file or a site-specific plugin.

The biggest problem is that even a tiny mistake in the custom code snippet can break your WordPress site and make it inaccessible.

Not to mention, if you update your WordPress theme, then all your customizations get removed.

The other problem is that if you add multiple code snippets in a site-specific plugin, it can become hard to manage the file.

Luckily, there is an easier way for users to add and manage custom code snippets in WordPress.

WPCode is the most popular code snippets plugin used by over 1 million WordPress websites. It makes it easy to add code snippets in WordPress without having to edit your theme’s functions.php file.

WPCode also makes it simple to add tracking codes for Google Analytics, Facebook Pixel, Google AdSense, and more to your site’s header and footer areas.

You’ll never have to worry about breaking your site because the smart code snippet validation helps you prevent common code errors.

In addition, WPCode comes with a built-in snippets library where you can find all of the most popular WordPress code snippets like disable REST API, disable comments, disable Gutenberg, allow SVG file uploads, and much more. This eliminates the need to install separate plugins for each feature request.

The best part is that you can manage all your code snippets from one central screen and add tags to organize them.

With that said, let’s take a look at how to easily add custom code snippets in WordPress with WPCode.

Adding Custom Code Snippets in WordPress

The first thing you need to do is install and activate the WPCode plugin on your website.

For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, the plugin will add a new menu item labeled ‘Code Snippets’ to your WordPress admin bar. Clicking on it will show you a list of all the custom code snippets you have saved on your site.

Since you just installed the plugin, your list will be empty.

Go ahead and click on the ‘Add New’ button to add your first custom code snippet in WordPress.

This will bring you to the ‘Add Snippet’ page. Here you can choose a code snippet from the pre-made library or add your custom code.

To add custom code, click on the ‘Use snippet’ button underneath the ‘Add Your Custom Code (New Snippet)’ option.

You need to start by entering a title for your custom code snippet. This could be anything that helps you identify the code.

After that, you can copy and paste your code snippet into the code box. Be sure to also select the correct code type from the drop-down menu on the right.

In the screenshot above, we have added a custom code snippet to remove the WordPress version number from our test site.

function wpb_remove_version() {
return '';
}
add_filter('the_generator', 'wpb_remove_version');

Below the code box, you will see insertion options. There are two main insertion options: Auto Insert and Shortcode (Default).

If you chose the ‘Auto Insert’ method, the snippet will be automatically inserted and executed on your site.

You can automatically run the snippet only in the WordPress admin area, on the front-end of your site, or everywhere. If you are unsure, then select the default ‘Run snippet everywhere’ option.

With the ‘Shortcode’ method, the snippet is not automatically inserted. Once you save the snippet, you’ll get a shortcode specific to the snippet that you can use anywhere on your site.

When you scroll further down, you will see a ‘Basic info’ area. You can add anything here that helps you understand what this code does, where you found it, and why you are adding it to your website.

You can also assign tags to your code snippet. This will help you sort your code snippets by topic and functionality.

The priority field allows you to control the order in which the snippets are executed when you want to display multiple snippets in the same location. By default, all snippets get a priority of 10. If you want a snippet to display earlier than others, simply set the snippet priority to a lower number, like 5.

Lastly, you can use the powerful ‘Smart Conditional Logic’ section to either show or hide auto-inserted snippets based on a set of rules.

For example, you can show code snippets to logged-in users only, load code snippets only on specific page URLs, and more.

When you’re finished choosing options, you can click the ‘Save Snippet’ button in the top-right corner of the screen and toggle the switch from ‘Inactive’ to ‘Active.’

If you want to save the code snippet and not activate it, then simply click on the ‘Save Snippet’ button.

Once you have saved and activated the code snippet, it will be added to your site automatically, if that’s the insertion method you chose, or displayed as a shortcode.

Handling Errors in Custom Code

Often, if you make a mistake in adding the custom code in your site-specific plugin or theme file, then it would immediately make your site inaccessible.

You would start seeing a syntax error or a 500 internal server error on your site. To fix this you’ll need to manually undo your code using an FTP client.

The neat part about the WPCode plugin is that it will automatically detect a syntax error in the code and immediately deactivate it.

It will also show you a helpful error message, so you can debug the error.

WPCode’s smart code snippet validation will also detect any errors as you’re adding your custom code.

Hovering over the error will bring up instructions to help you fix it.

Managing Your Custom Code Snippets

WPCode plugin provides an easy user interface to manage your custom code snippets in WordPress.

You can save code snippets without activating them on your site, and then activate or deactivate the snippet at any time you want. It’s also possible to filter code snippets by type and location, and use tags to organize your code snippets easily.

You can also export specific code snippets or bulk export all of them.

Simply go to Code Snippets » Tools and click on the ‘Export’ tab.

If you’re moving websites to a different server, you can easily import your code snippets to the new site.

Just visit the Code Snippets » Tools » Import page and upload the export file.

We hope this article helped you learn how to easily add custom code in WordPress. Want to experiment with some code snippets on your website? Check out our list of extremely useful tricks for the WordPress functions file, and don’t forget to see our ultimate guide to speeding up your WordPress site.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Easily Add Custom Code in WordPress (Without Breaking Your Site) first appeared on WPBeginner.

August 14, 2022 at 04:00PM

WordPress Block Editor vs Page Builders: What’s the Difference?

As the WordPress block editor adds more site editing features, we have been asked if it is meant to be a replacement for drag and drop WordPress page builder plugins?

The WordPress block editor is quite intuitive and can be used to create beautiful content layouts. However, it is still no match for the powerful page builder plugins.

In this article, we’ll compare WordPress block editor vs page builder plugins to help you understand the difference.

WordPress Block Editor vs Page Builders (Explained)

The block editor is the default editor in WordPress. It uses blocks for common website elements (hence the name, Block Editor).

When creating posts and pages on your WordPress site, you can use the block editor to add and edit your content. The block editor is also used for all your widget areas. And now, some themes called ‘block themes’ even support using the block editor for every area on your website.

Since the block editor allows you to use blocks for creating content layouts, it is easy to confuse it with a drag-and-drop page builder.

However, it is still nowhere close to being called a page builder.

WordPress page builder plugins are drag-and-drop design tools allowing you to create custom WordPress website designs without writing any code.

Top WordPress page builders like SeedProd, Beaver Builder, Divi, Elementor, and Visual Composer are significantly more powerful.

They come with ready-made templates that you can use and offer much more design flexibility than WordPress block editor.

To understand better, let’s take a deeper look at the differences between WordPress block editor and Page Builders.

Key Differences Between Gutenberg and Page Builder Plugins

The biggest difference is that the block editor comes built-in with WordPress core software as the default editor.

On the other hand, page builder plugins are created and supported by third-party developers.

WordPress.org team does not call the default editor a page builder. Instead, they call it the block editor, and it’s presented as a modern way to edit your website in WordPress.

There’s a big reason for that, and it’ll become very clear as you read the differences between the two.

1. Theme Compatibility & Support

The WordPress block editor relies heavily on your theme styles. It does add some of its own CSS and even allows you to add custom CSS for blocks, but it doesn’t override your theme styles and settings.

While page builder plugins can work with your theme styles, they also give you the option to completely take over a page and override your theme’s styles.

Some WordPress page builders like SeedProd are completely theme agnostic. This means that pages created with SeedProd would look the same even if you change your WordPress theme.

This is extremely helpful if you want to create custom layouts for all website pages.

2. Blocks and Widgets

WordPress block editor comes with a decent set of default blocks covering all the commonly used content elements. You can also save and reuse blocks in other posts and even on other WordPress websites.

It has a powerful API allowing plugin developers to create their own blocks. All top WordPress plugins also have their own WordPress blocks that you can use.

On the other hand, WordPress page builders come with even more blocks.

They offer advanced content elements, including carousels, sliders, call-to-action buttons, contact forms, countdown timers, and more.

You can also save individual blocks, rows, or entire templates to reuse later.

3. Formatting & Styling Options

The blocks in the WordPress block editor come with their own styling and formatting options. However, these options are limited.

For more styling and formatting, you’ll have to add your own custom CSS for a block.

Page Builders, on the other hand, offer more styling options by default.

You can change the background colors of blocks, use gradients, use font-icons, select fonts, line height, adjust the width of elements, use styles on images, and more.

4. Templates, Patterns, and Sections

The block editor comes with patterns, which are sets of blocks to quickly insert commonly used areas on a WordPress blog.

For instance, you can use block patterns for headers, call-to-action buttons, columns, and more.

Your WordPress theme may come with its own patterns. You can also find and install patterns from WordPress.org’s patterns library.

If you are using a block theme (themes that support full site editing), then you can also edit theme templates. Your WordPress theme may come with templates you can edit using the block editor.

However, these templates are generic and provide functionality to display common pages of a typical WordPress website.

WordPress page builder plugins come with more pre-made templates and sections or patterns.

Unlike block editor, these sections and templates don’t rely on your WordPress theme for styling.

Most WordPress page builder plugins come with dozens of ready to use templates that are highly optimized for conversions.

Plus, you also get templates for specific business types and websites which makes it much faster to customize them for your own needs.

5. Drag and Drop Features

The WordPress block editor is not a drag and drop design tool (at least, not in its current form).

You can add blocks and move them up and down, but you cannot adjust their width/height using your mouse, move blocks next to each other, or create complex layouts.

The block editor comes with group and column blocks that can be used to create beautiful page layouts.

On the other hand, page builders allow you to drag and drop blocks/widgets, adjust their height and width, create columns and add blocks inside other blocks.

These drag and drop allow you to design your pages and complete websites easily.

6. Full Site Editor vs WordPress Page Builders

You can also use the block editor to edit your WordPress theme. However, you’ll need a WordPress theme that supports the full site editor to try this out.

The WordPress full site editor comes with sitewide blocks like query block, site logo, navigation menus, and more.

You can edit your theme templates like header, footer, homepage, and more.

However, the full site editing feature requires using a supported theme. Your changes will disappear if you change your WordPress theme.

On the other hand, WordPress page builder plugins allow you to create individual pages to create your website. They can work with any WordPress theme, and you can change your WordPress theme.

WordPress theme builder plugins SeedProd can even help you create custom WordPress theme without writing any code.

You can easily edit any section or page of your theme with the drag and drop builder. It even lets you select conditions for displaying each template. For example, you could display different sidebars for different sections of your site.

7. Development Goals

The default WordPress block editor is developed to make it easier for users to create content and edit their websites. It is intended to be used by everyone including bloggers, writers, photographers, and businesses.

The page builder plugins offer ability to create conversion and sales oriented pages without much effort. They are intended to be used by small businesses, aspiring designers, WordPress agencies, eCommerce stores, and more.

While the block editor helps you create better content, page builder plugins help you create better landing pages that help you increase sales, boost subscribers, and grow your business.

Can or Will the Block Editor Replace WordPress Page Builders?

In its current form, the block editor is a good content editor and an easy way to edit and customize your WordPress theme.

However, it is currently not a replacement for powerful drag and drop page builder plugins.

With that said, it is in the WordPress roadmap to expand block editor functionality and promote full site editing features.

We will have to wait and see the improvements to determine if block editor will ever come close to the powerful WordPress page builder plugins.

Which Page Builder Plugin to Use with the Block Editor?

All top WordPress page builder plugins work well with the WordPress block editor. You can take a look at our pick of the best WordPress page builder plugins, and how they stack up against each other.

If you’re looking for an easy-to-use and powerful WordPress page builder, then we recommend SeedProd. It offers a drag and drop builder and over 200+ built-in themes to create any type of landing page without coding.

The plugin is lightweight and ensures that your pages load quickly, helping your rank higher in SEO. It also integrates with popular email marketing services such as Constant Contact, Drip, ConvertKit, and more.

We hope this article helped you understand the difference between block editor vs WordPress page builder plugins. You may also want to see our guide on how much does it cost to build a WordPress website, or see our expert pick of the best AI chatbots for small business.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post WordPress Block Editor vs Page Builders: What’s the Difference? first appeared on WPBeginner.

August 13, 2022 at 03:00PM

How to Add a Smooth Scroll to Top Effect in WordPress using jQuery

Do you want to add a smooth scroll to the top of the page effect on your WordPress website?

A scroll to top effect is great when you have a long page and want to give your users an easy way to get back to the top. It helps improve the user experience of your website.

In this article, we will show you how to add a smooth scroll-to-top effect in WordPress using jQuery and a plugin.

What is Smooth Scroll and When Should You Use It?

Unless the site has a sticky header menu, users that scroll to the bottom of a long WordPress page or post have to manually swipe or scroll their way back to the top to navigate the site.

That can be a real annoyance, and often users will simply hit the back button and leave. That’s why you need a button that will quickly send users to the top of the page.

You can add this functionality as a simple text link without using jQuery, like this:

<a href="#" title="Back to top">^Top</a>

That will send users to the top by scrolling up the entire page in milliseconds. It works, but the effect can be jarring, kind of like when you hit a bump in the road.

Smooth scroll is the opposite of that. It will slide the user back to the top with a visually pleasing effect. Using elements like this can drastically improve the user experience on your site.

That said, let’s see how you can add a smooth scroll to top effect using a WordPress plugin and jQuery.

How to Add a Smooth Scroll-to-Top Effect Using a WordPress Plugin

This method is recommended for beginners, since you can add a scroll-to-top effect to a WordPress website without touching a single line of code.

The first thing you’ll need to do is install and activate the WPFront Scroll Top plugin. If you need help, then please see our guide on how to install a WordPress plugin.

Upon activation, you can go to Settings » Scroll Top from your WordPress dashboard. Here you can configure the plugin and customize the smooth scroll effect.

First, you’ll need to click the ‘Enabled’ checkbox to activate the scroll-to-top button on your site. Next, you’ll see options to edit the scroll offset, button size, opacity, fade duration, scroll duration, and more.

If you scroll down, you’ll find more options like editing the auto-hide time, enabling the option to hide the button on small devices, and hiding it on the wp-admin screen.

You can also edit what the button does when you click it. By default, it will scroll to the top of the page, but you can change it to scroll to a particular element in the post or even link to a page.

There’s also an option to change the location of the button. It will appear in the bottom right corner of the screen by default, but you can choose to move it to any of the other corners, too.

The WPFront Scroll Top plugin also offers filters to show the scroll-to-top button only on selected pages.

Normally, it will appear on all the pages on your WordPress blog. However, you can navigate to the ‘Display on Pages’ section and choose where you’d like to display the scrolling to the top effect.

The plugin also offers pre-built button designs you can choose from. You should be able to easily find a design that matches your site.

If you can’t find a pre-built image button that works for you, then there is an option to upload a custom image from the WordPress media library.

When you’re done, simply click the ‘Save Changes’ button.

You can now visit your website to see the scroll-to-top button in action.

Adding Smooth Scroll to Top Effect with jQuery in WordPress

This method is not recommended for beginners. It is suitable for people who are comfortable editing themes because it includes adding code to your website.

We will be using jQuery, some CSS, and a single line of HTML code in your WordPress theme to add the smooth scroll top effect.

First, open a text editor like Notepad and create a file. Go ahead and save it as smoothscroll.js.

Next, you will need to copy and paste this code into the file:

jQuery(document).ready(function($){
        $(window).scroll(function(){
        if ($(this).scrollTop() < 200) {
                        $('#smoothup') .fadeOut();
        } else {
                        $('#smoothup') .fadeIn();
        }
    });
        $('#smoothup').on('click', function(){
                $('html, body').animate({scrollTop:0}, 'fast');
                return false;
                });
});

After that, you can save the file and upload it to the /js/ folder in your WordPress theme directory. For more details, please see our guide on how to use FTP to upload files to WordPress.

If your theme does not have a /js/ directory, then you can create one and upload smoothscroll.js to it. You can also see our guide on the WordPress files and directory structure for more information.

This code is the jQuery script that will add a smooth scroll effect to a button that takes users to the top of the page.

The next thing you need to do is to load the smoothscroll.js file in your theme. To do that, we will enqueue the script in WordPress.

After that, simply copy and paste this code to your theme’s functions.php file. We don’t recommend directly editing the theme files because the slightest mistake can break your site. Instead, you can use a plugin like WPCode and follow our tutorial on how to add custom code snippets in WordPress.

wp_enqueue_script( 'smoothup', get_template_directory_uri() . '/js/smoothscroll.js', array( 'jquery' ), '',  true );

In the above code, we have told WordPress to load our script and also load the jQuery library since our plugin depends on it.

Now that we have added the jQuery part, let’s add an actual link to our WordPress site that takes users back to the top. Simply paste this HTML anywhere in your theme’s footer.php file. If you need help, then please see our tutorial on how to add header and footer code in WordPress.

<a href="#top" id="smoothup" title="Back to top"></a>

You may have noticed that the HTML code includes a link but no anchor text. That’s because we will use an image icon with an up arrow to display a back-to-top button.

In this example, we are using a 40x40px icon. Simply add the custom CSS below to your theme’s stylesheet.

In this code, we are using an image icon as the button’s background image and setting it in a fixed position. We have also added a little CSS animation, which rotates the button when a user hovers their mouse over it.

#smoothup {
height: 40px;
width: 40px;
position:fixed;
bottom:50px;
right:100px;
text-indent:-9999px;
display:none;
background: url("https://www.example.com/wp-content/uploads/2013/07/top_icon.png");
-webkit-transition-duration: 0.4s;
-moz-transition-duration: 0.4s; transition-duration: 0.4s;
}

#smoothup:hover {
-webkit-transform: rotate(360deg) }
background: url('') no-repeat;
}

In the CSS above, make sure that you replace https://www.example.com/wp-content/uploads/2013/07/top_icon.png with the image URL you want to use. You can upload your own image icon using the WordPress media uploader, copy the image URL, and then paste it into the code.

We hope this article helped you add a smooth scroll to top effect on your site using jQuery. You may also want to see our expert pick of the best WordPress plugins for small business and our step by step guide on how to start an online store.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Add a Smooth Scroll to Top Effect in WordPress using jQuery first appeared on WPBeginner.

August 12, 2022 at 03:00PM