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>
Share
Improve this question
edited Apr 19, 2013 at 14:15
adamdehaven
asked Apr 19, 2013 at 14:01
adamdehavenadamdehaven
1055 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
1 Answer
Reset to default 2Put 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' );