Resolving a WordPress plugin conflict between Oxygen and Enlighter

One of the challenges that WordPress users face is conflicts between plugins. Two reputable, useful plugins may each work perfectly well on their own but conflict with each other when they are both activated on the same WordPress site. Usually it is easy to resolve the conflict by identifying the two conflicting plugins and choosing which of them you can most easily leave without.

In some cases, though, a conflict can leave problems behind even when one of the plugins concerned has been deactivated. A little while back I hit a conflict between the Oxygen 2 website builder (version 2.1 at the time) and the Enlighter syntax highlighter plugin; hopefully sharing my experience will help others either avoid the problem or minimise the pain involved.

I'd returned to an Oxygen template that had been working perfectly, only to find it was now acting rather strangely in the template editor. The template was one that styled the inner content for posts and this was the behaviour I was experiencing:

  • A <div> in the flow of content had migrated to the top left of the page in the editor
  • Any new element added would appear in the main panel of the editor but not be listed under Structure
  • This error had also appeared a couple of times:

Uncaught TypeError: Cannot read property 'replace' of undefined on line #309 in https://www.technicallyproduct.co.uk/wp-content/plugins/oxygen/component-framework/angular/controllers/controller.dragdroplists.js?ver=2.1.2&fbclid=IwAR0QLOOd87inFol7tQS90oqupOZAM_​yoUHYmDjpj3I6AME_​wTj8OhmE0mAo

Published posts still all looked OK, but perhaps that was because I hadn't saved the broken template since noticing the strange problems.

I tried various things to resolve the problem, including resaving permalinks (a common Oxygen fix!), unticking 'Cache Universal CSS' in Oxygen, disabling plugins, disabling caching in my web host, and re-signing Oxygen shortcodes - all without any luck.

When I finally ran out of ideas, I contacted the helpful Oxygen support team - first by Facebook and then by email. They came back with the following diagnosis:

"The Enlighter plugin is conflicting with Oxygen, which is likely responsible for the malformation of the Oxygen design's structure and/or shortcodes. Disabling the Enlighter plugin alleviates the many console errors that were present, but likely won't fix the already broken template, so you'll need to re-create it once this plugin is deactivated."

I sighed at this, thinking that recreating the template would be a long and laborious job. In the end, it only took half an hour or so. I also moved from Enlighter to a similar plugin called Crayon Syntax Highligher, which although not updated since 2016 has so far has played very nicely with Oxygen.

It was also useful to know how the Oxygen team identified Enlighter as the cause of the conflict in the first place:

"The indicator that there was a conflict was only visible in the browser console (using Chrome dev tools). Once I disabled all plugins, the console errors disappeared, so the next step is to re-enable plugins one by one until the error re-appears. Re-enabling Enlighter brought the errors back."

The experience made me think how useful it would have been to be able to roll back the site to a previous version (ie before I'd installed Enlighter and broken the template). Now I'm using Blogvault to back things up.

Leave a Reply

Your email address will not be published. Required fields are marked *

Copyright © James Clark
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram