Wednesday, November 10, 2010

Adding Rich Text Editor to Wordpress Sidebar Widget

Now i'm telling you on how to add a rich text editor inside a Text/HTML widget in a Wordpress Admin Panel - Widget Area. Here we are using CKE Editor as the Rich Text Editor
1. Download CKE Editor 
2. Extract the cke editor files to your 'wp-content\themes' folder
3. Go to admin header page \wp-admin\admin-header.php file and add the javascript reference in the head

4. Go to admin footer page. Add the below script above
< script type="text/javascript">
    CKEDITOR.replace( 'widget-text-4-text',
        toolbar :
            ['Bold', 'Italic','Underline','Strike', '-', 'NumberedList', 'BulletedList','Blockquote', '-', 'JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','Undo','Redo','Link','Unlink','RemoveFormat','TextColor','Image']

Replace 'widget-text-4-text' with your widget text area id. View the below image to know how to get your widget text area id.
5. Done
6. Go to wp-admin page -> Widgets -> Add Text/HTML widget to sidebar.
7. Voila.. Now you can see the RTE in action.

Popular Posts