Wordpress wraps span tags into p tags

Question

I am trying to get rid of the undesired behavior. TinyMCE after submitting a post wraps my <span> tags into the <p> tags.

Here is an example

<div class="conten__title-wrapper">
   <h5 class="conten__title">Wordpress</h5>
   <span class="content__icon fa fa-wordpress"></span>
</div>

I get the following output instead.

<div class="conten__title-wrapper">
   <h5 class="conten__title">Wordpress</h5>
   <p>
      <span class="content__icon fa fa-wordpress"></span>
   </p>
</div>

I have tried to solve the problem using the hook tiny_mce_before_init, like that.

   public function set_admin_hooks()
    {
        add_filter('tiny_mce_before_init', array($this, 'change_mce_options'),1);
    }

    public function change_mce_options($init)
    {
        $init["forced_root_block"] = "h4";
        $init["force_br_newlines"] = true;
        $init["force_p_newlines"] = false;
        $init['valid_children'] = "+a[div|p|ul|ol|li|h1|span|h2|h3|h4|h5|h5|h6]";
        $init["convert_newlines_to_brs"] = true;
        return $init;
    }

The hook function is called but it still doesn't affect anyhow on this weird behavior.

Also I can see this options in the output in the bottom of my page (inline Javascript)

<script type="text/javascript">
        tinyMCEPreInit = {
......

I am working in the Text Mode. I am creating all my posts using plain HTML.

What else can I try to get rid of this "awesome feature" ?

Answer 1

I have investigated this problem and recognized that it is not the TinyMCE fault, but the issue is caused by the the hook function wpautop instead. And tags are wrapped just before post is being displayed. So in order to fix this issue just remove the hook function like that.

   remove_filter( 'the_content', 'wpautop' );

This could be done for example in your functions.php file.