Skip to content

Loading…

custom stylesheet support in the editor #120

Closed
wants to merge 1 commit into from

5 participants

@manne

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

@eddiemachado
Owner

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

@maxlapides

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 :)

@eddiemachado

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.

@manne

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.

@eddiemachado

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

@aniketpant

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.

@dwcouch

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
View
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>';
}
-
-
+/*********************
+CUSTOM STYLESHEET SUPPORT FOR THE EDITOR
+*********************/
+// 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: http://blog.kulturbanause.de/2011/12/wordpress-editor-komplexe-inhaltsstrukturen-benutzerfreundlich-pflegen/
+ 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.