On this tutorial, we will create a shortcode with content, and use of sessionStorage.

On your functions.php create your popup function

function popup_function( $content = null ) {

Inside your function, add this html that will display your popup on your page

<div class="popup-wrap">
    <div class="popup-content">
        <?php echo $content; // display content here ?>
    <div class="close-popup">
        <a href="#">Close this message </a>

Add this css to style your popup

.popup-content {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0 , 0.85);
    z-index: 9999;
    display: block;
.popup-content .popup-content{
    position: relative;
    background-color: #FFFFFF;
    width: 800px;
    min-height: 400px
    margin: 30px auto 0;
    color: #333;
.popup-content .close-popup {
    text-align: center;
.popup-content .close-popup a{
    color: #CCCCCC;
    font-size: 12px;
    text-decoration: none;

Finally, add this script to trigger you popup message.

$(document).load(function() {
    var yetVisited = sessionStorage['visited'];
    if (!yetVisited) {
        sessionStorage['visited'] = "yes";
    $('.close-popup').click(function() {

The sessionStorage will tell if the visitor has already visited the page before. If the visitor had visited it before the popup will not show, until the next session.

In your functions.php - hook your popup function to add_shortcode.

add_shortcode( 'popup_message', 'popup_message_function' );

We can now add a shortcode to our post using [popup_message] I'm a popup message [/popup_message] adding all your content in between the shortcode.

    [popup_message] I'm a popup message [/popup_message]