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>':'';
Back to top ^

Join Paulund

  • Get access to 100s of premium tutorials and downloadable content
  • Members content consists of Premium WordPress plugins, CSS packages, jQuery packages, tutorial demo files and templates for 100s of web development tutorials
  • In-depth development tutorials
  • Priority tutorial requests
  • Priority email development support
  • No ads

Here at Paulund you'll find Web Development tutorials and snippets focusing mainly on PHP, WordPress and CSS. Members will get access to premium tutorials that go into more detail about development with these languages. You will also get access to downloadable premium content based on the tutorial.

Join Paulund

Leave a Reply

Your email address will not be published. Required fields are marked *