Customizing WP Editor in WordPress

Date Posted: August 17, 2015, 6:19 am


I was recently working on a freelance project and one of the tasks is to replace all the textareas in the front-end to the default WYSIWYG editor of WordPress. They also wanted to use a limited number of buttons for both Visual and Text tab. After some research, I was able to come up with my own customized editor that works perfectly in both front-end and back-end:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<?php      
$content = 'The content to be loaded';
$editor_id = 'my_editor_id';
$settings =   array(
    'wpautop' => true, // enable auto paragraph?
    'media_buttons' => false, // show media buttons?
    'textarea_name' => $editor_id, // id of the target textarea
    'textarea_rows' => get_option('default_post_edit_rows', 10), // This is equivalent to rows="" in HTML
    'tabindex' => '',
    'editor_css' => '', //  additional styles for Visual and Text editor,
    'editor_class' => '', // sdditional classes to be added to the editor
    'teeny' => true, // show minimal editor
    'dfw' => false, // replace the default fullscreen with DFW
    'tinymce' => array(
        // Items for the Visual Tab
        'toolbar1'=> 'bold,italic,underline,bullist,numlist,link,unlink,forecolor,undo,redo,',
    ),
    'quicktags' => array(
        // Items for the Text Tab
        'buttons' => 'strong,em,underline,ul,ol,li,link,code'
    )
);
wp_editor( $content, $editor_id, $settings );                      
?>

For the complete list of quicktags and tinymce buttons, please refer to the following links:
https://codex.wordpress.org/Quicktags_API
http://www.tinymce.com/wiki.php/TinyMCE3x:Buttons/controls

Function based:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
function cvf_content_editor( $textarea_id, $default_content ) {
   
    $content = 'The content to be loaded';
    $editor_id = 'my_editor_id';
    $settings =   array(
        'wpautop' => true, // enable auto paragraph?
        'media_buttons' => false, // show media buttons?
        'textarea_name' => $editor_id, // id of the target textarea
        'textarea_rows' => get_option('default_post_edit_rows', 10), // This is equivalent to rows="" in HTML
        'tabindex' => '',
        'editor_css' => '', //  additional styles for Visual and Text editor,
        'editor_class' => '', // sdditional classes to be added to the editor
        'teeny' => true, // show minimal editor
        'dfw' => false, // replace the default fullscreen with DFW
        'tinymce' => array(
            // Items for the Visual Tab
            'toolbar1'=> 'bold,italic,underline,bullist,numlist,link,unlink,forecolor,undo,redo,',
        ),
        'quicktags' => array(
            // Items for the Text Tab
            'buttons' => 'strong,em,underline,ul,ol,li,link,code'
        )
    );
   
    wp_editor( $content, $editor_id, $settings );
   
}

About author


Carl Victor Fontanos

A fine gentleman specializing in front-end and back-end development with extensive experience building high performance web applications that keeps users engaged and help businesses grow.

 
Hire Me