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!



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:

<?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"]' ); ?>

 

[Some French Dude]

Is this integrated by default in MD4.8 or do we still have to integrate it manually?

 

[Alex]

This is a bonus feature to expand on the built-in quote box that likely won't be integrated into MD