Code Editor Theme

[Sheri17]

Do the instructions at the bottom of this page https://theme.co/docs/code-editors for adding a custom code editor theme work for locally hosted css theme files? I have attempted to specify the url for a locally hosted css file and it does not use the file.

If this is not the correct approach, please advise.

I know it isn’t an issue with the .css file itself, because to test this, I simply copied, and renamed a working editor css file from the cornerstone/assets/css/codemirror-themes directory.

I can set the path in this function to an existing css file in this directory and it works just fine. This makes me think an additional change is necessary somewhere to make it recognize a new css file.

---

UPDATE: I figured out a way to make it work, unfortunately this requires adding my css file and updating an existing file in the parent theme as opposed to my child theme which of course is never a good idea.

If I recreate the path and files that require changes in the child theme, it isn’t recognized. Please advise on how this can be done without modifying the parent theme.

[tristup]

Hi Sheri,

Thanks for reaching out.
It is not clear what you are adding to the custom CSS file, the CSS code suggested in the article can be added to the Global CSS. And rest of the codes need to be added in the PHP file. Can you please share the details of the CSS code and the file where you added that? So we can check and assist with this.

Thanks

[Sheri17]

I’m not sure what you’re asking. I’m not sure we’re talking about the same thing. The global css is for the appearance of the site I’m designing. I’m talking about the appearance of the code editor itself. I did use the exact code in the article except instead of using a path that points to a css file on github, I pointed to a local file. I’ll include more detail in a secure note.

[marc_a]

Hey Sheri,

To achieve your goal of adding a custom CodeMirror theme to a WordPress child theme without modifying the parent theme, you can follow these steps:

Ensure your custom theme CSS file is located in your child theme directory:

/wp-content/themes/pro-child/cornerstone/assets/css/codemirror-themes/[MYTHEME].css

Add the following code to your child theme’s functions.php file. This code ensures that WordPress enqueues your custom theme CSS file correctly.

function enqueue_custom_codemirror_theme() {
    wp_enqueue_style(
        'custom-codemirror-theme',
        get_stylesheet_directory_uri() . '/cornerstone/assets/css/codemirror-themes/[MYTHEME].css',
        array(),
        '1.0.0'
    );
}
add_action('admin_enqueue_scripts', 'enqueue_custom_codemirror_theme');

Make sure to replace [MYTHEME] with the actual name of your custom theme in all occurrences. After completing these steps, clear your browser cache and refresh the page to see the changes.

Hope that helps.