Preview PHP HTML CSS JS
Click to copy

Paste function into your child theme's functions.php file

<?php
/*
 * Use the [border_box] shortcode to add a beautiful call-to-action
 * box with a button to anywhere that accepts shortcodes on your site.
 *
 * @since 1.0
 */

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' );
Click to copy

Use the shortcode with attributes anywhere on your site:

[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]
Click to copy
Click to copy

Paste to your child theme's 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;
	}
}	
Click to copy

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

Border Box CTA shortcode

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:

…and the width of the border box will responsively increase if you need more room inside your box.

Labs

Get the latest MD sent straight to your inbox

There's always something new in the works in the MD Labs! Join the email list to get the newest content and releases sent straight to your inbox.*

Join the MD Newsletter

* I only email you when there's something new, or to share an exciting MD sneak peak.