Pull Quote Shortcode
Adds a [pull_quote] shortcode that sets a short quotation in large type, floated to the side on wide screens and full width on phones, to break up long articles.
Opens WPIDE on
Code
add_action( 'init', function () {
wp_register_style( 'wpide-pullquote', false, array(), '1.0' );
wp_add_inline_style( 'wpide-pullquote', '.wpide-pullquote{margin:1.5em 0;padding:.5em 0 .5em 1em;border-left:4px solid currentColor;font-size:1.35em;line-height:1.4;font-style:italic}.wpide-pullquote p{margin:0}.wpide-pullquote cite{display:block;margin-top:.5em;font-size:.7em;font-style:normal;opacity:.8}@media (min-width:700px){.wpide-pullquote.is-left{float:left;width:40%;margin:.3em 1.5em 1em 0}.wpide-pullquote.is-right{float:right;width:40%;margin:.3em 0 1em 1.5em}.wpide-pullquote.is-center{text-align:center;border-left:0;border-top:3px solid currentColor;border-bottom:3px solid currentColor;padding:.75em 0}}' );
add_shortcode( 'pull_quote', function ( $atts, $content = '' ) {
$atts = shortcode_atts( array( 'align' => 'right', 'cite' => '' ), $atts, 'pull_quote' );
$align = in_array( $atts['align'], array( 'left', 'right', 'center' ), true ) ? $atts['align'] : 'right';
wp_enqueue_style( 'wpide-pullquote' );
return sprintf(
'<blockquote class="wpide-pullquote is-%s"><p>%s</p>%s</blockquote>',
esc_attr( $align ),
wp_kses( trim( $content ), array( 'em' => array(), 'strong' => array(), 'br' => array(), 'a' => array( 'href' => true ) ) ),
'' !== $atts['cite'] ? '<cite>— ' . esc_html( $atts['cite'] ) . '</cite>' : ''
);
} );
} );Notes
Example [pull_quote align="right" cite="Jane Doe"]Great design is invisible.[/pull_quote]; align can be left, right or center.
How to add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.