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()

tinymce-advanced
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>':'';
}

Advertise here

Comment