WordPress Hacks: Adding TinyMCE Editor to the Prologue Theme

[UPDATED: Please see my first comment before reading.]

In 48 Unique Ways to Use WordPress, the Prologue WP theme figured very significantly in the examples. Prologue, if you’re not familiar with it, gives WordPress users (both wordpress.com and self-hosted) Twitter-like microbloggging functionality. But out of the box, the theme has a very plain edit area (see image below), and adding links, images, etc., is tedious.

Fortunately, there’s a really easy fix to this problem: TinyMCE editor. TinyMCE is a Javascript-based freeware editor. If you have a recent version of WordPress, it’s the default “visual” editor that you get in the admin panel. Thanks to its easy integration features, we can use this as a replacement to the default HTML message editor in the Prologue theme. And you won’t believe how incredibly easy it is to hack it. I think it took me about 2 minutes, not including download and installation. I’m actually surprised that Automattic didn’t do it themselves.

How to Install TinyMCE

Installing TinyMCE takes three simple steps:

1. Download the TinyMCE .zip from Moxiecode. (There is also a .gz file, if that suits you better.)
2. Unzip the .ZIP file. You’ll get a directory called tinymce/.
3. Upload this directory pretty much anywhere you want on your web server. I used the root. So as an example, I now have the directory http://filmscenic.com/tinymce/ on my FilmScenic site. Below that is the scripts/ directory, where the important code lives.

How to Hack the Prologue Theme to Use TinyMCE

It’s really quite easy to hack your Prologue WP theme installation to incorporate the TinyMCE editor on the home page of your site.

1. Insert two lines of “script” code into your Prologue header.php file, just above the </head> tag:

   <script language=”javascript” type=”text/javascript” src=”/tinymce/jscripts/tiny_mce/tiny_mce.js”></script>
   <script language=”javascript” type=”text/javascript”>
   tinyMCE.init({
       mode : “textareas”
   });
   </script>

2. Change the src parameter’s URL value to point to the right path. In the code above, I’ve already changed the URL to be relative to the server root.

If you don’t feel comfortable doing this, just download this copy of the header.php file (for Prologue theme), change the extension from .phps to .php, and replace the original in your Prologue theme directory. That’s it, you’re done. Please note that this header.php uses the “Advanced” mode TinyMCE editor, as discussed somewhere below.

How to Use TinyMCE From Your Prologue-Based WordPress Blog

Believe it or not, that’s it. TinyMCE should work now. Refresh your Prologue site’s home page in your browser. If necesary, use F5 in Windows, or the equivalent for other systems, to do a “hard refresh”. You should see the simple default editor, as shown in the screenshot below.

How to Enable the Advanced Features of TinyMCE

Of course, you’ve probably seen all the great extra features of TinyMCE from within your WordPress admin panel’s editor page. You can get the same features and more for your Prologue site. The simple editor form that you’ll get from the steps above doesn’t even have a way to add a hyperlink to text, so that’s the least you’d want. Here’s how to activate the extra features.

Modify the code snippet within one of the script lines, as indicated in this Advanced Theme example.

tinyMCE.init({
    mode : “textareas”,
    theme : “advanced”
});

You’ll get something like the screenshot below:

If you need even more advanced features, there are additional examples accessible from the drop-down menu at the top right of the Moxiecode TinyMCE example page. I’ve used the “All buttons and plugins” mode at Filmscenic.com, as seen in the screenshot below. It probably has far more features than necessary, but I can always tone it down if there are too many options. In fact, if you study the Javascript code snippet for one of the more advanced modes, you’ll see that there are a number of TinyMCE “plugins” enabled. Just start removing plugin names and play around until you have the configuration you want. (Or you could actually read the TinyMCE wiki.)

Caveats

Some of the advanced TinyMCE modes take up more space horizontally than the Prologue theme is set up for. This may cause problems in browsers other than Firefox (the only one I use for development and blogging, but not for browsing). The edit area is sizable, thanks to the grippy in the bottom right corner, but you cannot make the editor less wide. So you’ll have to tweak your Prologue installation’s stylesheet(s) to fix the width of the blue background area – provided you don’t like the appearance. On the other hand, since only registered authors will ever see the editor area, it might not be a big deal.

Note

If you do any film blogging and want an account on Filmscenic, to build links to your site(s) or to that of friends, please drop me a Perf PM with your full name and other details (desired WP username, email address, site URL).