• Welcome to the all-new Kolakube support, the official place to get help for Marketers Delight, XFtoWP, CryptoWP, and other WordPress products! Please login with your account details to access private support forums.

Speech Bubble Shortcode

Want an easy way to display a compact speech bubble for quick testimonials and reviews? I've got a new shortcode for you packed full of easy customization options and a simple design!

Screen Shot 2018-05-10 at 8.18.13 PM.png

Here's how to use the shortcode:

[bubble
text="Testing some quoted text in a bubble!"
name="Alex Mangini"
image="http://localhost/wp-content/uploads/2015/12/alex-point.jpg"
width="200"
class="aligncenter"
]


Some notes:

  • Any option you don't need, remove from the shortcode
  • If you remove the width attribute, the bubble will stretch to the size of the container
  • The photo used is scaled down to 35x35px, which can be changed in the CSS. Upload any symmetrical photo for proper scaling
  • Add as many CSS classes to the class attribute, add a space in between each class
-----

1) Add the shortcode function to your child theme functions.php file:

/**
* Easily add a speech bubble in a shortcode.
*
* @since 1.0
*/

function md_child_theme_shortcode_bubble( $atts ) {
extract( shortcode_atts( array(
'text' => '',
'name' => '',
'image' => '',
'width' => '',
'class' => ''
), $atts, 'bubble' ) );

$style = ! empty( $atts['width'] ) ? ' style="max-width: ' . esc_attr( $atts['width'] ) . 'px;"' : '';
$class = ! empty( $atts['class'] ) ? ' ' . $atts['class'] : '';
?>

<div class="bubble-wrap<?php esc_attr_e( $class ); ?>"<?php echo $style; ?>>

<div class="bubble">

<?php if ( ! empty( $atts['image'] ) ) : ?>
<img src="<?php echo esc_url( $atts['image'] ); ?>" />
<?php endif; ?>

<?php if ( ! empty( $atts['text'] ) ) : ?>
<p><?php echo esc_html( $atts['text'] ); ?></p>
<?php endif; ?>

<?php if ( ! empty( $atts['name'] ) ) : ?>
<p class="text-sec">-<?php echo esc_html( $atts['name'] ); ?></p>
<?php endif; ?>

</div>

<span class="bubble-rating">
<i class="md-icon-star"></i>
<i class="md-icon-star"></i>
<i class="md-icon-star"></i>
<i class="md-icon-star"></i>
<i class="md-icon-star"></i>
</span>

</div>

<?php }

add_shortcode( 'bubble', 'md_child_theme_shortcode_bubble' );


2) Add the following CSS to your style.css file:

/*----------------*\
QUOTE BUBBLE
\*----------------*/

.md-icon-star {
color: yellow;
}

.bubble-wrap {
text-align: left;
}

.bubble {
background-color: #fff;
box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.1);
border-radius: 5px;
font-size: 15px;
font-style: italic;
line-height: 19px;
padding: 13px;
position: relative;
}

.bubble:before,
.bubble:after {
border-color: #fff transparent;
border-style: solid;
content: '';
display: block;
position: absolute;
width: 0;
}

.bubble:before {
border-color: #fff transparent;
border-width: 15px 15px 0;
bottom: -15px;
right: 30px;
z-index: 1;
}

.bubble:after {
border-color: rgba(0, 0, 0, 0.03) transparent;
border-width: 19px 19px 0;
bottom: -19px;
right: 26px;
z-index: 0;
}

.bubble p {
margin-bottom: 4px;
}

.bubble img {
border-radius: 50%;
height: 35px;
float: right;
margin-left: 7px;
width: 35px;
}


-----

After that, you can start using the shortcode by pasting the [bubble] shortcode and its included attributes anywhere in WordPress that accepts a shortcode. You can also use it in template files like so:

CSS:
<?php echo do_shortcode( '[bubble text="Testing some quoted text in a bubble!" name="Alex Mangini" image="http://localhost:8888/kolakube/wp-content/uploads/2015/12/alex-point.jpg" width="200" class="aligncenter"]' ); ?>
 
Last edited by a moderator:

Some French Dude

SomeFrenchDude
Md
Messages
1,062
Reaction score
121
Is this integrated by default in MD4.8 or do we still have to integrate it manually?

 
Comment
Top