Hi we all know by default tiny MCE's blockquote generates this

<blockquote> content here </blockquote>

I am styling this via CSS :

enter image description here

the css im using :

blockquote { border: none; font-family: 'Georgia', serif; color: #444; font-size: 1.2em;
           font-weight: bold; font-style: italic; font-weight: normal;
           padding: 0; text-indent: 1.2em; color: #222;
           border-bottom: 1px solid #888; 
           position: relative; bottom: 12px;  }

.no-js blockquote { position: static; bottom: auto; border: none; }

blockquote span { position: relative; top: 12px; background-color: white; padding: 0 15px; }

for the trailing line to appear without adding unneccesary unsemantic markup i need to generate a span inside the blockquote :

        content here

preferably without making a separate shortcode for this and just use the native blockquote button.

can anybody help?

  • would resolving to a JS solution be easier? – George Ananda Eman Sep 23 '12 at 4:48
  • A CSS based solution would be most preferable if any of you can think of one – George Ananda Eman Sep 23 '12 at 16:37

If it's for styling purpose, the fastest solution I could think of is by using Javascript. As far as I know, modifying the output of TinyMCE tag would require editing of Wordpress core files, so it's more practical to append a <span> with Javascript. Something like this would do:

<script type="text/javascript>
   $('.post blockquote').wrapInner('<span />');

Where .post is the class for your single post container.

  • great, but i just noticed tinyMCE added a new <p> inside my blockquote... do you know how to prevent this? i tried doing unwrap but was having trouble getting the inner content – George Ananda Eman Sep 23 '12 at 5:03
  • Solved it by making my own unwrapInner function via jquery { solution updated on question } – George Ananda Eman Sep 23 '12 at 5:19
  • Was going to post something similar. Glad it helps. :) – deathlock Sep 23 '12 at 5:28
  • 1
    @GeorgeAnandaEman Please add your solution as edit to this ↑ answer (we will approve it), or as separate solution - and not as edit to the question. Thanks. – kaiser Sep 23 '12 at 8:47
  • @kaiser fixed, sorry about that – George Ananda Eman Sep 23 '12 at 16:07

Please use the default handling for WordPress: Editor styles - read in Codex about it. This means, that you can add any styling, that is attached to your main site, to your editor too.

// functions.php » hooked to `after_setup_theme`
add_editor_style( 'style.css' );
  • styling is not a problem, i needed to modify markup, i believe thats not possible through loading css.And i think i've read somewhere adding markup with :before :after selectors is not advisable. – George Ananda Eman Sep 23 '12 at 16:06
  • @GeorgeAnandaEman What exactly are you trying, that isn't possible with CSS? – kaiser Sep 23 '12 at 16:12
  • the ideal solution would be to hook a function for adding the span to the tinyMCE blockquote function. but i dont think such a hook exists... obviously editing core is not an option. adding a shortcode would add confusion to the user. Do share if you have any insights – George Ananda Eman Sep 23 '12 at 16:12
  • @GeorgeAnandaEman I just have taken a brief look at the tag tinymce archive. I guess there're quite some solutions out there, where you can see A) how to remove a built in button B) add your own button and C) format it the way you like. Your current solution is pretty hacky and can break quite easily. But again: What exactly do you need to style that isn't possible with CSS? Please edit your question and add your expected outcome. – kaiser Sep 23 '12 at 16:15
  • yes i agree, mine is very hacky. Only reason im justifying this is this would only fail if the user had JS disabled. I've set up fallbacks with modernizr so users without JS would just see the blockquote without the trailing line. which is acceptable. Edited my question and looking into the archives. – George Ananda Eman Sep 23 '12 at 16:31

SOLVED thanks to Deathlock :

// unwrap inner
var blockquotes = $('.post blockquote');

// rewrap with span
blockquotes.wrapInner('<span />');

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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