25% off ProSNIPC25OFF

Pull-Quote Block

Adds a [sc_pullquote cite="Author"] shortcode that renders a typographically styled pull-quote with optional attribution.

Module2 parts · by SnipCraft

PHPShortcode

php
<?php
if ( ! function_exists( 'scseed_pullquote_shortcode' ) ) {
    function scseed_pullquote_shortcode( $atts, $content = '' ) {
        $atts = shortcode_atts( [ 'cite' => '' ], $atts, 'sc_pullquote' );
        $text = wp_kses_post( $content );
        $cite = esc_html( $atts['cite'] );
        $out  = '<figure class="scseed-pullquote"><blockquote class="scseed-pullquote-text">' . $text . '</blockquote>';
        if ( ! empty( $cite ) ) {
            $out .= '<figcaption class="scseed-pullquote-cite">' . $cite . '</figcaption>';
        }
        $out .= '</figure>';
        return $out;
    }
}
add_shortcode( 'sc_pullquote', 'scseed_pullquote_shortcode' );

CSSStyles

css
.scseed-pullquote {
    margin: 32px 0;
    padding: 28px 36px;
    border-left: 5px solid #7c5cff;
    background: #f5f3ff;
    border-radius: 0 8px 8px 0;
}
.scseed-pullquote-text {
    margin: 0 0 8px;
    font-size: 21px;
    font-style: italic;
    line-height: 1.55;
    color: #1a1a2e;
    quotes: none;
}
.scseed-pullquote-text::before,
.scseed-pullquote-text::after { content: none; }
.scseed-pullquote-cite {
    font-size: 13px;
    font-weight: 600;
    color: #7c5cff;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.scseed-pullquote-cite::before { content: '\2014\00A0'; }
#content#shortcode#typography#quote