Title: custom CSS
Last modified: August 22, 2016

---

# custom CSS

 *  Resolved [edoron777](https://wordpress.org/support/users/edoron777/)
 * (@edoron777)
 * [11 years, 5 months ago](https://wordpress.org/support/topic/custom-css-97/)
 * My question is regarding the use my template CSS in the WP editor
    I have add
   a file named: editor-style.css to my child theme that includes my custom CSS 
   style In the plugin setting in the Add Pre-defined Styles, I have check the option
   of: Adds predefined styles to the “Formats” dropdown button. And add the button
   to the editor I can see\use pre defend CSS style that are part of the plugin 
   but I can not see “my CSS style” I try to read additional information about this
   subject in Editor Stylesheet
 * [http://learn.wpeditpro.com/editor-stylesheet/](http://learn.wpeditpro.com/editor-stylesheet/)
   
   but could not understand what I need to do to make it work Can you pleas instructs
   me Best regards’ Eyal Doron
 * [https://wordpress.org/plugins/wp-edit/](https://wordpress.org/plugins/wp-edit/)

Viewing 6 replies - 1 through 6 (of 6 total)

 *  Plugin Author [Josh](https://wordpress.org/support/users/josh401/)
 * (@josh401)
 * [11 years, 5 months ago](https://wordpress.org/support/topic/custom-css-97/#post-5636883)
 * Hi,
 * Okay.. when you add a stylesheet to the editor, it gets included in the editor
   initialization process.. and renders any rules into the content editor.
 * It does not automatically add the styles to the “Formats” dropdown. To do this;
   requires additional custom code.
 * The purpose of creating an editor stylesheet is to add additional styles which
   mimic your theme; so the content editor more closely resembles your theme.
 * Adding styles to the “Formats” dropdown requires completely different code. You
   can use the Pro version of WP Edit; or this link has a good example (read under“
   Add new items to Formats”):
    [http://www.wpexplorer.com/wordpress-tinymce-tweaks/](http://www.wpexplorer.com/wordpress-tinymce-tweaks/)
 *  Plugin Author [Josh](https://wordpress.org/support/users/josh401/)
 * (@josh401)
 * [11 years, 5 months ago](https://wordpress.org/support/topic/custom-css-97/#post-5637025)
 * Hi. Just checking back to see if you made any progress.
 *  Thread Starter [edoron777](https://wordpress.org/support/users/edoron777/)
 * (@edoron777)
 * [11 years, 5 months ago](https://wordpress.org/support/topic/custom-css-97/#post-5637026)
 * Not exactly. I try to read information by using the link that you send me but
   im not sure what I need to do
    The most “close” information to my question was:
   Load a stylesheet with your CSS Use this function to load a new stylesheet for
   use in your admin panel – some plugins/themes might already be adding a stylesheet
   so if your theme/plugin is doing that skip this and just add your custom CSS 
   and tweak the js (shown below). view source print? 1 function my_shortcodes_mce_css(){
   2 wp_enqueue_style(‘symple_shortcodes-tc’, plugins_url(‘/css/my-mce-style.css’,
   __FILE__) ); 3 } 4 add_action( ‘admin_enqueue_scripts’, ‘my_shortcodes_mce_css’);
 * But I’m not sure to what file i need to add this function
 *  Plugin Author [Josh](https://wordpress.org/support/users/josh401/)
 * (@josh401)
 * [11 years, 5 months ago](https://wordpress.org/support/topic/custom-css-97/#post-5637034)
 * Okay.. I think I may be confusing you.
 * You are describing two different parts of the editor.
 * 1) Custom CSS
    Adding a custom stylesheet to the editor allows the styles to 
   render properly in the editor. It does NOT add anything to the “Formats” dropdown
   box.
 * 2) Formats dropdown
    This is the dropdown box where my “predefined styles” appear.
   If you want to add more styles to this dropdown… then you will have to use separate
   code.
 * The link I provided above outlines the process.
 * > But I’m not sure to what file i need to add this function
 * This code will need to be placed in your child theme `functions.php` file.
 *  Thread Starter [edoron777](https://wordpress.org/support/users/edoron777/)
 * (@edoron777)
 * [11 years, 5 months ago](https://wordpress.org/support/topic/custom-css-97/#post-5637043)
 * Thanks for the update
    I have two separated tasks: 1. Enable the WP-Edit to use
   my theme\template CSS style the editor come with his own CSS style for example:
   when using the WP-Edit the font style and the size is not identical to the theme\
   template font style. Is there an option to “tell” WP-Edit that I want him to 
   use my theme CSS file?
 * 2. Formats dropdown
    add to the Formats dropdown menu a custom style that are
   included in my theme\template CSS style. Does this task could be accomplished
   in a simple way? For example, a PHP code that I can add that “tell” to WP-edit:“
   please include the following CSS style in the format menu”? Does the Professional
   version of WP-edit enable me to accomplish this task using GUI interface and 
   not a PHP code? Best regards’ Eyal Doron
 *  Plugin Author [Josh](https://wordpress.org/support/users/josh401/)
 * (@josh401)
 * [11 years, 5 months ago](https://wordpress.org/support/topic/custom-css-97/#post-5637052)
 * 1)
    Most themes that have an editor-style.css file, will automatically include
   it in the editor.
 * If you would like to include an additional CSS file in the editor, you can do
   so with a WordPress function, placed in your child theme `functions.php` file:
 *     ```
       function add_css_to_editor($init) {
   
           $css_file_url = 'path_to_your_css_file';    
   
           if(isset($init['content_css'])) {
               $init['content_css'] = $init['content_css'].','.$css_file_url;
           }else{
               $init['content_css'] = $css_file_url;
           }
       }
       add_action('tiny_mce_before_init', 'add_css_to_editor');
       ```
   
 * Change the `path_to_your_css_file` to the location of the CSS file you wish to
   include.
 * However, you shouldn’t simply replicate the theme css file. Instead, you should
   carefully select which styles to include in the editor, and create a new CSS 
   file with those styles.
 * 2)
    Yes.. the link I provided before shows code which illustrates how to add 
   additional formats to the dropdown.
 * Yes.. the pro version of WP Edit provides a GUI for creating additional style
   formats which are added to the dropdown.

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘custom CSS’ is closed to new replies.

 * ![](https://s.w.org/plugins/geopattern-icon/wp-edit_ffffff.svg)
 * [WP Edit](https://wordpress.org/plugins/wp-edit/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/wp-edit/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/wp-edit/)
 * [Active Topics](https://wordpress.org/support/plugin/wp-edit/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/wp-edit/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/wp-edit/reviews/)

 * 6 replies
 * 2 participants
 * Last reply from: [Josh](https://wordpress.org/support/users/josh401/)
 * Last activity: [11 years, 5 months ago](https://wordpress.org/support/topic/custom-css-97/#post-5637052)
 * Status: resolved