Support » Themes and Templates » How do you skin the editor?

  • Hey guys! I have been trying to skin my editors for a couple of years now, and finally decided I’d try and dig into just how to do it. Well, it turns out it’s a lot more complicated than I thought it would be – – or at least, it’s not easy to find instructions that aren’t written in code-speak, which I don’t speak (yet).

    So I’ve been here:

    https://codex.wordpress.org/Editor_Style

    and here:

    https://codex.wordpress.org/Function_Reference/add_editor_style#Description

    and I pasted the code into my child theme’s functions.php and put the css folder in my child theme’s root, but nothing is changing. Is this supposed to change the editor in WP Admin?

    Maybe I don’t have the right stuff in my child theme’s functions.php – can I just paste the code, or does there have to be something else in there too, to make it work?

    I have spent quite a few hours over a couple of days trying to track down an easy how to and can’t find one, and nothing I’ve tried is working, so any help would be appreciated.

Viewing 12 replies - 1 through 12 (of 12 total)
  • Moderator stephencottontail

    (@stephencottontail)

    Can you post the contents of your editor-style.css and also the contents of your child theme’s functions.php?

    Sure! And thanks for your rapid response.

    Here is the functions.php code:

    <?php
    function my_theme_add_editor_styles() {
        add_editor_style( 'custom-editor-style.css' );
    }
    add_action( 'after_setup_theme', 'my_theme_add_editor_styles' );
    ?>

    Here is the line of css I used to test if it was working:

    div.mce-panel{
    background:#ff3300;
    }

    The child theme functions.php had other code in it, which I deleted, because when I added the above code beneath it, that broke my site. I thought I remembered maybe that php only had one beginning and end, but I’m not sure if it should be this:

    <?php
    code here
    
    code here
    ?>

    Or this:

    <?php
    code here
    ?>
    
    <?php
    code here
    ?>

    Because the instructions say to add the code with the beginning and closing php, and not to insert it if it’s already there.

    Here is the code that was in the child theme’s php that I deleted after it broke. I did not try to insert both codes in between the php opening and closing (that’s probably how it’s done, right? that would figure…):

    if (!function_exists('theme_special_nav')) {
        function theme_special_nav() {
            //  Do something.
        }
    }
    Moderator stephencottontail

    (@stephencottontail)

    Instead of div.mce-panel, try using this instead:

    body#tinymce {
    background: #ff3300;
    }

    As for your other question: In general, you should only use the opening <?php tag in your functions.php. If you have a PHP function that outputs HTML, you may need to use the closing tag on occasion, though.

    Only the opening tag for functions.php files? O.o then why do so many instructions have the closing? See here in the WordPress Codex in the instructions on how to change the editor, every example has the closing:

    https://codex.wordpress.org/Function_Reference/add_editor_style#Description

    So confusing…

    I made the changes, took the closing php tag off and inserted the css you suggested instead of mine, and still no change.

    Wait… am I supposed to put the name of my theme where it says my_theme in the php code? or am I doing it right by copying it exactly?

    And is this the code that makes sure my theme supports the edit the editor function, or maybe is the issue that my theme does not support it?

    WordPress is like an onion… a transdimensional onion…

    Moderator stephencottontail

    (@stephencottontail)

    While it’s recommended to only use the opening tag, using the closing tag usually won’t cause a problem. Can you post a link to your site?

    http://www.halodiehards.net <<I bet you didn’t see that coming, lol

    But you won’t be able to see the editor…?

    Thanks for your assistance, by the way!

    To add: I took a peek at your site whilst trying to find your profile here; nice writing 😀

    Moderator stephencottontail

    (@stephencottontail)

    I know that your theme supports custom editor styling because I just did it myself. Can you post the complete contents of custom-editor-style.css and functions.php to Pastebin and post the link here?

    And thanks for actually reading the site, by the way.

    That’s it, just what’s posted above: the one php paragraph with the closing php tag removed, and the one css paragraph you suggested. I don’t get it, I totally feel like I’m missing something obvious.

    Oh, I just realized something, I’m doing this on a testsite, so I gave you the the wrong url. The testsite url is http://themetest.halodiehards.org Sorry about that :/ hope it didn’t waste any of your time.

    Moderator stephencottontail

    (@stephencottontail)

    Can you temporarily enable debugging (http://codex.wordpress.org/Editing_wp-config.php#Debug) and see if there are any error messages that come up? Also, if you have access to them, do your server error logs say anything?

    Is there a step-by-step on the debugging process? I can get into my wp-config and edit it to true, but then that debugging page starts getting into all this other stuff that’s just making my head whirl. I have no idea where I actually see the debug report, it starts talking about php.ini and whether or not you have access to it but doesn’t even say where it is, and it’s using all these terms I’m not familiar with, like “you will need to override the default settings at run time”. O.o

    I *might* have access to server logs, but I signed in and took a look around, did searches, did Google searches, and nothing is coming up. Is there another term “server error logs” are known by that I can try searching?

    Moderator stephencottontail

    (@stephencottontail)

    Let’s not worry about debugging, then. I’m trying to figure out exactly what’s going wrong because everything works correctly on my local WP install when I use the exact code you posted.

    Can you temporarily replace the code in your child theme’s functions.php with this:

    <?php
    echo "Hello world!";
    ?>

    I want to see if your functions.php is being picked up correctly. If you see the text “Hello world!” right at the very top of your site, above the navigation bar, then your functions.php is at least being seen by WordPress.

    I have discovered the issue! I’m feeling very newb-like right now, but I neither remembered I had an editor plugin installed, nor did I realize it was using color css on my editor :/

    Ultimate TinyMCE was stopping the CSS from being used that we were telling the theme to use with the functions.php. I’m problem solving another issue, where the video custom post type isn’t displaying as a link beneath a YouTube video link, and I was in there looking at my plugins one at a time and deactivated that one to see if there was a conflict, went in to see if the CSS worked while it was deactivated, and sure enough!

    Thanks for educating me on the child theme functions.php, I’m now +1 level on the WordPress transdimensional onion, lol now why don’t I feel any wiser? O.o

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘How do you skin the editor?’ is closed to new replies.