Border Box CTA shortcode

Border Box Template

Show an eye-popping and clear call to action within your content.

Version 1.0
Preview PHP HTML CSS

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

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

Use the shortcode with attributes anywhere on your site:

Click to copy
[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
<div class="block-full block-single-bot">
	<div class="border-box mb-double">
		<h3 class="border-box-title">Use the Power of the <b>Border Box</b> Code Snippet to Create Sleek Call-to-Actions!</h3>
			<div class="border-box-content">			
			<p>With the killer <code>[border_box]</code> 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.</p>
			<p>Simply paste the below code snippet into your child theme and you can start using this great feature on your site instantly!</p>
			<a href="#get_code" class="orange button button-large width-full text-center">Get this code snippet now</a>
		</div>
	</div>
</div>

Paste to your child theme's style.css file

Click to copy
/* 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;
	}
}	

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.

Start Building Websites That Delight

You can use the Marketers Delight WordPress Theme on unlimited sites. New features & updates are delivered to sites with your active license key.

Add to Cart