WP Popups Shortcodes

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

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

WP Popups – WordPress Popup builder

"WP Popups – WordPress Popup builder is a robust and dynamic plugin that allows you to effortlessly create engaging, custom popups for your WordPress site. Perfect for newsletters, offers, and more!"

★★★★☆ (82) Active Installs: 30000+ Tested with: 6.3.2 PHP Version: 5.7

Included Shortcodes:

[spu-facebook]
[spu-facebook-page]
[spu-twitter]
[spu-close]
[spu]
[wpp-elementor]

WP Popups [spu-facebook] Shortcode

The wp-popups-lite plugin shortcode, ‘spu-facebook’, generates a Facebook like button on your page. It allows customization of the button’s layout, action type, and alignment. The ‘href’ attribute directs to the Facebook page. The ‘layout’ attribute adjusts the button’s appearance, and ‘action’ determines the button’s function. ‘show_faces’ displays Facebook profile pictures, while ‘share’ enables sharing functionality. The ‘width’ attribute adjusts the button’s width, and ‘align’ sets its alignment.

Shortcode: [spu-facebook]

Parameters

Here is a list of all possible spu-facebook shortcode parameters and attributes:

href – URL of the Facebook page to be liked
layout – design of the like button (‘standard’, ‘box_count’, ‘button_count’, ‘button’)
show_faces – display Facebook users who liked the page (‘true’ or ‘false’)
share – show the share button (‘true’ or ‘false’)
action – button action type (‘like’ or ‘recommend’)
width – width of the like button
align – alignment of the like button (‘center’)

Examples and Usage

Basic example – A simple usage of the ‘spu-facebook’ shortcode with default parameters

[spu-facebook /]

Advanced examples

Customizing the ‘spu-facebook’ shortcode by specifying the href, layout, and action parameters:

[spu-facebook href="https://www.facebook.com/YourPage" layout="button" action="recommend" /]

Another advanced example with more parameters. This time, we’re setting the ‘show_faces’ and ‘share’ parameters to ‘true’, and also specifying the width and alignment:

[spu-facebook href="https://www.facebook.com/YourPage" layout="box_count" show_faces="true" share="true" width="200" align="left" /]

Note that the ‘href’ parameter should be the URL of your Facebook page. The ‘layout’ parameter can be ‘standard’, ‘box_count’, ‘button_count’, or ‘button’. The ‘action’ parameter can be either ‘like’ or ‘recommend’. ‘show_faces’ and ‘share’ can be set to either ‘true’ or ‘false’. The ‘width’ parameter sets the width of the Facebook box, and ‘align’ can be ‘left’, ‘center’, or ‘right’.

PHP Function Code

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

Shortcode line:

add_shortcode( 'spu-facebook', [ $this, 'facebook_shortcode' ], 10, 2 );

Shortcode PHP function:

function facebook_shortcode( $atts, $content ) {

		extract( shortcode_atts( [
			'href'       => apply_filters( 'wppopups_social_fb_href', 'https://www.facebook.com/pages/Timersys/146687622031640' ),
			'layout'     => 'button_count', // standard, box_count, button_count, button
			'show_faces' => 'false', // true
			'share'      => 'false', // true
			'action'     => 'like', // recommend
			'width'      => '',
			'align'      => 'center',
		], $atts ) );

		$layout = strtolower( trim( $layout ) );
		$action = strtolower( trim( $action ) );

		// to avoid problems
		if ( 'standard' != $layout && 'box_count' != $layout && 'button_count' != $layout && 'button' != $layout ) {
			$layout = 'button_count';
		}
		if ( 'like' != $action && 'recommend' != $action ) {
			$action = 'like';
		}
		$align = $this->sanitize_align( $align );

		return '<div class="spu-facebook spu-shortcode" style="text-align:' . $align . '"><div class="fb-like" data-width="' . esc_attr( strtolower( trim( $width ) ) ) . '" data-href="' . esc_url( $href ) . '" data-layout="' . esc_attr( $layout ) . '" data-action="' . esc_attr( $action ) . '" data-show-faces="' . esc_attr( strtolower( trim( $show_faces ) ) ) . '" data-share="' . esc_attr( strtolower( trim( $share ) ) ) . '"></div></div>';

	}

Code file location:

wp-popups-lite/wp-popups-lite/src/includes/class-printer.php

WP Popups [spu-facebook-page] Shortcode

The ‘spu-facebook-page’ shortcode from the wp-popups-lite plugin creates a Facebook page widget. It fetches and displays a Facebook page based on the provided ‘href’ attribute. The shortcode allows customization of the widget appearance. Parameters include ‘show_faces’ for displaying user faces, ‘hide_cover’ to hide the page cover, and ‘width’ to set the widget width. The ‘align’ parameter adjusts the widget alignment. The shortcode output is a styled div containing the Facebook page widget.

Shortcode: [spu-facebook-page]

Parameters

Here is a list of all possible spu-facebook-page shortcode parameters and attributes:

href – link to the Facebook page you want to display
name – name of the Facebook page
show_faces – set to ‘true’ to display profile pictures of friends who like the page
hide_cover – set to ‘true’ to hide the cover photo in the header
width – the width of the plugin in pixels
align – alignment of the plugin (center, left, or right)

Examples and Usage

Basic example – Embeds a Facebook page using the shortcode, with the default page being ‘Timersys’.

[spu-facebook-page /]

Advanced examples

Customizing the Facebook page displayed, along with a few other parameters. The ‘href’ attribute is used to specify the Facebook page URL, the ‘name’ attribute to specify the page name, ‘show_faces’ to decide whether to display profile pictures of the page’s followers, ‘hide_cover’ to choose whether to hide the cover photo of the page, and ‘width’ to define the width of the embedded Facebook page.

[spu-facebook-page href="https://www.facebook.com/pages/YourPage/123456789" name="YourPage" show_faces="true" hide_cover="false" width="500" /]

Changing the alignment of the embedded Facebook page. The ‘align’ attribute is used to specify the alignment, with possible values being ‘left’, ‘right’, and ‘center’.

[spu-facebook-page href="https://www.facebook.com/pages/YourPage/123456789" name="YourPage" align="right" /]

PHP Function Code

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

Shortcode line:

add_shortcode( 'spu-facebook-page', [ $this, 'facebook_page_shortcode' ], 10, 2 );

Shortcode PHP function:

function facebook_page_shortcode( $atts, $content ) {

		extract( shortcode_atts( [
			'href'       => apply_filters( 'wppopups_social_fb_href', 'https://www.facebook.com/pages/Timersys/146687622031640' ),
			'name'       => apply_filters( 'wppopups_social_fb_name', 'Timersys' ),
			'show_faces' => 'true', // false
			'hide_cover' => 'false', // true
			'width'      => '500',
			'align'      => 'center',
		], $atts ) );
		$align = $this->sanitize_align( $align );

		return '<div class="spu-facebook-page" style="text-align:' . $align . '"><div class="fb-page" data-href="' . esc_url( $href ) . '" data-width="' . esc_attr( strtolower( trim( $width ) ) ) . '" data-hide-cover="' . esc_attr( strtolower( trim( $hide_cover ) ) ) . '" data-show-facepile="' . esc_attr( strtolower( trim( $show_faces ) ) ) . '" data-show-posts="false"><div class="fb-xfbml-parse-ignore"><blockquote cite="' . esc_attr( $href ) . '"><a href="' . esc_url( $href ) . '">' . esc_attr( $name ) . '</a></blockquote></div></div></div>';

	}

Code file location:

wp-popups-lite/wp-popups-lite/src/includes/class-printer.php

WP Popups [spu-twitter] Shortcode

The WP-Popups Lite plugin shortcode ‘spu-twitter’ enables the display of a Twitter follow button on your website. It supports customization of user handle, count visibility, size, language, and alignment. This shortcode allows you to align the button, choose the size, and decide whether to display the follower count. It also enables language selection.

Shortcode: [spu-twitter]

Parameters

Here is a list of all possible spu-twitter shortcode parameters and attributes:

user – specifies the Twitter username to be displayed in the popup.
show_count – controls whether the follower count is displayed.
size – adjusts the size of the Twitter button in the popup.
lang – sets the language for the Twitter button.
align – aligns the Twitter button within the popup.

Examples and Usage

Basic example – Displaying a Twitter follow button with the default parameters.

[spu-twitter /]

Advanced examples

Customizing the Twitter follow button by specifying a user, hiding the follower count, and aligning the button to the right.

[spu-twitter user="wordpress" show_count="false" align="right" /]

Further customizing the Twitter follow button by specifying a user, showing the follower count, setting the button size to large, and aligning the button to the center.

[spu-twitter user="wordpress" show_count="true" size="large" align="center" /]

Customizing the Twitter follow button by specifying a user, hiding the follower count, setting the button size to large, aligning the button to the left, and setting the language to Spanish.

[spu-twitter user="wordpress" show_count="false" size="large" align="left" lang="es" /]

PHP Function Code

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

Shortcode line:

add_shortcode( 'spu-twitter', [ $this, 'twitter_shortcode' ], 10, 2 );

Shortcode PHP function:

function twitter_shortcode( $atts, $content ) {
		extract( shortcode_atts( [
			'user'       => apply_filters( 'wppopups_social_tw_user', 'chifliiiii' ),
			'show_count' => 'true', // false
			'size'       => '', // large
			'lang'       => '',
			'align'      => 'center',
		], $atts ) );
		$align = $this->sanitize_align( $align );

		return '<div class="spu-twitter spu-shortcode' . esc_attr( $user ) . '" style="text-align:' . $align . '"><a href="https://twitter.com/' . esc_attr( $user ) . '" class="twitter-follow-button" data-show-count="' . esc_attr( strtolower( trim( $show_count ) ) ) . '" data-size="' . esc_attr( strtolower( trim( $size ) ) ) . '" data-lang="' . esc_attr( $lang ) . '"></a></div>';

	}

Code file location:

wp-popups-lite/wp-popups-lite/src/includes/class-printer.php

WP Popups [spu-close] Shortcode

The ‘spu-close’ shortcode from wp-popups-lite plugin is designed to create a close button for popups. It allows customization of button class, text, and conversion. The ‘class’ attribute sets the button style, ‘text’ changes the button label, and ‘conversion’ determines if closing the popup counts as a conversion.

Shortcode: [spu-close]

Parameters

Here is a list of all possible spu-close shortcode parameters and attributes:

class – Specifies the CSS classes for the close button
text – Defines the text displayed on the close button
conversion – Determines if closing the popup counts as a conversion

Examples and Usage

Basic example – A simple usage of the shortcode to close a popup. The shortcode uses the default ‘Close’ text on the button and the default class styles.

[spu-close /]

Advanced examples

Using the shortcode to close a popup with custom text. The text on the button will be ‘Exit’ instead of the default ‘Close’.

[spu-close text="Exit" /]

Using the shortcode to close a popup with a custom class. The button will have the class ‘custom-button’ in addition to the default classes.

[spu-close class="custom-button" /]

Using the shortcode to close a popup with custom text and class. The button will have the text ‘Exit’ and the class ‘custom-button’.

[spu-close text="Exit" class="custom-button" /]

Using the shortcode to close a popup with a conversion. If the ‘conversion’ attribute is set to true, the button will have the class ‘spu-close-convert’ instead of ‘spu-close-popup’.

[spu-close conversion="true" /]

PHP Function Code

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

Shortcode line:

add_shortcode( 'spu-close', [ $this, 'close_shortcode' ], 10, 2 );

Shortcode PHP function:

function close_shortcode( $atts, $content ) {
		extract( shortcode_atts( [
			'class'      => 'button-primary btn-primary',
			'text'       => 'Close',
			'conversion' => false,
		], $atts ) );
		$button_class = ! $conversion || $conversion == 'false' ? 'spu-close-popup ' : 'spu-close-convert ';

		return '<button class="' . $button_class . esc_attr( $class ) . '">' . esc_attr( $text ) . '</button>';
	}

Code file location:

wp-popups-lite/wp-popups-lite/src/includes/class-printer.php

WP Popups [spu] Shortcode

The WP-Popups Lite Plugin shortcode enables the creation of a hyperlink. . It uses the ‘popup_link_shortcode’ function to generate a link that triggers a specific popup when clicked. The ‘popup’ attribute in the shortcode determines which popup to open.

Shortcode: [spu]

Parameters

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

popup – specifies the unique ID of the popup to open
content – defines the link text to trigger the popup

Examples and Usage

Basic example – Create a link that opens a specific popup when clicked. The ‘popup’ attribute is used to specify the ID of the popup to be opened.

[spu popup="1"]Click Here[/spu]

Advanced examples

Creating a link with custom text that opens a specific popup. The text between the opening and closing shortcode tags is used as the link text.

[spu popup="2"]Open Popup with Custom Text[/spu]

Using the shortcode within a paragraph of text. The link will be inserted at the location of the shortcode, and the popup will open when the link is clicked.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. [spu popup="3"]Click here[/spu] to open the popup. Nulla facilisi.

Using the shortcode multiple times within a single piece of content. Each link will open a different popup, specified by the ‘popup’ attribute.

[spu popup="4"]Open Popup 1[/spu]
[spu popup="5"]Open Popup 2[/spu]
[spu popup="6"]Open Popup 3[/spu]

PHP Function Code

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

Shortcode line:

add_shortcode( 'spu', [ $this, 'popup_link_shortcode' ], 10, 2 );

Shortcode PHP function:

function popup_link_shortcode( $atts, $content ) {
		return '<a href="#" class="spu-open-' . esc_attr( $atts['popup'] ) . '">' . wp_kses_post( do_shortcode( $content ) ) . '</a>';
	}

Code file location:

wp-popups-lite/wp-popups-lite/src/includes/class-printer.php

WP Popups [wpp-elementor] Shortcode

The WP-Popups-Lite shortcode, ‘wpp-elementor’, enables the display of Elementor content within a popup. This shortcode checks if an Elementor content ID is provided and if the Elementor Plugin exists. If both conditions are met, it retrieves and displays the specified Elementor content. The ‘css’ attribute allows users to include or exclude CSS.

Shortcode: [wpp-elementor]

Parameters

Here is a list of all possible wpp-elementor shortcode parameters and attributes:

id – Unique identifier of the Elementor content.
css – Controls whether to include CSS or not. By default, it is false.

Examples and Usage

Basic example – The shortcode below allows you to display an Elementor template by referencing its ID. It’s a simple and straightforward way to insert a pre-designed Elementor layout into your content.

[wpp-elementor id=1 /]

Advanced examples

Here, the shortcode is used to display an Elementor template by referencing its ID, but also includes a CSS parameter. If the CSS parameter is set to true, the shortcode will also load the CSS for the Elementor template. This is useful if you want to ensure that the template’s styling is correctly applied when it’s displayed.

[wpp-elementor id=1 css=true /]

In this next advanced example, the shortcode is again used to display an Elementor template by referencing its ID, but the CSS parameter is set to false. This means that the shortcode will not load the CSS for the Elementor template. This could be useful if you’re experiencing conflicts between the template’s CSS and the CSS of your theme or other plugins.

[wpp-elementor id=1 css=false /]

PHP Function Code

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

Shortcode line:

add_shortcode( 'wpp-elementor', 'wpp_elementor_shortcode' );

Shortcode PHP function:

function wpp_elementor_shortcode( $attributes = array() ) {

	if ( empty( $attributes['id'] ) || ! class_exists( '\Elementor\Plugin' ) ) {
		return '';
	}

	$include_css = false;

	if ( isset( $attributes['css'] ) && 'false' !== $attributes['css'] ) {
		$include_css = (bool) $attributes['css'];
	}

	return \Elementor\Plugin::instance()->frontend->get_builder_content_for_display( $attributes['id'], $include_css );
}

Code file location:

wp-popups-lite/wp-popups-lite/src/includes/plugins/elementor.php

Conclusion

Now that you’ve learned how to embed the WP Popups – WordPress Popup builder Plugin shortcodes, 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.

WP Popups [spu-facebook] Shortcode

Parameters

Examples and Usage

PHP Function Code

WP Popups [spu-facebook-page] Shortcode

Parameters

Examples and Usage

PHP Function Code

WP Popups [spu-twitter] Shortcode

Parameters

Examples and Usage

PHP Function Code

WP Popups [spu-close] Shortcode

Parameters

Examples and Usage

PHP Function Code

WP Popups [spu] Shortcode

Parameters

Examples and Usage

PHP Function Code

WP Popups [wpp-elementor] Shortcode

Parameters

Examples and Usage

PHP Function Code

Conclusion

Comments

Leave a Reply Cancel reply

WP Popups Shortcodes

WP Popups [spu-facebook] Shortcode

Parameters

Examples and Usage

PHP Function Code

WP Popups [spu-facebook-page] Shortcode

Parameters

Examples and Usage

PHP Function Code

WP Popups [spu-twitter] Shortcode

Parameters

Examples and Usage

PHP Function Code

WP Popups [spu-close] Shortcode

Parameters

Examples and Usage

PHP Function Code

WP Popups [spu] Shortcode

Parameters

Examples and Usage

PHP Function Code

WP Popups [wpp-elementor] Shortcode

Parameters

Examples and Usage

PHP Function Code

Conclusion

Related Shortcodes

Comments

Leave a Reply Cancel reply