My shortcode:

function fullwidthFunc($atts, $content = null) {
    $atts = shortcode_atts(array(
        "backcolor" => 'transparent',
        "backimgurl" => '',
        "color" => 'black',
        "padding" => '50px 10%'
    ), $atts);
    return '<div class="pr-fullwidth-row pr-row" style="background-color: '.esc_attr($atts['backcolor']).'; background-image: url(\''.esc_attr($atts['backimgurl']).'\'); color: '.esc_attr($atts['color']).'; padding: '.esc_attr($atts['padding']).';">'.$content.'</div>';
add_shortcode( 'fullwidth', 'fullwidthFunc' );

When I enter plain text (i.e. [fullwidth]This is a test[/fullwidth]), everything works fine. But, when I enter HTML (i.e. [fullwidth]<h1>This is a test</h1>[/fullwidth]) it outputs the result as plain text, with the <h1> tags displayed. Other than this, the entire shortcode works fine.

How do I get the HTML to be processed as HTML?

  • 3
    whatever you type in the visual editor is treated as literal characters. you either have to use the styling buttons on the editor, or type the tags in text mode.
    – Milo
    Commented Dec 12, 2015 at 17:33
  • Probably because you should put your editor from visual to text...
    – Kelvin Tan
    Commented Feb 2, 2017 at 19:34

1 Answer 1


For the sake of having @Milo's comment as an answer. Your code works as it should, it is just not possible to "write" HTML in the visual editor also in shortcodes. Shorcodes are not treated differently then any other text.

If you want formatted HTML in your shortcode you just need to use the normal visual editor formatting tools, or switch to the text editor.

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