Elegant Age Verification for WordPress Documentation

Overview

What is Elegant Age Verification?

About the plugin

The Elegant Age Verification is a responsive and mobile-friendly WordPress plugin. It prevents users from viewing the content of your web page without age verification.

Where to find?

Access to the plugin

In the administration interface, you can access the plugin’s settings by pressing the Elegant Age Verification menu under the Settings.

Administration interface

Main parts of the administration interface

There are three main parts of the plugin’s administration interface:

  1. General Settings
  2. Localization
  3. Style

Save changes

You can save your settings by pressing the Save changes button at the bottom of the page.
After success saving, you will see a notification for a few seconds at the bottom right of the page.

Verification methods

Three verification methods are available in the plugin:

  • Date of birth
  • Confirmation
  • Enter

Except for the Enter method, the rest of the verification methods are optional. You can combine them as you like.

Date of birth

You can verify the user by the date of birth form fields.

Confirmation

You can verify the user by the confirmation toggle switch.

Enter

You can verify the user by the Enter button.

Accessibility

For people with disabilities, the full functionality of the plugin is accessible without a mouse, only with the keyboard.

General Settings

Plugin activation

Enable plugin

You can switch on or off the plugin with this toggle switch.
The switched-off state allows you to set the plugin parameters as you need without the age verification pop-up that would appear in the public view.
After setting the desired parameters, you can switch on the plugin so that it will appear to your visitors.
Default state: enabled.

Required age and expire settings

Required age

It allows you to prevent the user from entering the site if the age of the user is not appropriate.
Default value: 18

Expire

It allows you to set the plugin cookie’s expiry time, calculated in days. If the user has already successfully entered the site via the age verification pop-up, after the expiration, the pop-up will appear in the public view again.
Default value: 365

Visibility

You can show or hide items using toggle switches below:

  • Show logo image – Default status: disabled
  • Show title – Default status: enabled
  • Show description – Default status: enabled
  • Show date of birth form fields – Default status: enabled
  • Show confirmation toggle switch – Default status: disabled
  • Show age icon – Default status: enabled
  • Show exit button – Default status: disabled

Exit types

There are three different exit types:

  1. Redirect
  2. Back
  3. Description

1. Redirect

By pressing the Leave button, it allows you to redirect the user to a specified URL. You have the option to change the Redirect URL under the Localization tab.

2. Back

By pressing the Back button, the browser loads the previous URL from the history list. If there is no previous URL, the Redirect type will be used automatically as a fallback.

3. Description

By pressing the Exit button, it allows you to display a message to the user. You can change the text of the Exit description under the Localization tab.

Localization

How to translate

You can translate each text with Poedit or any other third-party WordPress translator plugin, such as with Loco Translate. The language files can be find in the /wp-content/plugins/elegant-age-verification/languages/ folder. By default, this folder contains the language file named elegant-age-verification.pot.

The new translation files must be in the following format: elegant-age-verification-[language_code].po (e.g. elegant-age-verification-de_DE.po) and should be placed in the /wp-content/plugins/elegant-age-verification/languages/ directory.

Localization activation

Enable localization

You can enable or disable the localization in the public view.
When the toggle switch is on, you can translate both the texts of the plugin administration interface and the texts in the public view using a third-party translator plugin.
When the toggle switch is off the form fields’ text of the Localization tab will be applied in the public view. This setting is recommended when you use a single language.
Configuring the toggle switch does not affect the texts of the administrative interface. Those are translated by a language plugin in every case.
Default status: disabled.

Dynamic text variables

Dynamic text variables allow you to add special expressions in any of the input fields under the Localization tab.
You can also add dynamic text variables to any item of the language file. That variable will appear as a replacement value on the age verification pop-up.
Currently, only one dynamic text variable is available: {{age}}.

The {{age}} variable

E.g. you can use it in the text of the confirmation field: I confirm that my age is over {{age}} years. If you set the required age field to 12 under the General Settings tab, the {{age}} variable is replaced by 12. So the visitor will see the following text: I confirm that my age is over 12 years.

Text section

  • Title
  • Description

Title

Title of the age verification pop-up.

Description

The description of the age verification pop-up. This text is directly below the title.
If you press the Enter key in this text field, adds a line break to the text. A line break corresponds to a <br> tag. In the administration interface, this form field allows you to add the following HTML tags:

  • <a>
  • <b>
  • <i>
  • <strong>
  • <em>

Date order by date format and date of birth texts

  • Date format
  • Year label
  • Month label
  • Day label
  • Year label additional info
  • Month label additional info
  • Day label additional info
  • Year placeholder text
  • Month placeholder text
  • Day placeholder text

Date format

Selecting the Date format helps you to order the Date of birth form fields.
Possible values:

  • MM/DD/YYYY
  • DD/MM/YYYY
  • YYYY/MM/DD

Default value: MM/DD/YYYY.

Month / Day / Year label

These texts appear in the labels above the date of birth input fields.

Month / Day / Year label additional info

These texts appear above the birth date input fields at the end of the labels.

Month / Day / Year placeholder text

These texts appear in the date of birth’s input fields that will further help the user in filling the form.

Confirmation text

Confirmation label

You can use it to set the label of the confirmation toggle switch.

Exit texts

  • Redirect URL
  • Exit description

Note! The appearance of the above texts depends on the settings of the exit type.

Redirect URL

After pressing the Exit button the user will be redirected for the URL you specified.
You can set the Redirect URL under the Localization tab. In case you use a multi-language website, you can set it by changing the https://google.com/ URL in the language file.

Exit description

After pressing the Exit button the user will see a description you specified.
If you press the Enter key in this text field, adds a line break to the text. A line break corresponds to a <br> tag. In the administration interface, this form field allows you to add the following HTML tags:

  • <a>
  • <b>
  • <i>
  • <strong>
  • <em>

Button texts

  • Redirect button text
  • Back button text
  • Description button text
  • Enter button text

Note! The appearance of the above list of the first 3 texts depends on the settings of the exit type.

Response messages

In case of entering the website is not successful, some closable response messages’ box help the user to understand the reason for it, such as:

  • Unchecked confirmation field
  • Inappropriate date of birth
  • Inappropriate age
  • Close button text

Unchecked confirmation field

After pressing the Enter button, this message appears when the user has not checked the confirmation field.

Inappropriate date of birth

After pressing the Enter button, this message appears when the age of the user is less than the required age.

Inappropriate age

After pressing the Enter button, this message appears if the date of birth form fields is not filled correctly or if the user-specified age is too large, e.g. 135.

Close button text

The text of the close button in the response message box. (for screen readers).

Style

Themes

Select a theme

You can set the theme that best fits your website color. The illustrations will help you make a decision.
Default value: theme-gradient-1.

  • Gradient 1
  • Gradient 2
  • Gradient 3
  • Gradient 4
  • Gradient 5
  • Gradient 6
  • Solid 1
  • Solid 2
  • Solid 3
  • Solid 4
  • Solid 5
  • Solid 6

Google Fonts embedding

Enable Google Fonts embedding

You can enable or disable Google Fonts embedding.
Default status: enabled.

Font URL

It allows you to import a Google Font using a user-specified URL.
If your WordPress theme has already contained the font that you want to use, you don’t need to add it again, so in this case, please leave this field empty.
Possible values:

  • https://fonts.googleapis.com/css?family=Open+Sans:400,700&display=swap
  • https://fonts.googleapis.com/css?family=Roboto+Slab&display=swap
  • etc.

Font Family

You can use it to set the font family of the selected Google Font.
Possible values:

  • 'Open Sans', sans-serif
  • 'Roboto Slab', serif
  • etc.

Background image settings

Enable background image

You can enable or disable the use of your background image.
Default status: disabled

Background image input field and Select an image button

You can add your background image to the pop-up with the Select an image button. The path of the selected file will appear in the Background image input field.
You can remove the background image using the remove button at the top right of the preview image, or replace it by pressing the Select Image button.

Opacity

You can use it to set the opacity of the background image.
If you leave it empty the default value will be used. Default value: 10.
Possible values are between 0 and 100.

Background-position-x and Background-position-y

You can use them to set the horizontal and vertical positions of the background image.
If you leave them empty the default value will be used. Default value: 50%.
Possible values:

  • 10%
  • 50%
  • 100%
  • etc.

Background-size

You can use it to set the size of the background-image.
If you leave it empty the default value will be used. Default value: cover.
Possible values:

  • cover (recommended)
  • contain
  • 100%
  • 125%
  • etc.

Logo image settings

Enable logo image

You can enable or disable the use of your logo.
Default status: disabled.

Logo image input field and Select an image button

You can add your logo image to the pop-up with the Select an image button. The path of the selected file will appear in the Logo image input field.
You can remove the logo image using the remove button at the top right of the image, or replace it by pressing the Select Image button.

Logo image width and height

You can use it to set the width and height of the logo image.
If you leave them empty the default value will be used. Default value: auto.
Possible values are between 120 and 500.

Stack order settings

The z-index value of the root element

You can use it to set the pop-up to place it in front of or behind another element.
An element with a greater stack order is always in front of an element with a lower stack order.
If you leave it empty the default value will be used. Default value: 10000.
Possible values:

  • 1000
  • 10000
  • 1000010
  • etc.

Custom CSS settings

Enable custom CSS

You can enable or disable to apply your style.
Default status: disabled

Custom CSS

You can add your CSS if you want to override the theme style.

Cookies (GDPR)

Cookies used by the plugin

Elegant Age Verification uses a single cookie. The stored cookie is used to make the age verification pop-up only appears on your website if this cookie does not exist or has expired.

Cookie name:
eav
Cookie value:
1
Cookie expires:
User-defined
Purpose:
Functional

Tip! You have the opportunity to add some links to the description, such as Terms and Conditions, Privacy Policy, and Cookie Policy.

Browser compatibility

The Elegant Age Verification WordPress plugin is compatible with all major browsers.

  • Google Chrome
  • Mozilla Firefox
  • Safari
  • Opera
  • Edge
  • IE 11

Note! The administration interface is not compatible with IE 11 but in the public view works properly.

Install

  • First, unzip the downloaded file.
  • Log in to the administration interface of your WordPress website and select the Plugin menu.
  • Click the Add New button on the top of the page.
  • Select the Upload Plugin button on the top of the page again.
  • Browse the elegant-age-verification.zip file from your computer and press the Install Now button.
  • Click on the Activate Plugin button of the plugin.
  • After successful plugin activation, you will be redirected to the plugins’ list page. You can find the Elegant Age Verification WordPress plugin on this list.

Update

Update via FTP

Overwrite the plugin files in your site’s /wp-content/plugins/elegant-age-verification/ folder via FTP, then deactivate and activate the plugin again. The last step is required to apply all new changes that might be provided with the new plugin version.

FAQ

Frequently Asked Questions

The age verification pop-up does not appear, why?

Make sure the toggle switch that controls the plugin status is on under the General Settings tab.

Nothing changes when I set the toggle switch, why?

You need to save your settings after each change, including the toggle switch changes.

The text I set in the language file does not appear, why?

Please check the status of the Enable Localization toggle switch. Translations specified in the administration interface will work if the Enable Localization toggle switch is not active.

I can’t see the background color, why?

If you use a background image and set its Opacity to 100, the background color will not be visible because of the background image prevents the background color from appearing.

I can’t see the background image, why?

If you set the Opacity of the background image to 0, it will be transparent. You have to add a number that greater than 0 and less or equal than 100.

Support

If you need any help with the plugin, contact me via email on my profile page or ask your question in the plugin’s comments section.

Support is 100% optional and I provide it for your convenience, so please be patient, polite and respectful.

Changelog

You can find the version history (changelog.txt) file in the elegant-age-verification.zip folder.

--------------------------------
Version 1.0.4 - May 14 2020
--------------------------------

- [Improved]: Date of birth form fields’ vertical layout for extra small screen sizes
- [Fixed]: Tab index on the toggle switch in Internet Explorer 11

--------------------------------
Version 1.0.3 - May 09 2020
--------------------------------

- [Fixed]: Autofocus on Firefox
- [Improved]: Color reset in case of invalid input state on the Date of birth form fields
- [Improved]: Highlight color reset on mobile

--------------------------------
Version 1.0.2 - April 24 2020
--------------------------------

- [Added]: Autofocus to the first input field
- [Fixed]: Adding body classes

--------------------------------
Version 1.0.1 - April 18 2020
--------------------------------

- [Added]: Fallback to gradient background colors
- [Fixed]: Internet Explorer 11 button text shifting

--------------------------------
Version 1.0 - April 16 2020
--------------------------------

- Initial release