In many of the recent projects I worked on, I had a need for a customized, specialized, interactive component within the post. I needed custom HTML, CSS, and JavaScript to achieve this. But, if you have ever tried to write code in the WordPress content editor you have likely found it is a difficult and frustrating process. This is not unexpected. The content editor was designed to allow users to enter and style content without (or very minimal) touching of any code. It was not intended to be a code editor. You can end up with random
tags in your code, no code highlighting or tab indenting, just to name a few of the limitations.
Some may argue that code of this nature belongs in the theme files. There are a couple reasons why I took this approach rather than integrating the code into the theme files:
I felt making a custom template within the theme was overkill
would also involve integrating the post specific css/js into the theme files, would clutter the repo and files with files only relevant to that post
In general, it is good practice to separate site content with theme files. I feel that even though we are working with HTML, CSS, JS, it really is more content than ‘theme files’, so it is appropriate to include it within WordPress database rather than theme files
As with all of my plugins, I had a problem to be solved so I created a solution. I thought this solution might be useful to others so you can checkout the public plugin at https://wordpress.org/plugins/admin-code-editor/. You’ll find more detailed information there as well.