[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.
How to Install TinyMCE
Installing TinyMCE takes three simple steps:
- Download the TinyMCE .zip from Moxiecode. (There is also a .gz file, if that suits you better.)
- Unzip the .ZIP file. You’ll get a directory called tinymce/.
- 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.
- Insert two lines of “script” code into your Prologue header.php file, just above the </head> tag:
mode : “textareas”
- 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.
mode : “textareas”,
theme : “advanced”
You’ll get something like the screenshot below:
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.
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).