Popup Box – new WordPress popup Shortcode

Below, you’ll find a detailed guide on how to add the Popup Box – new 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 Popup Box – new WordPress popup Plugin shortcode not to show or not to work correctly.

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

Popup Box – new WordPress popup plugin

"Popup Box is a new WordPress plugin designed to create engaging popups on your site. With its simple and user-friendly interface, it adds more interactivity to your pages."

★★★★★ (7) Active Installs: 2000+ Tested with: 6.3.2 PHP Version: 7.2

Included Shortcodes:

• [buttonBox]

Popup Box – new WordPress popup [buttonBox] Shortcode

The ‘buttonBox’ shortcode is a custom function in PHP for WordPress that creates a button element with customizable attributes. This shortcode supports two types of buttons: ‘close’ and ‘link’. The ‘close’ type generates a button that closes a popup box, while the ‘link’ type creates a button that redirects to a specified URL. The attributes ‘color’, ‘bgcolor’, ‘size’, and ‘fullwidth’ allow you to customize the appearance of the button. The ‘link’ and ‘target’ attributes are used for the ‘link’ type button.

Shortcode: [buttonBox]

Parameters

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

• type – Determines the type of button, either ‘close’ or ‘link’.
• link – URL to be opened when button is clicked.
• target – Specifies where to open the linked document.
• color – Defines the text color of the button.
• bgcolor – Defines the background color of the button.
• size – Sets the size of the button, default is ‘normal’.
• fullwidth – If set to ‘yes’, button takes the full width.

Examples and Usage

Basic example – An example of a simple button with a ‘close’ type and default parameters:

[buttonBox type="close"]Close[/buttonBox]

Advanced examples

A button with a ‘link’ type, custom link, target, color, background color, size, and fullwidth parameters:

[buttonBox type="link" link="https://www.example.com" target="_self" color="black" bgcolor="yellow" size="large" fullwidth="yes"]Visit our site[/buttonBox]

A button with a ‘close’ type, custom color, and background color parameters:

[buttonBox type="close" color="red" bgcolor="blue"]Close[/buttonBox]

A button with a ‘link’ type, custom link, and size parameters:

[buttonBox type="link" link="https://www.example2.com" size="small"]Click Me[/buttonBox]

These examples demonstrate the flexibility of the buttonBox shortcode. It can be used to create a variety of buttons with different functionalities, colors, sizes, and other attributes.

PHP Function Code

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

Shortcode line:

add_shortcode( 'buttonBox', array( $this, 'button_shortcode' ) );

Shortcode PHP function:

function button_shortcode( $atts, $content ) {
		$atts = shortcode_atts( array(
			'type'      => 'close',
			'link'      => '',
			'target'    => '_blank',
			'color'     => 'white',
			'bgcolor'   => 'mediumaquamarine',
			'size'      => 'normal',
			'fullwidth' => 'no',
		), $atts, 'buttonBox' );

		$size      = 'is-' . $atts['size'];
		$button    = '';
		$fullwidth = ( $atts['fullwidth'] === 'yes' ) ? 'is-fullwidth' : '';
		if ( $atts['type'] === 'close' ) {
			$button = '<button class="ds-button ds-close-popup ' . esc_attr( $size ) . ' ' . esc_attr( $fullwidth ) . '" style="color:' . esc_attr( $atts['color'] ) . '; background:' . esc_attr( $atts['bgcolor'] ) . '">' . esc_attr( $content ) . '</button>';
		} elseif ( $atts['type'] === 'link' ) {
			$button = '<a href="' . esc_url( $atts['link'] ) . '" target="' . esc_attr( $atts['target'] ) . '" class="ds-button ' . esc_attr( $size ) . ' ' . esc_attr( $fullwidth ) . '" style="color:' . esc_attr( $atts['color'] ) . '; background:' . esc_attr( $atts['bgcolor'] ) . '">' . esc_attr( $content ) . '</a>';
		}

		return $button;
	}

Code file location:

popup-box/popup-box/public/class-public.php

Conclusion

Now that you’ve learned how to embed the Popup Box – new 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.