functions - Custom <blockquote> HTML markup

In Wordpress, I would like to add a custom styling to the <blockquote> elements, replacing Wordpress' default usage by using a function (or however is easiest).

When using the WYSIWYG editor, highlighting text, and then clicking the "blockquote" button, I would like the highlighted text to be wrapped with the following HTML rather than just a <blockquote> tag:

<div class="span3 quote well"> 
  <i class="icon-quote-left icon-2x pull-left icon-muted"></i>
  <blockquote class="lead">HIGHLIGHTED TEXT</blockquote>
</div>

In Wordpress, I would like to add a custom styling to the <blockquote> elements, replacing Wordpress' default usage by using a function (or however is easiest).

When using the WYSIWYG editor, highlighting text, and then clicking the "blockquote" button, I would like the highlighted text to be wrapped with the following HTML rather than just a <blockquote> tag:

<div class="span3 quote well"> 
  <i class="icon-quote-left icon-2x pull-left icon-muted"></i>
  <blockquote class="lead">HIGHLIGHTED TEXT</blockquote>
</div>

• functions
• customization

Share Improve this question edited Apr 19, 2013 at 14:15 adamdehaven asked Apr 19, 2013 at 14:01 adamdehavenadamdehaven 10555 bronze badges 2

• 1 Why not use a shortcode for that? This way you can leave the functionality as is, still have your individual markup, and bundled as a plugin, you can easily take it with you to another WP install, for example. – tfrommen Commented Apr 19, 2013 at 14:06
• How would I go about doing that? – adamdehaven Commented Apr 19, 2013 at 14:14

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 2

Put this in your functions.php:

add_shortcode('my_blockquote', 'my_blockquote');
function my_blockquote($atts, $content) {
    return '<div class="span3 quote well">'.PHP_EOL
        .'<i class="icon-quote-left icon-2x pull-left icon-muted"></i>'.PHP_EOL
        .'<blockquote class="lead">'.$content.'</blockquote>'.PHP_EOL
        .'</div>';
}

Then, on a page/post, just write:

[my_blockquote]Content goes here...[/my_blockquote]

and that's it.

---

// EDIT: To add a quicktag button, put this also in functions.php:

function add_blockquote_quicktag() {
?>
    <script type="text/javascript">
    QTags.addButton( 'my_blockquote', 'B', '[my_blockquote]', '[/my_blockquote]', 'B', 'My blockquote', 1 );
    </script>
<?php
}
add_action( 'admin_print_footer_scripts', 'add_blockquote_quicktag' );