HOW TO : HTML5 Block Elements

I’m so happy to see a new version of this plugin. I spent weeks trying to fix the old one after it stopped working after Tinymce 4 was added to wordpress, but eventually gave up out of frustration.

This isn’t an issue, but more a “HOW TO”.

The plugin mentions that html5 markup is allowed, but currently there are no plugins out there to enable this feature through the visual editor so you’re stuck to adding the html5 elements like <section> through the html editor. Unfortunately there’s not much documentation out there on this.

Anyway, for those of you searching for how to add <a href=”http://www.tinymce.com/tryit/html5_formats.php
http://www.tinymce.com/tryit/html5_formats.php”>tinymce HTML5 style formats to the visual editor here’s how:

Add the following to your functions.php or as a mu-plugin:

function mce_html5_formatting( $init ) {
    $init['block_formats'] = 'Paragraph=p;Heading 1=h1;Heading 2=h2;Heading 3=h3;Heading 4=h4;Heading 5=h5;Heading 6=h6;';

    $style_formats = array(
        array(
            'title' => 'Headers',
                'items' => array(
                array(
                    'title' => 'Header 1',
                    'block' => 'h1'
                ),
                array(
                    'title' => 'Header 2',
                    'block' => 'h2'
                ),
		array(
                    'title' => 'Header 3',
                    'block' => 'h3'
                ),
		array(
                    'title' => 'Header 4',
                    'block' => 'h4'
                ),
		array(
                    'title' => 'Header 5',
                    'block' => 'h5'
                ),
		array(
                    'title' => 'Header 6',
                    'block' => 'h6'
                )
            )
        ),
        array(
            'title' => 'Blocks',
                'items' => array(
                array(
                    'title' => 'Paragraph <p>',
                    'block' => 'p'
                ),
                array(
                    'title' => 'Arbitrary Division <div>',
                    'block' => 'div'
                ),
		array(
                    'title' => 'Preformatted Text <pre>',
                    'block' => 'pre'
                )
            )
        ),
        array(
            'title' => 'Containers',
                'items' => array(
                array(
                    'title' => 'Section',
                    'block' => 'section',
		    'wrapper' => 'true',
                     'merge_siblings' => 'false'
                ),
                array(
                    'title' => 'Blockquote',
                    'block' => 'blockquote',
		    'wrapper' => 'true',
		    'icon' => 'blockquote'
                ),
                array(
                    'title' => 'Figure',
                    'block' => 'figure',
		    'wrapper' => 'true'
                )
            )
        )
    );

    $init['style_formats'] = json_encode( $style_formats );

    $init['style_formats_merge'] = false;
    return $init;
}
add_filter('tiny_mce_before_init', 'mce_html5_formatting');

function mce_add_buttons_styleselect( $buttons ){
    array_splice( $buttons, 1, 0, 'styleselect' );
    return $buttons;
}
add_filter( 'mce_buttons_2', 'mce_add_buttons_styleselect' );

Note the only actual html5 specific element I added in this example is <section> and <figure>. There are plenty others you could add though. In the example on tinymce’s website they included hgroup. This is no longer supported by HTML5 though, so you probably don’t want to add that one.

Hope this helps some of you.

https://wordpress.org/plugins/preserved-html-editor-markup-plus/