Skip to content


custom stylesheet support in the editor #120

wants to merge 1 commit into from

5 participants


custom stylesheet support for the post and custom post types in the editor


What are the benefits of this? I'm not familiar with editor stylesheets.


Editor stylesheets are handy if you want to make WordPress's WYSIWYG editor display text with custom styles, usually to mimic the way the content would actually appear on your site. I have some clients who get confused that what they see in the editor isn't really what it's going to look like on the site (different fonts, spacing, etc.), so it's helpful to write some custom styles to solve this problem. Since the TinyMCE editor works by using iframes, it's not possible to simply enqueue these styles into the admin area, which is what add_editor_style() is for :)


Ah, makes sense now. Thanks @maxlapides.

So according to this function, I would also have to drop those two example css files into the css so they don't 404. Or at least the first one.


yes, you can create a "library/less/editor-style.less" file. i didn't know a meaningful content.
the "second" file is optional. it's only loaded if it exists and the post type matches.


I'm just waiting on me adding that css file. This will probably be committed for version 1.3


This would be a nice feature to have from the start. I have never tried it as such but it's quite simple to pull off. Just need to enqueue the stylesheets.

Will look forward to it in v1.3 :)

@eddiemachado Maybe you can put it as little block of code in bones.php and then users can uncomment it it they want to use it. The same way @manne has done in the pull request.


I added this to the bottom of my instance of admin.php.
While I'm mixed on the use of editor styling (I've decided to remove the WYSIWYG for most clients.) There are cases where a tweak to the admin is nice. Oft-times overriding plug-in uglies.

// Admin CSS
function bonesmod_wp_admin_css() {
wp_enqueue_style( 'bones_wp_admin_css', get_template_directory_uri() . '/library/css/wp-admin.css', false );
add_action( 'admin_head', 'bonesmod_wp_admin_css', 10 );

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
This page is out of date. Refresh to see the latest.
Showing with 18 additions and 2 deletions.
  1. +18 −2 library/bones.php
20 library/bones.php
@@ -48,6 +48,9 @@ function bones_ahoy() {
add_filter('the_content', 'bones_filter_ptags_on_images');
// cleaning up excerpt
add_filter('excerpt_more', 'bones_excerpt_more');
+ // adding custom editor stylesheets for posts and custom post types
+ add_action( 'admin_head', 'bones_custom_editor_stylesheet' );
} /* end bones ahoy */
@@ -365,6 +368,19 @@ function bones_excerpt_more($more) {
return '... <a href="'. get_permalink($post->ID) . '" title="Read '.get_the_title($post->ID).'">Read more &raquo;</a>';
+// the function enables custom stylesheet support for the post and custom post types in the editor
+function bones_custom_editor_stylesheet(){
+ global $current_screen;
+ // thanks to Jonas Hellwig
+ // src:
+ add_editor_style(
+ array(
+ 'library/css/editor-style.css',
+ 'library/css/editor-style-'.$current_screen->post_type.'.css'
+ )
+ );
Something went wrong with that request. Please try again.