• Home
• Archives
• Tools   Resources
• About Allcreatives

With WordPress 3.0, the creators really gave the blogging platform another dimension for those of us wanting to make the most of it as a fullly functioning CMS.

One key addition was the introduction of custom post types, used in conjunction with the custom post meta features the two become a very powerful tool for completely custom content authored via WordPress’s excellect UI.

In this very quick tip I’m going to assume that you’ve added a custom post type and have even gotten as far as adding a custom meta box to this post type. I’m then going to assume that you got stuck as I did with adding textareas and allowing for them to be formatted with the same flexibility as the main content area ie. with tinyMCE. So here is what a snippet of your theme’s function.php file will look like by now:

function meta_options(){
		global $post;
		$custom = get_post_custom($post->ID);
		$mytextarea = $custom["mytextarea"][0];

?>

	<label>My Textarea:</label> <textarea name="mytextarea" id="mytextarea"><?php echo $mytextarea; ?></textarea>

This may not be an exact copy of your code but yours will look very similar, probably just a little more complex. Now what I wanted todo but couldn’t figure out was how to take the textarea(s) set in the meta box above and add tinyMCE functionality to it. This is the code that I had to add to make it happen:

<script type="text/javascript">
				/* <![CDATA[ */

				jQuery(document).ready( function () {
					if ( typeof( tinyMCE ) == "object" && typeof( tinyMCE.execCommand ) == "function" ) {

						tinyMCE.execCommand("mceAddControl", true, "mytextarea");

					}
				});

				/* ]]> */
		</script>

Quite a simple piece of jQuery (already in use across the WordPress admin) that executes on the document being ready that uses the tincyMCE execCommand to add the WYSIWYG editor to one or more textareas using the id of the textarea which you’ll notice is in the function options.

So althogether the code for the metabox in your theme’s function.php will look a little something like this:

function meta_options(){
		global $post;
		$custom = get_post_custom($post->ID);
		$mytextarea = $custom["mytextarea"][0];

?>

	<label>My Textarea:</label> <textarea name="mytextarea" id="mytextarea"><?php echo $mytextarea; ?></textarea>

<script type="text/javascript">
				/* <![CDATA[ */

				jQuery(document).ready( function () {
					if ( typeof( tinyMCE ) == "object" && typeof( tinyMCE.execCommand ) == "function" ) {

						tinyMCE.execCommand("mceAddControl", true, "mytextarea");

					}
				});

				/* ]]> */
		</script>

You can also use the execCommand to add tinyMCE to multiple textareas like so:

function meta_options(){
		global $post;
		$custom = get_post_custom($post->ID);
		$mytextarea = $custom["mytextarea"][0];

?>

	<label>My Textarea:</label> <textarea name="mytextarea" id="mytextarea"><?php echo $mytextarea; ?></textarea>

<script type="text/javascript">
				/* <![CDATA[ */

				jQuery(document).ready( function () {
					if ( typeof( tinyMCE ) == "object" && typeof( tinyMCE.execCommand ) == "function" ) {

						tinyMCE.execCommand("mceAddControl", true, "mytextarea");
tinyMCE.execCommand("mceAddControl", true, "mytextarea2");
tinyMCE.execCommand("mceAddControl", true, "mytextarea3");
tinyMCE.execCommand("mceAddControl", true, "mytextarea4");

					}
				});

				/* ]]> */
		</script>

Grab our RSS feed for more of the same ...