Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to customize default wordpress editor?

Good to hear that Sony (wordpress3.3) has the new editor api wp_editor() that gives us the ability to use multiple instances of the editor in our custom fields with ease.

But I needed to to customize the default editor (for the main content) and couldn't figure out how to do it with this function. I needed to customize the editor for the my new custom post type called baner for which i needed to change the size of the editor with fewer buttons. I know i could do it by simply using a custom field instead but for some reason i want to use the content for the description of the banner.

Thank You in Advance.

like image 590
Dipesh KC Avatar asked Jan 11 '12 07:01

Dipesh KC


2 Answers

I was looking for a solution to place custom metabox above the default editor and i've found the solution to my old question (how to customize the default editor with the wp_editor)!

The solution was to unset the default editor first. Then create another metabox to to place the content then use wp_editor to create new its new instance, simple isn't it?

add_action( 'add_meta_boxes', 'page_meta_boxes' );
public function page_meta_boxes()
{

    global $_wp_post_type_features;
            //ive defined my other metaboxes first with higher priority
    add_meta_box(
        $id     =   'page_heading_meta_box',
        $title  =   __('Heading'),
        $callback   = array(&$this,'render_page_heading_metabox'),
        $post_type  =   'page',
        $context    =   'normal',
        $priority   =   'core'
        );
    add_meta_box(
        $id     =   'page_description_meta_box',
        $title  =   __('Description'),
        $callback   = array(&$this,'render_page_description_metabox'),
        $post_type  =   'page',
        $context    =   'normal',
        $priority   =   'core'
        );
    //check for the required post type page or post or <custom post type(here article)  
    if (isset($_wp_post_type_features['article']['editor']) && $_wp_post_type_features['post']['editor']) {
        unset($_wp_post_type_features['article']['editor']);
        add_meta_box(
            'wsp_content',
            __('Content'),
            array(&$this,'content_editor_meta_box'),
            'article', 'normal', 'core'
        );
    }
    if (isset($_wp_post_type_features['page']['editor']) && $_wp_post_type_features['page']['editor']) {
        unset($_wp_post_type_features['page']['editor']);
        add_meta_box(
            'wsp_content',
            __('Content'),
            array(&$this,'content_editor_meta_box'),
            'page', 'normal', 'low'
        );
    }
    }

In this way we have registered a new metabox called content . Now time to place the editor

        function content_editor_meta_box($post)
    {
        $settings = array(
            #media_buttons
            #(boolean) (optional) Whether to display media insert/upload buttons
            #Default: true
            'media_buttons' => true,

            #textarea_name
            #(string) (optional) The name assigned to the generated textarea and passed parameter when the form is submitted. (may include [] to pass data as array)
            #Default: $editor_id
            'textarea_name'=>'content',

            #textarea_rows
            #(integer) (optional) The number of rows to display for the textarea
            #Default: get_option('default_post_edit_rows', 10)

            #tabindex
            #(integer) (optional) The tabindex value used for the form field
            #Default: None
            'tabindex' => '4'

            #editor_css
            #(string) (optional) Additional CSS styling applied for both visual and HTML editors buttons, needs to #include <style> tags, can use "scoped"
            #Default: None

            #editor_class
            #(string) (optional) Any extra CSS Classes to append to the Editor textarea
            #Default:

            #teeny
            #(boolean) (optional) Whether to output the minimal editor configuration used in PressThis
            #Default: false

            #dfw
            #(boolean) (optional) Whether to replace the default fullscreen editor with DFW (needs specific DOM elements #and css)
            #Default: false

            #tinymce
            #(array) (optional) Load TinyMCE, can be used to pass settings directly to TinyMCE using an array()
            #Default: true

            #quicktags
            #(array) (optional) Load Quicktags, can be used to pass settings directly to Quicktags using an array()
            #Default: true
        );
        wp_editor($post->post_content,'content');

    }

Now you can fully customize your editor! This is how it looks now. Hope it is useful for you too! enter image description here

like image 171
Dipesh KC Avatar answered Sep 28 '22 02:09

Dipesh KC


You can customize the editor (TinyMCE) with a filter, as shown here. Code snippet attached:

function myformatTinyMCE($in)
{
 $in['plugins']='inlinepopups,tabfocus,paste,media,fullscreen,wordpress,wpeditimage,wpgallery,wplink,wpdialogs,wpfullscreen';
 $in['wpautop']=true;
 $in['apply_source_formatting']=false;
 $in['theme_advanced_buttons1']='formatselect,forecolor,|,bold,italic,underline,|,bullist,numlist,blockquote,|,justifyleft,justifycenter,justifyright,justifyfull,|,link,unlink,|,wp_fullscreen,wp_adv';
 $in['theme_advanced_buttons2']='pastetext,pasteword,removeformat,|,charmap,|,outdent,indent,|,undo,redo';
 $in['theme_advanced_buttons3']='';
 $in['theme_advanced_buttons4']='';
 return $in;
}
add_filter('tiny_mce_before_init', 'myformatTinyMCE' );

This code should be placed in your theme's functions.php file. You may want to print_r( $in ) to see all the keys that are passed (I've omitted some of them here because I don't believe the page that I linked to above is up-to-date). You can browse the latest source here. You'll find the filters you're looking for in function public static function editor_settings($editor_id, $set)

Also, you may also want to make sure that this only happens for your baner post_type, as this will affect all instances of the editor that are created.

like image 34
chrisn Avatar answered Sep 28 '22 02:09

chrisn