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.
/**
* 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;
}
test