WordPress.org

Ready to get started?Download WordPress

Forums

how to enlarge the text size of the post editor (17 posts)

  1. sallam
    Member
    Posted 2 years ago #

    Greetings

    I need to enlarge the text size of the post editor please. How can I do that. I do not want to enlarge the text of posts themselves, I mean the size of text that I type in the editor. Being old, I find it difficult to check my spelling typos and such. It would be great if someone please showed me how to edit this in the theme I'm using. I didn't find anything related to the post editor in style css file.

    It would be great also if I can select a different font type for my editor too.

    There are many plugins that allows you to change both font type and size, but they do so for the posts, not for the editor itself as I want.

    Many thanks for any help given.

  2. ClaytonJames
    Member
    Posted 2 years ago #

    I've actually had some success with this method in the past. It's something you can add to your themes functions.php file ( I've dropped it in right after the opening <?php tag in a couple of different themes, and it's worked quite well...

    function add_more_buttons($buttons) {
    $buttons[] = 'hr';
    $buttons[] = 'del';
    $buttons[] = 'sub';
    $buttons[] = 'sup';
    $buttons[] = 'fontselect';
    $buttons[] = 'fontsizeselect';
    $buttons[] = 'cleanup';
    $buttons[] = 'styleselect';
    return $buttons;
    }
    add_filter("mce_buttons_3", "add_more_buttons");

    Here is a source for this info, and an explanation of what you're actually doing. Don't forget to make a backup before you edit any files, just to be safe.

    There is also a reference to this plugin on that page, if you prefer to try that instead of editing files. TinyMCE Advanced

    [edit] I may have not completely absorbed everything you were asking the first time, and I do apologize. If you save your editing rather than just viewing it with an increased font size using this method, it will also be reflected in your post or page.

    This may actually be a more relevant answer to your question: Can themes style the visual editor?

  3. I do not want to enlarge the text of posts themselves, I mean the size of text that I type in the editor. Being old, I find it difficult to check my spelling typos and such.

    That is just plain unacceptable. We'd better do something about that. ;)

    This trick may not work for non-English versions of the editor but here goes.

    The default font settings on the WordPress TinyMCE editor is to use a small font. That doesn't work for you so you can change the font size using a small plugin.

    To do that create a file called increase-editor-font.php and copy these lines into it.

    <?php
    /*
    Plugin Name: Increase Editor Font Size
    Description: This plugin will increase the size of the font in the editor only for easier reading and editing.
    */
    
    function plugin_mce_css( $mce_css ) {
      if (! empty( $mce_css ) ) $mce_css .= ',';
      $mce_css .= plugin_dir_url( __FILE__ ) . '/editor.css';
      return $mce_css;
    }
    add_filter('mce_css', 'plugin_mce_css');

    Or copy it from here. http://pastebin.com/1CxDVLm0

    That was taken from this Codex article http://codex.wordpress.org/Plugin_API/Filter_Reference/mce_css

    Now create a file called editor.css and copy these lines into it.

    body {
            /* font: 13px/19px Georgia, "Times New Roman", "Bitstream Charter", Times, serif; */
            font: 29px/32px Georgia, "Times New Roman", "Bitstream Charter", Times, serif;
    }

    Which is also at this link too. http://pastebin.com/M11GFBpJ

    The orignal body CSS came from wp-includes/js/tinymce/themes/advanced/skins/wp_theme/content.css

    Save those two files in your wp-content/plugins directory.

    Now from your Dashboard activate the plugin named Increase Editor Font Size and attempt to edit a post. The font should be considerably bigger now and easier to view.

    Or download the zip file from this link, upload it via WordPress Dashboard, and activate the plugin.

    Edit: Evening ClaytonJames! Beat me by 25 minutes! Between both solutions we may have nailed this one together.

  4. sallam
    Member
    Posted 2 years ago #

    Great! many thanks Jan Dembowski..
    But you say it will not work for non-English editor versions?
    Is there any additional code that would make it work in Arabic editor version please?

  5. It's all dependent on the CSS that the Arabic editor is using. For the English version I located the CSS and that plugin appends CSS that overrides the old font setting.

    If that body CSS for the Arabic version can be identified, then the editor.css file can be updated for that too and you'd get to view the increased font size in the editor in Arabic too.

    I'll look around; once it's found it's an easy thing to update in that plugin file.

  6. ClaytonJames
    Member
    Posted 2 years ago #

    @Jan Dembowski

    Plugin is ineffective for me. While Ozz's method works ok for me (using editor-style.css in the theme directory), I can't get the plugin to work on 3.3.1.

    What the heck am I doing wrong?

    [edit] Umm... Never mind. I'm afraid I just suffered a brain fog for a minute. It works perfectly! Thanks for the handy plugin!!!

  7. You're the second person who said so! Checking...

    Edit: Cleared browser cache? :P

  8. sallam
    Member
    Posted 2 years ago #

    Jan Dembowski,
    Actually it did work perfectly for my Arabic editor, without changing anything in those 2 files. (v3.3.1)

    This plugin would be great. Why is it not available in wordpress plugins?
    With your permission, can I add it there? I'm sure it would be handy for many..

  9. Jan's code doesn't seem to work for me (hmm) but this does:

    function plugin_mce_css( $mce_css ) {
    	if ( ! empty( $mce_css ) )
    		$mce_css .= ',';
    
    	$mce_css .= plugins_url( 'editor.css', __FILE__ );
    
    	return $mce_css;
    }
    
    add_filter( 'mce_css', 'plugin_mce_css' );
    p {
    	font-size: 50px;
    }
  10. ClaytonJames
    Member
    Posted 2 years ago #

    @Jan Dembowski,

    That's exactly what I needed to do. Cleared my browser cache and it worked great!

  11. Alex's PHP code is better (hey, I'm a tinkerer but I get smarter reading his code. I mean, have you looked at SyntaxHighlighter Evolved?) but that CSS didn't work for me.

    The font had increased but the line height was apparently inherited. The lines overlapped and didn't work when I edited a several hundred word post.

    sallam, I'm glad it's working out in Arabic as well. It further illustrates that I need to read up on how non-English fonts are handled by CSS and HTML. :)

    This plugin is a small modification and it's really a no-frills approach to adjusting WordPress settings. Personally, I don't think this belongs in the WordPress repository because in terms of coding it's really trivial.

    In the past I would have put this in a theme's function.php file but that's not scalable meaning you change your theme and lose the benefit.

    By putting this in a plugin you retain the adjustment regardless of the theme you are using.

  12. sallam
    Member
    Posted 2 years ago #

    Personally, I don't think this belongs in the WordPress repository because in terms of coding it's really trivial.

    But what it does is not trivial. I've been looking for such effect for years. Plugin users don't care whether the code is simple or complicated. What's important is that it does what they need.

    Either you add it yourself, or allow me to..

  13. Ha! Let me ask someone who knows better and has added plugins in the past to the repo.

    She's wise and if she's up to it can tell me what's missing for submitting a plugin to the repo.

    Also I'd prefer that this gets more testing than one night's coding exercises. It's worrisome that the code and CSS didn't work for Alex and I don't want to submit something that only works in some cases for some people.

    But that's not for tonight, as I am truly going to bed. I've been productive enough this evening.

  14. I think I found why it probably didn't work for Alex: add_editor_style(). But that's enough for now.

  15. Okay for this hack, this works better.

    function plugin_mce_css() {
    
    	$mce_css = plugins_url( 'editor.css', __FILE__ );
    
    	return $mce_css;
    }
    
    add_filter( 'mce_css', 'plugin_mce_css' );

    But it's really rude. Instead of appending the editor.css file to a list of existing CSS it just says "Me! Use me instead!" and eliminates what the add_editor_style() added.

    There has to be a more cooperative way to pull this off.

  16. alfie23
    Member
    Posted 1 year ago #

    i installed Jan's plug-in via the zip file and it works. yeay!!!
    if you get a chance, let us know if and how you can adjust the size, thanks

  17. if you get a chance, let us know if and how you can adjust the size, thanks

    In that editor.css file play with the font size values 29px/32px

    body {
            /* font: 13px/19px Georgia, "Times New Roman", "Bitstream Charter", Times, serif; */
            font: 29px/32px Georgia, "Times New Roman", "Bitstream Charter", Times, serif;
    }

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.