How to Add Custom Fields to Comments Form in WordPress

Do you want to add custom fields to the WordPress comment form?

The default WordPress comment form has four fields (name, email, website, and message). But sometimes you may want to add other fields like rating, checkbox option, etc.

In this article, we will show you how to customize the comment form in WordPress by adding custom fields.

Why Add Custom Fields to Comments Form in WordPress?

By default, the WordPress comment form asks for the visitor’s name, email address, and website. It also has an area where people can type in their comment, and a checkbox that visitors can use to save their personal information for the next time they post a comment.

For most WordPress websites, this is perfect. However, sometimes you might want to customize the WordPress comment form to collect more information from your visitors.

This can help you learn more about the people who visit your WordPress blog, so you can provide them with a better experience.

Custom fields can also make your comment sections more engaging and lively. For example, you might ask visitors for information that will spark discussion and debate in your site’s comment section.

Or if you’re using comments for reviews, then you might want users to add the rating score in comments.

That being said, let’s see how you can add custom fields to the standard comments form on your WordPress website.

How to Customize the WordPress Comment Form

The easiest way to add custom fields to the WordPress comment form is by using the WordPress Comments Fields plugin.

This plugin lets you add a range of different fields to your comment forms, including checkboxes, radio buttons, and dropdown menus.

All of the information that visitors enter into the custom fields will appear as part of their published comment.

This is why it’s a good idea to avoid using custom comment fields to collect sensitive information from your visitors.

First, you’ll need to install and activate the

WordPress Comments Fields plugin. For more details, please see our guide on how to install a WordPress plugin.

Upon activation, go to Comments » Comment Fields. To add a custom field to your comment form, simply click on the ‘Add field’ button.

You can now choose the type of field that you want to add to your custom WordPress comment form.

Your choices include text fields, checkboxes, and radio buttons.

Once you’ve done that, you’ll see additional settings where you can configure the custom field.

To start, you’ll need to create a label. This will appear above your custom comment field and let visitors know what information you expect them to enter.

You can type your label into the ‘Title’ field. As you type, the plugin will fill in the ‘Data name’ field automatically.

The data name will help you identify this information when it’s used in other locations, for example in any email notifications you’ve set up.

If you want to use a different value instead, then you can simply change the text in the ‘Data name’ field.

After you’ve done that, you can type an optional description into the ‘Description’ field.

This will be shown next to the field’s title. With that in mind, you can use the description to provide some extra information about the custom field, such as why you need this information from the visitor.

You can also set a minimum and maximum limit for how many characters the visitor can type into the custom field.

In this way, you can encourage visitors to enter the right information, while helping to combat comment spam in WordPress. For example, if you’re creating a custom field where visitors can type in their phone number, then it makes sense to set a maximum and minimum limit.

To set these optional limits, type your values into the ‘Max Length’ and ‘Min Length’ boxes.

By default, everyone who visits your site will see this extra field in your WordPress custom comment form.

However, sometimes you may only want to show the custom field to people who have a certain user role. For example, if you’ve created a WordPress membership site, then you might want to show your custom field to registered members only.

To limit this field to members or guests, simply open the ‘Visibility’ dropdown and then click on either ‘Only members’ or ‘Only Guests.’

Another option is to only show the custom field to people who have a specific user role.

To do this, open the ‘Visibility’ dropdown and then click on ‘By role.’ This adds a new field where you can type in the user role. To add multiple user roles, simply separate each role with a comma.

Before the visitor starts typing into the custom field, you may want to show a placeholder value. This can help people understand what information they need to type into the custom comment field.

You can type your placeholder value into the ‘Placeholder’ field.

If the visitor doesn’t enter anything into the custom field, then you may want to use a default value instead. For example, you might create a checkbox that’s set to ‘opt-out’ by default.

You can type a default value into the ‘Set default value’ field.

Your custom comment field is marked as optional by default. However, you can make the field mandatory so that visitors can’t submit a comment without completing this field.

To make this change to your custom WordPress comment form, simply go ahead and check the ‘Required’ box.

Some custom fields have extra settings that you can configure.

If you’re creating a ‘Select Input,’ ‘Radio Input,’ or ‘Checkbox Input’ field, then make sure you click on the ‘Add Options’ tab.

Here, you can create all the options that visitors can choose between. For example, you might create ‘Yes’ and ‘No’ options for a custom checkbox field.

To create an option, simply type in the text that will be shown to the visitor.

To add another option, go ahead and click on the + button and then type in the text that you want to use.

You can add as many options as you want to your WordPress custom comment form following the same process described above.

When you’re happy with the options you’ve created, just click on the ‘Add Field’ button.

The popup will now close and you’ll see your new custom field in the Comments » Comment Fields section of the WordPress dashboard.

You can now add more fields to your custom WordPress comment form by following the same process described above.

When you’re ready to add a custom field to the comment form, make sure its ‘Status’ slider is set to ‘On.’

You can then go ahead and click on the ‘Save Fields’ button.

Now if you visit your site, you’ll see the extra fields in the custom WordPress comment form.

If you want to remove a custom field from the comment form at any point, then simply head back to Comments » Comment Fields.

You can then find the custom field that you want to remove, and click on its sider so it shows a red ‘Off’ label.

Once you’ve done that, just click on the Save Fields button.

Now if you check your website, you’ll see that this custom field has disappeared from the WordPress comment form.

We hope this article helped you learn how to add custom fields to the comments form in WordPress. You can also go through our guide on the best membership plugins and how to create a contact form in WordPress.

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 Custom Fields to Comments Form in WordPress first appeared on WPBeginner.

July 17, 2022 at 05:00PM

How Much Does a Custom WordPress Theme Cost?

Do you want to know how much it costs to build a custom WordPress theme?

Creating a custom theme gives a lot of freedom and flexibility over the layout and design of your WordPress site. However, many people don’t opt for a custom theme because they think it will be expensive.

In this article, we will share how much does a custom WordPress theme cost, as well as a few tips on how you can save money and avoid overpaying.

What is a Custom WordPress Theme?

A custom WordPress theme has a unique design, layout, and set of features that are made specifically for your business needs.

There are many free and premium WordPress themes available, but a custom WordPress theme helps your company or brand to stand out with a unique look.

The benefit of getting a custom WordPress theme is that you’re not limited by the constraints of a pre-existing template or layout. You have full freedom to customize your website and get any specific functionality built into your theme.

Create Custom Themes Using a Plugin vs Hiring a Designer

You now have lots of options to choose from when creating a WordPress theme. There are DIY theme builders that you can use on your own, or you can hire a freelance designer and agency to create a WordPress theme.

Let’s take a closer look at which is better, using a plugin or hiring a professional.

Using a WordPress Theme Builder Plugin

To create a custom WordPress theme, you no longer need to depend on someone who can design and code your theme for you.

SeedProd is a WordPress page builder that has made it super easy to create a custom theme from scratch without coding. It offers pre-built templates that you can use to get started quickly or use a blank template to create a custom theme.

Using the DIY drag and drop page builders, you can then easily customize every element of your theme.

Simply add and remove blocks from your theme, rearrange their order, edit the color, size, font, background image, add your logo, and change anything in the template.

Using SeedProd is the best choice if you want to create your own custom theme on a budget.

Hiring a Designer and Developer to Create a Custom Theme

On the other hand, you may be able to find an individual who can do both designs and develop the site depending on your needs. However, it’s hard to find a person who’s excellent at both design and code.

When you go with a full-service agency, it’s a one-stop-shop because they have designers and developers on their team. This is also the reason why agencies are usually more expensive. Alternatively, you can hire an individual freelance designer and developer separately and manage the project yourself.

However, design and development is a creative process, so the project cost varies based on expertise, experience in the field, and creativity.

Well reputed WordPress development agencies may cost more than an individual developer or freelancer. A well-known WordPress developer can sometimes charge even more than an agency. Plus, placing change orders to make revisions to a theme can make it more expensive to develop.

Keep Costs Low by Having a Clear Scope of the Project

Whether you choose to hire a professional or choose a theme builder plugin, a pro tip for keeping costs low is by having a clear scope of the project.

For instance, when you’re building a house, you typically have a list of features that you want, such as 4 bedrooms, 3 bathrooms, a living room, etc.

You need to make a similar list for your WordPress website and list down all the things that you would like to have such as:

• Editable home page with a testimonial slider and services list
• Contact page with a contact form and a Google map with the ability to find directions
• Gallery area to showcase the work
• Blog section with social media share buttons

Having a detailed list makes it easier for someone to give you an accurate quote. It also helps limit revisions or change-order fees and helps you keep within your budget.

Factors that Affect the Cost of a Custom WordPress Theme

Since each custom WordPress theme is built specifically for the individual client, the cost of the project varies based on the requirements.

Below are some of the factors that will impact the cost of your custom WordPress theme:

Features, Functionality, and Expectations

Adding more features and functionality to your custom theme will increase the development time and cost. Usually, clients have higher expectations than their budget allows.

High-quality work with custom features will take more time, and hence it will cost more.

Similarly, you may require premium WordPress plugins to get the functionality you need for your website. This will add to the cost of developing a custom theme.

Change Orders and Revisions

If you change the scope of your custom WordPress theme project in the middle of the process, then this can significantly increase your cost.

While minor changes are ok, freelancers and agencies often charge change-order fees for major change requests.

Hosting, Maintenance, and Support

A custom WordPress theme does not include WordPress hosting, website maintenance, or offering support after the delivery of the project.

Some agencies and freelancers might offer these services at an additional cost.

How Much Does a Custom WordPress Theme Actually Cost?

Previously, it was extremely difficult to explain how much a custom WordPress theme costs in fixed numbers because there were several factors to consider.

However, if you select a drag and drop WordPress page builder, then the cost of building a custom WordPress theme drops considerably.

For example, SeedProd offers its theme builder in the Pro plan, which starts at $199.50 per year. You can simply use the plugin to create a custom WordPress them yourself. Plus, if you add that with the cost of web hosting, domain, and SSL certificate, you can easily make a custom theme for under $500.

These days, even the large numbers of freelancers use drag & drop page builders now to create custom WordPress themes because it helps them build custom websites faster.

You can see our detailed guide on how much does it really cost to build a WordPress website for more details.

On the other hand, when you hire a freelancer or an agency, then a the cost of a custom WordPress theme for a business / personal website could cost between $1,500 – $5,000. A custom WordPress theme with additional built-in features or companion plugins can cost anywhere between $6,000 – $10,000.

If you have a complex enterprise-level project, then it is not uncommon for custom theme project prices to go above $30,000.

Therefore, we would highly recommend using a page builder to create a custom theme because the total cost will be lower, and you won’t have to spend a lot of money on freelancers and agencies.

How to Avoid Overpaying for a Custom WordPress Theme?

With over a decade of experience in the WordPress industry, we have a few tips that you can use to avoid overpaying for a custom WordPress theme.

Find Live Website Examples for Inspiration when Possible

Going along with a detailed scope and having a list of inspirations really help with the design process.

You can have a list of websites and list out what you like about each of them.

This gives the designer a clear idea of what you’re looking for this reduces the revisions and overall cost.

Use Premium Plugins vs Custom Built Functionality

Most reputable WordPress professionals will always choose a premium WordPress plugin vs building it out from scratch because it’s more efficient and saves cost.

However, as a customer, we always recommend that you do your own research as well. Often the developer that you choose may have other suggestions, and it’s important that you understand why they decide to choose one plugin over another.

Customize Premium Themes vs Build from Scratch

One of the ways to significantly reduce cost while still getting a ‘custom’ look and feel is to find an existing theme that has 90% of what you want. While this cheats the custom theme concept, it can significantly reduce the overall cost.

Powerful drag and drop WordPress page builders like SeedProd, Beaver Builder and Divi have given birth to an entirely new industry of Website Assemblers. They come with various templates, so you can easily choose one and customize it according to your needs.

Professional website assemblers use existing WordPress plugins combined with a drag & drop page builder to build you a custom-looking WordPress site at a much more affordable price.

Find the Right Developer or Agency for a Custom WordPress Theme

Due to its ease of use and low barrier of entry, there is a wide range of people and companies offering custom WordPress theme services.

Finding a developer or agency with the right experience and skillset can be a bit difficult. Especially because a lot of ‘website assemblers’ also call themselves developers.

Here are some places where you can find experienced developers for your custom WordPress theme project.

Codeable – This is our #1 pick for finding high-quality WordPress developers that are vetted by an expert team. You can post your project there and get a free estimate.

WPHired – This is a job board where you can post your WordPress jobs. Developers can then apply for the job, and you can discuss your project with them. You’ll have to look for developers with relevant experience and skills.

WordPress Jobs – Another WordPress-specific job board where you can post jobs and interview developers.

Upwork – An online freelancing website where you can post your job and interview developers from all over the world. This would allow you to find developers with lower rates. It is an enormous community with designers and developers of varying skills and expertise.

A custom WordPress theme can make your website stand out with its unique design and custom features. However, not all beginners and small businesses can afford that right away.

If you are just starting out, then you can use a page builder like SeedProd or a premium multipurpose theme to build your website theme at a fraction of the price.

With a custom theme, you get unique branding, custom design, and tailor-made functionality to help you grow your business faster and give you an edge over your competitors.

We hope this article helped you understand how much does a custom WordPress theme cost and how you can avoid overpaying. You may also want to see our guide on the best free business name generator and how to register a domain name.

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 Much Does a Custom WordPress Theme Cost? first appeared on WPBeginner.

July 16, 2022 at 03:00PM

How to Get Word Count Stats in WordPress (3 Ways)

Do you want to get word count stats in WordPress?

When writing a post, you may have a specific word count that you’re aiming to reach. Plus, monitoring your word count stats can give you insights like what post length gets the most traffic and engagement.

In this article, we will show you how you can show detailed word count stats in WordPress.

Why Get Word Count Stats for Your WordPress Website?

There are many reasons why you may want to get the word count for your WordPress website.

If you’re a freelance writer, then you may charge per word or your clients might have strict word count goals that you need to meet.

If you’ve added multiple authors to your WordPress blog, then monitoring their word count stats can help you identify the authors who are contributing the most to your website.

This insight can help you manage your multi-author WordPress blog more efficiently. For example, you might reward the author who has the highest word count, or schedule meetings with any writers who are underperforming.

Even if you’re the only person working on a website, word count stats can still be interesting. By looking at how your word count changes over time, you may be able to spot patterns and ways to be more productive.

With all that in mind, let’s look at a few different ways to get word count stats in WordPress. If you prefer to jump straight to a particular method, then you can use the links below.

• Method 1. How to check the word count on an article in WordPress
• Method 2. Get more detailed word count stats with a plugin
• Method 3. How to add word count stats in WordPress using code

Method 1. How to Check the Word Count on an Article in WordPress

The WordPress block editor makes it easy to see the word count for any page or post.

Simply click on the ‘i’ icon at the top of the screen, and WordPress will show some basic stats for the page or post, including the word count.

Even better, this word count will update automatically as you write.

If you have a word limit, then this is a quick and easy way to make sure you don’t go over that limit.

Method 2. Get Detailed Word Count Stats in WordPress With a Plugin

Sometimes you may want to see word count stats for a particular author, type of post, or even your entire website.

The easiest way to get these detailed stats is by using the WP Word Count plugin. This plugin shows how many words you’ve written based on month, author, and post type.

If you’re using custom post types, then WP Word Count can also show statistics for your custom posts.

First, you’ll need to install and activate the plugin. If you need help, then please see our guide on how to install a WordPress plugin.

Once you’ve done that, go to Word Count » Statistics. Before you can get your stats, you’ll need to click on the ‘calculate’ link.

WP Word Count will ask whether you want to count the words for all your content, or to only count content that was created within a certain date range.

To calculate the total word count for your entire site, click on the ‘Count all content on this site at one time’ option. Then, go ahead and click on Calculate Word Counts.

After a few moments, you should see a ‘Word counts calculated successfully’ message.

WP Word Count will now continue to calculate your stats automatically as you add more posts and pages to your site. This means you won’t need to click on the ‘calculate’ link every time you want to see the latest word count stats.

Now, anytime you want to see your stats, you can go to Word Count » Statistics. To see the total word count for all your content, click on the All Content tab.

On this screen, you’ll see the total word count for the different post types, divided into published and unpublished content.

‘Total Words’ is your total word count across all content types.

This number combines both your published and unpublished content, so it isn’t necessarily the amount of words that visitors will see live on your website.

This screen also shows separate word counts for published and unpublished content.

If you want to see the word count for specific months, then simply click on the ‘Monthly Statistics’ tab. This can help you spot trends including your most productive months, and times when you wrote fewer words compared to other months.

If multiple people write for your WordPress blog, then you may want to take a look at the ‘Author Statistics’ tab.

This lets you explore your site’s word count stats by author.

You might also want to track the traffic that each of your authors brings to your website. To do that, you can see our guide on how to set up author tracking in WordPress.

By monitoring these important metrics on your WordPress site, you can identify what’s working on your website and what isn’t.

You can then use this insight to fine-tune your content calendar to get even more visitors to your website, and make money online blogging with WordPress.

Method 3. How to Add Word Count Stats in WordPress Using Code

Another option for tracking word counts is a code solution. This code snippet will show the word count next to each post on the Posts » All Posts screen.

This is an easy way to spot your site’s longest posts, or check for any posts that don’t meet a required word count.

To show a word count on the All Posts screen, you’ll need to add some code to your site. We recommend doing this by creating a site-specific plugin or using a code snippets plugin.

No matter what option you choose, you’ll need to add the following code:

add_filter('manage_posts_columns', 'wpbeginner_add_column');
function wpbeginner_add_column($wpbeginner_wordcount_column) {
    $wpbeginner_wordcount_column['wpbeginner_wordcount'] = 'Word Count';
    return $wpbeginner_wordcount_column;
}
 
//Link the word count to our new column//
add_action('manage_posts_custom_column',  'wpbeginner_display_wordcount'); 
function wpbeginner_display_wordcount($name) 
{
   global $post;
   switch ($name)
{
     case 'wpbeginner_wordcount':
                //Get the post ID and pass it into the get_wordcount function//
            $wpbeginner_wordcount = wpbeginner_get_wordcount($post->ID);
            echo $wpbeginner_wordcount;
     }
}

function wpbeginner_get_wordcount($post_id) {
     //Get the post, remove any unnecessary tags and then perform the word count// 
     $wpbeginner_wordcount = str_word_count( strip_tags( strip_shortcodes(get_post_field( 'post_content', $post_id )) ) );
      return $wpbeginner_wordcount;

You can then save your changes.

Now, if you visit the Posts » All Posts screen, you’ll see the word count in a new column.

We hope this guide helped you learn how to get word count stats in WordPress. You may also want to learn how to set up Google Analytics goals for your WordPress site, or check out our list of the best email marketing services for small businesses.

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 Get Word Count Stats in WordPress (3 Ways) first appeared on WPBeginner.

July 15, 2022 at 02:00PM

How to Upgrade jQuery to Latest Version in WordPress

Is the jQuery version running on your WordPress site up to date?

Your theme and plugins, as well as WordPress itself, rely on jQuery. An out of date version may place your website at risk.

In this article, we’ll show you how to update jQuery to the latest version in WordPress.

Why Upgrade jQuery to Latest Version in WordPress?

Your WordPress website, as well as many plugins and themes you use, rely on JavaScript in combination with jQuery to create fast, interactive and engaging features.

It’s important to keep jQuery up to date to maintain the security of your website. The latest version fixes bugs and vulnerabilities in previous versions that may place your site at risk.

If you are running the latest version of WordPress, then you don’t need to manually update jQuery. It’s automatically done for you. But if you’re using an older version of WordPress such as WordPress 5.4 or earlier, then it’s recommended that you do the update.

Also, if you’ve replaced the default WordPress jQuery with Google Library, then it wouldn’t automatically update to the latest version.

Editor’s Note: it’s important to highlight that updating jQuery may break older plugin functionality, so after the update, you should test your website. In most cases, it’s not an issue, but in case you run into problems, then you can easily return to the older version.

With that being said, let’s take a look at how to upgrade jQuery to the latest version in WordPress. Here’s what we’ll cover in this tutorial:

• How to Determine if Your Version of jQuery Is Out of Date
• Method 1: Upgrade jQuery to the Latest Stable Version
• Method 2: Control the Version of jQuery That Is Run on Your Website

How to Determine if Your Version of jQuery Is Out of Date

You can easily find the version of jQuery your website is running using the Javascript console in your web browser.

First, you will need to visit your website and then open the JavaScript console. If you are using Google Chrome, then you can do this by selecting View » Developer » JavaScript Console from the menu.

Next, you should paste the following command into the console:

jQuery.fn.jquery

This command will display the version of jQuery your website is running.

You should hopefully see version 3.5.1 or higher. If your website is running a version that starts with 1.7 or lower, then you should definitely upgrade.

Method 1: Upgrade jQuery to the Latest Stable Version

The jQuery Updater plugin updates jQuery to the latest official stable version. This is likely to be more current than the version that comes with WordPress.

First, you need to install and activate the jQuery Updater plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, your website will start running the latest version of jQuery. However, before you see the change, you may need to clear your browser cache and WordPress cache.

The plugin includes the jQuery Migrate script to help with backward compatibility. However, if you find that you have trouble with some of your plugins, then you can simply deactivate the jQuery Updater plugin to return your site to its original state.

Method 2: Control the Version of jQuery That Is Run on Your Website

The Version Control for jQuery plugin allows you to control the version of jQuery that is run on your website. This allows WordPress users to run a stable WordPress website, and WordPress developers can check if their code works with various versions of jQuery.

To get started, you need to install and activate the jQuery Updater plugin. If you need help, then see our step by step guide on how to install a WordPress plugin.

Upon activation, the plugin will default to the latest pre-release version of jQuery. It also installs the jQuery Migrate script to help with backward compatibility.

If you need to, you can select a different version of jQuery by visiting the Settings » jQuery Version Control page.

From here, you can select the jQuery and jQuery Migrate versions you wish to run on your site. Make sure you click the ‘Save Changes’ button to store your settings.

If the updated version of jQuery breaks some of your older plugins, then you can simply select an earlier version from the drop down menu. Alternatively, if you deactivate the Version Control for jQuery plugin, then your site will return to its original state.

We hope this tutorial helped you learn how to update jQuery to the latest version in WordPress. You may also want to learn how to increase your blog traffic, or check out our list of the most common WordPress errors and how to fix them.

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 Upgrade jQuery to Latest Version in WordPress first appeared on WPBeginner.

July 14, 2022 at 04:00PM

How To Add Social Login To WordPress (The Easy Way)

Do you want to add social logins to your WordPress website?

Social logins allow visitors to create an account with your WordPress website by using their existing social media accounts. Instead of creating a new username or password, users can simply login with Facebook, Google, or another platform. This saves them time, reduces friction, and still get you access to their name / email address for future marketing purposes.

In this article, we will show you how you can add social login to WordPress.

Why ​​Add Social Login To WordPress?

There are many reasons why you may want to allow user registration on your WordPress website. If you’re running an online store, then user registration allows shoppers to save their payment and delivery information. This makes it easier for them to buy again in the future.

User registration is also an important part of creating a WordPress membership site.

However, most people don’t like filling out long user registration forms and remember yet another username / password.

Social logins let visitors create an account with your website just by clicking a button. They can use the username and password from their existing social media accounts, such as their Facebook login details.

Since it’s so convenient, social login can encourage more people to register with your website. With that being said, let’s see how you can add social login to WordPress.

How To Add Social Login To WordPress

The easiest way to add a front end login to your WordPress website is by using the Nextend Social Login and Register plugin.

This free plugin lets visitors log in using Facebook, Twitter, or Google.

Note: Want to add social login for a site other than Facebook, Twitter, or Google? There is also a Nextend Social Login pro version that adds social login for lots of different sites including PayPal, Slack, and TikTok.

First, you’ll need to install and activate the Nextend plugin. For more details, please see our beginner’s guide on how to install a WordPress plugin.

Upon activation, go to Settings » Nextend Social Login in the WordPress admin area. On this screen, you see all the different social login options that you can add to your WordPress site.

The process of adding a social login to your site will vary depending on whether you’re adding Facebook, Twitter, or Google login.

Let’s look at Facebook as an example.

To add Facebook login to your WordPress website, click on the ‘Getting Started’ button under the Facebook logo.

At this point, you may get a warning that Facebook only allows HTTPS OAuth Redirects. This means your site must be using HTTPS before you can add Facebook login to WordPress. To set it up, see our guide on how to switch from HTTP to HTTPS in WordPress.

Once you’re using HTTPs, your next task is creating a Facebook app. This allows you to create an App Key and App Secret, which you’ll add to the Nextend plugin.

Creating a Facebook app sounds technical, but don’t worry. You don’t need to know any code, and we’ll walk you through all the steps.

To create this app, you’ll need to switch between your WordPress dashboard and the Facebook Developers website. With that in mind, it’s a good idea to leave your WordPress dashboard open in the current tab and visit the Facebook Developers in a new tab.

In your Facebook Developers tab, simply click on the ‘Create App’ button.

You can now choose an app type. Since we want to add social login to WordPress, go ahead and click on ‘Consumer.’

After that, scroll to the bottom of the screen and click on the ‘Next’ button.

In the ‘Display name’ field, type in the name that you want to use for the Facebook app. This name will be shown to visitors, so you’ll want to use something they’ll recognize such as the name of your WordPress website.

Next, type your email address into the ‘App contact email’ field.

This is the address that Facebook will use to warn you about potential policy violations and app restrictions, or share information about how you can recover a deleted account. With that in mind, you’ll want to type in an email address that you check regularly.

If you have multiple Facebook pages, then you may have created a Facebook Business Manager account. This lets you give team members full or partial access to your Facebook pages without sharing your login details.

If you’ve created a Facebook Business Manager account, then you can connect your new app to your manager account by opening the ‘Business Account’ dropdown. Then, simply choose an account manager from the dropdown menu.

If you don’t have a Facebook Business Manager, then you can simply leave this dropdown set to ‘No Business Manager account selected,’ which is the default setting.

After that, you’re ready to click on the ‘Create app’ button.

In the popup that appears, type in the password for your Facebook account and then click on the ‘Submit’ button.

You’re now ready to add products to the Facebook app. Go ahead and find the Facebook Login section and then click on the ‘Set up’ button.

Next, simply click on ‘Web.’

In the Site URL field, type in your website’s URL.

To get the right URL, simply switch back to the tab that’s showing your WordPress dashboard.

This screen has detailed instructions on how to link Nextend to Facebook. This includes showing the exact URL that you should use.

After typing your site’s URL into the ‘Site URL’ field, make sure you click on the ‘Save’ button to save your changes.

In the left-hand menu, find the ‘Facebook Login’ section and click on ‘Settings.’

On this screen, you’ll need to paste a ​​valid oAuth redirect. To get this value, just switch back to your WordPress tab.

These instructions include a URL that’s labelled as the ‘Valid OAuth redirect URIs.’ You can go ahead and copy this URL.

Next, switch back to the Facebook Developer website and paste the URL into the ‘Valid OAuth Redirect URIs’ field.

After that, you’re ready to click on the ‘Save changes’ button at the bottom.

In the left-hand menu, click on Settings » Basic.

In ‘App domain,’ type in your site’s domain name.

In the Privacy Policy URL field, you’ll need to type in the address of your website’s privacy policy. This privacy policy should disclose the information you collect from visitors and how you plan to use that data, including any information you get from social logins.

If you need help creating this important page, then please see our guide on how to add a privacy policy in WordPress.

To comply with GDPR, you must give users a way to delete their account on your website.

There are lots of ways that you can allow users to delete their WordPress accounts, but you should always share these instructions with your visitors.

To help users find this information, click on the ‘User Data Deletion’ section, and then choose ‘Data Deletion Instructions URL’ from the dropdown menu.

You can then type in, or copy/paste the URL where visitors can find information on how to delete their account. For example, you might add the instructions to your privacy policy or FAQ page.

Once you’ve done that, open the ‘Category’ dropdown menu and choose the category that best represents how you plan to use social login on your WordPress website.

For example, if you’re adding Facebook login to your WooCommerce store, then you’ll typically want to click on the ‘Shopping’ category.

Once you’ve done that, the next step is choosing an App Icon. This icon will represent your app in the App Center, which is an area of Facebook where users can find new applications.

This isn’t particularly important for our app, but it’s a requirement so you’ll still need to create an app icon.

Your app icon must be between 512 x 512 and ​​1024 x 1024 pixels, and it must have a transparent background. When creating this icon, you can’t use any variations of Facebook’s logos, trademarks, or icons including its WhatsApp, Oculus, and Instagram brands.

You also can’t include any ‘Facebook’ or ‘FB’ text.

If you don’t already have one, then you can easily create a professional-looking Facebook app icon using a logo maker.

Once you’ve created an app icon, click on the ‘App Icon’ section and then choose the image file that you want to use.

After all that, click on the Save Changes button.

Your Facebook app is set to private by default. This means you’re the only person who can log in using Facebook.

Before your visitors can create an account using Facebook, you’ll need to make your app live. To do this, find the ‘App Mode: Development’ slider and click on it to turn the slider from white to blue.

Facebook applications can either have ‘Standard access’ or ‘Advanced access’ to the user’s information. If your app has standard access, then visitors won’t be able to log in using Facebook’s social login.

In the past Facebook has changed its default permission settings, so it’s always worth checking that your app has the right permissions to support social login.

In the left-hand menu, click on App Review » Permissions and Features.

Now, find the ‘email’ and ‘public_profile’ permissions.

To support social login, both of these permissions must be marked as ‘Advanced Access’ and ‘Ready to Use’ as you can see in the following image.

Do you see ‘Get Advanced Access’ buttons instead? This means that your app currently doesn’t have the right permissions for social login.

In this case, you’ll need to go ahead and click on the ‘Get Advanced Access’ button, and then follow the onscreen instructions.

Once you have the Advanced Access permissions, go ahead and click on Settings » Basic in the left-hand menu.

At the top of the page you’ll see an ‘App ID’ and ‘App secret.’

To reveal the App secret, just click on the ‘Show’ button and then type in the password for your Facebook account.

The Facebook Developers website will now update to show your App secret.

The next step is adding the App secret and App ID to your Nextend plugin. To do this, switch back to the WordPress dashboard.

Here, click on the ‘Settings’ tab. You can now paste the ID and secret into the ‘App ID’ and ‘App secret’ fields in your WordPress dashboard.

Once you’ve done that, click on the Save Changes button.

Before you go any further, it’s a good idea to test that your social login is set up correctly. To do this, simply click on the Verify Settings button.

This will open a popup where you can type in your Facebook username and password. If you’ve set up the social login correctly, then you should now be logged into your WordPress blog.

Even if your social login is working, Nextend may still warn you that the provider is currently disabled. If you do see this warning, then simply click on the Enable button.

You’ve now successfully added social login to your WordPress website. The next step is changing how the login button looks and acts on your site.

To style the social login button, simply click on the ‘Buttons’ tab. You will now see all the different styles that you can use for the social login button.

To use a different style, simply click to select its radio button.

Once you’ve done that, you can change the text that Nextend shows on this button by editing the ‘Login label’ text.

You can also apply some basic formatting to the login label. For example, in the following image we’re applying a bold effect by using <b> and </b> HTML tags.

Aside from that, you also have the option to change the text that this button uses for its ‘Link label.’ This is the text that Nextend shows when the visitor has created an account on your website, but hasn’t linked that account to Facebook.

You can use the link label to encourage logged-in users to connect their account to various social media profiles.

To change this text, simply type into the ‘Link label’ field. Once again, you can use HTML to apply some basic formatting to the label text.

You should also make it easy for visitors to disconnect their social media profiles from your WordPress website.

This is where the ‘Unlink label’ field comes in.

In this field, you can type in the text that your site will show to logged-in users who have already connected their social account to your website.

By clicking on this link, users will be able to break the connection between your WordPress website and their social media account.

These settings should be enough for most websites. However, if you prefer to create a completely custom button, then you can always check the ‘Use custom button’ box.

This adds a new section where you can create your own social login button using code.

When you’re happy with how you’ve styled your button, click on the Save Changes button.

Next, click on the ‘Usage’ tab. Nextend will now show all the shortcodes that you can use to add the social login button to your WordPress website.

These shortcodes can create a range of login buttons. To create a basic login button for Facebook, you would use the following shortcode:

[nextend_social_login provider=”facebook”]

The following image shows an example of how this social login button will look on your site.

As you can see in the ‘Usage’ tab, there are a few extra parameters that you can add to your shortcode. This will change how the button looks or acts.

If you want to create a social login button that doesn’t have a text label, then you can add the ‘icon’ parameter, for example [nextend_social_login provider=”facebook” style=”icon”]

Here is an example of how this button will look on your WordPress website.

When a visitor logs into your site using a social account, you can redirect them to a page automatically. This screen has an example shortcode that will redirect users to the Nextend site.

You can easily customize this shortcode so that it redirects the visitor to a page on your own WordPress website.

There are a few other parameters that you can add to your shortcode, to see the full list of parameters click on the link in the plugin documentation.

After deciding what shortcode you want to use, you can add the code to any page, post, or widget ready area. For step by step instructions, see our beginner’s guide on how to add a shortcode in WordPress.

We hope this article helped you learn how to add social login to your WordPress website. You can also go through our guide on the best social media plugins for WordPress and how to track website visitors to your WordPress website.

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 Social Login To WordPress (The Easy Way) first appeared on WPBeginner.

July 13, 2022 at 04:00PM