Bubble Heading Shortcode

My latest task at my volunteer work was to create headers within speech bubbles.

After my previous fiddling with the text over images in the feature templates this was a breeze.

So I decided to do one better and create a shortcode that allows users to easily create bubble headers.

The shortcode defaults to creating a h2 header within a speech bubble.

This also provides the ability to input the desired header level and a link.

Shortcode:

[david_bubbler header="Testing"]
[david_bubbler header="Testing" level=3]
[david_bubbler header="Testing" link="https://davidstockdalescrapcode.co.uk/"]
[david_bubbler header="Testing" level=3 link="https://davidstockdalescrapcode.co.uk/"]

Code & Examples:

This is a relatively simple bit of theme editing that requires only copying my code into “functions.php” of your child theme.

H2

H3

H4


/**
 * Adds shortcode (David Stockdale).
 */
add_shortcode('david_bubbler', 'david_bubbler_shortcode');
/**
 * Creates a header within a speach bubble (David Stockdale).
 * ----------Shortcode Use Examples---------- 
 * Header: [david_bubbler header="Testing"]
 * Level: [david_bubbler header="Testing" level=3]
 * Link: [david_bubbler header="Testing" link="https://davidstockdalescrapcode.co.uk/"]
 * All: [david_bubbler header="Testing" level=3 link="https://davidstockdalescrapcode.co.uk/"]
 */
function david_bubbler_shortcode($atts) {
	$header= $atts['header'];
	
	/**
	 * Header level (optional) defaults to 2.
	 */
	if (!(isset($atts['level']->a)) && !empty($atts['level'])) {
		$level = $atts['level'];
	} else {
		$level = 2;
	}
	
	
	$text = '';
	/**
	 * Header link (optional).
	 */
	if (!(isset($atts['link']->a)) && !empty($atts['link'])) {
		$link = $atts['link'];
		$text .= '<a href="' . $link . '" style="color: red;">';
		$text .= '<h' .$level . ' style="width:100%; height:100%; display: flex; justify-content: center; 
		align-items: center;">' . $header . '</h' .$level . '>';
		$text .= '</a>';
	} else {
		$text .= '<h' .$level . ' style="width:100%; height:100%; display: flex; justify-content: center; 
		align-items: center;">' . $header . '</h' .$level . '>';
	}
	
	/**
	 * Places the header within the image.
	 */
	$result = 
		'<div id="container" style="position: relative!important; width:250px!important; 
		height:250px!important;">
			<img 
			src="https://davidstockdalescrapcode.co.uk/wp-content/uploads/2021/07/MCP-white-with-teal-logo.png" 
			alt="" style="width:100%!important; height:100%!important;" class="feature-logo">
			<div id="innerdiv1" style="z-index: 2!important; position: absolute!important; 
			text-align: left!important; padding-left:35px!important; padding-top:30px!important; 
			padding-right:18px!important; width:250px!important; height:180px!important; 
			text-align: center!important; color:black!important;">' 
				. $text . 
			'</div>
		</div>';
	return $result;
}

One thought on “Bubble Heading Shortcode

Leave a Reply

%d bloggers like this: