How to retain HTML5 Attributes on Markup

It is enough to add unfiltered_html capability to Editor role. Add the following code into your current theme’s functions.php: function wpse_change_capability() { $role = get_role( ‘editor’ ); if ( ! $role->has_cap( ‘unfiltered_html’ ) ) $role->add_cap( ‘unfiltered_html’ ); } add_action( ‘init’, ‘wpse_change_capability’, 10 ); Login as the user with Editor role. Test it by editing any … Read more

HTML5, WordPress and Tiny MCE issue – wrapping anchor tag around div results in funky output

[*] You need to modify the TinyMCE settings, specifically the valid_children setting. To accomplish this in WordPress, use the tiny_mce_before_init filter reference. Something like this (untested): add_filter(‘tiny_mce_before_init’, ‘modify_valid_children’); function modify_valid_children($settings){ $settings[‘valid_children’]=”+a[div|p|ul|ol|li|h1|h2|h3|h4|h5|h5|h6]”; return $settings; } You may be able to use +a[*] to capture all elements, but you’ll want to take care to avoid nested anchor … Read more

Output in XHTML or HTML 5 for plugins?

WordPress will not help you here. In back-end use conservative XHTML 5: <br />, but not <figure> (see WP coding standards). In front-end … it is hard to determine the Doctype and the usage of polyfills, so stay with regular HTML as long as possible or load the necessary polyfills from your plugin.

Why does `add_theme_support( ‘html5’, array( ‘comment-form’ )` disable client side validation?

No, it is not a bug. This is how core handles it. If you look into /wp-includes/comment-template.php, you’ll notice, that the only difference in <form> element, is novalidate attribute added, when current_theme_supports( ‘html5’, ‘comment-form’ ) is true. But there are other html elements within comment form, which are affected by theme’s choice of html5 support. … Read more

How to change the markup WordPress inserts for post images

As far as I know you could hook into the filter image_send_to_editor like this: function html5_insert_image($html, $id, $caption, $title, $align, $url) { $url = wp_get_attachment_url($id); $html5 = “<figure id=’post-$id media-$id’ class=”align-$align”>”; $html5 .= “<img src=”https://wordpress.stackexchange.com/questions/231693/$url” alt=”$title” />”; $html5 .= “</figure>”; return $html5; } add_filter( ‘image_send_to_editor’, ‘html5_insert_image’, 10, 9 ); For additional tags like data-pil-thumb-url and … Read more

TinyMCE editor is breaking my beautiful HTML

Regardless of what you have configured as valid children, WordPress handles p tags as well as line breaks in a very unique way. You’ll probably notice eventually, if you haven’t already, that when switching from the text editor to the visual editor and back that your <p> tags get stripped, similar to what occurs on … Read more

How do I turn off self-closing tags for markup in WordPress (for HTML5, or HTML4, for example)?

Line breaks are added by wpautop(), not wptexturize(). wpautop() is also the function that automatically adds paragraph tags. You’re better off fixing the <br />‘s than you are replacing the filter. Since wpautop() runs at priority 10, you can just hook in after that and fix it. add_filter( ‘the_content’, ‘html5_line_breaks’, 25 ); function html5_line_breaks( $content … Read more