Adding Twitter Bootstrap Support in WordPress Visual Editor

Sabuj Kundu 22nd Apr 2013

How to add extra style into WordPress Visual Editor ?

Adding extra style/style sheet to wordpress visual editor:


function my_theme_add_editor_styles() {
add_editor_style('custom-editor.css');
}
add_action( 'init', 'my_theme_add_editor_styles' );


The above code will find custom-editor.css file in your theme folder and will load for your editor style. Please note that add_editor_style()  function/hook ensures that if your theme natively doesn’t support for custom editor style then it will  force it :P

How to add Twitter Bootstrap in Visual Editor ?

Yes at this point we can try to pass more custom style/css file names as an array

add_editor_style(array('custom-editor.css', 'custom-editor2.css', 'bootstrap.css'));


But problem is bootstrap.css may need it’s path for img folder and others and as usual other custom css files like you may add fontawesome.css files and practically you put the bootstrap or such library in a folder in your theme and add. So we just added one file and imported the other necessary css files from their original location


@import url("bootstrap/css/bootstrap.min.css");
@import url("fontawesome/css/font-awesome.min.css");


Happy WordPress Coding!