Documentation – Elegant Age Verification for WordPress

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 the plugin settings?

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:

General Settings
Localization
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.

Front-end structure

Components

Background color | Background image (Optional)

Age icon (Optional)

Title (Optional)

Description (Optional)

Response messages (Optional)

Date of birth form fields (Optional)

Month

Day

Year

Confirmation toggle switch (Optional)

Additional text (Optional)

Enter button

Exit button (Optional)

Accessibility

Barrier-free plugin

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

Focus management

In case the Date of birth form fields are enabled, the plugin finds the first input field and automatically adds the focus to it after the page is loaded. The plugin provides additional help to ensure that the appropriate item receives the focus while filling out the form.

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.

Test mode

Enable test mode

If you enable this toggle switch, the pop-up window will appear after each load of the page, regardless of the cookie has been created or not.
Default value: disabled

Display mode

You have the option to select between two display modes:

Global mode
Shortcode mode

Global mode

If the Global mode is selected, the age verification popup appears on every post or page in the public view regardless of any shortcode you may have inserted on the administration interface.

Shortcode mode

If the Shortcode mode is selected, the age verification pop-up appears on posts or pages only where you inserted the shortcode to the text editor in the administration interface.
If you disable the plugin, the shortcode will not appear in the public view.
Shortcode: [eav]

Default value: Global

Uninstall settings

Keep settings after uninstall

You can keep your settings after uninstalling the plugin. It can be useful if you want to update.
Default state: enabled

Script settings

Important note: some speed optimization plugins may override the parameters specified in the Script settings.

Attributes for the plugin’s main script tag:

None
Async
Defer

None

It doesn’t add any attribute to the plugin’s main script tag. The browser will run the script immediately, before rendering the elements that are below this script tag.

Async

It adds an async attribute to the plugin’s main script tag. The script file gets downloaded asynchronously and then executed as soon as it’s downloaded.

Defer

It adds a defer attribute to the plugin’s main script tag. The script file gets downloaded asynchronously, but executed only when the document parsing is completed.

Default value: None.

Position of the script tags:

Head
Body

Head

The scripts will be added to the head tag.

Body

The scripts will be added before the closing body tag.

Default value: Head.

If you choose the None and the Head options in the Script settings, the background of the pop-up will immediately obscure the content. If a different setting is used, the content may become visible for a short time.

Note! The browser can’t show the background immediately when you use the plug-in in Shortcode mode.

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 not appear in the public view again.
Default value: 365

Visibility

You can show or hide items using toggle switches below:

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

Exit types

There are three different exit types:

Redirect
Back
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.

Text 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 state: 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.

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   tag. In the administration interface, this form field allows you to add the following HTML tags:

<a>

Additional text

You can add further text above the Enter button.
If you press the Enter key in this text field, adds a line break to the text. A line break corresponds to a   tag. In the administration interface, this form field allows you to add the following HTML tags:

<a>

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. In the administration interface, this form field allows you to add the following HTML tags:

<a>

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   tag. In the administration interface, this form field allows you to add the following HTML tags:

<a>

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 state: 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 state: 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 state: 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 state: 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 the WordPress Installer

Please make sure that the Keep settings after uninstall toggle switch is on. Activate and delete the plugin, finally install the new version.

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 state 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 state 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.

How can I force the pop-up to show immediately?

Under the General Settings tab, you need to choose the "Default script tag without async or defer attribute" option and the "Add scripts to the head" option.
Please note that these settings may result in a slower page load.