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 is a powerful and versatile tool that lets you create and customize engaging popups for your WordPress site. Enhance user experience and increase conversion rates with this easy-to-use plugin."
- [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’ is designed to embed a Facebook like button on your web page. It allows for customization of the button’s layout, action, and alignment. It extracts parameters like ‘href’, ‘layout’, ‘show_faces’, ‘share’, ‘action’, ‘width’, and ‘align’. These parameters can be modified to suit your specific needs. For instance, ‘layout’ can be set to ‘standard’, ‘box_count’, ‘button_count’, or ‘button’. The ‘action’ parameter can be set to ‘like’ or ‘recommend’. The shortcode ensures the values are valid and defaults to ‘button_count’ and ‘like’ if invalid values are provided. Finally, the function returns a div element with the class ‘spu-facebook spu-shortcode’, which contains the customized Facebook like button.
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 button (standard, box_count, button_count, button).show_faces– Show profile photos (‘true’ or ‘false’).share– Display a ‘share’ button (‘true’ or ‘false’).action– Button action, ‘like’ or ‘recommend’.width– Width of the button in pixels.align– Alignment of the button (center, left, right).
Examples and Usage
Basic example – Show a Facebook Like button for the page ‘Timersys’ on Facebook, using the ‘button_count’ layout and centered alignment.
[spu-facebook href="https://www.facebook.com/pages/Timersys/146687622031640" layout="button_count" align="center" /]Advanced examples
Display a Facebook Like button with the ‘box_count’ layout, showing faces, enabling the share button, and recommending instead of liking. The button is aligned to the right.
[spu-facebook href="https://www.facebook.com/pages/Timersys/146687622031640" layout="box_count" show_faces="true" share="true" action="recommend" align="right" /]Display a Facebook Like button with custom width. The button is aligned to the left.
[spu-facebook href="https://www.facebook.com/pages/Timersys/146687622031640" width="200" align="left" /]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.phpWP Popups [spu-facebook-page] Shortcode
The ‘spu-facebook-page’ shortcode from the wp-popups-lite plugin displays a Facebook page within a WordPress post or page. It accepts parameters like ‘href’ for the Facebook page URL, ‘name’ for the page name, ‘show_faces’ to show profile pictures, ‘hide_cover’ to hide the cover photo, and ‘width’ to set the width of the displayed page.
Shortcode: [spu-facebook-page]
Parameters
Here is a list of all possible spu-facebook-page shortcode parameters and attributes:
href– URL of the Facebook page to displayname– Name of the Facebook pageshow_faces– Show profile pictures of page followershide_cover– Hide the cover photo of the Facebook pagewidth– Width of the Facebook page pluginalign– Alignment of the Facebook page plugin
Examples and Usage
Basic example – Using the shortcode to display a Facebook page with default parameters.
[spu-facebook-page /]Advanced examples –
Using the shortcode to display a Facebook page with custom parameters. The Facebook page will be displayed with a specific width, alignment, and cover visibility based on the parameters provided.
[spu-facebook-page href="https://www.facebook.com/pages/YourCustomPage/" name="Your Custom Page" width="600" align="left" hide_cover="true" /]Using the shortcode to display a Facebook page with custom parameters. The Facebook page will be displayed without showing faces of the people who like this page and with the cover photo hidden.
[spu-facebook-page href="https://www.facebook.com/pages/YourCustomPage/" name="Your Custom Page" show_faces="false" hide_cover="true" /]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.phpWP Popups [spu-twitter] Shortcode
The WP-Popups Lite ‘spu-twitter’ shortcode is designed to create a Twitter follow button within a popup. This button can be customized with user-defined attributes such as username, count visibility, size, language, and alignment.
Shortcode: [spu-twitter]
Parameters
Here is a list of all possible spu-twitter shortcode parameters and attributes:
user– Specifies the Twitter username to use in the button link.show_count– Decides whether to display the follower count. Default is ‘true’.size– Determines the size of the Twitter button. Default is blank for normal size.lang– Sets the language for the Twitter button, default is blank for English.align– Defines the alignment of the Twitter button. Default is ‘center’.
Examples and Usage
Basic example – The basic usage of the shortcode is to display a Twitter follow button for a specified user. By default, it will show the follower count and align to the center.
[spu-twitter user="chifliiiii" /]Advanced examples
Displaying a Twitter follow button for a specified user, without showing the follower count, and aligning the button to the left.
[spu-twitter user="chifliiiii" show_count="false" align="left" /]Displaying a Twitter follow button for a specified user, with a large size button, in Spanish, and aligning the button to the right.
[spu-twitter user="chifliiiii" size="large" lang="es" align="right" /]These examples show the flexibility of the ‘spu-twitter’ shortcode in the wp-popups-lite plugin. With just a few parameters, you can customize the appearance and functionality of the Twitter follow button on your WordPress site.
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.phpWP Popups – WordPress Popup builder [spu-close] Shortcode
The wp-popups-lite plugin shortcode ‘spu-close’ is designed to create a close button for popups. This shortcode allows customization of the button’s class, text, and conversion properties. By default, it assigns the ‘button-primary btn-primary’ class and ‘Close’ text. The ‘conversion’ attribute determines the button class. If it’s false or not set, ‘spu-close-popup’ is assigned. Otherwise, it’s ‘spu-close-convert’. The return statement generates the button HTML.
Shortcode: [spu-close]
Parameters
Here is a list of all possible spu-close shortcode parameters and attributes:
class– Specifies the CSS class for the close buttontext– Sets the text displayed on the close buttonconversion– Determines if closing the popup counts as a conversion
Examples and Usage
Basic example – The following shortcode will generate a simple close button with the default text “Close”.
[spu-close /]Advanced examples
1. Customizing the button text – You can customize the text displayed on the close button by using the ‘text’ attribute. Here is an example of how to do this:
[spu-close text="Dismiss" /]2. Customizing the button class – You can also customize the CSS class of the button by using the ‘class’ attribute. This can be useful for applying custom styles to the button. Here is an example:
[spu-close class="custom-class" /]3. Using the conversion attribute – The ‘conversion’ attribute can be used to change the behavior of the button. If set to true, the button will not close the popup but will instead trigger a conversion event. Here is an example:
[spu-close conversion="true" /]4. Combining multiple attributes – You can combine multiple attributes to customize the button as per your needs. Here is an example of a button with custom text, class, and conversion behavior:
[spu-close text="Dismiss" class="custom-class" 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.phpWP Popups [spu] Shortcode
The WP Popups Lite plugin shortcode ‘spu’ creates a clickable link that triggers a specific popup. It uses the ‘popup_link_shortcode’ function to generate an HTML link with a class of ‘spu-open-[popup]’, where [popup] is the ID of the desired popup. The content within the link is processed by ‘do_shortcode’ function, allowing nested shortcodes.
Shortcode: [spu]
Parameters
Here is a list of all possible spu shortcode parameters and attributes:
atts['popup']– the unique identifier of the popup to be openedcontent– the content to be displayed within the popup
Examples and Usage
Basic example – In this example, we use the ‘spu’ shortcode to generate a link that opens a popup. The ‘popup’ attribute is used to specify the ID of the popup that should be opened.
[spu popup=1]Click here to open the popup[/spu]Advanced examples
Here, we’re using the shortcode to create a link that opens a popup with a specific ID. The link text is also customized to provide a more engaging call to action for users.
[spu popup=2]Sign up for our newsletter![/spu]In the next advanced example, we’re using the shortcode to create a link that opens two different popups. This can be useful for scenarios where you want to provide users with multiple options or actions.
[spu popup=3]View our latest offers[/spu]
[spu popup=4]Read our latest blog post[/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.phpWP Popups [wpp-elementor] Shortcode
The WP-Popups Lite shortcode ‘wpp-elementor’ is designed to render Elementor content. It checks for an ‘id’ attribute and the existence of the Elementor plugin. If both are valid, it fetches and displays the Elementor content associated with the given ‘id’. It also includes an optional ‘css’ attribute 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 for the Elementor content to display.css– Determines if custom CSS styles are included; ‘false’ excludes them.
Examples and Usage
Basic example – A simple usage of the wpp-elementor shortcode to display an Elementor template by its ID.
[wpp-elementor id=1 /]Advanced examples
Using the shortcode to display an Elementor template by its ID and specifying whether to include the CSS or not. The ‘css’ attribute can be set to ‘true’ or ‘false’. If set to ‘true’, the CSS of the Elementor template will be included. If ‘false’, it will not.
[wpp-elementor id=1 css=true /]Here’s another advanced usage of the shortcode where the ‘css’ attribute is set to ‘false’. This means the Elementor template will be displayed without its CSS.
[wpp-elementor id=1 css=false /]Remember that the ‘id’ attribute is mandatory for the shortcode to work. If the ‘id’ is not specified or the Elementor Plugin is not installed and activated, the shortcode will not display anything.
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.phpConclusion
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.
Leave a Reply