Tag - Add

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

How to Add Multi-Column Content in WordPress Posts (No HTML Required)


Do you want to add multi-column content in your WordPress posts? Columns can be used to create engaging layouts for your posts and pages.

Traditional print media, like newspapers and magazines, have been using multi-column layouts since the very early days of printing. Their goal was to make it easier for users to read the smaller text while utilizing the available space economically.

Single column layouts are more commonly used on the web. However, multi-column grids are still useful for highlighting content and making it easier to scan and read.

In this article, we’ll show you how to easily add multi-column content in your WordPress posts without writing any HTML code.

Add Multi-Column Content in WordPress Posts and Pages

Adding Multi-Column Content in WordPress – The Easy Way

Creating multi-column content aka grid column content in WordPress is now easy because it comes as a default feature. The new WordPress Block Editor Gutenberg includes a columns block.

To add a multi-column layout, you need to create a new post or edit an existing one. Once you’re in the post edit area, click on the ‘Add’ icon on the top to add a block.

Next, you need to select the ‘Columns’ block located under ‘Layout Elements’ tab.

Add Columns Block in Your WordPress post

You will now see the mouse cursor jumping on the left column and a text placeholder will appear on the right column.

Columns block WordPress in WordPress added to post

As you can see in the above screenshot, the Columns block seems just an empty area at first. If you mouse over to the left, you can see the block border highlighted.

You will also be able to see the block settings on the right column of the post edit screen.

Columns Block WordPress - 2 Columns

By default, the columns block will adds two columns. You can increase the number of columns you want to add from the block settings on the right. It allows you to add up to six columns in a single row.

Add more columns to your Columns

Simply click on a column and start typing to add content. You can use the tab key on your keyboard for switching to the next column.

Add Text in Your WordPress Columns

Adding Media and Other Content in Your Columns

In addition to the text content, you can also add images and embed videos in WordPress columns.

The columns block allows you to add blocks inside each column. Simply take the mouse to a column, and you will notice the ‘Add new block’ icon inside it. You can also add a block by typing / and then the block name.

Add new block in WordPress columns

Your selected block will now appear inside the column. You can now go ahead and add content to it.

Image Block Added to WordPress

Here’s how your new column may look in the default Twenty Nineteen theme. In this example, we are using three columns and the last column contains an image.

3 Columns in WordPress Post - Preview

If you only want to add an image and some text next to it, then you can also use the ‘Media and Text’ block instead of columns. This particular block is made specifically for showing media like images and videos next to some text.

Add Media and Text Block in WordPress

Adding Multiple Columns in Old WordPress Classic Editor

In case you haven’t upgraded your WordPress to Gutenberg and still using the Classic Editor, then you’ll need to install a separate plugin for creating a grid column layout.

First, install and activate the Lightweight Grid Columns plugin. For detailed instructions, follow our step by step guide on how to install a plugin in WordPress.

Upon activation, you can create a new post or open an old post to edit. Next, click on the ‘Add Columns’ button from the visual editor toolbar.

Add Columns Icon Lightweight Grid Columns Plugin

Now you will see a popup window to add your first column. You can choose how much area your column can cover, in desktops, tablets, and mobile devices differently.

For example, if you set the desktop grid percentage 50%, your column will cover the half row.

Grid Width Percent - Lightweight Grid Columns

There’re plenty of options to set your column width, from 5% to 100% in the interval of 5. You can choose one by clicking the dropdown.

Column Width Options - Grid Percentages

After that, you need to add your column content in the ‘Content’ box and then click the “OK” button to insert it into your post.

Add Content to Your Column  - Lightweight Grid Columns Plugin

The plugin will now generate the required shortcode with your content and add it to your post editor.

Shortcode and Content Added to WordPress Column

Now that your first column is added, you can repeat the process to add more columns. For the last column in row, don’t forget to check the box ‘Last column in row’.

Shortcode and Content for 2 Columns in WordPress

After that, you can save your post and preview it. Here’s how it looked on our test site using Twenty Seventeen theme.

Two WordPresss Columns in Twenty Seventeen Theme

We hope this article helped you learn how to add columns in your WordPress posts and pages. You may also want to see our simple guide on how to easily align images in WordPress 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.

The post How to Add Multi-Column Content in WordPress Posts (No HTML Required) appeared first on WPBeginner.



Source link

How to Add Caption to Images in WordPress


Do you want to add captions to your images in WordPress? Captions are brief text descriptions that you can add to your images. They are typically used to provide additional details about an image.

WordPress comes with the built-in capability to easily add a caption and other metadata including title and alternative text for each image.

In this beginner’s guide, we will show you how to easily add a caption to images in WordPress.

How to Add Caption to Images in WordPress

Adding Caption to Images in WordPress

The first thing you need to do is to upload an image. On the post edit screen, click the ‘Add Block’ icon and select the ‘Image’ block.

Add Image Block in WordPress

Upon clicking on it, the Image block will be added to your post area.

Image Block Added In WordPress

You can now click on the upload button to select and upload an image from your computer to WordPress. You can also select a previously uploaded image by clicking on the media library button.

To learn more, see our article on how to add and align images in WordPress.

As soon as you add an image, it will appear inside the editor with a text box labeled ‘Write caption…’ below it.

That’s where you can add a caption for your image.

Add Caption to Image in WordPress post

Once done, you can save your post by clicking on the publish or update button.

That’s all. Wasn’t that easy?

Add Captions to Your Gallery Images

WordPress editor also comes with a Gallery block allowing you to upload multiple images and display them in a grid layout with rows and columns.

Let’s see how to add captions to images in a WordPress gallery block.

To create a gallery, go to your page or post edit screen. Then click the ‘Add Block’ icon and select the ‘Gallery’ block in the Common Blocks tab.

Add Gallery Block in WordPress

Next, you will see the Gallery block added to your page/post area. Now, you can upload images one by one from your computer or select the pre-uploaded pictures from your media library.

Gallery Block Added to a WordPress Page

If you upload images individually, then you can add a caption after uploading each one. When an image is uploaded, simply click on the image and the ‘Write caption…’ field will appear. You can add a caption by clicking on that.

Add Caption to Gallery Images in WordPress

If you select pre-added images from the library, you can add a caption to your pictures from the image metadata section on the right. If the photos already have a caption, then you don’t need to add it again.

Select Images to Create Gallery in WordPress

Adding Captions to Images in WordPress Media Library

WordPress allows you to upload images directly to the media library without embedding it in a post or page.

Here we will show you how to add caption to images when uploading them directly to the Media Library.

First, you need to visit Media » Add New page in WordPress admin area.

Add New Media to WordPress

From here, you can upload an image by dragging and dropping or by selecting one from your computer.

Once done, you will see the uploaded image below the Upload New Media box. You need to click the ‘Edit’ link.

Edit Image Option in WordPress Media Upload Page

Next, it’ll open the edit media page in a new tab. You may notice that the edit media screen looks similar to the post edit screen. That’s because WordPress treats attachment (for example, image) as a default post type.

This allows it to store image metadata like title, description, and caption in WordPress database.

From this screen, you can edit your image title, add image metadata including caption, alternative text, and description.

Image Post Edit Screen in WordPress

Once you add the necessary information, you can update your image. This image metadata will now be saved in your media library.

You can add this image on as many posts as you like without having to add the caption and other metadata again. Whenever you add this image to your post from the media library, it comes with the metadata already saved.

Select Image to Add in a WordPress Post

Adding Caption to Images in WordPress with Old Classic Editor

If you are still using the old Classic Editor on your WordPress site, then this is how you would add captions to images in WordPress.

Simply click on the Add Media button above the post editor to upload an image or select one from the media library.

Add media button in the old classic editor

Once the image is uploaded you can enter meta data like title, alt text, and a caption of your image.

Adding caption to images using the Classic Editor

Click on the ‘Insert into post’ button to add the image to your post or page.

You will now be able to see the image preview in your post editor with the caption. You can save your changes and preview the post to see how it would look on your live site.

Preview of an image with the caption

Adding Captions to Gallery Images in WordPress with Classic Editor

You can also add captions to images when creating a gallery using the Classic Editor. Simply upload and select multiple images and then click on the ‘Create gallery’ link from the left column.

Create gallery in media uploader

After that, you will need to click on the ‘Create a new gallery’ button at the bottom right corner of the popup.

Create a new gallery with selected images

Now you will be able to add captions directly below each image or click on an image to load its settings in the right column and then add the caption.

You can now click on the Insert Gallery button to add gallery into your WordPress post or page.

Classic editor gallery images with captions

We hope this article helped you to add caption text to your images in WordPress. If you liked this article, you might also want to see our guide on how to fix common image issues in WordPress.

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



Source link

How to Add and Align Images in WordPress Block Editor (Gutenberg)


Images bring life to your WordPress posts and pages by making them more engaging. However, many beginners struggle with aligning images just the way they like.

The new WordPress block editor (Gutenberg) solves this problem by making it easier to add and align images in WordPress.

In this article, we will show you how you can easily add and align images in the WordPress to create beautiful content layouts.

Adding and properly aligning images in WordPress

Image Alignment in WordPress Editor

Previously, WordPress used a text area with editing buttons as its default editor. One particular issue in the old editor was image alignment.

Even though there were options to align images left, right, or center, they didn’t always look good. Sometimes images didn’t align, were not the exact size, or just looked odd.

WordPress 5.0 introduced a new WordPress post editor called the Gutenberg block editor. It fixed several problems with the old editor including the image alignment issues.

Let’s take a look at how you can easily add and align images in the new editor to create beautiful layouts for your posts and pages.

Add and Align Images in WordPress

The new editor comes with the following blocks that you can use to add images into your WordPress posts and pages.

  • Image
  • Inline Image
  • Gallery
  • Media & Text
  • Cover

Let’s start with a simple image block first.

Click on the ‘Add new block’ button or type /image in the post editor to insert an image block.

Adding a new image block in WordPress post editor

You will see three buttons inside the blank image block.

You can upload an image from your computer, select an already uploaded image from the media library, or insert an image by providing the image file URL.

Next, click on the ‘Upload’ button and then select the image you want to upload from your computer.

As soon as you select the image, WordPress will upload it to your media library and insert it into the image block.

Image options in WordPress post editor

Now, you will notice a toolbar on top of your image and some image block settings in the right column. To align your image, you’ll be using the toolbar that appears on top of the image.

Image alignment buttons in WordPress post editor

The image block gives you the following image alignment options as buttons in the toolbar.

  • Align left
  • Align Center
  • Align Right
  • Wide Width
  • Full Width

If your image is smaller in width, then aligning it to the left or right will bring up text next to the image. Aligning it to the center will display the image on its own row with no text on either side.

Center align an image in WordPress

Choosing the wide width option will make your image wider than the text area, and the full-width option will push it to the right and left edges of the browser screen.

Making an image full-width in WordPress

How to Perfectly Align an Image Next to Text

A lot of times you may need to perfectly align an image next to some text. WordPress block editor makes this easy by adding the Media & Text block.

This block basically adds a two-column area. One column for images (media) and the second column for text content.

Media and text block in WordPress post editor

Simply upload your image and then add the text you want to display next to it.

Image and text block settings

After adding the image and text, you will notice more options for the block. You can make the whole block wider or full-width, you can also switch the image and text sides.

The image’s alignment will automatically adjust to the height of the text in the next column.

Image size adjusts to align vertically

How to Align Gallery Images in WordPress

WordPress post editor also comes with a block to add image galleries. This allows you to easily display images in a grid of rows and columns.

The Gallery block comes with similar alignment options in the toolbar.

You can make the entire gallery block align to the left, center, or right. You can also make it wide or change it to a full-width row.

Align gallery images in WordPress post editor

The default gallery feature in WordPress is quite good. However, if you regularly add photo galleries to your WordPress posts and pages, then consider using a photo gallery plugin like Envira Gallery.

These plugins will give you more options to align images in your photo galleries, display them in the popup, and style them differently.

How to Add Two Images Side by Side in WordPress

The easiest way to display two images side by side in a WordPress post is by adding both images in a Gallery block.

Display two images side by side in WordPress posts and pages

Simply select a 2-column layout for the gallery block to display both images next to each other. You can also check the ‘crop thumbnail’ option to make sure that both images are of the same size.

More Ways to Add and Align Images in WordPress

Apart from the image, media and text, and the gallery block, you can also use the Cover block to add a cover image.

In modern web design, cover images are used to create highly engaging content layouts. These images are used for highlighting different sections of a page.

The cover image block comes with the same alignment options as an image block. You can add text over the image and choose an overlay color from the block settings. The best part is that you can check the ‘Fixed Background’ option which creates a parallax background effect.

Adding cover image in WordPress post

To learn more about using cover images, check out our article on the difference between featured images and cover image in WordPress.

So far we have talked about adding images directly to your posts and pages. What about images from third-party sites?

The block editor makes this easy as well. It comes with embed blocks for popular social sharing sites including Instagram, Flickr, Imgur, Photobucket, and more.

For example, if you want to add an Instagram photo, then simply add the Instagram block to the post editor and enter the URL of the post you wanted to share.

Adding Instagram images in WordPress posts and pages

WordPress will automatically fetch the Instagram post and embed it for you. After that, you will be able to use the alignment options in the toolbar.

Instagram embed in WordPress

Embed blocks also allow you to easily embed videos in WordPress. After that, you can use the same options in the toolbar to align videos in WordPress.

We hope this article helped you learn how to easily add and align images in the WordPress block editor. You may also want to see our guide on how to optimize images to speed up WordPress.

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



Source link

How to Add Social Share Buttons in WordPress (Beginner’s Guide)


Do you want to add social share buttons in WordPress? Social media websites are where people spend a lot of their time on internet.

You can use social media to build user engagement and bring new users to your website. The simplest way to do this is by adding social sharing buttons to WordPress posts and pages.

In this article, we’ll show you how to easily add social share buttons and display share counts in WordPress. We will cover couple of different ways to do this, so you can add social buttons above and below post content or make a floating share bar..

How to Add Social Share Buttons in WordPress - Easy Way

Why You Should Add Social Share Buttons in WordPress?

Social networking is one of the most popular online activities today. It is estimated that by the end of 2019, there will be around 2.77 billion social media users around the globe. (Source)

That’s why social media marketing is now a crucial part of any businesses’ growth strategy. If you want to reach more potential customers, then social media platforms are highly effective channels to communicate with them.

The problem is that when you share your content on your own social media profiles, tit only reaches a limited number of your own followers.

The best way to reach people who don’t follow your business on social media is by adding social sharing buttons to your WordPress site.

Social share buttons prompt your website visitors to share your content on their social media timeline. This allows your content to be seen by their friends and followers who can then add comments, like, and re-share it.

Adding social sharing buttons to your website can help you:

  • Get more traffic to your website
  • Increase your social media following
  • Generate more leads and sales
  • Build social proof and brand recognition

Having said that, let’s see how to easily add social share buttons in WordPress.

Adding Social Share Buttons in WordPress

For this tutorial, we’ll be using the Shared Counts plugin. It is the best WordPress social media plugin available on the market.

Using this plugin, you can easily add social share buttons in your WordPress posts and also display the share counts. The best part is that it is optimized for performance and doesn’t slow down your website.

Unlike other social sharing plugins, Shared Counts uses a unique caching method to have minimal impact on your website’s speed and performance.

The first thing you need to do is to install and activate the Shared Counts plugin. For detailed instructions, see our step by step guide on how to install a WordPress plugin.

After you’ve installed the plugin, you need to go to Settings » SharedCounts menu to configure plugin settings.

Shared Counts WordPress menu

Next, you need to scroll down to the ‘Display’ section and choose the share buttons you want to display. By default, three buttons are selected (Facebook, Twitter, and Pinterest).

Shared Counts Plugin - select social share buttons

You can click on the white area in the field to add additional share buttons that you want.

Add social share buttons in Shared Counts

Next, you can choose the share button style from the dropdown menu labeled “Share Button Style”. Shared Counts plugin comes with 8 beautiful button styles.

Shared Counts share button styles

After that, you’ll need to select the theme location where you want to display the social share buttons. You can choose from 3 options: Before Content, After Content, and Before and After Content.

Theme Locations for Social Share Buttons

Lastly, you need to select the supported post types. It has ‘post’ selected by default.

If you want to display share buttons on your pages and other post types, then you can check the box next to page option.

Supported Post types Shared Counts

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

Once done, you can visit any post on your website to see the social sharing buttons in action. Here’s how our demo website looks with the ‘Classic’ button style on default Twenty Nineteen theme.

Social Share Buttons by Shared Counts

How to Display Social Share Counts in WordPress?

As the name suggests, Shared Counts plugin can also show your social share counts without slowing down your website.

To enable social share counts, you’ll need to go to the Shared Counts settings and set up the share count source.

On the Shared Counts settings window, you’ll see the ‘Share Counts’ settings at the top.

By default, you’ll see the None option selected for ‘Count Source’ which means that share counts are not being retrieved and displayed.

Share Counts Source none Shared Counts

To show the social share counts, you can choose from two sources.

Share Counts Source Options

The SharedCount.com is the recommended option for the plugin. If you choose this option, the counts are retrieved from the SharedCount service API. It allows fetching all counts with only 2 API calls which is the best for performance.

If you choose the ‘Native’ option, share counts are retrieved from the respective social service, like Facebook API for Facebook counts, Pinterest API for Pin counts. This method can slow down your site because it will require multiple API calls.

We recommend choosing SharedCount.com as your count source. Next, you’ll see a field for SharedCount API key.

Shared Counts API field

You can get the SharedCount API by signing up to for a free account on SharedCount.com website.

Register for SharedCounts com

Enter your email address and a password. Then click Create Account.

Create SharedCounts.com account

The website will now send a confirmation link to your email address. You need to click the link to verify.

SharedCounts.com account verified

Once your email is verified, you need to log into your SharedCount account and navigate to your account at the top right side of the screen. There, you’ll see your email address and a dropdown icon next to it.

SharedCounts.com account

Next, you need to click the drop-down menu and select ‘Settings’. From here you’ll find your SharedCount API key.

SharedCounts.com API key

You need to copy the API key and go back to your plugin’s settings page on your WordPress site. Now, go ahead and paste the API key in the ‘SharedCount API Key’ field.

Insert SharedCounts API key

Below that, you’ll see some other settings related to social share counts. You can review and change them if you like.

If you want to show the total counts, then you can check the box next to ‘Count Total Only’ option.

We also recommend checking the box to hide empty counts instead of displaying a zero (0).

Share count options

Next, you will see a new ‘Total Counts’ field in the Display section. This allows you to show total share counts alongside your share buttons.

Add Total Counts button Shared Counts Plugin

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

You can now visit your website to see the social sharing buttons with share count for each blog post.

Adding Social Share Buttons on Selected Pages

Typpically social share buttons aren’t usually added to WordPress pages however sometimes you may want to enable them on some specific pages.

If so then, you can use the Shared Counts shortcode: [[shared_counts]].

You can add this shortcode anywhere on your website to display the share buttons.

To add shortcodes in WordPress, there is a shortcode block in the WordPress block editor.

Shortcode Block in Gutenberg Editor

You can simply add the block to your content area and then paste the Shared Counts shortcode.

Insert Shared Counts Shortcode

Using the shortcode, you can add social share buttons really anywhere on your site.

Adding Floating Social Share Bar in WordPress

The Shared Counts plugin allows you to add social share buttons above content, below content, or both above and below content. These share buttons are static and not visible all the time.

Another popular way to display social sharing buttons is by adding a floating social sharing bar. It is a social sharing menu that sticks on users’ screens as they scroll down.

Unlike the standard sharing buttons, the floating social share bar will be seen the whole time a user reads your article. Making them more noticeable and helping you boost social sharing.

Some user experience experts argue that it makes your website look bad as it fills out the white space. However, if you can keep it clean, then it can be quite useful.

For the floating social share buttons, you need to install and activate the Sassy Social Share plugin.

Upon activation, the plugin will add a new menu item labeled ‘Sassy Social Share’ to your WordPress admin sidebar. Clicking on it will take you to the plugin’s settings page.

Select your button style

First, you need to choose an icon style. The plugin comes with square, rounded, and rectangle buttons. You can choose styles for both the floating social share bar and the standard share bar.

Next, you need to switch to the ‘Standard Interface’ tab. From here you can enable or disable the standard static social sharing buttons.

Standard sharing buttons

We recommend using either floating or static social buttons. Using both of them will be an overkill and may create a bad user experience.

Next, you need to switch to the ‘Floating Interface’ tab and check the box next to ‘Enable Floating sharing interface’ option.

Floating social share plugin settings

After that, you need to choose the social media websites you want to display. You can add or remove buttons and rearrange them by simple drag and drop.

Once you are finished, click on the ‘Save Changes’ button to store your settings.

You can now visit your website to see floating social share buttons in action. Here’s how it looked on our demo website.

Floating social share buttons

We hope this article helped you learn how to add social share buttons in WordPress. You may also want to learn how to add social media icons to WordPress menus and how to add the social icons to the sidebar.

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 Web Push Notification to Your WordPress Site


Do you want to add push notifications to your WordPress site? Push notifications allow you to send notifications to users even when they are not visiting your website.

In this article, we will show you how to easily add web push notifications to your WordPress site. We will also talk about the best WordPress push notification plugins and how to send desktop & mobile push notifications from your WordPress site.

Adding web push notifications to a WordPress site

What is Push Notification?

Push notifications are clickable messages displayed on top of user’s desktop or notification area on their mobile device. They can be shown even when the user’s browser is not open.

web push notifications shown on a desktop

Aside from desktop, web push notifications also work on mobile devices. This allows you to reach your users across devices with latest updates and offers. Web push notifications have proven to be a very effective way to convert website visitors into customers and loyal followers.

Why Add Web Push Notifications to Your WordPress Site?

We have already discussed that 70% of people who leave your website will never come back. This is why you need to convert those website users into subscribers or customers.

You can do this by utilizing multiple channels at once. This includes email marketing, social media, mobile or SMS marketing, and web push notifications.

While email lists are still the most dominant and effective marketing tool at your disposal, push notifications for us are proving to be quite effective.

Here is why:

  • Users need to give their explicit permission to receive push notifications. This means they are already interested in what you have to offer and are more likely to engage with notifications.
  • Push notifications are shorter and demand less attention than email or social media updates.
  • There is no algorithm, so nearly 100% of messages are delivered.
  • Users can control how their devices display notifications, they can snooze them, or turn them off entirely.
  • Not as many companies are using it.

Popular sites including Facebook, Pinterest, LinkedIn, and many others understand the importance and are already using web push notifications.

These notifications are more engaging than SMS, email marketing, and social media platforms. According to a survey, push notifications have a 50% higher open rate than email and twice as much click-rate.

Having said that, let’s take a look at how to add web push notifications to a WordPress site.

Setting up Web Push Notifications in WordPress with OneSignal

OneSignal is a free push notification service for WordPress websites. It allows you to easily add push notifications to any website.

First thing you need to do is install and activate the OneSignal plugin. Need help installing the plugin? See our step by step guide on how to install a WordPress plugin.

Upon activation, the plugin will add a new menu item labeled OneSignal to your WordPress admin bar. Clicking on it will take you to the plugin’s settings page.

OneSignal settings page

The settings page is divided into Setup and Configuration tabs. The setup tab is actually detailed documentation on how to setup OneSignal push notifications in WordPress. It has the same steps that we will show you in this tutorial.

To setup OneSignal, you will need to add API Key and APP ID into the plugin settings.

Let’s get started.

Step 1: Setting up OneSignal Push Notifcations

First, you need to visit the OneSignal website and click on the get started button next to the Web Push option.

OneSignal get started

You’ll be asked to provide your email and password to create a free account. After your account is created, you’ll reach the OneSignal dashboard.

Add OneSignal app

On the dashboard, click on the ‘Add App’ button to create your first app.

You’ll be asked to provide a name for your app. You can use anything here that helps you identify it.

Enter a name for your app

Next, you’ll need to select a platform. You can select multiple platforms for an app. For now, we recommend selecting ‘Web Push’ and click on the next button to continue.

Choose app platform

In the next step, you’ll be asked to select an integration method. Go ahead and click on ‘WordPress Plugin or Website Builder’ box and then select WordPress.

Select integration method

When you scroll down a bit, you will see a ‘WordPress Site Setup’ section.

You need to enter your website name, URL, and upload a logo. This logo would appear in your notifications, so we recommend using your site icon (favicon) or website logo.

WordPress site setup

Below that, you will see a toggle that you can turn on if your WordPress site is not using SSL/HTTPS. You can only send web push notifications from a secure HTTPS URL. If your WordPress site is not using HTTPS, then you need to turn this setting on and enter a label.

A label is basically a subdomain hosted on OneSignal servers using a secure HTTPS URL. This subdomain will be used to send your push notifications.

If you want to setup HTTPS on your own WordPress site, then see our step by step tutorial on how to move WordPress from HTTP to HTTPS. We highly recommend using your own domain with SSL than a subdomain on OneSignal, so you’re not forever locked in to their platform.

Once you are done, click on the save button to store your OneSignal settings. You’ll now see the API keys that you need to copy.

Copy the API keys

Now, you can switch back to OneSignal plugin settings on your WordPress site and switch to the ‘Configuration’ tab. You need to paste the APP and API keys you copied earlier.

Paste API Keys

These API keys will only allow you to send push notifications via Chrome and Firefox web browsers.

You will also need Safari Web ID in order to send Push notifications via Safari web browser.

To get the Safari API key, you need to switch back to OneSignal website and go to the settings page for your app. Once there, you need to click on the edit icon next to Apple Safari.

Push notification setup for Safari

Next, you’ll be asked to enter your website title, URL, and optionally upload a site icon.

Safari settings for push notification

Click on the Save button to store your settings. After that, you’ll see your Safari Web ID on the screen which you need to copy.

Safari Web ID

Once again, switch back to the plugin’s settings page on your WordPress site and paste the Safari Web ID under the configuration tab.

Save OneSignal plugin settings

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

You can now visit your website in a new incognito browser tab. You will see a push notification popup on the top and a bell notification icon at the bottom right corner of the screen.

Push notification optin

The push notification popup will also appear on mobile browsers.

Push notification optin on mobile browser

Note: The appearance of push notification popup prompt may differ based on http/https settings of your site.

Now, you may be wondering why this push notification prompt looks different than what you see on some other websites?

Normally users see the browser default notification prompt, which looks something like this:

Default browser prompt for push notification

Now the problem is that, if a user clicked on ‘Block’ button, then they will never see a prompt for subscribing to notifications. To fix this, OneSignal comes with two different prompt types.

The first one is the push notification popup and the other one is the subscription bell icon. Both of them are fully customizable, and you can change them to meet your needs.

Step 2. Customizing The Push Notification Popup Prompt

The basic push notification popup is quite simple. It uses generic language and displays your site’s logo. You may want to customize that to make it more personal.

Simply switch to the configuration tab under OneSignal plugin’s settings page on your WordPress site and scroll down to the ‘HTTP Pop-Up Settings’ section.

Customize push notification popup

You need to click on the toggle next to ‘Customize the HTTP Pop-Up Prompt text’, and then start adding your own text.

Don’t forget to click on the Save button to store your settings before testing the prompt.

Step 3. Customize the Bell Notification Icon

Normally, the browser prompt for notification and the popup disappear when a user dismisses them.

What if users later change their mind and want to receive push notifications?

The subscription bell in OneSignal allows you to keep showing users a prompt to subscribe push notifications on your site.

The bell icon is also fully customizable from the plugin’s settings page. Simply scroll down to ‘Prompt Settings & Subscription Bell’ section and turn on the customization options that you want to change.

Subscription bell settings

You can then scroll down and change settings for each option you want to customize. Ideally, you would want to change bell icon colors to match your own theme colors.

Bell icon customization

Note: We don’t use the bell icon because we feel it’s a bit too intrusive.

Step 4. Sending Push Notifications from Your WordPress Site

By default, the OneSignal plugin automatically sends push notifications for all new posts published on your website. If you want, then you can turn this feature off from plugin’s settings page under ‘Automatic Notification Settings’ section.

Automatic notification settings

You can also manually send a notification when you publish or update a post. Simply edit a WordPress post or page, and you will see the OneSignal meta box under document settings column on the right.

OneSignal notification box in Gutenberg

If you are using the old classic editor, then you will see the meta box like this:

Send push notification box in classic editor

Check the box next to ‘Send notification on post update / publish’ and then click on update or publish button.

OneSignal will now send your article as a push notification to all your subscribers.

Send a welcome push notification to new subscribers

You can also send a welcome push notification to your new subscribers. Visit OneSignal’s settings page in your WordPress admin area and scroll down to the ‘Welcome Notification Settings’ section.

Welcome notification

Now when a new subscribes for push notifications, they will receive a welcome notification on their device. Depending on their browser and device the notification may look different.

Welcome notification displayed on Mac via Firefox

That’s all, you have successfully added web push notifications to your WordPress site.

You can also send custom notifications from the OneSignal app dashboard. The process is quite intuitive and you can follow onscreen instructions once you login to OneSignal.

Other Good WordPress Push Notification Plugins

It is important to choose the right web push notification service from the start. Since most providers try to lock you in their platform, changing your push notification service can result in losing your old subscribers. Meaning if you switch, then you will be starting from scratch.

This is why we recommend asking the provider you choose for all settings you need to configure to make your subscriber list portable.

At WPBeginner, we use OneSignal because it has the features that we need at a reasonable price.

  • OneSignal offers a free WordPress push notification plugin with unlimited mobile push and web push notifications for upto 30K subscribers.
  • Even their free plan includes features like segmentation, localization, tracking with Google analytics, and a robust API.
  • You can use it with all top email marketing services to send your newsletter emails via web push notifications

WordPress is all about choices. Here are some other WordPress push notification plugins that you can also try.

  • PushEngage Web Push Notifications – This is the connector plugin for PushEngage, a push notifications service provider. They have a free plan limited to 2500 subscribers, 120 notifications, and 5000 clicks.
  • PushAlert – Web Push Notifications – Helps you connect to PushAlert web push notification service. They also offer a free plan limited to 3000 subscribers.
  • PushCrew – Connects your website to PushCrew’s push notification service. They offer a free plan limited to 2000 subscribers.
  • PushAssist – Connector plugin for PushAssist web push notification service. Their free plan is limited to 2000 subscribers.

We hope this article helped you learn how to add web push notifications to your WordPress site. You may also want to see our guide on how to get a free business email address for your 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 Web Push Notification to Your WordPress Site appeared first on WPBeginner.



Source link

How to Add SVG in WordPress (with 2 Simple Solutions)


Do you want to add SVG files to your WordPress site? By default, WordPress allows you to upload all popular image, audio, and video file formats, but SVG is not among them. In this article, we will show you how to easily add SVG in WordPress.

Easily add SVG files in WordPress

What is SVG?

SVG or Scalable Vector Graphics is a file format that defines vector-graphics using the XML markup language. The main benefit of SVG is that it allows you to enlarge images without losing quality or having any pixelation.

How does SVG work?

Scalable Vector Graphics (SVG) is a technology that displays two-dimensional drawings using XML. They are different than the commonly used image formats like PNG, GIF, or JPEGs.

If you take a png / jpeg image file and zoom in, then you will notice that the image will start to blur and become pixelated.

Vector graphics don’t use pixels. Instead, they use a two-dimensional map that defines the graphic you are viewing. As you zoom in, the image doesn’t pixelate.

This enables you to enlarge vector graphics without losing quality. Most importanly, SVG images can be way smaller in filesize than JPEGs or PNG.

Vector graphics are commonly used for icons, icon fonts, website logos, and branding images. You may want to add SVG files in WordPress for your company logo, icons, or other graphics.

As cool as they sound, SVG files are still a bit unsafe. That’s why WordPress doesn’t support SVG file uploads by default.

If you upload an SVG image in WordPress, then you will see the following error message:

Sorry, this file type is not permitted for security reasons.

SVG security error in WordPress

Security Issues Concerning SVG in WordPress

SVG files contain code in the XML markup language which is similar to HTML. Your browser or SVG editing software parses the XML markup language to display the output on the screen.

However, this opens up your website to possible XML vulnerabilities. It can be used to gain unauthorized access to user data, trigger brute force attacks, or cross-site scripting attacks.

The methods we will share in this article will try to sanitize SVG files to improve their security. However, these plugins cannot totally prevent malicious code from being uploaded or injected.

The best solution is to only use SVG files that are created by reliable sources and to restrict SVG uploads to trusted users only.

To learn more about security, check out our complete WordPress security guide for beginners.

That being said, let’s take a look at how to easily and safely use SVG files in WordPress.

Method 1. Upload SVG Files in WordPress Using SVG Support

This method offers complete support for adding SVG files in WordPress. It also allows you to display inline SVG in WordPress posts and pages.

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

Upon activation, you need to visit Settings » SVG Support page to configure plugin settings.

SVG support settings

On the settings page, you need to check the box next to ‘Restrict to Administrators?’ option. This will allow only a site administrator to upload SVG files in WordPress.

The next option is to turn on the advanced mode. You only need to check this option if you want to use advanced features like CSS animations and inline SVG rendering.

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

You can now create a new post or edit an existing one. In the post editor, you will upload your SVG file like you would upload any other image file. Simply add an image block to the editor and then upload the SVG file.

You will now be able to upload and embed SVG file in WordPress.

SVG file embed in WordPress post

Method 2. Upload SVG Files in WordPress Using Safe SVG

This method also uses a plugin and allows you to perform sanitization of SVG files uploaded to WordPress.

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

The plugin works out of the box, and there are no settings for you to configure. You can simply go ahead and start uploading SVG files.

The downside is that this plugin allows SVG uploads by all users who can write posts on your WordPress site.

In order to control who can upload files, you will need to purchase the premium version of the plugin.

We hope this article helped you learn how to safely add SVG in WordPress. You may also want to see our article on most common image issues in WordPress and how to fix them.

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

The post How to Add SVG in WordPress (with 2 Simple Solutions) appeared first on WPBeginner.



Source link

How to Add a Countdown Timer Widget in WordPress (3 Methods)


Do you want to add a milestone countdown in WordPress? A countdown timer helps you showcase important achievements, anniversaries, upcoming events and more. In this article, we will show you how to easily add a countdown timer in WordPress (even the evergreen timers).

Adding a milestone countdown widget in WordPress

When and Why you Need a Milestone Countdown Widget?

Milestone countdown widgets are a useful tool to remind your audience about an important milestone in your business, an upcoming event, product launch, or a sales events. This helps build anticipation among your customers and improves user engagement.

Following are some common scenarios where you can effectively use a milestone countdown widget:

  • Before launching your website on a coming soon page.
  • During website maintenance to let visitors know when the website will be available again.
  • Before introducing a new product or service.
  • When hosting an event or conference.
  • On the birthdays of your online business.
  • On holidays and sale events such as Black Friday to offer big discounts on your products or services.

You can display the milestone countdown timer in your posts, pages, and sidebar widget area. You can also add countdown timers in lightbox popups, floating bars, scroll boxes, and other design agnostic elements to engage abandoning site visitors and bring them back to your website.

Since there are so many use-cases of a countdown timer, we have listed 3 different methods for adding a milestone countdown widget in WordPress:

  1. Create Milestone Countdown Widget using Countdown Timer Ultimate
  2. Create Highly Engaging Dynamic Countdown Timers with OptinMonster
  3. Create Coming Soon & Maintenance Mode Countdown Timer with SeedProd

Let’s take a look at how to easily add a milestone countdown widget in WordPress.

Method 1: Adding a Milestone Countdown Widget Using Countdown Timer Ultimate Plugin

Countdown timer demo

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

Upon activation, you need to visit the Countdown Timer » Add Timer page in your WordPress admin area.

On this page, you need to start by adding your milestone name as the title for the new countdown timer.

Note: The timer uses the timezone set in your WordPress site settings. If you want to change the timezone for this countdown timer, then you will need to go to Settings » General and update the timezone settings of your WordPress site.

Add timer title

After that, you can scroll down to set an expiration date, day, and time for your milestone countdown timer.

Set expiry date

Next, you need to select an animation style from the drop-down. You can also adjust the circle and background width easily.

Choose animation

In the Countdown Width field, you can define a width for the full display of your countdown widget. If you leave this field blank, then it will display the timer using default size.

After that you can add the background and foreground color for the countdown timer. You can individually change the color for days, hours, minutes, and seconds. You can also change the labels for elements like days, hours, etc.

Background foreground color

Once you are satisfied with the settings, go ahead and click on the ‘Publish’ button.

Displaying Your Milestone Countdown Widget in WordPress

Now that you have created your milestone countdown widget, let’s add it to your website.

First, you need to click on the Countdown Timer menu. On the WP Countdown Timer page, you will see the timer you just created listed there.

Copy shortcode

Next to your countdown timer, you will see a shortcode that you need to copy.

You need to copy and paste this shortcode in the content area of your post or page. Make sure to click on the update or publish button to save your changes.

You can now visit your website to see the milestone countdown widget in action.

Countdown timer demo

You can also add this countdown timer in the sidebar of your WordPress site. Simply go to Appearance » Widgets page and add a ‘Text’ widget to your sidebar. In widget settings, you need to paste the shortcode for your countdown timer.

Countdown widget settings

Once you’re done, don’t forget to click on the save button to store your widget settings.

You can now visit your website to see your milestone countdown sidebar widget in action.

Countdown milestone preview

Method 2: Adding a MileStone Countdown Widget Using OptinMonster

OptinMonster is the best lead generation software on the market. It helps you convert abandoning site visitors into subscribers and customers.

Using the countdown timer feature by OptinMonster, you can integrate the milestone countdown timer into a lightbox popup, fullscreen widget, floating bar, or any other OptinMonster campaign type.

Below is an example of one of the pre-made countdown timer campaigns they have, but you can use drag & drop builder to create a completely customized countdown timer.

OptinMonster Countdown Timer Popup for Holidays

OptinMonster is a smart way to show countdown timer in a highly attention grabbing design elements. They even allow you to create evergreen countdown timers in WordPress.

First you need to visit the OptinMonster website and signup for a plan that meets your need.

After that, you need to install the OptinMonster plugin on your WordPress site. For more details, see our step by step guide on how to install a WordPress plugin.

This plugin will work as a connector between your WordPress site and OptinMonster app.

Upon activation, click on the OptinMonster link in your WordPress admin menu. Next, you will be asked to enter your OptinMonster API credentials.

Connect to OptinMonster

You can find this information under your account on the OptinMonster website. Simply login to your account and then click on the ‘API’ link from the menu.

OptinMonster API key

You need to copy your API key and paste it into OptinMonster settings on your WordPress site. After that, click on ‘Connect to OptinMonster’ button to continue.

The plugin will now connect your WordPress site to your OptinMonster account.

Once connected, you can start creating a new campaign from your OptinMonster dashboard. You can use any campaign type and integrate the countdown timer in it.

Create a new campaign

For more details, see this step by step tutorial on how to create a countdown timer campaign in OptinMonster.

OptinMonster Countdown Timer Popup for Holidays

Method 3: Adding a Milestone Countdown Widget Using SeedProd

SeedProd is the best WordPress coming soon page plugin. The SeedProd pro version comes with a countdown timer feature. You can add this countdown timer to your WordPress website and let your visitors know about a launch or an upcoming website.

SeedProd preview

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

Upon activation, you’ll be redirected to Settings » General page in your WordPress admin area. It’ll ask for a license key that you can get from your SeedProd account.

License key

Next, you need to visit Settings » Coming Soon Pro page and enable the coming soon mode. It’ll automatically launch the countdown timer with the coming soon page.

Enable coming soon page

You can click on the edit option to choose a template and customize your coming soon page. Once you are satisfied, make sure to click on the save changes button.

SeedProd countdown

You can now visit your website to see the coming soon counter in action.

That’s all. We hope this article helped you learn how to add a milestone countdown widget in WordPress. You may also want to see our practical tips on getting more traffic for your 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 a Countdown Timer Widget in WordPress (3 Methods) appeared first on WPBeginner.



Source link

How to Add Age Verification in WordPress


Do you want to add age verification to your WordPress website? Some website owners may want to ask their site visitors for age verification before accessing content due to the nature of content and the legal requirements. In this article, we will show you how to easily add age verification on your WordPress site.

Adding age verification to a WordPress website

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

Upon activation, the plugin adds a new menu item labeled Age Gate to your WordPress admin area. Clicking on it will take you to plugin’s settings page.

Age Gate settings

First, you need to enter the required minimum age for verification. After that, you can choose whether you want to apply the age verification restriction on all or selected content.

The ‘Varied Age’ option allows you to select different minimum age requirements for different posts and pages on your website.

For age verification, the plugin provides three options. You can display a form where users can enter their age, drop down boxes, or simple Yes/No buttons.

You can also allow users to remember the age verification or go ahead and enable ‘Remember me’ option by default. This would save your users from seeing the age verification message each time they visit your website.

Once you’re done configuring the settings, go ahead and click on the save changes button to store your settings. You can now visit your website to see the age verification screen in action.

Default age verification notice

The default age verification screen doesn’t look very good. Let’s take a look at how to customize it and make it look better.

Customizing Age Verification Screen and Message

The Age Gate plugin allows you to easily customize the appearance of the age verification screen and even include your own message.

First, click on the ‘Messaging’ tab on the plugin’s settings page. From here, you can change the age verification message. You can provide a title, description, terms and conditions, privacy policy, and any other information you want to display.

Change age verification messaging

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

Next, you need to switch to the ‘Appearance’ tab on plugin’s settings page. From here, you can change background color, foreground color, background image, text color, and more.

Appearance settings for age verification screen

After changing the appearance settings, don’t forget to save your changes.

You can now visit your website in a new browser window using incognito mode to view the age verification screen in action.

More colorful age verification screen

Advanced Age Verification Settings

If you are having trouble with your age verification screen page, then switch to the ‘Advanced’ tab on plugin’s settings page.

The most likely issue you may see are caused by conflicts with your WordPress caching plugin or the caching enabled by your WordPress hosting service.

In that case, Age Gate comes with a JavaScript version that you can enable from the Advanced tab.

Advanced age gate settings

You can also enable other advanced settings from this page like Gutenberg support, adding custom CSS rules, and enabling anonymous age verification.

Setting Age Verification Screen for Specific Posts

If you chose ‘Varied Ages’ or ‘Selected Content’ options in the plugin’s settings page, then you can enable age verification for individual posts and pages.

Simply edit the post or page, and you will see the age restriction options under the publish meta box.

Age verification options for posts and pages

If you run an online store, then you can also use this option for specific products on your site.

We hope this article helped you learn how to add age verification in WordPress. You may also want to see our complete WordPress security guide to keep your site safe and secure.

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 Age Verification in WordPress appeared first on WPBeginner.



Source link