Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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>
share|improve this question
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. –  t f Apr 19 '13 at 14:06
    
How would I go about doing that? –  adamdehaven Apr 19 '13 at 14:14

1 Answer 1

up vote 1 down vote accepted

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' );
share|improve this answer
    
Is there a way to incorporate this into a function so that it is automatically applied even in the WYSIWYG editor, so the user only has to highlight and click rather than remember the shortcode? (I know - laziness - but the user is "slow"). –  adamdehaven Apr 19 '13 at 14:19
    
I just updated my answer. –  t f Apr 19 '13 at 14:24
    
Thanks! Works perfectly! –  adamdehaven Apr 19 '13 at 14:29

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.