Using The Wp_Editor() Function On Theme Options

In previous tutorial you would of learnt how you can create a themes options page for your Wordpress theme, I have also wrote tutorials on how you can create a colour picker and a date picker in your theme options panel.

In this tutorial we are going to create a function that can be used to add a TinyMce textbox on your theme options page. A tinyMce textbox allows your users to easily create HTML in a textbox without having any knowledge of how HTML works.

#Using The WP_Editor()

To create the TinyMce editor you need to use the Wordpress inbuilt function wp_editor().

<?php wp_editor( $content, $editor_id, $settings = array() ); ?>

• $content - This is the initial value for the wp_editor.
• $editor_id - This is the HTML ID used for the textarea you want to turn into a TinyMce.
• $settings - This is an array of arguments used to setup the TinyMce.

#wp_editor() Settings Arguments

These are the argument settings for the wp_editor(). - wpautop - Boolean value to display wordpress automatically adds a paragraph around text.

• media_buttons - Boolean value to display media buttons
• textarea_name - Name of the textarea on the forms, this value is passed when submitting the form.
• textarea_rows - The number of rows textarea displays
• tabindex - The tabindex used on the form field
• editor_css - This is additional CSS styling of the TinyMce
• editor_class - Additional CSS classes added to the TinyMce editor
• tinymce - Can be used to pass settings directly to TinyMce
• quicktags - Pass additional settings to the quicktags

#Create The TinyMce Textbox

To create a field using the settings API you need to use the function add_settings_field(). One of the parameters of this function is a callback function, which is what we will use to display the TinyMce textbox. The below code can be used to add a wp_editor() to the settings API.

add_settings_field( 'example_editor', 'Example WP Editor', 'pu_wp_editor', 'pu_theme_options.php', 'pu_editor_section', array() );

function pu_wp_editor($args){
     extract( $args );

     $class = (!empty($class))?$class:'';
		
     $settings = array(
		'textarea_name' => OPT_NAME.'['.$id.']', 
		'editor_class' => $class
     );
     
     wp_editor($value, $id, $settings );
		
     echo (!empty($desc))?'<br/><span class="description">'.$desc.'</span>':'';
}