WordPress contains two built-in editors that allow you to edit theme files directly from within the browser, they the Theme Editor and Plugin Editor. By default, the editor looks very simple, and hard to edit because the colors are totally black and grey. In this tutorial, I will show you how to integrate CodeMirror.js into the editors to make the look prettier. Our code snippets will be highlighted with more color, the editors will even have line numbers, and more.

Step 1 Preparing

First of all, you need to download the CodeMirror library. It is a powerful library, and supports many programming languages and features. After downloading and extracting, let's place this directory into your theme's directory (I use Twenty Eleven as a demo) and name it codemirror.

Then, we create a file called codemirror.php inside this directory and include this file in the functions.php file of your theme.

// functions.php
include("codemirror/codemirror.php");

Open our codemirror.php and move to the next step.

"CodeMirror is a JavaScript component that provides a code editor in the browser. When a mode is available for the language you are coding in, it will color your code, and optionally help with indentation."

Step 2 Register Scripts and Styles

add_action('load-theme-editor.php', 'codemirror_register');
add_action('load-plugin-editor.php', 'codemirror_register');

function codemirror_register() {

	wp_register_script('codemirror', get_template_directory_uri()."/codemirror/lib/codemirror.js");
	wp_register_style('codemirror', get_template_directory_uri()."/codemirror/lib/codemirror.css");

	wp_register_style('cm_blackboard', get_template_directory_uri()."/codemirror/theme/blackboard.css");

	wp_register_script('cm_xml', get_template_directory_uri()."/codemirror/xml/xml.js");
	wp_register_script('cm_javascript', get_template_directory_uri()."/codemirror/javascript/javascript.js");
	wp_register_script('cm_css', get_template_directory_uri()."/codemirror/css/css.js");
	wp_register_script('cm_php', get_template_directory_uri()."/codemirror/php/php.js");
	wp_register_script('cm_clike', get_template_directory_uri()."/codemirror/clike/clike.js");

	add_action('admin_enqueue_scripts', 'codemirror_enqueue_scripts');
	add_action('admin_head', 'codemirror_control_js');
}

Above snippets will hook the codemirror_register function into two hooks, load-theme-editor.php and load-plugin-editor.php. It means when the Theme Editor or Plugin Editor is requested, they will call our codemirror_register function.

Core Library

Inside this function, we register all needed script and style files. codemirror.js and codemirror.css are two main components of the CodeMirror library, they are in the lib directory.

Theme

blackboard.css is a theme file, the theme directory in the CodeMirror library also has many other theme files, you can change depending on your preferences. There are more available themes, see them here:

• Default:
  
• Blackboard:
  

Mode

Modes are JavaScript programs that help color (and optionally indent) text written in a given language. Their value is a MIME type value, these depend on the language we work with. You can see all modes in the mode directory within the CodeMirror library. Because WordPress' built-in Editor can edit HTML, PHP, CSS (more here), so I register theses scripts on the next lines of codemirror_register function. The reason why I've registered XML and Clike scripts will be explained later.

After registering all script files, we have to enqueue them every time our admin section loads. So I add the codemirror_enqueue_scripts function to the admin_enqueue_scripts hook. Then we also embed a control javascript file (we can modify, add or delete options script) of CodeMirror to admin head.

Step 3 Enqueue Scripts

function codemirror_enqueue_scripts() {
	wp_enqueue_script('codemirror');
	wp_enqueue_style('codemirror');

	wp_enqueue_style('cm_blackboard');

	wp_enqueue_script('cm_xml');
	wp_enqueue_script('cm_javascript');
	wp_enqueue_script('cm_css');
	wp_enqueue_script('cm_php');
	wp_enqueue_script('cm_clike');
}

The above function has no big issue to explain, it just enqueues all scripts that we registered earlier. Open the Theme Editor and view source and you will see these scripts were embedded in the header.

Step 4 Hook Up Script

Overview Usage

Basically, our script is:

function codemirror_enqueue_scripts() {
?>
	<script type="text/javascript">
		jQuery(document).ready(function() {
			var editor = CodeMirror.fromTextArea(document.getElementById("newcontent"));
		})
	</script>
<?php
}

This function will be embedded in the admin head section, CodeMirror will effect any element that contains the newcontent ID, because our textarea element that holds our code snippets has this ID.

When using CodeMirror without any options, CodeMirror will use its own default options. For more using more options, we can do so like this:

function codemirror_enqueue_scripts() {
?>
	<script type="text/javascript">
		jQuery(document).ready(function() {
			var editor = CodeMirror.fromTextArea(document.getElementById("newcontent"), {
				lineNumbers: true,
				mode: "text/javascipt",
				theme: "blackboard"
			});
		})
	</script>
<?php
}

Those additional options will make our editor have line numbers and the blackboard theme. Notice in the mode option, this option will determine what mode CodeMirror should use (In step 2, we mentioned what mode is). Because each file type has its own mode, we have to define this option to make CodeMirror work fine and display more accurately. Below are some MIME type values:

• "text/javascript" for JavaScript mode
• "text/css" for CSS mode
• "application/x-httpd-php" for PHP mode, this mode require XML, JavasScript, CSS and C-Like modes. That is the reason we must register XML and C-Like scripts above.

Simple HTML/PHP mode based on the C-like mode. Depends on PHP, XML, JavaScript, CSS, and C-like modes. (see here)

Advanced Usage

For best usage, we need to define what file type we're editing to use the correct mode. Our goal is to make the script use the right mode automatically. Here is a solution:

function codemirror_control_js() {
	if (isset($_GET['file'])) { // $_GET['file'] holds path of file we edit
		$filename_to_edit = end(explode("/", $_GET['file'])); // We need to get file name
		$file = substr($filename_to_edit, stripos($filename_to_edit, '.')+1); // Get file extension
		switch ($file) {
			// And assign appropriate MIME type value to $file variable
			case "php": $file = "application/x-httpd-php"; break;
			case "js" : $file = "text/javascript"; break;
			case "css": $file = "text/css"; break;
		}
	}
	else {
		$file_script = $_SERVER['SCRIPT_NAME'];
		$file_script = end(explode('/', $file_script));
		if ($file_script == 'theme-editor.php')
			$file = "text/css";
		else
			$file = "application/x-httpd-php";
	}

	?>
	<script type="text/javascript">
		jQuery(document).ready(function() {
			var editor = CodeMirror.fromTextArea(document.getElementById("newcontent"), {
				lineNumbers: true,
				mode: "<?php echo $file ;?>",
				theme: "blackboard"
			});
		})
	</script>
	<?php
}

Every time we click on a file to edit it, the $_GET['file] variable will hold the path to that file. For example:

• wp-admin/theme-editor.php?file=header.php
• wp-admin/theme-editor.php?file=style.css
• wp-admin/plugin-editor.php?file=akismet.php

And these code snippets will help us to define file extensions that we're editing:

	$filename_to_edit = end(explode("/", $_GET['file'])); // We need to get file name
	$file = substr($filename_to_edit, stripos($filename_to_edit, '.')+1); // Get file extension

Then depending on each extension, we assign a different MIME type value for that match.

Except for the first time we open the Theme or Plugin Editor, we don't click on any file to edit so the $_GET['file'] variable doesn't exist. WordPress will open a default file to edit automatically. For the Theme Editor, the default file is the style.css file and another PHP file in the Plugin Editor. So we need to define the MIME type value as "text/css" in the Theme Editor and "application/x-httpd-php" in the Plugin Editor.

Styling

Everything's done but the editor looks messy. We need to modify the CSS file a little. In the lib directory, we open the codemirror.css file, find below code snippets:

.CodeMirror-scroll {
	overflow-x: auto;
	overflow-y: hidden;
	height: 300px;
	/*
	 This is needed to prevent an IE[67] bug where the scrolled content
	 is visible outside of the scrolling box.
	*/
	position: relative;
	outline: none;
}

Replace with:

.CodeMirror, .CodeMirror div {
	margin-right: 0!important;
}
.CodeMirror-scroll {
	overflow-x: auto;
	overflow-y: hidden;
	height: 450px;
	/*
	 This is needed to prevent an IE[67] bug where the scrolled content
	 is visible outside of the scrolling box.
	*/
	position: relative;
	outline: none;
}

Your Turn

CodeMirror has many features, it is a really powerful javascript library. Read CodeMirror's manual for getting fully informed on the features available. You can find out the other features or how to customize them, and add to your WordPress code yourself. It's quite easy: register, enqueue and hook up the script, like the way I've done above.

Conclusion

In this tutorial, I don't focus too much on CodeMirror and its features, I just demonstrate the way to integrate it into the WordPress Editor to make our Editor look prettier or easy to work with. Hope this tutorial was useful for everybody.

If you think my tutorial has any problem, or you have better ideas, or something to add, leave your comments below! We would very much appreciate it.