How to remove the “Path” line in the WordPress Editor for end users who are submitting a form?

This is how the tinymce statusbar displays on my intsall:

<div id="mceu_34" class="mce-statusbar mce-container mce-panel mce-stack-layout-item mce-last" hidefocus="1" tabindex="-1" role="group">
    <div id="mceu_34-body" class="mce-container-body mce-flow-layout">
        <div id="mceu_35" class="mce-path mce-flow-layout-item mce-first mce-last">
            <div role="button" class="mce-path-item" data-index="0" tabindex="-1" id="mceu_35-0" aria-level="0">p</div>
            <div class="mce-divider" aria-hidden="true"> » </div>
            <div role="button" class="mce-path-item mce-last" data-index="1" tabindex="-1" id="mceu_35-1" aria-level="1">strong</div>   
        </div>
    </div>
</div>

so this suggests hiding it with CSS.

You probably want to keep the statusbar visible but hide the div.mce-path.

The tiny_mce_before_init hook might come useful to target the tinymce editor:

add_filter( 'tiny_mce_before_init', function( $settings )
{
    ?><style>.mce-path{display:none;}</style><?php
    return $settings;
} );

But there must be a native way, so I simply searched for the mce-path keyword and this question on StackOverflow popped up first:

Remove path in status bar in TinyMCE4

There it’s suggested by @BeckJohnson to use:

tinymce.init({ elementpath: false });

so we can try that with:

add_filter( 'tiny_mce_before_init', function( $settings )
{
    $settings['elementpath'] = false;
    return $settings;   
});

and that seems to do the trick.

Leave a Comment