Categories
Website

How to Add CAPTCHA in WordPress Login & Registration Form

Do you want to add CAPTCHA to login and registration forms on your WordPress site?

Often WordPress login page and user registration page are a prime target for hackers, spammers, and brute force attacks.

The attackers motivation is often to gain unauthorized access to your WordPress admin area to distribute malware or in other cases crash the entire network of websites hosted with a specific web hosting company to collect ransom.

One way to avoid these attacks is by using CAPTCHA which effectively blocks spambots and protects your site from being hacked.

In this article, we will show you how to easily add CAPTCHA in WordPress login and registration form.

Adding CAPTCHA in WordPress Login and Registration Form

What is CAPTCHA?

A CAPTCHA is a computer program used to distinguish between human and automated users. It does that by presenting a test that would be quite easy for a human user to pass but way harder and almost impossible for automated scripts to get right.

In the earlier days of the CAPTCHA, users were asked to enter the text they saw in an image. This image displayed random letters, words, or numbers in a distorted style.

Old style CAPTCHA

Later, a newer technology called reCAPTCHA was introduced. It showed random words as a challenge and used the user input to help digitalize books.

reCAPTCHA preview

This technology was acquired by Google in 2009. Since then, it has helped digitalized thousands of books and complete New York Times archives.

However, these new CAPTCHAs were still annoying and ruined the user experience on websites.

To fix this, Google introduced “No CAPTCHA reCAPTCHA” which uses AI and user interactions to catch spambots.

NoCaptcha reCAPTCHA

It shows an easier checkbox for human users to click on. For other suspicious traffic, it would show a more difficult CAPTCHA like identifying objects in images.

That being said, let’s take a look at how WordPress websites can improve security with CAPTCHA.

Why Use CAPTCHA for WordPress Login and Registration?

WordPress login and registration pages are an easy target for spammers, wannabe hackers, and brute force attacks.

That’s because WordPress is the most popular website builder in the world, which makes it a common target for malicious attempts.

The easiest solution to protect your WordPress site is by using a WordPress firewall plugin like Sucuri. It will block bad traffic from reaching your website and prevent unauthorized access.

Another solution is to add a secondary layer of password protection on WordPress login and registration pages. However, the problem with this method is that you’ll have to share that second password with each user, and this simply doesn’t scale for large multi-author blogs or membership sites.

CAPTCHA provides an easier alternative to those solutions. It uses Google’s AI technologies to detect genuine visitors and present CAPTCHA challenges to suspicious users.

That being said, let’s take a look at how to easily add CAPTCHA to your WordPress site.

Default vs Custom WordPress Login and Registration Form

The default WordPress login and registration form provide a basic set of features.

The login page allow users to access the backend of your website according to their respective user roles and permissions.

Default WordPress Login Page

The default WordPress registration form lets visitors create an account on your site. Once they are registered, they can also login to your website backend and perform specific tasks allowed by their user role.

Default WordPress User Registration Page

A lot of website owners want to customize the default WordPress login and registration page with their own logo, styles, etc. They use one of the many plugins to create their own custom login and registration page to replace the default ones.

Whether you’re using the default pages or custom ones, we have got you covered.

In this guide, we will show you how to set up reCAPTCHA for both default and custom login and registration pages in WordPress.

Let’s get started by adding reCAPTCHA in default WordPress login and registration form.

Adding reCAPTCHA to Default WordPress Login and Registration Form

First thing you need to do is install and activate the Advanced noCAPTCHA & reCAPTCHA (v2 & V3) plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Once the plugin is activated, you need to visit Settings » Advanced noCAPTCHA & Invisible CAPTCHA page from your admin panel. Once done, WordPress will take you to the plugin’s general settings page.

Advanced noCaptcha & invisible Captcha (v2 & v3) Settings

From there, you need to choose a Google reCAPTCHA version and find reCAPTCHA API keys to enable the service on your site.

We recommend using v2 because we believe v3 is not as stable just yet.

To obtain these API keys, you need to visit reCAPTCHA website and click on the ‘Admin Console’ button.

Visit Google reCAPTCHA website

On the next screen, Google will ask you to sign in to your account. Once you are logged in, you will see the ‘Register a new site’ page.

Register a New Site for Google reCAPTCHA

First, you need to enter your website name in the Label field. After that, you need to select a reCAPTCHA type. For example, we will choose reCAPTCHA v2 ‘I’m not a robot’ checkbox.

Next, you need to enter your domain name under the Domains section. Make sure to enter your domain name without ‘https://www.’

Add Domain Name and Owner for Google reCAPTCHA

The Owners section shows your email address and also lets you add a new owner.

After that you need to check the box next to ‘Accept the reCAPTCHA Terms of Service’. Optionally, you can also check the ‘Send alerts to owners’ box to receive email alerts about suspicious traffic or captcha misconfiguration on your site.

Submit and register your WordPress site

Once done, click on the Submit button.

Next, you will see a success message along with the site and secret keys that you can use on your site.

Google reCAPTCHA API Keys

Now you need to open your WordPress dashboard and go to Settings » Advanced noCAPTCHA & Invisible CAPTCHA page to set up Google reCAPTCHA.

Once you are on the plugin settings page, you need to choose the Google reCAPTCHA version first. Since we’ve registered our site for Google reCAPTCHA v2 ‘I’m not a robot,’ we will select that option from the dropdown.

Choose Google reCAPTCHA V2 in Advanced noCAPTCHA & Invisible CAPTCHA (v2 & v3)

After that, you need to enter the site key and secret key provided by Google reCAPTCHA earlier.

Enter Site Key and Secret Key to Add reCAPTCHA to WordPress

Next, you will see the ‘Enabled Forms’ option. Check the box next to the forms where you want to enable the Google reCAPTCHA. Here, we will choose the Login Form and Registration Form.

Enable reCAPTCHA for Default WordPress Login and Registration Form

After that, you can scroll down the page to review other options. Once you’re done with the customization, click on the ‘Save Changes’ button at the bottom.

That’s it! You have successfully added reCAPTCHA in default WordPress login and registration form. To preview it, you can open your WordPress login URL on your browser. For example; www.example.com/wp-login.php.

WordPress Login Page With Google reCAPTCHA

If you want to check the reCAPTCHA on the registration form, then click on the Register link below the login form. After that, the WordPress registration form will open, and you can see how reCAPTCHA works.

WordPress Registration Page with reCAPTCHA

Setting Up reCAPTCHA in Custom WordPress Login and Registration Form

As we mentioned earlier, custom WordPress login and registration forms offer more user-friendly membership options to your website visitors.

First, you can allow users to register or login to your website from the frontend. This improves user experience and lets you keep the same overall design experience across the website.

Next, it lets you add your website logo and customize the login and registration page in your style.

Creating a custom WordPress login form and user registration form is easy with the most user-friendly WordPress form plugin, WPForms (used by over 2 million websites).

To get started, install and activate the WPForms plugin on your WordPress site. For more details, see our step by step guide on how to install a WordPress plugin.

To create custom WordPress user registration form quickly, you need to get at least WPForms Pro plan.

Upon activation, head over to WPForms » Settings page to enter your WPForms license key. You can get this key from your account area on the WPForms website.

Add WPForms license key

After that, click on the reCAPTCHA option at the top to configure reCAPTCHA for your custom made WordPress forms. First, you need to choose a reCAPTCHA type.

Since we chose v2 earlier, we will choose reCAPTCHA v3 here in this example, but please know that our recommendation is still v2.

WPForms reCAPTCHA Settings - Choose V3

After that, you will see the site key and secret key field. To get these keys, you need to register your site on Google reCAPTCHA website.

Go to the Google reCAPTCHA website and then click on the Admin Console button at the top right corner.

Visit Google reCAPTCHA website

After that, Google will ask you to sign in to your account. Once done, you will see the ‘Register a new site’ page.

Register a New Site for Google reCAPTCHA

Enter your website name and then select reCAPTCHA v3 from the reCAPTCHA type option.

Next, you need to enter your domain name (without https://www.) as shown in the screenshot below.

Add Domain Name and Owner for Google reCAPTCHA

If you want to add another Gmail user as the owner of the reCAPTCHA, then you can add the email address under the Owners section.

After that, you need to accept the reCAPTCHA terms of service. You can also check the box next to ‘Send alerts to owners’ option to get notification emails from Google about suspicious traffic on your site.

Submit and register your WordPress site

Once done, click on the Submit button.

After that, Google will show a success message along with the site key and the secret key to add reCAPTCHA to your site.

Google reCAPTCHA API Keys

Now that you have the Google reCAPTCHA API keys, you need to open WPForms » Settings » reCAPTCHA page in your WordPress dashboard.

WPForms reCAPTCHA Settings WordPress

On the WPForms reCAPTCHA settings page, enter the site key and secret key. Once done, save your settings.

Now that you have successfully added reCAPTCHA on WPForms, you can easily enable reCAPTCHA in your custom login form, user registration form, or any form built with WPForms.

So now let’s go ahead and create a custom WordPress registration form.

Visit WPForms » Addons page. Locate ‘User Registration Addon’ and click on the ‘Install Addon’.

Install WPForms User Registration Addon

After that, WPForms will download and install the addon. Once you see the User Registration Addon’s status ‘Active,’ you are ready to add a new user registration form.

Now you need to go to WPForms » Add New to launch the WPForms Builder. On the WPForms setup page, select ‘User Registration Form’ template.

Select User Registration Form Template WPForms

After that, WPForms will automatically build a custom user registration form and open the Form Setup page.

User Registration Form Builder WPForms

Now you can customize your form by adding new fields or editing the field options. If you like the default form, then you can use it without making any changes.

Next, you need to click on the Settings option to configure your form settings and enable the Google reCAPTCHA.

On the General Settings page, you can edit your form name, add form description, edit the Submit button text, and more. At the bottom, you can see checkboxes including Enable Google v3 reCAPTCHA box.

Enable Google reCAPTCHA on WordPress Custom Registration Form

Simply check the box to enable Google reCAPTCHA in your user registration form. Once done, click on the Save button at the top right corner.

Save Your Custom User Registration Form

After that, you can close the form builder by clicking on the Close button next to the Save button.

That’s it! You have created a custom WordPress user registration form and also added reCAPTCHA to it.

The next thing you need to do is add the custom user registration form on your site. You can add the form to your posts, pages, or any widget-ready area easily. For example, we will create a new page and add the form to it.

Go to Pages » Add New page from your WordPress dashboard to build a new page. On your page edit screen, click on the ‘Add New Block’ icon and select the WPForms block.

Add WPForms Block to WordPress Page Editor

Next, you can see the WPForms widget added to your page edit screen. You just need to select the Custom User Registration Form you created earlier. After that, the widget will automatically load the form in the page editor.

Add Custom User Registration Form to WordPress Page

Next, you can add other necessary content and publish the page.

Now you can open the page on your web browser to see the custom user registration form with Google reCAPTCHA in action.

Since we chose reCAPTCHA v3 in this example, you won’t see a Google reCAPTCHA checkbox like ‘I’m not a robot’. This is because because reCAPTCHA v3 works in the background, but you will still see a small badge at the bottom right corner.

Custom WordPress User Registration Form with Google reCAPTCHA

The process of creating a custom login form is almost the same. The only difference is that you need to choose the User Login Form template from the WPForms setup page.

Select User Login Form Template WPForms

After that, the whole process is the same. For more details, you can see our guide on how to create a custom login page in WordPress.

Custom WordPress Login Form With reCAPTCHA

We hope this article helped you to learn how to add CAPTCHA in WordPress login and registration forms. You may also want to see our ultimate WordPress security guide to strengthen your overall website security.

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.



Source link

Categories
Website

How to “Easily” Add Anchor Links in WordPress (Step by Step)

We occasionally use anchor links in our longer WordPress posts to help users quickly jump to the section they want to read.

Anchor links are often used in the table of content sections because they help users move up and down a lengthier article without reloading the page. It can also help with SEO as Google may show them below your search listings for easy navigation (more on this later).

In this step by step guide, we will explain what are anchor links and show you how to easily add anchor links in WordPress.

Adding anchor links in WordPress

Ready? Let’s start with a live example of anchor links.

Below is a list of all the topics we will cover in this guide. Go ahead and click on any of these links, and you’ll be taken to that specific section.

An anchor link is a type of link on the page that brings you to a specific place on that same page. It allows users to jump to the section they’re most interested in.

Take a look at the animated screenshot below:

Anchor link preview

As you can see, clicking on the anchor link takes the user to the specific section on the same page.

Anchor links are commonly used in lengthier articles as the table of content which allows users to quickly jump to the sections they want to read.

Why and when you should use anchor links?

An average user spends less than a few seconds before deciding if they want to stay or leave your website. You have just those few seconds to convince users to stay.

The best way to do that is to help them quickly see the information they’re looking for.

Anchor links make this easier by allowing users to skip the rest of the content and jump directly to the part that interests them. This improves user experience and helps you win new customers / readers.

Anchor links are also great for WordPress SEO. Google can display an anchor link in the search results as a “jump to link”.

Jump to link in search results

Sometimes Google can also display several links from that page as jump to links, and this is proven to increase the click-through rate in search results. In other words, you get more traffic to your website.

Multiple jump to links below a search result

Having said that, let’s take a look at how to easily add anchor links in WordPress.

If you just want to add a few anchor links in your article, then you can easily do so manually.

Basically you need to add two things for an anchor text to work as intended.

  1. Create an anchor link with a # sign before the anchor text.
  2. Add the id attribute to the text where you want the user to be taken.

Let’s start with the anchor link part.

Step 1. Creating an anchor link

First you need to select the text that you want to link and then click on the insert link button in the WordPress Gutenberg editor.

Add a link in WordPress

This will bring up the insert link popup where you usually add the URL or look for a post or page to link.

However, for an anchor link, you’ll simply use # as prefix and enter the keywords for the section you want the user to jump to.

Creating anchor link

After that click on the enter button to create the link.

Some helpful tips on choosing what text to use as your anchor # link:

  • Use the keywords related to the section you are linking to.
  • Don’t make your anchor link unnecessarily long or complex.
  • Use hyphens to separate words and make them more readable.
  • You can use capitalization in anchor text to make it more readable. For example: #Best-Coffee-Shops-Manhattan.

Once you add the link, you will be able to see the link you have created in the editor. However, clicking on the link doesn’t do anything.

That’s because the browsers cannot find the anchor link as an ID.

Let’s fix that by pointing browsers to the area, section, or text that you want to show when users click on the anchor link.

Step 2. Add the ID attribute to the linked section

In the content editor, scroll down to the section that you want the user to navigate to when they click on the anchor link. Usually, it is a heading for a new section.

Next, click to select the block and then in the block settings click on the Advanced tab to expand it. You can simply click on the ‘Advanced’ tab under the heading block settings.

HTML Anchor

After that, you need to add the same text that you added as the anchor link under the ‘HTML Anchor’ field. Make sure that you add the text without the # prefix.

You can now save your post and see your anchor link in action by clicking on the preview tab.

What if the section you want to show is not a heading but just a regular paragraph or any other block?

In that case, you need to click on the three-dot menu on the block settings and select ‘Edit as HTML’.

Edit as HTML

This will allow you to edit the HTML code for that particular block. You need to select find the HTML tag for the element you want to point to. For example,

if it is a pagraph, or

if it is a table block, and so on.

Now, you need to add your anchor as the ID attribute to that tag, like the following code:

You will now see a notice that this block contains unexpected or invalid content. You need to click on the convert to HTML to preserve the changes you made.

Convert to HTML

How to Manually Add Anchor Link in Classic Editor

If you are still using the older classic editor for WordPress, then here is how you can add the anchor link.

Step 1. Create the anchor link

First, select the text that you want to change into the anchor link and then click on the ‘Insert Link’ button.

Adding an anchor link in Classic Editor

After that, you need to add your anchor link with a # sign prefix followed by the slug you want to use for the link.

Step 2. Add the ID attribute to the linked section

The next step is to point the browsers to the section you want to show when users click on your anchor link.

For that, you’ll need to switch to the ‘Text’ mode in the classic editor. After that scroll down to the section that you want to show.

Adding anchor ID in Classic Editor

Now locate the HTML tag you want to target. For example,

,

,

, and so on.

You need to add the ID attribute to it with your anchor link’s slug without the # prefix, like this:

You can now save your changes and click on the preview button to see your anchor link in action.

How to Manually Add Anchor Links in HTML

If you are used to writing in the Text mode of the old Classic Editor in WordPress, then here is how you would manually create an anchor link in HTML.

First, you need to create the anchor link with a # prefix using the usual tag, like this:

Best Coffee Shops in Manhattan

Next, you need to scroll down to the section that you want to show when users click on the link.

Usually, this section is a heading (h2, h3, h4, etc.), but it could be any other HTML element or even a simple paragraph

tag.

You need to add the ID attribute to the HTML tag, and then add the anchor link slug without the # prefix.

Best Coffee Shops in Manhattan

You can now save your changes and preview your website to test the anchor link.

This method is suitable for users who regularly publish long-form articles and need to create table of contents with anchor links.

The first thing you need to do is install and activate the Easy Table of Contents plugin. For more details, see our step by step guide on how to install a WordPress plugin.

This plugin allows you to automatically generate a table of contents with anchor links. It uses headings to guess the content sections, and you can customize it fully to meet your needs.

Upon activation, simply go to Settings » Table of Contents page to configure plugin settings.

Easy Table of Contents plugin settings

First, you need to enable it for the post types where you want to add table of contents. By default, the plugin is enabled for pages, but you can also enable it for your posts as well.

You can also enable the auto-insert option. This allows the plugin to automatically generate the table of contents for all articles, including the older articles that match the criteria.

If you only want to automatically generate table of contents for specific articles, then you can leave this option unchecked.

Next, scroll down a little to select where you want to display the table of contents and when you want it to be triggered.

Select where and when to display table of contents

You can review other advanced settings on the page and change them as needed.

Don’t forget to click on the ‘Save Changes’ button to store your settings.

If you enabled the auto-insert option, then you can now view an existing article with the specified number of headings.

You’ll notice that the plugin will automatically display a table of contents before the first heading in the article.

If you wanted to manually generate table of contents for specific articles, then you need to edit the article where you want to display a table of contents with anchor links.

On the post edit screen, scroll down to the ‘Table of Contents’ tab below the editor.

Manually add table of contents with anchor links

From here, you can check the ‘Insert table of contents’ option and select the headings you want to include as anchor links.

You can now save your changes and preview your article. The plugin will automatically display a list of anchor links as your table of contents.

Table of contents preview

For more detailed instructions, see our article on how to add table of contents in WordPress.

We hope this article helped you learn how to easily add anchor links in WordPress. You may also want to see our tips on how to properly optimize your blog posts for SEO and our pick of the best WordPress page builder 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.



Source link

Categories
Website

How to Add Call to Action Buttons in WordPress (without Code)

Do you want to add call to action buttons in your WordPress posts or pages?

Buttons are a great way to boost conversions. They are highly noticeable which makes them excellent at redirecting user’s attention to a desired interaction.

For example, you can use a call to action button to navigate users to a transactional page like pricing page, product page, services page, and others on your website.

You can also use call to action buttons to promote special offers, new products, or affiliate links that point to partner websites.

In this article, we will show you how to easily add beautiful call to action buttons in WordPress without writing any code.

Adding Buttons in WordPress Step by Step

Note: This article is for adding custom call to action buttons in WordPress. If you want to add social share buttons, then please see our guide on how to add social share buttons in WordPress.

Adding Buttons in WordPress Posts and Pages (Step by Step)

WordPress makes it super easy to add buttons with a built-in ‘Button’ block.

It is a new feature introduced in WordPress 5.0, along with the new Gutenberg WordPress block editor.

In this article, we will show you three different ways to add call to action buttons in WordPress blog posts and pages. You can pick the solution that best suits your needs.

Feel free to use the table of content below to navigate through this article easily.

Table of Contents:

  1. Adding Buttons in WordPress Posts / Pages Using Default Editor
  2. Creating a WordPress Button in Classic Editor
  3. Adding a Click-to-Call Button in WordPress

Adding Buttons in WordPress Posts / Pages Using Default Editor

This method is easier and recommended for most users. It uses the built-in Button block in the new WordPress editor. If you are still using the older classic editor, then you can skip to the next section.

First, you need to create a new post or edit an existing one where you want to add a button.

On your post edit screen, click on the ‘+’ icon to add a New Block and select the Button block under the Layout Elements section.

Add Button Block in WordPress Block Editor

Next, you should be able to see the button block added to the content editor

Button Block Added to WordPress Post Editor

Simply click on the ‘Add text…’ area and enter your button text.

After that, you need to paste the URL of the page you want to link in the ‘Paste URL or type to search’ field below the button.

Once done, click on the Apply icon.

Enter Button Text and Link in WordPress

If you want to display the button in the center, then you can click on the Align Center icon in your block toolbar above.

Align Center Your Button in WordPress Block Editor

Next, you can customize your button style, change background color, and change text color from the block settings panel on the right side.

Choose Button Style in WordPress Block Settings

There are three button styles you can choose from: default, outline, and squared. You can try each one by clicking on them and choose the one that looks best.

The Color Settings section includes five color variations for both button background and button text. Not only that, but you can also use a custom color of your choice by clicking on the Custom Color option.

Choose Custom Color of your WordPress Button

Once you are happy with the button design, you can save your post or publish to see a live preview.

Here is how it looked on our demo website.

WordPress Button Preview

Bonus: If you want to see how well your buttons are performing, then you should use MonsterInsights. It has built-in event tracking for affiliate links, outbound links, and custom events, so you can see how well your buttons are performing. For more details, see important marketing metrics that you must track in WordPress.

Creating a WordPress Button in Classic Editor

Although Gutenberg block editor is faster and easier, many users still prefer the old Classic WordPress editor. If you are one of them, then you need to find an alternative solution to add buttons on your WordPress site.

There are mainly three options available for adding buttons in WordPress Classic Editor.

  1. Add button in WordPress with HTML / CSS code.
  2. Add button in WordPress with WordPress button shortcode plugin.
  3. Add button in WordPress without using shortcodes.

Of the three options, the first one is the coding method. You will need to write HTML / CSS code and add to your website wherever you need a button. It is not beginner-friendly.

The second option is the most commonly used method. That’s because most of the WordPress button plugins provide shortcodes for adding buttons.

The third option is the best because it allows you to easily add buttons to your posts and pages without having to remember shortcode.

Let’s take a look at how to add buttons in WordPress without using shortcodes.

First thing you need to do is install and activate the Forget About Shortcode Buttons plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Once you have activated the plugin, create a new post, or edit an existing one. In the editor, you will see a new button in the Visual Editor labeled Insert Button.

Insert Button Icon in Classic WordPress Editor

To insert a new button in your post, you need to click on the Insert Button. This will bring up a popup window where you can design your new button.

Enter Button Text and URL in Classic Editor

First, you need to add your button text and URL. As you add your button text, you can see a live preview in the box below.

Next, you can add nofollow tag to your link and open the link in a new tab by clicking on the checkbox options below.

After that, you can select an icon for your button. If you click on the Icons tab, then you will be able to see the icons that you can add before or after the text in your buttons.

Add Icon to your Button in Classic Editor

These icons are actually icon fonts (learn how to use icon fonts in WordPress post editor).

Next, you can choose text color and background color for your button by clicking on the Color box icon.

Change Button Background Color in WordPress Classic Editor

After that, click on the drop-down menu to choose the button style. There are eight different button styles ready for use.

Choose a Button Style in Classic WordPress Editor

Similarly, you can also choose the button size from extra small to extra large.

Once you are satisfied with the look, simply click on the Update button.

You will be able to see your button as it would appear in your post, right inside the post editor.

You can also set button alignment by simply selecting the button text and using the toolbar buttons in the classic editor.

Center Align Your Button in Classic Editor

Double-clicking on the button will bring up the Insert Button popup, and you can re-edit your button if you like.

Once you are happy with its design, you can publish or update your post and see it in action. This is how the fancy button appeared on our demo WordPress website.

Button Preview - Built in Classic Editor

Adding a Click-to-Call Button in WordPress

In addition to the usual call to action buttons, you can also add click-to-call buttons on your website to boost leads and conversions.

A click-to-call button is a specific type of call to action button which allows your users to make a phone call to your team with just a tap.

Using the tap-to-call buttons, your site visitors can instantly talk to your team in person and get the information they need. Whether discussing a quote request, pre-sale information, or support issue, phone calls are quick.

As the number of smartphone users is growing, adding call now buttons are even more relevant nowadays.

If you don’t have a business phone, then you may want to look into getting a virtual business phone number.

With that said, let’s take a look at how to add click-to-call buttons in WordPress step by step.

First thing you need to do is install and activate the WP Call Button plugin. For detailed instructions, you can see our step by step guide on how to install a WordPress plugin.

Upon activation, you need to visit Settings » WP Call Button page to configure the plugin settings and design your click-to-call button.

Sticky Call Button Settings in WordPress

At first, you will see the Sticky Call Button settings. The sticky call button is a conversion optimized feature which moves the call button along with users as they browse your site.

You can start by activating the Call Now Button Status. Simply click on the switch toggle to activate that.

After that, you need to enter your phone number. WP Call Button has a smart phone number field with your country code. Simply select your country and enter your business phone number.

If you don’t have a business number, then you can get one from Nextiva. It is a trusted business VoIP provider.

Next, you can edit your call button text, choose the call button position, and color.

Also, you can select where to show the sticky call button on your website. By default, it shows the call button on all pages and on all devices. You can choose to show or hide the button on certain pages, and show only on mobile devices.

Once you review all the options, you can click on the Save Changes button at the bottom. After that, you can visit your website and see the sticky call now button in action.

WordPress Click to Call Button

Aside from the sticky call buttons, you can also add static call buttons on your WordPress pages, posts, and sidebars using this plugin.

If you are using the new WordPress block editor, then you can easily add the call now button on your pages using the WP Call Button block.

Create a new page or edit an existing page and add the WP Call Button block on your page editor.

Adding WP Call Button Block in WordPress

After that, you can customize the button text, button color, text color, font size, and show or hide the phone icon.

Customizing Call Button in WordPress Page Editor

Once you are happy with its design, you can publish or update your page.

If you are using Classic WordPress editor, then you need to use the Static Call Button generator to get a shortcode. Go to Settings » WP Call Button and click on the Static Call Button menu on the top.

Static Call Buttons in WordPress Settings

Simply customize the button options and then copy the shortcode. After that, you can use the shortcode in any post or page on your website.

WP Call Button plugin also allows you to add the call button on your WordPress sidebar and other widget-ready areas.

Simply go to Appearance » Widegts and drag the WP Call Button widget to a widget ready area where you want to show the call button.

WordPress Call Button Sidebar Widget

Now you can add a title, description, and customize the call button from the Advanced Settings section. Once done, save your widget.

That’s it! If you want to see a more detailed tutorial, then you can check our step by step guide on how to add a click-to-call button in WordPress.

Bonus Tip for Adding Custom Buttons in WordPress

If you want to add completely custom call to action buttons in WordPress, then you’re likely looking for a solution that also allows you to add custom sections as well as custom buttons in your website header, menus, and other areas.

In that case, we recommend using a drag and drop WordPress page builder plugin like Beaver Builder or Divi.

These page builders will help you create custom landing pages with fancy call to action buttons exactly how you want it.

Whatever you do, its important that you track how your buttons are performing because guessing isn’t the best business growth strategy.

We recommend using MonsterInsights. It has built-in event tracking for affiliate links, outbound links, and custom events, so you can see how well your buttons are performing. For more details, see important marketing metrics that you must track in WordPress.

We hope this article helped you to learn how to add buttons in WordPress easily. You may also want to see our list of the best WordPress plugins and 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.



Source link

Categories
Website

How to Add a Shortcode in WordPress? (Ultimate Guide)

Shortcodes are an easy way to add dynamic content into your WordPress posts, pages, and sidebars.

Many WordPress plugins and themes use shortcodes to add specialized content like contact forms, image galleries, sliders, and more.

In this article, we will show you how to easily add a shortcode in WordPress. We will also show you how to create your own custom shortcodes in WordPress.

Adding a shortcode in WordPress

What are Shortcodes?

Shortcodes in WordPress are code shortcuts that help you add dynamic content in WordPress posts, pages, and sidebar widgets. They are displayed inside square brackets like this:

[myshortcode]

To better understand shortcodes, lets take a look at the background of why they were added in the first place.

WordPress filters all content to make sure that no one uses posts and page content to insert malicious code in the database. This means that you can write basic HTML in your posts, but you cannot write PHP code.

But what if you wanted to run some custom code inside your posts to display related posts, banner ads, contact forms, galleries, etc?

This is where Shortcode API comes in.

Basically, it allows developers to add their code inside a function and then register that function with WordPress as a shortcode, so users can easily use it without having any coding knowledge.

When WordPress finds the shortcode it will automatically run the code associated with it.

Let’s see how to easily add shortcodes in your WordPress posts and pages.

Adding a Shortcode in WordPress Posts and Pages

First, you need to edit the post and page where you want to add the shortcode. After that, you need to click on the add block button to insert a shortcode block.

Adding shortcode block in WordPress

After adding the shortcode block, you can simply enter your shortcode in the block settings. The shortcode will be provided by various WordPress plugins that you might be using such as WPForms for contact forms, OptinMonster for email marketing forms, WP Call button for inserting a click to call button, etc.

Insert shortcode in the block editor

To learn more about using blocks, see our Gutenberg tutorial for more details.

You can now save your post or page and preview your changes to see the shortcode in action.

Adding a Shortcode in WordPress Sidebar Widgets

You can also use shortcodes in WordPress sidebar widgets. Simply visit the Appearance » Widgets page and add the ‘Text’ widget to a sidebar.

Now you can paste your shortcode inside the text area of the widget.

Adding shortcode in sidebar widget

Don’t forget to click on the ‘Save’ button to store your widget settings.

After that, you can visit your WordPress website to see the live preview of the shortcode in the sidebar widget.

Adding a Shortcode in Old WordPress Classic Editor

If you are still using the old classic editor in WordPress, then here is how you can add shortcodes to your WordPress posts and pages.

Simply edit the post and page where you want to add the shortcode. You can paste the shortcode anywhere inside the content editor where you want it to be displayed. Just make sure the shortcode is in its own line.

Shortcode classic editor

Don’t forget to save your changes. After that you can preview your post and page to see the shortcode in action.

How to Add a Shortcode in WordPress Theme Files

Shortcodes are meant to be used inside WordPress posts, pages, and widgets. However, sometimes you may want to use a shortcode inside a WordPress theme file.

WordPress makes it easy to do that, but you will need to edit your WordPress theme files. If you haven’t done this before, then see our guide on how to copy and paste code in WordPress.

Basically, you can add a shortcode to any WordPress theme template by simply adding the following code.


WordPress will now look for the shortcode and display its output in your theme template.

How to Create Your Own Custom Shortcode in WordPress

Shortcodes can be really useful when you want to add dynamic content or custom code inside the WordPress post and pages. However, if you want to create a custom shortcode, then it requires some coding experience.

If you are comfortable with writing PHP code, then here is a sample code that you can use as a template.

// function that runs when shortcode is called
function wpb_demo_shortcode() { 

// Things that you want to do. 
$message = 'Hello world!'; 

// Output needs to be return
return $message;
} 
// register shortcode
add_shortcode('greeting', 'wpb_demo_shortcode'); 

In this code, we first created a function that runs some code and returns the output. After that, we created a new shortcode called ‘greeting’ and told WordPress to run the function we created.

You can now use add this shortcode to your posts, pages, and widgets using the following code:

[greeting]

It will run the function you created and show the desired output.

Now let’s take a look at a more practical usage of a shortcode. In this example, we will display a Google AdSense banner inside a shortcode.


// The shortcode function
function wpb_demo_shortcode_2() { 

// Advertisement code pasted inside a variable
$string .= ' ';

// Ad code returned
return $string; 

}
// Register shortcode
add_shortcode('my_ad_code', 'wpb_demo_shortcode_2'); 

Don’t forget to replace the ad code with your own advertisement code.

You can now use the [my_ad_code] shortcode inside your WordPress posts, pages, and sidebar widgets. WordPress will automatically run the function associated with the shortcode and display the advertisement code.

Shortcodes vs Gutenberg Blocks

We’re often asked by users about the differences between shortcode vs the new Gutenberg blocks.

Basically if you find shortcodes useful, then you’ll love WordPress editor blocks. Blocks allow you to do the same thing but in a more user-friendly way.

Instead of requiring users to add a shortcode for displaying dynamic content, blocks allow users to add dynamic content inside posts / pages with a more intuitive user interface. A lot of popular WordPress plugins are switching to using Gutenberg blocks instead of shortcodes because they’re more beginner friendly.

We have put together a list of the most useful Gutenberg block plugins for WordPress that you may want to try.

If you want to create your own custom Gutenberg blocks, you can follow our step by step tutorial on how to create custom Gutenberg blocks in WordPress.

We hope this article helped you learn how to add a shortcode in WordPress. You may also want to see our guide on the best drag & drop WordPress page builder plugins, and how to create a custom WordPress theme without writing any code.

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.



Source link

Categories
Using WordPress

How to Easily Add a Call Now Button to WordPress (Step by Step)

how to add a call now button to a wordpress site

Want to add a call now button to your WordPress website? Adding a call now button to your site makes it easier for your visitors to call you right from your website.

In fact, almost half of the internet traffic is from mobile devices, so if your website doesn’t have a call now button, you’re likely losing a lot of potential leads.

In today’s article, we’ll show you how to easily add a call now button to your WordPress website with a plugin and without a plugin.

Why Add a Call Now Button to Your Website?

Adding a call now button to your website can be of great advantage for you and your business.

This makes it convenient and hassle-free for your visitors to get in touch with you right from your website.

With a call now button on your WordPress site, you are actually converting your website traffic into valuable leads. And by integrating a professional business phone service, you can share numbers with employees, do call forwarding, etc.

Let’s take a look at how to add a call now button to WordPress.

Method 1: Adding Call Now Button Using a Plugin

The easiest way to add a call now button to WordPress is by using the WP Call Button plugin.

With this plugin, you can easily add a call now button without writing a single line of code. You can also do it from your Classic editor or the Gutenberg editor, whichever is active on your site.

First off, install and activate the WP Call Button plugin on your site. After installation, it’s the time to configure the plugin.

Configuring Call Now Button Plugin to Add Sticky Button

Once your plugin is activated, go to Settings » WP Call Button on your WordPress dashboard. In this page, you will see 3 different tabs.

  • Sticky Call Button
  • Static Call Button
  • About Us

By going to sticky call button tab, you can add a sticky call button to your WordPress website. This means that the button will be visible no matter how far you scroll down the page.

wp call button, call now

Let’s go ahead and turn on the Call Now Button status. Then enter your business contact number to which you want your visitors to call.

If you don’t have a business phone number, then you can get one from Nextiva. This is the company we use for our business VoIP phone.

You can then work on the appearance of your call now button.

call now button

You have the option to add the button text, select its position and color. You can also select where you want to display the button. By default, the button will appear on all pages of your website. But you can also hide it from certain pages if you want.

Once you’re done making these changes, click on the save button at the end of the page. That’s it. Your visitors can now call you on your registered business number right from your website.

B. Adding a Static Call Now Button to Your Website

You can also add a static call now button to your website. Let’s see how to do this on Classic editor and the Gutenberg editor.

Using the Classic Editor

To add the button, go to Settings » WP Call Button » Static Call Button

In this page, you’ll see a few customization options. Using these options, you can change the text and color of your button. You can even hide the phone icon from the button if you want. However, we’d recommend you not to do that because the phone icon helps you send a clear message to your users about its purpose.

Once all the changes are made, simply copy the shortcode and paste it on the page or post wherever you want to display your button. That’s all. Your call now button will now be reflected on your website post or page.

Using the Gutenberg Editor

If you are using the Gutenberg editor, just go to the particular page where you want to display your call now button. You can either edit an existing page or create a new one. Now you can add the WP Call Now block by using the ‘+’ symbol.

You will have the same customization options here just like the Classic Editor. You can also change your button text and color to match with your website’s appearance. You can also hide or show the phone icon on your button if you want. Once you’re done customizing it, save your settings.

If it’s an existing post, you’ll have to click on the Update button for your button to start working. If it’s a new post, make sure to hit the Publish button. Your button should show on your post right away.

Adding A Call Now Button to Widget

With WP Call Button, you can add your call now button to your website’s widgetized areas. To do that, you just need to go to your dashboard and click on Appearance » Widgets.

Now drag the button option and drop it in your widget area.

You can then work on its text, color etc. like you did in the above processes.

Adding a Call Now Button Manually

Apart from using a plugin, you can also use the call now button by adding a simple HTML code. This method too is a simple one and you can easily use it by following the process we are about to explain here.

These links will open the phone app on mobile devices. On desktop computers, Mac users will see an option to open the link in Facetime, whereas Windows 10 users will see the option to open it in Skype.

You can start by going to your WordPress text editor and adding the following HTML code.

+1 (555) 555-1212 
  
Call Me

Don’t forget to replace the phone number in the above with your own business number. Feel free to customize the anchor text (Call Me) as well.

This link can be placed anywhere on your website. You can also use a phone icon next to your call now link. You can do this by clicking on Media » Add New

Now upload the phone icon that you want to display on your screen. Once the image is uploaded, click on it and copy the image URL.

Now go to the post or page where you added the HTML code. You can then wrap the image URL within the phone link like this:

Upon previewing the post, you will now see the phone icon along with the number. When a visitor clicks on this image, they can directly reach out to you on your business number.

Adding Call Now Button to Navigation Menus Manually

Let’s now see how to add the call now button to your navigation menu without a plugin. Don’t worry. You don’t need to code anything for that.

Just go to your WordPress dashboard and click on Appearance » Menu. Now click on the custom link tab on your right. You will see 2 different fields here.

In the link field, just add your phone number. In the text box, you can add the anchor text that you want on your button. Complete the process by clicking on the Add to Menu option. That’s it, your Call Now option will now be added to the navigation menu.

Tracking Your Call Now Button Clicks

Now that you have successfully added the call now button, wouldn’t it be great if you can track them too? This step is possible only if you use the WP Call Button Plugin for the process.

You can do it by integrating the plugin with Google Analytics. All you need to do is install the MonsterInsights plugin, which lets you track every activity on your website.

Here’s a detailed guide on using MonsterInsights.

So that’s it!

We hope this article helped you add the call-now button to WordPress.

You might also want to check out how to create a free business email.



Source link