Show a Message at The Top of Your Page For New Site Visitors Using a Cookie

The code in this download folder enables you to conditionally display a message before your sites header like this :

In this case, the message is displayed every 7 days however you can :

• Set the cookie to display the message to new site visitors once every X amount of days
• Conditionally display the message on specific posts and/or page types using WordPress conditional tags.

In this case the message only displays on WooCommerce single product pages.

Demo Video

Shows a message at the very top of pages which when hidden will only display based on the cookie setting which is set to 7 days.

Tested using the Twenty Twenty default theme for WordPress however will work in any theme.

Installation Steps

This solution is coded to work with the Twenty Twenty default theme for WordPress. If using Twenty Twenty, there’s only 1 installation step. Install the zipped folder named twentytwenty-child as a new theme and you’re good to go.

Note : You may need to reactivate the Twenty Twenty parent theme first and then activate the child theme to get the parent themes stylesheet to load.

Otherwise, if you’re using a different theme or already have a child theme installed, follow these 3 simple steps :

1. # Upload the file named top-banner.js to your child theme folder.

 


2. # Copy & paste the PHP code ( without the opening PHP tag ) to the end of your child theme functions.php file

 


3. # Copy & paste the CSS to the end of your child themes style.css file and clear caching.

 

Display Location

To change the location of where your message displays, simply change the conditional tags on lines 18, 33 and 51 in functions.php

Change Cookie Expiry

To change the cookie expiry from the default 7 days, change the value for the expires option from 7 on line 65 in top-banner.js

Download folder