Tag - Add

How to Add a Custom Scrollbar in WordPress


Do you want to add a custom scrollbar in WordPress? Changing the appearance of scrollbar can help you stand out specially when making a custom theme for your website.

In this article, we will show you how to easily add a custom scrollbar in WordPress. We will show you two solutions and you can choose one that works best for you.

Adding a custom scrollbar in WordPress

Issues with Custom Scrollbar Colors

By default, CSS does not come with a ruleset that would let you change scrollbar properties. There are some proposals to add this, but they are not supported by most browsers at the moment.

To overcome this, designers and developers use browser-specific pseduo elements or JavaScript to override default scrollbar appearance.

We will show you both techniques. However, keep in mind that you must test your site with different browsers and devices to ensure it works properly on all browsers.

That being said, let’s take a look at how to add custom scrollbar colors in WordPress.

Method 1. Add a Custom Scrollbar in WordPress with a Plugin

This method is easier and recommended for most users. However, it does not support mobile browsers.

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

Upon activation, you need to head over to Settings » Custom Color Scrollbar Settings page to configure plugin.

Scrollbar color and background settings

From here, you can change the scrollbar color and the scrollbar rail background colors. You can then select the mouse scroll step, which is the scrolling speed of the mouse wheel.

You can also select whether you want to auto-hide the scrollbar or always display it.

You have the option choose ‘Cursor only’ option which would display the scrollbar rail but not the button.

Scroll options

Below that, you will find options to set the scroll speed, change rail alignment (left or right), and enable touch behavior.

Don’t forget to click on the save changes button to store your settings.

You can now visit your website to see your custom scrollbar colors in action.

Custom scrollbar colors preview

Method 2. Add Custom Scrollbar Colors in WordPress using CSS

This method uses CSS to style your scrollbar, which is faster than using jQuery.

However, it only works on desktop browsers using WebKit rendering engine like Google Chrome, Safari, Opera, and more.

It will not have any effect on mobile browsers or Firefox and Edge on desktop computers.

You will need to add the following custom CSS to your WordPress theme.


::-webkit-scrollbar 
    -webkit-appearance: none;

::-webkit-scrollbar 
  width: 10px;


::-webkit-scrollbar-track 
  background: #ffb400; 
	border:1px solid #ccc;


::-webkit-scrollbar-thumb 
  background: #cc00ff; 
	border:1px solid #eee;
	height:100px;
	border-radius:5px;


::-webkit-scrollbar-thumb:hover 
  background: blue; 


Feel free to change colors and other CSS properties.

Once you are satisfied, don’t forget to save your changes. After that, you can preview it in a supported browser.

This is how it looked on our demo website while viewing on Google Chrome on a Mac computer.

Scrollbar custom colors preview

We hope this article helped you learn how to add a custom scrollbar in WordPress. You may also want to see our guide on how to easily 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

How to Add Image Credits in WordPress (Step by Step)


Recently, some of our readers asked us about how to properly add image credits in WordPress.

Image credits are a way to let users know about the original creator of the image that you are using on your website. It shows good faith and also protects you from legal issues.

In this article, we will show you how to properly add image credits in WordPress. We will also talk more about why it is important, and what are the consequences of not doing it.

Adding image credit and attribution in WordPress

When and Why Add Image Credits in WordPress?

Images are highly engaging, and they make your blog posts look visually appealing. However, you cannot just copy any image from the web and add it to your blog posts.

All images on the internet are protected by copyright laws. You can only use them with permission from the copyright owner.

Some photographers and artists occasionally release their work under licenses that allow others to use their images. However, often these licenses require you to give proper credit to the original creator.

Why Adding Image Credit is Important?

All images on the internet are protected by copyright laws including the ones where you cannot see a copyright notice. This means you cannot use them on your website without permission.

If the image author specifically states that their photos can be re-used under licenses like creative commons, then you must add image credit and provide proper attribution to the original work.

It is really important to give proper image credit to comply with the copyright laws and avoid infringing upon someone’s rights.

It is a show of respect for other people’s work and creativity. It also protects you against legal issues and liabilities caused by violating intellectual property rights and copyright laws.

What are the Consequences of Not Giving Image Credits?

Many beginners believe that the internet is very large, and no one would even notice that they have used an image without permission.

This used to be true in the old days where you could get away with stealing images, but things are changing fast.

Now, there is an entire industry of lawyers who’re focused on recovering image copyright claims. They use reverse image search tools to send bulk cease and desist mails along with settle demand letters.

We know several bloggers and business owners who have paid hundreds of dollars in damages just for a single image.

If you are serious about growing your business online, then you need to take copyright laws seriously from day one.

Copyright laws are applicable globally. This means they apply regardless of where you or the original creator lives.

As mentioned above, the first most serious consequence is that you can be sued for violation of copyright laws. These legal troubles can cost a lot of money and may even destroy your website, and its reputation.

Copyright laws also apply to search engines like Google and web hosting companies.

The original copyright owner can file a DMCA complaint against your website to search engines which will force them to remove that content from search results.

They can also ask your hosting provider to remove the content in which case they will be legally obliged to ask you for the removal of the image. Some companies may just suspend your hosting account and inform you later.

How to Properly Add Image Credits in WordPress

WordPress lets you easily add image credits below an image. Here is how to properly add image credits in WordPress without using any extra plugin.

First, you need to upload the image to your WordPress post or page. Simply add an image block to the content editor and then click on the upload button to select an image from your computer.

Adding an image block to upload a new image in WordPress

You can also select a previously uploaded image by clicking on the media library button.

Once you select an image, it will automatically appear in the post editor. Below the image, you’ll see a prompt to ‘Write a caption’.

Write a caption

Captions can be used to describe an image or photograph. They can also be used to add image credit and give proper attribution to the original copyright owner.

Format caption credit and add links

You can add image credit text in the caption field. Some copyright owners may require you to also add a link back to the original source.

If they do, then you can simply click on the insert link button and add the link to the original file.

Once you are done, you can go ahead and save your changes.

To learn more about using captions, see our article on how to add captions to images in WordPress.

How to Find the Image Credit and License Information

Most images you’ll find on the internet do not contain licensing information. This means that you don’t have permission to use those images.

Luckily, there are many websites where you can find images to use. However, some of these image websites may require you to provide attribution or image credit.

You can find this information on the image download page. For example, this is how Flickr shows licensing information on the image page.

Licensing information for an image on Flickr

Clicking on the link will provide you more details about the license. It will also describe if you need to give credit and how to properly do that.

License information

How to Avoid Giving Image Credits in WordPress

You need to carefully read the license to understand how you are required to provide the image credit.

Most such licenses will explicitly require you to provide a link back to the original source.

Adding links to the photographer’s website or the photo is a bit problematic. In most cases, the link is not relevant to the actual content on your website. It would allow users to leave your website, and they may not come back.

This is why we recommend using royalty-free stock photo websites.

These websites curate photographs, images, and illustrations that do not require image credit. You can also use these images on business websites.

Following are our top picks for free stock photo websites:

  • Unsplash – A large collection of royalty-free photographs neatly organized in categories and tags.
  • Pixabay – One of the largest and most popular license-free images and photos
  • Public Domain Archive – A collection of images and photographs available under public domain
  • Picjumbo – Another large collection of royalty-free images
  • New Old Stock – A collection of vintage photographs that are now available under public domain

For more options, see our complete list of the best places to find free stock photos.

On WPBeginner, we extensively use Shutterstock which is a premium stock photo and illustration website.

The problem with stock images though is that these images are already used on thousands of websites. You may also struggle with finding the right image to accompany your articles.

The simplest way to fix this is by using your own original photographs and graphics. The challenge is that most users are not graphic designers.

Luckily, there are websites that allow you to easily create graphics to use on your website. These image editors come with drag and drop tools and ready-made templates to give you a good starting point.

Following are some of the best online graphic editing tools for beginners.

  • Canva – An easy to use graphic design tool for beginners to create custom logos, banners, images, infographs, charts, and more.
  • Piktochart – Easy to use tool to make beautiful presentations, banners, charts, and graphics
  • Pablo – Allows you to create beautiful graphics for social media and blogs.
  • PicMonkey – Another easy to use image editor for bloggers

We hope this article helped you learn how to add image credit in WordPress and why it is important. You may also want to see our guide on how to optimize your images for SEO and get more traffic.

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 Image Credits in WordPress (Step by Step) appeared first on WPBeginner.



Source link

How to Add Pinterest “Pin It” Button in WordPress (Ultimate Guide)


Do you want to add the Pinterest “Pin It” button in WordPress? Recently, a new traffic source popped up in our blog stats.

It was significant enough for us to take notice. This traffic source was Pinterest.

Pinterest is a popular social networking site that allows you to share visual content and drive a lot of traffic to your website (follow WPBeginner on Pinterest).

In this article, we will show you how to add the Pinterest “Pin It” button to your WordPress blog. We will also explain how to add the Pin It button over the images of your website.

Add Pinterest Pin It button in WordPress

Adding a Pinterest “Pin It” Button Using a Plugin

Pinterest officially changed the “Pin It” button name to Save in 2016.

Although some plugins still use the name “Pin It” instead of Save, they do the same job of pinning your images to Pinterest.

The easiest way to add a Pinterest button to your WordPress site is by using a social sharing plugin.

We recommend using Shared Counts plugin for this purpose. It is the best social media plugin for WordPress because it’s free and allows you to easily add the Pinterest button along with other popular social networks.

To get started, you need to install and activate the Shared Counts plugin. You can follow our step by step guide on how to install a WordPress plugin for detailed instructions.

Upon installation, head over to Settings » Shared Counts page to configure the plugin.

Shared Counts settings page

On the settings page, you need to scroll down to the Display section and then click on the “Share Buttons to Display” textbox.

This will open a dropdown menu where you can select the social media services you want to add. By default, Pinterest will be present in that box, along with Facebook and Twitter.

You can also select the location and post type where you want to display the Pinterest button. It comes with multiple button styles that you can choose from the ‘Share button style’ option.

Once you are done, don’t forget to click on the Save Changes button to store the settings.

You can now visit any post on your website to see the Pinterest button in action.

Pinterest button added to WordPress post

Another neat thing about SharedCounts is the free Custom Pinterest Image addon available on Github. This lets you set a custom Pinterest sharing image and description that’s optimized for Pinterest.

Note: We use SharedCount plugin on our website because it’s the best option in the market. It’s very well-coded and it’s free.

Manually Adding a Pinterest Pin It Button in WordPress

Some intermediate users may prefer to add the social sharing buttons manually to their WordPress site instead of using a plugin.

Let’s take a look at how to manually add a Pinterest button in WordPress.

The first thing you need to do is make a complete WordPress backup of your site. This will help you restore your site in case something breaks by accident.

Next, you need to connect to your WordPress hosting using an FTP client and then go to the /wp-content/themes/ folder.

From here, you need to open your current theme folder and then locate the footer.php file.

Download footer php file

Next, simply right-click on that file and then select Download from the menu. This will download the footer.php file to your computer.

Now you need to open the footer.php file using a plain text editor like Notepad and then paste the following script right before the </body> tag.


<script type="text/javascript">
(function() 
    window.PinIt = window.PinIt )();
</script>

Once you have done that, you need to save the file and then upload it back to the current theme folder.

Next, you need to locate and download the single.php file from your theme folder and open it for editing. After that you need to add the following code.

You will need to choose the location where you want it to appear in your post. After post title is the most common placement for social media buttons.


<?php $pinterestimage = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full' ); ?>
<a href="http://pinterest.com/pin/create/button/?url=<?php echo urlencode(get_permalink($post->ID)); ?>&media=<?php echo $pinterestimage[0]; ?>&description=<?php the_title(); ?>" class="pin-it-button" count-layout="vertical">Pin It</a>

The above code displays the Pinterest button with your featured image, title, description, and post URL in the share URL parameter.

Finally, you need to save the file and upload it back to your theme directory using FTP.

This will add a vertical share button to the posts of your website. If you want to display the horizontal share button, then simply change the count-layout parameter to horizontal.

Creating a Shortcode for Pinterest Button

Recently, one of our users asked us how to create a shortcode for the Pinterest “Pin It” button.

Shortcodes in WordPress allow you to easily add dynamic items to your WordPress posts, pages, and widgets. By creating a shortcode, you’ll be able to manually add Pinterest button in your articles.

First, you’ll need to add the following code to your theme’s functions.php file or a site-specific plugin:



function get_pin($atts) 
$pinterestimage = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full' );
return '<a href="http://pinterest.com/pin/create/button/?url=' . urlencode(get_permalink($post->ID)) . '&media=' . $pinterestimage[0] . '&description=' . get_the_title() .'" class="pin-it-button" count-layout="vertical">Pin It</a>'; 

add_shortcode('pin', 'get_pin');

After that, you can use the [pin] shortcode in your WordPress posts where you want to display the Pinterest button.

Adding Pinterest Pin It Button Over Your Images

If you are running a fashion, photography, or portfolio site, then you definitely want your images to be shared on Pinterest to increase your website traffic.

Let’s take a look at how to add the Pinterest Pin it button over your images in WordPress. This button will appear only when the user brings their mouse over your images, allowing them to easily share the image on their Pinterest profile.

First, you need to install and activate the Pinterest Pin it Button for Images plugin.

Upon activation, go to Settings » Pinterest Pin It page to configure the plugin.

Pinterest Pin It button for images settings page

On the settings page, you can choose where you want to show the “Pin It” button on your WordPress site. You can display it only on single posts, pages, category pages, or everywhere on your site.

The next option is to choose the default description from the dropdown menu. This will be used as the image description for the pinned image.

Once done, you need to click on the Save button to store the settings. Now you can visit your website and then hover your mouse cursor over any image to see the Pinterest “Pin It” button.

Pinterest Pin It button over images

If you want to exclude some images from showing the Pin It button, then you can add the nopin CSS class to the images you want to exclude.

To do that, you need to select the image block in the post editor and then click on the 3 vertical dots icon from the block toolbar. This will open a menu where you need to click on the Edit as HTML option.

Edit Image as HTML option to add CSS class

You will now see the HTML code of your image. Go ahead to add nopin to the class attribute of the img tag:

<figure class="wp-block-image"><img src="https://example.com/wp-content/uploads/2019/06/imagename.jpg" alt="image name" class="nopin wp-image-1687"/></figure>

Similarly, you can also use the plugin to disable automatic display of the “Pin It” button, and use the CSS class “pinthis” to selectively display the button on specific images.

To do that, you need to visit the plugin’s settings page and then locate the Advanced section on the right side of the page.

Pinterest Pin It plugin advanced settings

Now you need to check the option that says ‘Show “Pin it” button only on images with class=”pinthis” ‘, and then click on the Save button.

The next time you add an image to a post or page, you need to select the image block and then use the Edit as HTML option to add the pinthis CSS class to the image code. Here is an example:

<figure class="wp-block-image"><img src="https://example.com/wp-content/uploads/2019/06/imagename.jpg" alt="image name" class="pinthis wp-image-1687"/></figure>

This will show the Pinterest button on that specific image, even if you have disabled the option to automatically show the Pin It button on your site.

That’s all!

We hope this article helped you understand how to add a Pinterest “Pin It” button to your WordPress blog. You may also want to see our guide on how to create an email newsletter and get more subscribers.

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

How to Add Header and Footer Code in WordPress (the Easy Way)


Have you ever been asked to add some code snippets to <header> or <footer> section of your WordPress website?

Often you are asked to add header and footer code in WordPress when trying to integrate with web services like Google Analytics, Facebook Pixel, Google Search Console, etc.

You may also come across WordPress tutorials that might ask you to add some custom CSS or Javascript code to your WordPress header or footer.

By default, WordPress doesn’t provide an option to insert code in your website’s header and footer. Luckily there is an easy solution for beginners.

In this article, we will show you how to easily add header and footer code in WordPress. The goal is to safely add the code without directly editing your WordPress theme files.

How to Add Header and Footer Code in WordPress

The Best Way to Add WordPress Header and Footer Code

If you want to add WordPress header and footer code, there are three possible solutions:

  1. Manually, by editing you theme’s header.php and footer.php files
  2. With your theme’s built-in header and footer code feature
  3. Using a plugin

The first option is not beginner friendly because it requires you to add header and footer code by directly editing the header.php and footer.php files manually.

Another disadvantage of using this method is that your code will be removed if you install an update to your theme.

The second option is using your theme’s built-in feature. Some WordPress themes like Elegant Themes and Genesis Framework by StudioPress offer a built-in option for quickly adding code and scripts to your WordPress header and footer.

If you are using a theme with a built-in feature, then it seems like a safe and simple solution. However if you change your theme, then all the code snippets added to your website will be gone. This includes site verification in Google Search Console, website analytics via Google Analytics, etc.

This why we always recommend users to use the third option, a headers and footers plugin. This option is by far the easiest and safest method to add header and footer code in WordPress.

After a lot of request from readers, our team has built a 100% free Insert Headers and Footers plugin to let users easily add code to the header and footer in WordPress.

Insert Headers and Footers

Here are some benefits of using the Insert Headers and Footers plugin:

1. Easy, Fast, and Organized: It lets you add codes to your site’s header and footer easily and quickly. Plus, it keeps you organized by allowing you to store all your footer and header codes in one place.

2. Prevents Errors: It helps prevent errors which may occur if you edit your theme files manually.

3. Upgrade or Change Your Theme Without any Worry: The plugin will save your header and footer code in a separate place, so you can update or change your theme without worrying about the code being erased.

With that said, let’s see how to easily add header and footer code in WordPress using Insert Headers and Footers plugin.

Adding Code to Header and Footer in WordPress

First thing you need to do is install and activate the Insert Headers and Footers plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Once the plugin is activated, go to Settings » Insert Headers and Footers from your admin panel. After that, you will see two boxes for adding code to header and footer.

Insert Headers and Footers plugin settings

Simply paste the code in one of the two boxes. Once done, don’t forget to click the Save button to store your changes.

The plugin will now automatically load the code in the respective locations on your WordPress site.

You can always edit and remove any code that you don’t want to keep.

You’ll need to keep the plugin installed and activated at all times. Deactivating the plugin will stop adding all custom code to your site.

If you accidentally deactivate the plugin, the code will still be safely stored in your WordPress database. You can simply reinstall or reactivate the plugin, and the code will start appearing again.

Note: You may have to clear your WordPress cache after saving changes, so the code properly appears on the front-end of your website.

We have found the biggest reason why a lot of beginners use the Insert Headers and Footers plugin is to add Google Analytics to their website. For that, we actually recommend using the free MonsterInsights plugin. It’s the best Google analytics plugin for WordPress which helps you properly setup Google analytics tracking with just a few clicks, and it shows you helpful stats right inside your WordPress dashboard.

We hope this article helped you to learn how to add header and footer code in WordPress easily. You may also want to see our comparison of the best email marketing services and the best business phone services.

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 Header and Footer Code in WordPress (the Easy Way) appeared first on WPBeginner.



Source link

How to Add Scroll Depth Tracking in WordPress with Google Analytics


Do you want to add scroll depth tracking on your WordPress website?

Scroll depth tracking allows you to see how far a user scrolls on any page. This data helps you see if your visitors are actually reading your long posts and when they lose interest, so you can modify the content to keep them engaged.

In this article, we will show you how to easily track user scrolling in WordPress using Google Analytics.

How to Track User Scrolling in WordPress Using Google Analytics

Why Track User Scrolling in WordPress?

Generally, scrolling occurs when a user wants to see your content below the preview screen. It is a primary activity that all users perform to look at your content.

This makes scroll depth tracking an important measure to track user engagement. In addition to that, it gives you plenty of insights about user interaction on your site and helps you improve pages for optimal length.

For example, you can find out how much an average user scrolls when viewing your site, which long reads they liked the most, what makes them lose interest, etc.

With these insights, you can then optimize your pages for better user engagement and higher conversions.

Tracking Scroll Depth in WordPress with Google Analytics

Google Analytics is a free web analytics tool offered by Google to help you better understand your website visitors.

It allows you track who your website visitors are (age, gender, interests), where they are from, which pages they visit, how long they stay on those pages, how far down they scroll on the pages, and more.

Google Analytics tracks the basic metrics like total page views, total number of visitors, top pages, etc. by default.

For more advanced metrics like scroll depth, eCommerce tracking, form submissions, file downloads, event tracking, and others, Google analytics require you to setup custom tracking.

Manually setting up advanced Google analytics tracking requires a lot of technical skills. As a beginner, this is nearly impossible. Even some developers can’t do it properly.

Thankfully, there are easy to use WordPress plugins that can help you track advanced metrics like scroll depth with Google Analytics.

Let’s take a look at two plugins that you can use to setup scroll depth tracking in WordPress.

1. Scroll Depth Tracking in WordPress with MonsterInsights

MonsterInsights is the most popular Google Analytics plugin for WordPress with over 2,000,000+ active installs. It helps you easily install and use Google Analytics on your WordPress website without using any code.

MonsterInsights Best Google Analytics WordPress Plugin

With MonsterInsights, you can enable advanced tracking like eCommerce tracking, file downloads, affiliate links, forms tracking, scroll depth, and more with just a single click (no coding needed).

MonsterInsights comes with scroll-depth tracking enabled by default. This means you don’t even need to configure any settings. All you need to do is setup the MonsterInsights plugin.

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

Upon activation, go to Insights » Settings page and then click on the Engagement tab. As shown in the screenshot below, you will see the scroll tracking option enabled by default.

MonsterInsights Scroll Depth Tracking Option

MonsterInsights trigger events in Google Analytics as your website visitors scroll down the page. It will then be tracked with Google Analytics as 25%, 50%, 75%, and 100% scroll.

You can see your scroll tracking stats and other helpful stats right inside your WordPress admin area by going to the MonsterInsights Publishers Report (Insights » Reports » Publishers). The scroll depth data appears next to the Interests section.

Scroll Tracking Reports in WordPress

You can use the scroll depth data to optimize your pages for more conversions. It gives you a better picture of how your visitors are interacting with your content and helps you decide the best place for your important calls to action, ads, and more.

View User Scrolling Data in Google Analytics

Now that you have set up scroll tracking with MonsterInsights, you can view reports also in your Google Analytics account.

Log into your Analytics account and then visit Real-Time » Events to see your real-time or recent scrolling data within the last 30 minutes.

Google Analytics Scroll Tracking in Real-time

For the complete data, you can go to Behavior » Events » Overview from your Analytics dashboard.

Scroll Depth Data in Google Analytics

You can click on the Scroll Depth link to get more details.

If you want more granular details, then you can use Google Analytics’ secondary dimension feature alongside the Scroll Depth event to see the scroll data for each individual landing page.

2. Track User Scrolling With WP Scroll Depth Plugin

If you don’t want a comprehensive Google Analytics solution and would rather use a single plugin, then you can use WP Scroll Depth.

The first thing you need to do is install and activate the WP Scroll Depth plugin on your site. For detailed instructions, here’s our step by step guide on how to install a plugin in WordPress.

Upon activation, you need to go to Settings » Scroll Depth to configure the plugin settings.

WP Scroll Depth Plugin Settings

The default options will track scroll depth for all pages on your WordPress site. All you need to do is click on the Save Changes button to store plugin settings.

WP Scroll Depth plugin uses jQuery to track scrolling on your WordPress site. It monitors four scroll points 25%, 50%, 75%, and 100% of the page height. When a user reaches a scroll point, the plugin sends an event to Google Analytics using jQuery.

After that, you can view Scroll Depth event data under Real-Time » Events on your Google Analytics dashboard.

WP Scroll Depth Real-time data

We use MonsterInsights on all our websites because it’s the most complete Google Analytics plugin for WordPress, and we recommend all our users to do the same. They have a free MonsterInsights plugin, and you can also upgrade to the premium version to unlock more powerful tracking.

We hope this article helped you learn how to track scroll depth on your WordPress site using Google Analytics. You may also like to see our guide on 10 website marketing data you must track on every WordPress site.

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



Source link

How to Add Stripe Donate Button in WordPress (with Recurring Option)


Do you want to add a Stripe donate button to your WordPress site? Stripe is one of the best online payment processors in the world because it allows anyone to easily accept online payments on their website including donations.

In the past, you had to use an eCommerce plugin to accept payments, but that’s not needed anymore specially if you want to collect donations or sell a few products. You can use a simple payment form to do the job.

In this article, we will show you how to easily add a Stripe donate button in WordPress.

Adding a Stripe donate button in WordPress posts and pages

What You Need to Accept Stripe Donations on Your Website

You’ll need to create a Stripe account. You can create an account for free and will only be charged for transactions.

You’ll also need a WordPress website with SSL enabled. SSL adds a security layer to your website making it safe for accepting payments. To learn more, see our guide on how to get a free SSL certificate for your website.

Lastly, you’ll need a WordPress extension to connect your Stripe account. We’ll be using WPForms, which is the best WordPress form plugin.

It comes with a Stripe addon that allows you to accept donations, one-time payments, and even subscription payments on your website. You’ll need at least their PRO plan to access the Stripe add-on.

That being said, let’s take a look at how to add a Stripe donate button in WordPress.

Adding The Stripe Donate Button in WordPress

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

Upon activation, you need to visit WPForms » Settings page to enter your license key. You can find this information, under your account on WPForms website.

Add WPForms license key

Next, you need to visit WPForms » Addons page and click on the ‘Install Addon’ button next to the Stripe addon.

Install Stripe addon

WPForms will now install and activate the Stripe add-on for you.

Now let’s connect WPForms to your Stripe account to receive payments. To do that you need to visit WPForms » Settings page and click on the Payments tab.

Stripe payment settings

You will be asked to enter your Stripe API keys, which you can find under your Stripe dashboard.

Simply log in to your Stripe account dashboard and from the left menu select Developers » API Keys.

Stripe API keys

You need two pairs of keys for the published website and for testing.

First, you’ll see the publishable keys on the screen. Copy and paste the public key and then click on ‘Reveal key token’ to copy and paste the publishable secret key.

Stripe publishable keys

Next, you need to add the test keys. Click on the ‘View test data’ toggle and then copy and paste the test API keys.

Test api keys

Now that you have pasted the API keys, you can optionally enable the test mode from payment settings.

This will allow you to test Stripe integration without actual payments. However, you must uncheck this option when your website is ready for accepting donations on your website.

Stripe keys in WPForms

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

Now that you have set up the payments, it is time to create a Stripe donate form for your website.

Making a Stripe Donation Form in WordPress

First, you need to visit the WPForms » Add New page to create a new form. You will be asked to provide a title for your form and choose a template. You need to select the ‘Donation Form’ template.

Create a donation form

This will launch the WordPress forms builder interface with your selected donations form template. This template will already have the common fields required to create a donation form like name, email, donation amount, and message.

Editing the donation form in WPForms

This is a drag and drop form builder. You can edit form fields by clicking on them, rearrange them, or add new fields from the left column.

Since you are creating a Stripe payments form, you need to add a credit card field to your form. You’ll find it under ‘Payments Fields’ section on the left column.

Adding Stripe credit card field to your form

Simply click to add the field to your form and then drag and drop to rearrange its position in the form.

Once you are satisfied with the form, click on the Payments tab in the left corner to edit the payment settings. From here you need to select Stripe as your payment method and then check the box next to ‘Enable Stripe Payments’ option.

Enable payment option

You can provide a description for the payment and select the email field if you want to send the donors a receipt of the payment.

WPForms also supports recurring payments. You can use this option to set up recurring donations or subscriptions.

The next step is to setup confirmation settings. This is what your users will see after they fill the form.

Click on the Settings tab and then select the confirmation option.

Set up confirmation

From here you can select different types of confirmation options. For example, you can thank users with a simple message, or redirect them to a thank you page or any other URL.

Once done, click on the save button and exit the form builder.

Adding The Stripe Donation Form in WordPress

WPForms makes it super easy to add your forms anywhere on your website.

Simply edit the post or page where you want to add the donation form. Next, add the WPForms block to your content and select the donation form you created earlier.

Add donation form to your WordPress post or page

WPForms will now fetch and embed the form for you. You can now visit your website to see it in action.

Stripe donation form preview

You can also add the donation form to your blog’s sidebar or any other widget ready area. Head over to Appearance » Widgets page and add WPForms widget to a sidebar.

Adding a donation form to sidebar

Next, you need to select your Stripe donation form in the widget settings. Don’t forget to click on the Save button to store your widget settings.

We hope this article helped you easily add a Stripe donate button to your WordPress site. You may also want to see our guide on the must have WordPress plugins for every 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 Stripe Donate Button in WordPress (with Recurring Option) appeared first on WPBeginner.



Source link

How to Add Nofollow Links in WordPress (Beginner’s Guide)


Are you wondering how to add nofollow links in WordPress? When you link to an external website, search engines pass a small part of link authority from your website to the other website.

Since you don’t own or control those third-party websites, it is usually a SEO best practice to add nofollow attribute to those links.

In this article, we’ll explain what is nofollow links, and how you can add nofollow links in WordPress posts, pages, and navigation menus.

How to Add Nofollow Links in WordPress - Simple Guide for Beginners

Here’s a quick overview of what you’ll learn in this article:

A nofollow link is a type of link that tells search engines to not pass any link authority from your page to the other website that you’re linking to. You can turn any link into a nofollow link by adding the following link attribute: rel=”nofollow”.

Links or backlinks are an important search engine ranking factor.

When you link to a website, search engines consider that as a ranking signal, and they will pass a small portion of your page authority (link juice) to the other website.

Some SEO experts believe that by making external links nofollow, their own website will rank higher.

How to Check if a Link is Nofollow?

All nofollow links must contain the rel=”nofollow” HTML attribute.

Here’s an example HTML code of a nofollow link:

<a href="https://example.com" rel="nofollow">Google</a>

To check whether a nofollow attribute is added to a link on a website, you need to take your mouse to that link, right click on it, and then select Inspect on your browser.

Check nofollow attribute in the link

Your browser window will now split into two parts.

In the bottom window, you will be able to see the HTML source code of the link along with the nofollow attribute.

As a general best practice, you should add nofollow to all external websites that you don’t trust.

It’s completely acceptable and actually recommended to link to authority websites like Wikipedia, WPBeginner, New York Times, etc without the nofollow attribute because linking to authority sites help you add credibility to your own website.

However we always recommend users to nofollow less credible websites or websites that you simply don’t trust.

The following are some cases when you should always add nofollow attributes to the links:

1. Affiliate and Sponsored Links

Most bloggers make money online using affiliate marketing.

Affiliate links are tracking links for products and services that you recommend and get referral commissions for if someone purchases your link.

Whether you’re using a direct affiliate link or cloaking it using Pretty Links, you should always add nofollow attribute to affiliate links.

Another popular way bloggers make money is by adding sponsored links. You should always add nofollow to sponsored links because otherwise search engines may consider your site as selling links / spammy.

2. External Links

Sometimes, you may link to an external source to provide a reference to your statement. Since you don’t control the content on those websites, you should consider adding nofollow to them.

In simple words, you are telling the search engines that you are linking to a source, but it is not something you can vouch for.

Note: You don’t need to nofollow a link to an authority website.

3. Sidebar Links

Some bloggers add a list of external or affiliate links to the sidebar of their WordPress blog. These external links can be from authority sites or websites that they trust.

The problem is every time a new page is created on your site, you are creating a new backlink for those websites from your sidebar.

It is important to make these links nofollow and make sure that you are not passing the SEO juice from every page to certain links.

Since Gutenberg is a new WordPress content editor, the old nofollow plugins for WordPress are not yet compatible with it.

Currently, the only way to add nofollow links in Gutenberg is to do it manually.

Let’s take a look at the step by step process on how to add nofollow links in WordPress posts or pages with Gutenberg.

First, you need to go to Posts » Add New from the left sidebar of your admin panel.

On this page, you need to select the text that you want to add a link to, and then click on the “anchor / link” icon.

select text to add link in Gutenberg Editor

This will open a text field just below the selected text. You can paste the external link directly in the box.

If you want the link to open in a new tab, then you need to click on the down arrow icon. This will open a menu where you have to click on the “Open in New Tab” toggle box.

Add external link to the textbox

Once done, you can click on the apply or Enter icon to add the link.

To add the nofollow attribute to your link, you need to select the block containing your link and then click on the 3 vertical dots icon present at the top bar.

Select edit as HTML option from the top bar

This will open a menu where you need to click on the Edit as HTML option.

You will now see the HTML code of your link. Go ahead to add the rel=”nofollow” attribute to the link element.

rel nofollow attribute to link

If you see the rel=”noopener noreferrer” attribute in the HTML code, then add a space after noreferrer and paste nofollow after that.

Once done, you can click on the 3 vertical dots icon again and select the Edit visually option to go back to the visual format.

Select edit visually option

This will convert your normal link to a nofollow link. You can follow the same process for adding nofollow attribute to all other external links.

Although it is recommended to upgrade to the newer version of WordPress, some users still prefer to use the Classic Editor for writing their posts.

Unlike the default editor, you can easily add nofollow links in the Classic Editor with the help of a plugin.

First thing you need to do is install and activate the Title and Nofollow For Links plugin. You can follow our guide on how to install a WordPress plugin for help.

This plugin works out of the box, and there are no settings for you to configure.

Head over to Posts » Add New to create a new post. You need to add some text to the post editor and select the text that you want to link. Next, click on the Link icon present in the toolbar.

Add Link to WordPress Classic Editor

After that you can add the external link to the textbox field below and click on the gear icon to open the Link options.

This will open up a modal window where you will see a nofollow checkbox just below the “Open link in a new tab” option.

Go ahead to select the Add rel=”nofollow” to link checkbox and then click on the Update button.

Add Nofollow attribute to a link in WordPress Classic Editor

This allows you to add a nofollow attribute to any link when writing a post. This is also useful for users who are not confident with editing HTML code.

Most bloggers select the “Open link in a new tab” checkbox as well when adding an external link. This is a great way to reduce bounce rate and keep your visitors from leaving your website.

You have already learned how to add nofollow links in the Gutenberg editor manually. However, that method is only useful when you want to add the nofollow attribute to some of your links.

If you have a lot of external and affiliate links in your post, then you should switch to the Code Editor to add nofollow attribute faster.

Open code editor to edit external links

Simply, click on the 3 vertical dots icon, present at the top-right corner of the page. This will open a dropdown menu where you need to select the Code Editor option.

You will now see the HTML code of the page. Next, search for the external and affiliate links and then, add the nofollow attribute to all of them.

Add nofollow to external links

Once done, you need to click on the “Exit Code Editor” link to revert to the visual editor.

If you’re using the Classic Editor, then you can easily use a plugin to add nofollow links. However, you can also add nofollow links manually.

To do that, you need to switch to the Text Editor by clicking on the Text tab. Next, you can add rel=”nofollow” to any link you want.

Add nofollow attribute to links in classic text editor

To go back to the visual editor, you have to click on the Visual tab, placed just beside the Text tab.

Some bloggers and site owners may add external links to the navigation menu of their website.

While adding a nofollow attribute to WordPress menu links is extremely simple, it is not as clearly visible.

Let’s take a look at how to add nofollow links in WordPress navigation menus.

First, you need to click on Appearance » Menus from the left sidebar of your admin panel.

Next, select the menu where you want to add the external link and then click on the Select button to open it.

Select a navigation menu to edit

After that, you need to click on the “Custom Links” tab to add the link text and external link URL. Once done, you need to click on the “Add to Menu” button to create a new menu item.

Add Custom Link to Navigation menu in WordPress

The external link will now appear in the Menu Structure column along with the other menu items.

Next, click on the Screen Options button at the top-right corner of the screen and select the Link Relationship (XFN) and Link Target options.

Screen Options navigation menus

Now scroll back down and click on the downward arrow icon of the new menu item to expand it. Here you will find the “Link Relationship” and “Open link in a new tab” options, just below the Navigation Label textbox.

Add nofollow to Link Relationship XFN option

To add the nofollow attribute, you need to write nofollow in the Link Relationship (XFN) textbox. You can also check the “Open link in a new tab” option if you want.

Click on the Save Menu button

Lastly, click on the Save Menu button to store your changes. This will add the nofollow attribute to the external link in your WordPress menu.

Some WordPress users want to automatically add the nofollow attribute to all external links on their site.

Most solutions that offer this are done with the help of JavaScript which is not helpful for Google and the SEO of your site. Instead, you should manually nofollow the links using the above methods.

In case you are concerned about the comment section, then the good news is that WordPress already adds the nofollow attribute to all comment links by default.

If you’re still looking for a solution to automatically nofollow the external links, then you can use the External Links plugin.

It adds the rel=”nofollow” attribute to all the external links on the posts, pages, navigation menus, and the sidebar.

To install the External Links plugin, head over to Plugins » Add New from the left sidebar of your admin panel.

Upon activation, you need to go to Settings » External Links page.

External Links plugin settings page

Here you need to select the “Add No Follow” checkbox. If you want the external links to open in a new tab, then you should select the “Open in New Windows” checkbox as well.

This plugin also allows you to add a list of domains and subdomains which should not be made nofollow.

To do that, you need to scroll down to the bottom of the page and then add the domains, separated by commas or space, to the “Domains to Exclude” textarea.

Domains to exclude nofollow attribute

Once done, you should click on the Save Changes button to store the settings.

That’s all! This plugin will now make all the external links nofollow on your site automatically.

We hope this guide helped you to learn how to add nofollow links to your WordPress site. You may also want to read our beginner’s guide to image SEO, and our ultimate guide for blog post SEO to help you further optimize your blog posts.

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

How to Add Free Live Chat in WordPress (The Easy Way)


Are you looking for a solution to add free live chat in WordPress?

Adding the live chat functionality to your website lets you interact with your visitors. You can answer their questions and solve their problems in real-time.

This helps you to convince your potential customers to purchase your product. It also allows you to provide faster support to your existing customers, so they stay loyal to your brand.

In this article, we will explain how to add live chat in your WordPress site, the easy way.

Adding free live chat in WordPress

Why Use Live Chat on Your WordPress Site?

In this age of instant gratification, customers want to get instant answers to their questions. This helps them make a quick decision to purchase a product or service.

According to eConsultancy, live chat has the highest level of satisfaction among all the customer service channels.

Live chat has a satisfaction level of 73% where as email satisfaction is 61%, phone is at 44%, and SMS satisfaction rate is at 41%.

Live chat is an incredibly powerful tool to recover abandoned carts and improve overall conversion rate across your website, specially if you run an online store.

Aside from being a powerful sales tool, you can also use live chat to provide support to your existing customers which can help turn your loyal customers into brand ambassadors.

That being said, let’s take a look at how to easily add a free live chat in WordPress.

Adding Live Chat to WordPress

While there are many live chat solutions available for WordPress, we’ll be using LiveChat Inc. for the sake of this tutorial.

It is the best live chat software in the market. We can confidently recommend it because we use it on one of our own business websites, OptinMonster.

While the WordPress live chat plugin is free, you will need to have a paid subscription to the LiveChat service. This is one of the most cost-effective solutions in the market.

There is no good free live chat plugin for WordPress.

LiveChat Inc’s paid solution starts at $16.99 per month, but they offer a free 30-day trial for testing their product.

We believe that it is the best option for small businesses that are just starting out. It is worth spending money on it because it will help grow your business.

You can add it to your website for free and give it a try.

To get started, head over to the LiveChat website to create a new account.

LiveChat Inc Website

Next, you need to click on the Sign up free button located at the top-right corner of the screen.

This will take you to a new page where you have to provide some basic information like your full name, email address, and password.

Create a LiveChat account

Click on the Continue button to move forward.

In the next step, you have to provide the URL of your website and the purpose for creating the LiveChat account. It can be for support, sales, or both.

Create a LiveChat account step two

Once done, click on the Continue button to proceed forward.

Now, you have to provide some information about your business. You can select the company size, industry of your business, and type of audience.

Create a LiveChat account step three

Once you’ve filled in the required information, you can click on the Create Account button to complete the process.

Customizing the Appearance of the Live Chat Window

Your LiveChat window needs to grab user’s attention while blending in with the rest of your website design. LiveChat allows you to make changes to the appearance of the chat window to match your needs.

To do that, you need to click on the Settings link on the left sidebar of your LiveChat account area.

This will take you to the Customization page where you can style the live chat window and see your changes applied in real-time.

LiveChat account settings page

On the right side of your screen, you can select a theme for the maximized window and the minimized version. You can also pick a color for the chat window to match it with your website’s colors.

Customize LiveChat Window

To replace the LiveChat Inc. logo with your website logo, you need to click on the Advanced window tweaks link.

This will take you to a new page where you need to click on “Upload your logo”.

Upload Logo and Add social links to LiveChat

You can also add the links to your social media pages. Once done, click on the “I’m done editing” button.

If you want to add custom CSS, then you need to click on the “Customize using own CSS” link.

Once you are finished with the customization, click on the Save Changes button to store the settings.

Customize LiveChat using custom CSS

Setting up Live Chat on Your WordPress Website

LiveChat comes with a free WordPress plugin that allows you to add it to your website within a few minutes.

Go ahead to install and activate the LiveChat plugin. You can check out our beginner’s guide on how to install a WordPress plugin for help.

Upon activation, head over to LiveChat » Settings from the left sidebar of your admin panel.

Connect with LiveChat Inc account

On the Settings page, you’ll have to connect to the LiveChat account by clicking on the “Connect with LiveChat” button.

This will open up a popup window where you need to click on the Sign in link and then log in to your LiveChat account.

Next, WordPress will ask for your permission to access your LiveChat account from the admin area. Click on Allow to complete the process.

Allow WordPress to Access LiveChat account

Now you’ll find some new options on the settings page.

You may click on the “Hide chat on mobile” toggle box to display live chat on desktop only.

LiveChat WordPress plugin settings page

You can also hide the chat feature for guest visitors to test the software.

Now you can visit your website to see the Live Chat bubble added to the bottom-right corner of your screen.

LiveChat added to WordPress site

You’ll receive notifications on your LiveChat account whenever someone uses it to contact you. You can then interact with them, from your account area to answer their queries.

How to Find Trained Live Chat Agents

The above method allows you to add the live chat feature to your site easily.

However, the biggest challenge for most small businesses is to maintain a team of support or sales professionals.

You’ll have to hire and train the team so that you can provide live support to your customers.

The easiest solution is to outsource the service to LTVPlus. It is a managed live chat service for online businesses.

LTVPlus website

LTVPlus is started by the co-founder of MaxCDN, the content delivery solution that we use on WPBeginner website.

They offer affordable live chat agents who can provide 24/7 support on your website. This will help reduce your expenses and grow your business without worrying about hiring more support and sales staff.

You can use the combination of LiveChat and LTVPlus to add live chat functionality to your website and take your business to the next level.

We have used the combination of these two services to increase the sales on our sister company, OptinMonster.

We hope this tutorial helped you learn how to easily add free Live Chat in WordPress. You may also want to see our list of the best CRM software 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

How to Add reCAPTCHA to WordPress Comment Form


Are you looking to add reCAPTCHA to your WordPress comment form?

Spam comments have gotten out of control for WordPress websites. As spammers become more sophisticated, they can launch massive spam attacks with little effort.

Akismet, the popular spam filtering service for WordPress blocks about 7.5 million spam comments every hour. Dealing with spam comments can be frustrating, and some bloggers even choose to completely disable comments on their websites.

Instead of turning off the comments, you can add CAPTCHA to the comment form to practically eliminate spam.

In this tutorial, we’ll show you how to easily add reCAPTCHA to the comment form of your WordPress website.

Add reCAPTCHA to WordPress Comment Form

What is Google reCAPTCHA?

ReCAPTCHA is an advanced form of CAPTCHA, which is a technology used to differentiate between robots and human users. CAPTCHA is an acronym for “Completely Automated Public Turing test to tell Computers and Humans Apart”.

Google acquired CAPTCHA technology in 2009 and then later rebranded it as reCAPTCHA. They also made it easier for human users to easily pass the test.

Basically, it presents users with a simple check box that they can click to pass the test. If for some reason the test doesn’t validate, then the user will be presented with a challenge identifying text in an image or matching objects in multiple images.

Google have made reCAPTCHA publicly available, so that website owners can use it on contact forms, login pages, and comment forms to reduce spam.

Here’s an example of what reCPATCHA test looks like to majority of your users:

Google reCAPTCHA tickbox

It is super easy to setup and add to the WordPress comment form.

With that said, let’s see how to easily add reCAPTCHA to the WordPress comment form with step by step instructions.

Step 1: Get Started

First thing you need to do is install and activate the reCAPTCHA in WP comments form plugin. You can see our step by step guide on how to install a WordPress plugin for detailed instructions.

Upon activation, you need to visit Settings » reCAPTCHA in Comments page to configure plugin settings.

reCaptcha plugin settings page

The plugin will ask you to provide Google reCAPTCHA API keys. You can create these keys for free from the official reCAPTCHA website.

Step 2: Register Your Website to Get reCAPTCHA API Keys

The plugin needs 2 Google API keys to add a reCAPTCHA checkbox to your comment form.

To get the API keys, head over to the Google reCAPTCHA website and click on the ‘Admin Console’ button located at the top right corner of the screen.

Visit Google reCAPTCHA website

You’ll be asked to sign in with your Google account. After that, you’ll see the “Register a new site” page where you need to provide some basic information to register your site.

First, you need to type your website name or any name of your choice in the Label field. This will help you easily identify your site in the future.

Adding a new site

Next, you need to select the reCAPTCHA V2 radio button.

This will open up 3 new options. Since you want to add the reCAPTCHA checkbox to your site, you need to select the “I’m not a robot checkbox” option.

The Domains textbox allows you to add the domain name of your website where you would like to add the reCAPTCHA checkbox.

You can also add multiple domains or subdomains by clicking on the plus (+) icon. This will allow you to use the same API keys on different websites.

Add domain and email to reCAPTCHA site

Under Owners, Google will already add your email address. You can also add another email if you want.

Next, you need to accept the terms of service to use Google reCAPTCHA on your site.

Also, select the “Send alerts to owners” checkbox to allow Google to send emails to you if they detect any misconfiguration or suspicious activity.

Submit and register your WordPress site

Once you’ve filled the form, you can click on the Submit button to register your site.

Google reCAPTCHA will now show you a success message along with the site key and the secret key on this page.

Copy site and secret keys

You can now use these API Keys in plugin settings on your website.

Step 3: Add reCAPTCHA to WordPress Comment Form

Head over to Settings » reCAPTCHA in Comments from the left sidebar of your admin panel.

On the settings page, you need to scroll down to paste the site key and the secret key.

Add Google API keys to WordPress site

Once you’re done, click on the “Save your Google reCAPTCHA API Keys pair” button to store the API keys.

The last thing you need to do is enable reCAPTCHA by clicking on the toggle button and then click on Save Changes.

Activate Google reCAPTCHA on your site

You can also do basic customization by clicking on the reCAPTCHA Customizer option.

Customize reCAPTCHA appearance

Here you can make changes to the style, size, and alignment of the reCAPTCHA checkbox.

The plugin also has Antispam Settings option which allows you to decide what to do when the plugin detects an unauthorized comment or security breach.

What to do with spam comments

Congratulations, you’ve successfully added reCAPTCHA to your WordPress comment form. You can now check the comment section of your blog posts to confirm that it’s working properly.

Note: the reCAPTCHA checkbox will be displayed only to logged out users, so you will need to either log out or open your website in an Incognito window of your browser to preview reCAPTCHA.

WordPress comment form with reCAPTCHA enabled

We hope this tutorial helped you learn how to add reCAPTCHA to the WordPress comment form of your website.

You may also want to check out our guide on how to lazy load comments in WordPress to improve the page loading time.

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 reCAPTCHA to WordPress Comment Form appeared first on WPBeginner.



Source link

How to Add Google Maps Store Locator in WordPress


Do you want to add Google Maps store locator in WordPress? A store locator is a map pointing to your business location.

It allows users to locate you on the map, find driving directions, or share the location with friends. Adding a store locator to your business website or even an online store helps you instantly earn user trust.

In this article, we will show you how to easily add Google Maps store locator in WordPress.

How to add a Google Maps store locator in WordPress

Google Maps introduced a paid API to display maps on websites. They still offer a limited free option to embed Google maps on small websites.

Most Google Maps plugins for WordPress use the Google API to retrieve and display maps. If you want to use a Google Maps plugin, then you will need to sign up with Google API platform and enable billing option.

It is a pay as you go service, which means you will be charged based on the number of API calls made from your website.

We will show you both free and paid methods with their pros and cons, then you can choose the one that best suits your needs.

Method 1. Adding Google Maps to Your Website for Free

This method is easier and free. The disadvantage is that you cannot show multiple stores on a single map.

It is recommended for users who just want to add a single Google Maps store location on their website.

First, you need to visit the Google Maps website on your computer. Next, enter your store’s address in the search field and Google Maps will show it on the map with a pinned marker on the map.

Sharing a map in Google Maps

Make sure that the marker is placed on the correct location. You can select a zoom level by clicking the zoom button. Once you are satisfied with the zoom level, you need to click on the share button from the left column.

This will bring up a popup where you need to switch to the ‘Embed a Map’ tab. You will now see your searched location on the map with an HTML code.

Copy the Google Maps embed code

Click on the Copy HTML link to get the embed code.

Now head over to the admin area of your WordPress website. Once in the admin area, go ahead and edit the post or page where you want to display the store location map.

Normally, users add a store location map on their contact form page with their phone number and opening hours.

On the post edit screen, you need to add a custom HTML block.

Adding a custom HTML block in WordPress

In the text area of custom HTML block, you need to paste the code you copied from Google Maps.

Maps embed code in WordPress

You can now switch to the preview tab to see Google Maps embedded into your page. It will show your store location marked on the map with links to directions or to save the location.

Store location marked on the map

Method 2. Add Google Maps Store Locator Using a WordPress Plugin

This method is recommended for users who want to show multiple store locations on a Google Map.

The first thing you need to do is in install and activate the WP Store Locator plugin. For more details, see our step by step guide on how to install a WordPress plugin.

It is a free Google Maps plugin that allows you to create a custom map with multiple store locations and custom fields.

The disadvantage of this method is that it requires you to add an API key. You will need to provide your billing information to use the API key. For pricing and other information, please check out the Google Maps Platform website.

Ready, let’s get started.

Step 1. Generating Google Maps API keys

To use WP Store Locator plugin, you will need to generate two API keys. The first one is called the Browser API key and the second one is called the Server Key.

Let’s start with the Browser key first. Click on this Google Developer Console link and it will take you to the Google API website with all the required APIs enabled.

Create a new project

You need to create a new project and give it a name that helps you identify the project. After that, you will have to wait a few moments as the console creates the project for you.

Next, you will be redirected to the API key configuration page. You need to provide a title for your API key, so you can easily identify it as the browser api key for your Google Maps project.

Browser api key settings

Next, you need to set ‘Application Restrictions’ to ‘HTTP Referrers’. Below that you need to set the ‘Accept requests from’ field to your domain name in the following format.

https://example.com/*
https://*.example.com/* (if you are using a subdomain)

Finally, click on the ‘Create’ button. The console will now save your settings and will show you the Browser key. You need to copy and paste this key in a text editor, you will need it later.

Copy browser api key

Next, you need to create the server API key. Click on this Google Developer Console link and it will take you directly to the console with selected APIs enabled.

You will once again see the create project page. However since you have already created a project, you can just click on the drop-down menu and select your project.

Select your Google Maps project

You will be then redirected to API configuration page. Provide a name for this API key that helps you recognize it as Server key.

Set IP restrictions

Under the ‘Application restrictions’ section, you need to select IP Addresses. Basically, we are telling Google to only accept server requests coming from specific IP addresses.

Now you would need to ask your WordPress hosting provider to tell you the IP range used by your hosting account. It would be in the following format:

172.16.0.0/12

After that, you need to click on the ‘Create’ button to save your settings and copy the Server API key.

Step 2. Setting up the WP Store Locator Plugin

Once you have created your API keys, you need to head over to Store Locator » Settings page to set up the plugin.

Enter Google Maps Keys

Enter the Google Maps browser and server API keys you generated earlier. Next, select Maps language and region and then click on the save changes button to store your settings.

Now, you need to scroll down on the settings page to the ‘Map’ section and enter a start point of the map. This start point could be a city or a country, so users can see markers placed at different locations.

Add a start point for your store locator map

There are many other options on the settings page including map style, default zoom level, map type, search radius, country, etc. You can review them and adjust them to your needs.

Once you are done, it is time to add locations.

Step 3. Adding store locations

Head over to Store Locator » New Store page to add your first location. The New Store page will look just like the default post or page editor in WordPress.

Store address

Provide a title for your store and then scroll down to ‘Store details’ section. From here, you need to enter your store address.

You will see a map in the right column, however it will not automatically update to the address you have entered. You will need to click on the Publish button to save your location. After that, refresh the page and the map will point to the address you provided.

Now repeat the process to add other store locations. You can add as many store locations as you want.

Step 4. Adding the store locator map in WordPress

To display your store locator on a WordPress page, simply create a new page or edit an existing one where you want to display the map.

On the post edit screen, you need to add the ‘Shortcode’ block to your post edit area. After that add the [wpls] shortcode inside it.

Store locator shortcode

You can now save or publish your page and click on the preview button to see Google Maps store locator in action.

Store locator map preview

It will show your map markers for each store location and start the map from your preferred starting point. For example, in this map, it is focused on the city of West Palm Beach and showing two store locations on the map.

That’s all we hope this article helped you learn how to add Google Maps store locator in WordPress. You may also want to see our list of free Google Tools every site owner should use.

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 Google Maps Store Locator in WordPress appeared first on WPBeginner.



Source link