Hi @wpfunfan,
Thanks for this.
I think you might have made things a little more complicated than you need to.
If you just want to move the additional content above the buttons, you can do it with some css. You can find it in this thread, but I’ll put it below too as there’s a couple of other things you’ll need I think and I’ll add a couple more solutions after that too;
Method 1: Using css and a couple of tweaks
.age-gate-form {
display: flex;
flex-flow: row wrap;
justify-content: center;
}
.age-gate-heading,
.age-gate-subheading,
.age-gate-challenge,
.age-gate-error,
.age-gate-remember-wrapper,
.age-gate-additional-information {
flex: 0 0 100%;
max-width: 100%;
}
.age-gate-heading,
.age-gate-subheading,
.age-gate-challenge,
.age-gate-error {
order: 0;
}
.age-gate-additional-information {
order: 1;
}
.age-gate-remember-wrapper,
.age-gate-submit-yes,
.age-gate-submit-no {
order: 2;
}
/* you want to hide the "no" button I think */
.age-gate-submit-no {
display: none;
}
/* You've also got no wrap on links, do that in a non intrusive way */
.age-gate-additional-information a {
white-space: nowrap;
}
You then need the TM text. You don’t need a span with style for this, there’s an html entity, so in the age gate settings you can just change the text on the yes button to:
Enter Super Flex™
Also, be mindful when using target="_blank" as it poses security issues – essentially add rel="noopener noreferrer" to any target="_blank".
Option 2: Keep it as is
If you want to just keep things as they are, then you can allow your markup. You’ll need a couple of filters in your functions.php:
The first allows the inline style you’ve used – personally, I’d move any style to a stylesheet, but your call:
add_filter('safe_style_css', function ($styles) {
$styles[] = 'white-space';
$styles[] = 'top';
$styles[] = 'position';
return $styles;
});
Then, allow the elements through the Age Gate filter:
add_filter('age_gate/presentation/allowed_tags', function ($allowed) {
return array_merge(
$allowed,
[
'div' => [
'class' => [],
],
'span' => [
'class' => [],
'style' => []
],
'button' => [
'type' => [],
'value' => [],
'name' => [],
'class' => [],
],
'a' => [
'href' => [],
'title' => [],
'class' => [],
'target' => [],
'rel' => [],
'style' => [],
],
]
);
});
Option 3: filter the messages
A final option is to use one of the content filters and still hide everything else (either with css, filters, or setting them to empty text) for example:
add_filter('age_gate_messaging', function () {
return '<div class="age-gate-warning-logo-container"><img src="/logo.png" class="age-gate-warning-logo"></div><div class="age-gate-warning-headline">NOTICE: This is an adult web site. All performers depicted on this web site were over 18 years of age at the time of the production. The content is inappropriate for minors and appropriate care should be taken to ensure that it is not viewed by anyone under 18 years of age.</div><div class="age-gate-terms">By entering the website, you agree to our <a href="/termsofuse.html" target="_blank"><span style="white-space:nowrap;">terms of use</span></a> and <a href="/privacypolicy.html" target="_blank"><span style="white-space:nowrap;">privacy policy</span></a> and represent that you are of legal age in your community to view adult-oriented material.</div><button type="submit" value="1" name="age_gate[confirm]" class="age-gate-submit-yes-new">Enter Super Flex<span style="font-size:14px;position:relative;top:-8px;">TM</span></button>';
});
One of those should work for you, but let me know if anything doesn’t make sense!
Thanks
Phil
