Tarik Hamilton

A web developer actively writing about Vue.js, Laravel, WordPress, and more.

Fixing the TinyMCE Switch Editor Tabs on a Carbon Fields Based Theme (Haunted?)

Edit (2/10/2016): Carbon Fields responded in the comments and it looks like they’re back online. You can get Carbon Fields which is now a plugin available in the WordPress repository. Feel free to check my solution below still if you aren’t able to upgrade.

If you are a developer using Carbon Fields and you’ve updated WordPress to 3.9 and your theme’s switch editor tabs stop working, I have the fix for you. However, if you’re reading this … what do you know about Carbon Fields?

Who Made Carbon Fields?

Don’t care? Skip to the solution.

The spookiest, most ephemeral code I have ever worked on without a doubt is Carbon Fields. It only loses to a PHP framework I had to work with that was built by a teenager from a third-world country because it at least had a Github. Even though the third-world framework didn’t work too well, it was at least impressive considering the origin, so kudos to him.

I’m not sure if Carbon Fields is non-existent or part of the Carbon Theme (also seemingly non-existent), but people are still using it as seen on Github. There’s a website, sorta.

Screen Shot 2015-10-31 at 4.41.45 PM
Click at your own risk.

There’s a single topic on the WordPress Support forums about Carbon Fields. It’s titled Carbon Fields Rich Text broken in WP 3.9. The issue is similar, but not quite the same.

The spooky thing is, a user who goes by the name “CarbonFields” shared the code fix as an anonymous gist … and it is his only post.

I have always worked around Carbon Fields, but as my development skills improve, I have recently been working with it, if I had to, and recently had to fix it.

Fixing the TinyMCE Switch Editor Tabs #

Does this console error message look familiar?

Uncaught TypeError: switchEditors.switchto is not a function

This is the bug that occurred after a major WordPress update, speculated to be 3.9. When switching to the text editor from the visual editor of a custom field produced by Carbon Fields, the visual editor simply will not switch due to a JavaScript error.

Screen Shot 2015-10-31 at 4.26.41 PM

Solution

Navigate to /lib/js/Carbon_Field.php from your theme folder, or alternatively search the entire theme folder for “switchEditors.switchto(this).”

Replace this:

<div class="wp-editor-tabs">
  <button id="{{{ id }}}-tmce" class="wp-switch-editor switch-tmce" onclick="switchEditors.switchto(this);" type="button">
<?php _e('Visual', 'crb'); ?>
</button>
<button id="{{{ id }}}-html" class="wp-switch-editor switch-html" onclick="switchEditors.switchto(this);" type="button">
<?php _e( 'Text', 'crb' ); ?>
</button> </div>
With this:
<div class="wp-editor-tabs">
<button id="{{{ id }}}-tmce" class="wp-switch-editor switch-tmce" onclick="switchEditors.go( '{{{ id }}}' );" type="button">
<?php _e('Visual', 'crb'); ?>
</button>
<button id="{{{ id }}}-html" class="wp-switch-editor switch-html" onclick="switchEditors.go( '{{{ id }}}' );" type="button">
<?php _e( 'Text', 'crb' ); ?>
</button> </div>

Problem solved!

  • Whitney

    Would you mind posting the entire fields.js file somewhere (i.e. GitHub)?

    The rich text editor still isn’t loading, but I’m getting an additional error.

    I think I might have an older version somehow, but strangely I can’t find a newer version anywhere online to compare with.

    I’d appreciate the help 🙂 Thanks.

  • CarbonFields

    Carbon fields is now released as a free plugin, so you can grab the latest version at carbonfields.net