How to use wp_editor() on front end – WordPress

Here is simple way to use your wp_editor on your WordPress front end. The function is more useful you can customize it based on you needs.First of all its syntax and parameter for understanding of wp_editor(). Basically, the function is used by the admin section. Even though, we can use the same function on front end for our needs.

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

And now , We are going to provide the initial content and settings for our front end wp_editor(). Than we have to  give a editor_id to retrieve the contents while saving it.

// default settings - Kv_front_editor.php
$content = 'This content gets loaded first.';
$editor_id = 'kv_frontend_editor';
$settings =   array(
    'wpautop' => true, // use wpautop?
    'media_buttons' => true, // show insert/upload button(s)
    'textarea_name' => $editor_id, // set the textarea name to something different, square brackets [] can be used here
    'textarea_rows' => get_option('default_post_edit_rows', 10), // rows="..."
    'tabindex' => '',
    'editor_css' => '', //  extra styles for both visual and HTML editors buttons, 
    'editor_class' => '', // add extra class(es) to the editor textarea
    'teeny' => false, // output the minimal editor config used in Press This
    'dfw' => false, // replace the default fullscreen with DFW (supported on the front-end in WordPress 3.4)
    'tinymce' => true, // load TinyMCE, can be used to pass settings directly to TinyMCE using an array()
    'quicktags' => true // load Quicktags, can be used to pass settings directly to Quicktags using an array()
);

And we need to create a page to display this editor on  front end. You can get idea to create page Programmatically from this post.

That’s it for bringing our TinyMCE editor to front end of WordPress page.