WordPress Popup Shortcode

Below, you’ll find a detailed guide on how to add the WordPress Popup Shortcode to your WordPress website, including its parameters, examples, and PHP function code. Additionally, we’ll assist you with common issues that might cause the WordPress Popup Plugin shortcode not to show or not to work correctly.

Before starting, here is an overview of the WordPress Popup Plugin and the shortcodes it provides:

Hustle – Email Marketing, Lead Generation, Optins, Popups

"Hustle is a WordPress plugin designed for email marketing, lead generation, opt-ins, and popups. It enhances user engagement, boosts conversions, and effectively manages your marketing efforts."

★★★★✩ (836) Active Installs: 100000+ Tested with: 6.3.2 PHP Version: 7.4

Included Shortcodes:

• [hustle_popup]

WordPress Popup [hustle_popup] Shortcode

The Hustle Popup shortcode enables the display of specific popup modules on your WordPress site. It accepts parameters like ‘id’, ‘type’, and ‘css_class’ to customize the popup display. . The ‘id’ parameter is crucial as it specifies the module to display. The ‘type’ parameter can be ’embedded’ or ‘social_sharing’, affecting the popup’s behavior. The ‘css_class’ parameter allows for additional styling. If the shortcode is misconfigured or the specified module is inactive, it returns an empty string. The shortcode also supports AJAX, creating modules on-demand. It can display inline modules or non-inline modules with clickable triggers, providing flexibility in usage.

Shortcode: [hustle_popup]

Parameters

Here is a list of all possible hustle_popup shortcode parameters and attributes:

• id – unique identifier for the specific module
• type – defines the module type, either ’embedded’ or ‘social_sharing’
• css_class – allows additional custom CSS classes

Examples and Usage

Basic example – A simple shortcode to display a module with a given ID. The ‘id’ attribute is mandatory for the shortcode to function properly.

[shortcode id="123" /]

Advanced examples

Using the shortcode to display a module with a specific ID and type. The ‘type’ attribute can be either ’embedded’ or ‘social_sharing’. If no ‘type’ is specified, ’embedded’ is used by default.

[shortcode id="123" type="social_sharing" /]

Utilizing the shortcode to display a module with a specific ID, type, and custom CSS class. The ‘css_class’ attribute allows you to add custom styling to the module.

[shortcode id="123" type="embedded" css_class="custom-class" /]

Using the shortcode to display a module with a specific ID, and a custom CSS class. The ‘type’ attribute is not included, so ’embedded’ is used as the default type.

[shortcode id="123" css_class="custom-class" /]

Note: The ‘id’ attribute is mandatory for the shortcode to function properly. The ‘type’ and ‘css_class’ attributes are optional and can be used to customize the display and styling of the module.

PHP Function Code

In case you have difficulties debugging what causing issues with [hustle_popup] shortcode, check below the related PHP functions code.

Shortcode line:

add_shortcode( self::SHORTCODE, array( $this, 'shortcode' ) );

Shortcode PHP function:

function shortcode( $atts, $content ) {
		$atts = shortcode_atts(
			array(
				'id'        => '',
				'type'      => 'embedded',
				'css_class' => '',
			),
			$atts,
			self::SHORTCODE
		);

		if ( empty( $atts['id'] ) ) {
			return '';
		}

		if ( ! $this->modules_data_for_scripts ) {
			// This case for AJAX.
			$this->create_modules();
		}

		$type = $atts['type'];

		// If shortcode type is not embed or sshare.
		if ( 'embedded' !== $type && 'social_sharing' !== $type ) {
			// Do not enforce embedded/social_sharing type.
			$enforce_type = false;
		} else {
			// Enforce embedded/social_sharing type.
			$enforce_type = true;
		}

		$module_id = Hustle_Model::get_module_id_by_shortcode_id( $atts['id'] );

		$custom_classes = esc_attr( $atts['css_class'] );

		if ( isset( $this->inline_modules[ $module_id ] ) ) {
			$module = $this->inline_modules[ $module_id ];

			if ( ! $module->is_display_type_active( Hustle_Module_Model::SHORTCODE_MODULE ) ) {
				return '';
			}

			// Display the module.
			return $module->display( Hustle_Module_Model::SHORTCODE_MODULE, $custom_classes );
		}

		if ( isset( $this->non_inline_modules[ $module_id ] ) && ! empty( $content ) ) {
			$module = $this->non_inline_modules[ $module_id ];

			// If shortcode click trigger is disabled, print nothing.
			$settings = $module->get_settings()->to_array();
			if ( ! isset( $settings['triggers']['enable_on_click_shortcode'] ) || '0' === $settings['triggers']['enable_on_click_shortcode'] ) {
				return '';
			}

			return sprintf(
				'<a href="javascript:void(0)" class="%s hustle_module_%s %s" data-id="%s" data-type="%s">%s</a>',
				'hustle_module_shortcode_trigger',
				esc_attr( $module->id ),
				esc_attr( $custom_classes ),
				esc_attr( $module->id ),
				esc_attr( $type ),
				wp_kses_post( $content )
			);
		}

		return '';
	}

Code file location:

wordpress-popup/wordpress-popup/inc/front/hustle-module-front.php

Conclusion

Now that you’ve learned how to embed the WordPress Popup Plugin shortcode, understood the parameters, and seen code examples, it’s easy to use and debug any issue that might cause it to ‘not work’. If you still have difficulties with it, don’t hesitate to leave a comment below.