How to build custom popups with a click to trigger link

Popups are a useful element for capturing attention and displaying information in a “break out of the box” kind of way. From converting more leads to displaying supplementary content, popups are an element that should be in your toolbox no matter what kind of site you run.

From a development standpoint, popups are not always easy to create and use. They tend to require lots of JavaScript and code libraries that can really slow down your pages, and are clunky to deploy.

Luckily, Marketers Delight comes with a lightweight popups script used in many core features and is also available to you for your own custom work.

In this tutorial we will create a basic popup box that can be opened by the click of a link. You can take this basic popup further and turn the trigger into any kind of clickable element, and even use advanced content like shortcodes in the actual popup box.

Step 1: Place your trigger

Here is the most basic HTML you can use to create a popup trigger. The md-popup-trigger class is required for the MD Popups system to recognize your custom trigger.

You must also create a unique name for your popup and enter it to the data-popup attribute which we will use in future steps to hook the trigger to the actual popup.

<span class="md-popup-trigger" data-popup="md_popup_CUSTOM_POPUP_NAME">Click here to open popup</span>

Step 2: Register popup to page

With the popup trigger in place let’s now create the actual popup box. MD offers the useful md_popup class which takes care of the heavy lifting of loading a custom popup to the page.

You can call this class pretty much anywhere—even in in your templates—and MD will load the popup HTML to the page (see next step) and also load the appropriate scripts to the page.

For best page performance and general site cleanliness you should make sure the popup only loads on the page where you want it so no unnecessary markup and scripts are loaded on pages you don’t need this popup.

In the example below I am loading the md_popup class to the front page only through the global template_redirect hook. Again, you can use md_popup anywhere but I am using this hook for ease of demonstration.

/**
 * Add custom popup to the Front Page.
 *
 * @since 1.0
 */

function md_child_templates() {
	if ( is_front_page() ) {
		new md_popup( array(
			'id' => 'CUSTOM_POPUP_NAME',
			'callback' => 'md_child_popup_template',
			'atts' => array(
				'arg1' => 'Argument 1',
				'arg2' => 'Argument 2'
			)
		) );
	}
}

add_action( 'template_redirect', 'md_child_templates' );

A quick breakdown of this simple code:

• Change CUSTOM_POPUP_NAME to the same identifier you made in your popup trigger
• In the next step we will create the callback function which holds the actual popup markup.
• You can pass your own arguments into the popup template we are about to create through the atts parameter. Useful when you want to pass dynamic content into popups, especially in Loops.

Step 3: Create the popup template

The final required step is the most important: we have to render the actual popup box. To do this we must simply create a new function that holds our template. You can put this in your child theme functions.php file or anywhere you place custom functions.

Note: the name of this function must be passed to the callback parameter in step 2.

/**
 * Render popup template.
 *
 * @since 1.0
 */

function md_child_popup_template( $args ) { ?>
	<div id="md_popup_CUSTOM_POPUP_NAME" class="md-popup">
		<div class="md-popup-close md-popup-close-corner">&times;</div>
		<div class="block-double">
			<p>My popup content</p>
		</div>
	</div>
<?php }

Some notes here:

• The popup frame must use the md-popup class to be recognized by the MD Popups system.
• You can add the md-popup-close to any element inside your popup to close it on click.

From here you are all set to create your own custom popup template!