Rewrite Semantic UI HTML Tags In WordPress

Rewrite some of the regular HTML tags and add specific Semantic UI CSS classes instead of extending TinyMCE with additional semantic ui HTML tags:

function rewrite_semantic_ui( $post_content )
    // rewrite html tags just on frontend
    if( is_admin() )
        return $post_content;

    // add css classes to the opened headline tag (h1-h6)
    $post_content = preg_replace('/<([h1|h2|h3|h4|h5|h6^>]+)*?>/i', '<$1 class="ui header">',        $post_content);

    // add css classes to the opened unordered list tag
    $post_content = preg_replace('/<([ul^>]+)*?>/i',                '<ul class="ui list">',           $post_content);

    // add css classes to the opened ordered list tag
    $post_content = preg_replace('/<([ol^>]+)*?>/i',                '<ol class="ui ordered list">',   $post_content);

    // replace the horizontal rule (<hr/>) with an custom divider from semantic ui
    $post_content = preg_replace('/<([hrs?/?]+)*?>/i',               '<div class="ui divider"></div>', $post_content);

    return $post_content;

// add filter for the post and widget content
add_filter('the_content', 'rewrite_semantic_ui');
add_filter('widget_text', 'rewrite_semantic_ui');
Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn