Search

How to Create Popup in Gutenberg (without Plugin)

Would you like to implement a popup on your WordPress website without relying on third-party plugins? This tutorial has you covered!

If you’re using a default WordPress editor, a.k.a. Gutenberg, crafting a popup without the aid of plugins or popup builders can be a demanding task. It requires a combination of HTML, CSS, and JavaScript knowledge to ensure the popup appears seamlessly. Additionally, designing the popup poses its own set of challenges.

But fear not! This tutorial will guide you through the process step by step, empowering you to create and customize your popup without the need for external plugins.

Creating a Popup in Gutenberg

To illustrate, we’ll craft a straightforward popup providing information about ongoing sales. The design will feature a title, accompanying text, an image, and a button.

If you have a specific design in mind, you can seamlessly incorporate your own by following the custom CSS class assignment in step 1 and proceeding to the next step.

Step 1: Design Your Popup

Commence by editing the page where you intend to display the popup — consider your homepage, for example. Then, scroll down to the bottom of the page editor to initiate the design process for your popup.

Add a Closing Icon

Firstly, start by adding an “X” letter or an easily recognizable closing icon for the forthcoming popup. Subsequently, navigate to the Advanced block on the settings panel and assign the wpp-popup-close custom CSS class under the ADDITIONAL CSS CLASS(ES) section.

Add the Popup Content

For the popup content, we add two title blocks, an image block, and a button block, all aligned to the center. The design illustration for this tutorial showcases the proposed layout, but feel free to personalize your popup content according to your preferences.

Alright, let’s bring all those cool popup elements together in one group! Head over to the Document Overview in the editor bar, find the first block of your popup element (you know, the one with the “x” icon) in the List View, hold down the shift key on your keyboard, and then give a click to the final block.

This nifty move will highlight all the blocks in between. Once you’ve got them all, just right-click and go for the Group option.

After grouping those blocks together, you gain the flexibility to customize your popup layout. Adjust its width, modify the background color, incorporate padding, and explore various other customization options.

Below, you’ll find the settings we applied to our popup layout (group) for reference, should you find them useful.

  • Settings
    • Wide: 500px
  • Style
    • Background: #B5BDBC
    • Padding: Top&Bottom: 1 Right&Left: 1

After you’ve finished designing your popup, it’s time to assign a custom CSS class to the group. On the group block settings, click Advanced then assign the wpp-popup-content CSS class into ADDITIONAL CSS CLASS(ES).

Feel free to duplicate this group if you wish to recreate the popup elsewhere — the sky’s the limit on how many times you want to spread the popup magic!

Step 2: Add a Custom Code

The next step involves adding a custom JQuery code to your website, triggering the popup to reveal itself. In this tutorial, we’ll cover two methods for triggering the popup, providing the corresponding code for each method:

Time Delay Popup Trigger

The following code will automatically display the popup after three seconds. If you wish to adjust the timing, you can modify the value of 3000 in the setTimeout function, which is in milliseconds (3000 ms equals 3 seconds).

Feel free to make it shorter or longer according to your preferences by altering this numerical value.

function wpp_popup_trigger() {
    ?>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>   
    <script>
    jQuery(document).ready(function($) {
    $('.wpp-popup-content').each(function(){
      $(this).wrap('<div class="wpp-popup-wrapper"><div class="wpp-popup-inside">');
    });

    setTimeout(function(){
    $('.wpp-popup-wrapper').addClass('popup-is-visible');
    $('body').addClass('wpp-noscroll');
    }, 3000);
          
    $('.wpp-popup-close').click(function(e){
      e.preventDefault();
      $('.popup-is-visible').removeClass('popup-is-visible');
      $('body').removeClass('wpp-noscroll');  
  
    });
    });  
    </script>
    <?php
}
add_action('wp_head', 'wpp_popup_trigger');

Button Click Popup Trigger

The provided code will activate the popup when a button with the custom CSS class “wpp-popup-trigger” is clicked. Simply assign this CSS class to the button of your choice, and voila! Your popup will make its entrance with just a click.

function wpp_popup_trigger() {
    ?>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>   
    <script>
    jQuery(document).ready(function($) {
    $('.wpp-popup-content').each(function(){
        $(this).wrap('<div class="wpp-popup-wrapper"><div class="wpp-popup-inside">');
      });
    $('.wpp-popup-trigger').off().click(function(e){
        e.preventDefault();
        $('.wpp-popup-wrapper').addClass('popup-is-visible');
        $('body').addClass('wpp-noscroll');                
    });  
            
    $('.wpp-popup-close').click(function(e){
        e.preventDefault();
        $('.popup-is-visible').removeClass('popup-is-visible');
        $('body').removeClass('wpp-noscroll');       
    });
    });  
    </script>
    <?php
}
add_action('wp_head', 'wpp_popup_trigger');
  • Custom CSS Class for the button block

Once you’ve chosen the trigger method for your popup entrance, the subsequent step involves integrating the code into your WordPress website. A swift approach is to utilize your theme’s functions.php.

Navigate to the Appearance Theme File Editor then select the functions.php file from the Theme File list and paste the code at the bottom of the file. Once the code is in place, click the Update File button to implement it.

For block themes, locate the Theme File Editor in the Tools menu. If your theme, such as “Twenty Twenty Three,” lacks the functions.php file, create it initially through SFTP or your site’s file manager.

It’s advisable to create a backup of your WordPress files, either through backup plugins or your built-in backup feature of your hosting service. Alternatively, you can opt for a safer method to add custom code to your website.

Step 3: Add a Custom CSS

The final step is to integrate a custom CSS code for the popup. The following custom CSS is designed to conceal the popup initially and when the trigger is activated, the CSS ensures that the popup becomes visible, overlaying all other elements on the page.

This mechanism enables a smooth and controlled display of the popup upon triggering.

body .wpp-popup-wrapper {
  position:fixed;
  z-index:99999;
  top:0;
  right:0;
  bottom:0;
  left:0;
  transition: all .5s cubic-bezier(.14,.06,.41,1.39);
  opacity:0;
  visibility:hidden;
}
body .wpp-popup-wrapper.popup-is-visible {
  opacity:1;
  visibility:visible;
}


/* Allow the content inside the popup wrapper to scroll */
.wpp-popup-inside {
  height:100%;
	scrollbar-width: none; /* for Firefox */
  overflow-y: scroll;	
}
.wpp-popup-inside::-webkit-scrollbar {
  display: none; /* for Chrome, Safari, and Opera */
}

/* Prevent Body from Scrolling when Popup is visible */
body.wpp-noscroll {
  overflow: hidden;
}

/* Center Align Popup Content inside the Section */
.wpp-popup-content {
  display:flex;
  flex-direction:column;
  justify-content: center;
}

.wpp-popup-close {
  cursor:pointer;
	position:absolute;
	right: 3px;
	top: 3px;
}

To implement the CSS above, you can utilize the WordPress Customizer. Typically, you can access this customization area by navigating to Appearance and selecting Customize from the menu on your WordPress dashboard then click on the Additional CSS block to open the CSS editor.

However, if you use a block theme, we have a separate article covering how to enable theme customizer on a block theme. Don’t forget to click the Publish button to activate the custom CSS you just added.

Test Your Popup

Now that you’ve wrapped up all the steps, your popup is ready to roll! Before unleashing it into the wild, give it a friendly test run to make sure everything is working smoothly. Check out the popup in action below – it’s set to make its grand entrance after just three seconds.

Scroll down, enjoy the full popup experience, and feel free to hit the close button for a super easy and user-friendly interaction!

The Bottom Line

Unlock the potential of crafting and customizing popups on your WordPress site without relying on third-party plugins. By steering clear of plugins that may pose security risks when not regularly updated or slow down your page, this tutorial empowers you with step-by-step guidance.

Seamlessly design and shape your popup using the default WordPress editor, all without the need for coding expertise!

This page may contain affiliate links, which help support our project. Read our affiliate disclosure.
Hendri Risman

Hendri Risman

Hendri is a WordPress expert and a writer staff at WPPagebuilders. He writes solutions on how to get things fixed in WordPress a lot. Mostly without involving a plugin.
Want to save yearly expense up to $219? why not?

Leave a Comment