August 19, 2011 - Warren Held

Add Custom CSS Styles to WordPress Editor

As I was typing up my first ever WordPress blog entry, I realized I wanted to be able to style parts of my entry using CSS (cascading style sheets).  Fortunately, the editor built into WordPress already has the possibility to do this; unfortunately, it is a little confusing to get it to work.  This is what I did to enable custom CSS Styles, and even use a custom editor stylesheet to allow me to see my styles in the editor, without having to preview my post.

  1. Install TinyMCE Advanced. This will allow you to add the styles drop-down menu to your editor.
  2. Activated TinyMCE Advaned, then go to your WordPress settings -> TinyMCE Advanced and drag the styles drop-down menu to your toolbar.
  3. Install Custom Styles Dropdown.  I got this from http://alisothegeek.com/2011/05/tinymce-styles-dropdown-wordpress-visual-editor/.  Just place the atg-styles-dropdown.php file in your wp-content/plugins/ folder.
    Custom Styles Dropdown
    If you get an error message after installing this plugin, you will probably need to delete the line add_editor_style(); near the top of atg-styles-dropdown.php.  After I installed the plugin I got an error message when trying to open my site.  After a little research I found that removing this line fixes the problem.
  4. You will need to edit atg-styles-dropdown.php (in WordPad or a web development program) to include the CSS classes you will be using.  There is a commented section of code at the bottom of this file that explains things.
  5. Create a styles.css file in your theme’s child theme folder.  (My theme was located in /wp-content/themes/mystique/ so I put my styles.css file in /wp-content/themes/mystique-extend/.  If your theme didn’t come with a child theme folder, just create one in your themes folder and name it the same as your theme but with a -child.  This is where you code the styles for the CSS classes you defined in your atg-styles-dropdown.php plugin file.
  6. Open your themes function.php file.  In my case it was wp-content/themes/mystique/functions.php and add the line add_editor_style(‘custom-editor-style.css’); near the top of the file (but after the <?php).  This causes WordPress to load the styles from custom-editor-style.css so when you apply a custom CSS class to text in the editor, the text style will be changed in the editor allowing you to see the styled text without having to look at the preview.  I tried putting this in my functions.php file in my child theme but it didn’t work for some reason.
    If you update your theme, the functions.php file in the theme folder will be overwritten, and you will have to add the add_editor_style(‘custom-editor-style.css’); line of code again.
  7. Create a custom-editor-style.css file in your theme folder.  Copy the code from your styles.css file you created earlier and paste it in this file.  When your WordPress loads up the editor, it will read the styles from this file, enabling it to apply your custom css styling in the editor view mode.  (This file is for back end styling only. The styles in this file will only style the text in the editor mode.  The text in the actual post will be styled according to the CSS classes you defined in atg-styles-dropdown.php and in your corresponding styles.css file in your theme child folder.
    This custom-editor-style.css file will be overwritten if you update your theme.  You should keep a backup copy of this file.  Also, don’t forget to add the add_editor_style(‘custom-editor-style.css’); line of code to your theme’s functions.php file once you update your theme.

If you did everything correctly, when you highlight text in the editor and apply your custom CSS class from the styles dropdown, it should show up in the editor, and in the post when you save it or click preview.  As you can see below I have applied my “Grey Highlight” CSS class to some text, and it styled the text accordingly inside the editor.

I am new to this whole WordPress business.  If someone knows where to place the add_editor_style line of code and the custom-editor-style.css file where it will still be read by WordPress but not overwritten when the theme is updated, please leave a comment and let me know.

WordPress CSS / tricks / WordPress /