Border Box CTA shortcode

Use this beautiful shortcode to easily add a clickable call-to-action anywhere throughout your blog posts. It comes with plenty of options for full customization.

Here’s what we’ll be creating with this code snippet:

Use the Power of the Border Box Code Snippet to Create Sleek Call-to-Actions!

With the killer [border_box] shortcode, you can easily create call-to-action offers in any location in your posts and pages. The shortcode comes with some pretty basic options so you can customize this box with ease.

Simply paste the below code snippet into your child theme and you can start using this great feature on your site instantly!

Get this code snippet now

Step 1: Paste the following shortcode into your functions.php file:

/**
 * Use the [border_box] shortcode to add a beautiful call-to-action
 * box with a button to anywhere that accepts shortcodes on your site.
 *
 * Original: https://marketersdelight.net/snippets/border-box/
 */

function md_border_box( $atts, $content = '' ) {
	extract( shortcode_atts( array(
		'title'       => '',
		'classes'     => '',
		'button_link' => '',
		'button_text' => ''
	), $atts, 'border_box' ) );

	$classes = ! empty( $atts['classes'] ) ? ' ' . $atts['classes'] : '';

	ob_start();
?>

	<div class="border-box mb-double<?php esc_attr_e( $classes ); ?>">
		<?php if ( ! empty( $atts['title'] ) ) : ?>
		    <h3 class="border-box-title"><?php echo apply_filters( 'the_title', $atts['title'] ); ?></h3>
		<?php endif; ?>

		<?php if ( ! empty( $content ) ) : ?>
		    <div class="border-box-content">
				<?php echo wpautop( $content ); ?>

				<?php if ( ! empty( $atts['button_link' ] ) ) :
					$button_text = ! empty( $atts['button_text'] ) ? $atts['button_text'] : __( 'Click here to get started', 'md' );
				?>
					<a href="<?php echo esc_url( $atts['button_link'] ); ?>" class="orange button button-large width-full text-center"><?php echo esc_html( $button_text ); ?></a>
				<?php endif; ?>
			</div>
		<?php endif; ?>
	</div>

<?php return ob_get_clean(); }

add_shortcode( 'border_box', 'md_border_box' );

Step 2: Paste the following styles into your style.css file:

/* BORDER BOX */

.border-box {
	box-shadow: 0 5px 25px rgba(48, 147, 208, 0.15);
}

.border-box .border-box-title {
	background-color: #3093D0;
	border-radius: 3px 3px 0 0;
	color: #fff;
	margin-bottom: 0;
	padding: 52px;
	text-align: center;
}

.border-box-content {
	border: 1px solid #ddd;
	border-radius: 0 0 3px 3px;
	border-width: 0 1px 1px;
	padding: 39px;
	text-align: left;
}

.border-box-content p:last-child:empty {
	margin-top: -26px;
}

@media all and (min-width: 800px) {

	[class*="block-full-"] .border-box {
		margin-left: -52px;
		margin-right: -52px;
	}

}

@media all and (max-width: 900px) {

	.border-box .border-box-title {
		padding: 26px;
	}

}

Step 3: Using the Shortcode in Your Post Editor

Now that you’ve saved and uploaded both files, this shortcode is now ready for use! You can now instantly use it anywhere on your site that accepts shortcodes, and will probably use it in your post editor the most.

Here’s how it works, and I think you’ll love how flexible it is:

[border_box title="Use the Power of the <b>Border Box</b> Code Snippet to Create Sleek Call-to-Actions!" button_link="#get_code" button_text="Get this code snippet now"]

    With the killer shortcode, you can easily create call-to-action offers in any location in your posts and pages. The shortcode comes with some pretty basic options so you can customize this box with ease.

    Simply paste the below code snippet into your child theme and you can start using this great feature on your site instantly!

[/border_box]

After you look at the shortcode for a few seconds you should have a good understanding of what you need to do. Using the shortcode attributes of title, button_text, and button_link you can fill out the most important parts of the box.

In between the opening and closing tags of the shortcode you can freely type your own content just as you would any other post content. Use HTML tags and helper classes to style your content even further.

You can even leave the button fields blank and create your own button with HTML, that was just added in for your own convenience!

It’s also worth mentioning that you can also add the classes attribute to the shortcode to do even more with the box. For example, add these classes to any shortcode instance:

[border_box classes="aligncenter wrap-small"]

…and the width of the border box will responsively increase if you need more room inside your box. Again, see the MD style guide for more examples you can use.

Leave a Comment