WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I have serious trouble displaying code blocks in my theme.

I want to display something like:


And it works fine everywhere, but doing that inside code tag:


Displays code block looking like:


And setting code's CSS to:

white-space: pre-wrap;

Produces confusing:


Almost perfect, but where these come from?

Additionally I'm disabling WP AutoP and it works, but not within code tags:


remove_filter ('the_content',  'wpautop');
add_filter( 'the_content', 'wpautop' , 12);

Any ideas?

share|improve this question
code br { display: none } helps a bit, but it's a very primitive way of handling this problem. – Wordpressor Apr 19 '11 at 21:29
Why are you re-adding wpautop to the_content, after you first remove it? – Chip Bennett Apr 19 '11 at 21:46
is code set to: code {display:inline;} in css? – Chris_O Apr 20 '11 at 0:37
up vote 1 down vote accepted

You either need to add such code via the HTML editor (and not switch back to the Visual editor), or else you will need to pass a custom configuration to the Visual editor.

I have similar needs, and here's what I use (in functions.php):

// http://tinymce.moxiecode.com/wiki.php/Configuration
function cbnet_tinymce_config( $init ) {

// Change code cleanup/content filtering config

    // Don't remove line breaks
    $init['remove_linebreaks'] = false; 
    // Convert newline characters to BR tags
    //$init['convert_newlines_to_brs'] = true; 
    // Preserve tab/space whitespace
    $init['preformatted'] = true; 
    // Add to list of formats to remove with Remove Format button
    $init['removeformat_selector'] = 'b,strong,em,i,span,ins,del,h1,h2,h3,h4,h5,h6,pre';
    // Do not remove redundant BR tags
    $init['remove_redundant_brs'] = false;

// Add to list of valid HTML elements (so they don't get stripped)

    // IFRAME
    $valid_iframe = 'iframe[id|class|title|style|align|frameborder|height|longdesc|marginheight|marginwidth|name|scrolling|src|width]';
    // PRE
    $valid_pre = 'pre[id|name|class|style]';
    // DIV
    $valid_div = 'div[align<center?justify?left?right|class|dir<ltr?rtl|id|lang|onclick|ondblclick|onkeydown|onkeypress|onkeyup|onmousedown|onmousemove|onmouseout|onmouseover|onmouseup|style|title]';

    // Concatenate 
    $cbnet_valid_elements = $valid_iframe . ',' . $valid_pre . ',' . $valid_div;

    // Add to extended_valid_elements if it alreay exists
    if ( isset( $init['extended_valid_elements'] ) ) {
        $init['extended_valid_elements'] .= ',' . $cbnet_valid_elements;
    } else {
        $init['extended_valid_elements'] = $cbnet_valid_elements;

// Pass $init back to WordPress
    return $init;
add_filter('tiny_mce_before_init', 'cbnet_tinymce_config');

Specifically, you'll want to set remove_linebreaks to false, set preformatted to true, and probably add the <pre> tag to the whitelist.

share|improve this answer
you know what? I'm not leaving HTML... :/ I'm going to try your code and let you know it works. – Wordpressor Apr 19 '11 at 21:13
unfortunately your code doesn't work... Keep in mind that one CSS change (white-space) "produces" these <br/>'s in my case... Isn't that strange? Maybe there's something wrong with my CSS? Wrong. The BRs ale always there. The white-space pre-wrap just shows them. Holy Christ. This whole AutoP thing is so annoying! – Wordpressor Apr 19 '11 at 21:18
If you're not leaving the HTML editor, then you wouldn't need to configure TinyMCE (the Visual editor). – Chip Bennett Apr 19 '11 at 21:46

Your Answer


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.