css - Is it possible to edit the styling of the admin panel from within a custom theme?

I'm making a custom theme.

I know from reading around that I can make a custom admin theme by creating a plugin, but I would prefer to keep everything contained within just my custom theme.

1. Because I have just a few light changes I want to make.
2. I want certain frontend component stylings to also show up in the visual editor on the backend, and I would like to accomplish this by simply having the admin-style.scss file import the same component scss files as the style.scss file, that way everything stays in sync with each other.

I though I could do this with a plugin called tinyMCE Custom Styles but it seems that it's editor-style.css only syncs the front and backend for classic editor (which makes sense I guess since Gutenberg doesn't use TinyMCE)

EDIT: I just found that I can insert editor styles using add_editor_style in my functions.php but I'm not sure if it works for Gutenberg or not.

Either way it doesn't work for the thing I really need it to work for which is to edit the width of the editor, which I think can only be done with a style actually added to the admin panel.

I tried this code but it results in a white page and non functioning theme:

function my_admin_theme_style() { wp_enqueue_style("my-admin-theme", get_template_directory_uri() . '/admin-style.css', __FILE__)); } add_action("admin_enqueue_scripts", "my_admin_theme_style"); add_action("login_enqueue_scripts", "my_admin_theme_style");

I'm making a custom theme.

I know from reading around that I can make a custom admin theme by creating a plugin, but I would prefer to keep everything contained within just my custom theme.

1. Because I have just a few light changes I want to make.
2. I want certain frontend component stylings to also show up in the visual editor on the backend, and I would like to accomplish this by simply having the admin-style.scss file import the same component scss files as the style.scss file, that way everything stays in sync with each other.

I though I could do this with a plugin called tinyMCE Custom Styles but it seems that it's editor-style.css only syncs the front and backend for classic editor (which makes sense I guess since Gutenberg doesn't use TinyMCE)

EDIT: I just found that I can insert editor styles using add_editor_style in my functions.php but I'm not sure if it works for Gutenberg or not.

Either way it doesn't work for the thing I really need it to work for which is to edit the width of the editor, which I think can only be done with a style actually added to the admin panel.

I tried this code but it results in a white page and non functioning theme:

function my_admin_theme_style() { wp_enqueue_style("my-admin-theme", get_template_directory_uri() . '/admin-style.css', __FILE__)); } add_action("admin_enqueue_scripts", "my_admin_theme_style"); add_action("login_enqueue_scripts", "my_admin_theme_style");

• theme-development
• css
• admin

Share Improve this question edited Nov 24, 2018 at 22:25 Aslan French asked Nov 24, 2018 at 22:20 Aslan FrenchAslan French 23544 silver badges1818 bronze badges 1

• Hi David, I have posted an example. It almost the same as using wp_enqueue_scripts – Remzi Cavdar Commented Nov 25, 2018 at 6:16

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

Everything you're able to do in a plugin you could do in a theme. It's more like that separation is preferred, see article: https://managewp/blog/themes-design-plugins-functionality

Below an example adding editor stylesheet:

/**
 * Registers an editor stylesheet for the theme.
 */
add_editor_style( array(
    'assets/css/bootstrap.min.css',
    'https://use.fontawesome/releases/v5.3.1/css/all.css',
    'style.css',
));

Below an example to add scripts to the WP admin backend.

function admin_scripts() {
    wp_enqueue_style( 'bootstrap', get_theme_file_uri( '/assets/css/bootstrap.min.css' ), array(), null );
    wp_enqueue_script( 'bootstrap-bundle-js', get_theme_file_uri( '/assets/js/bootstrap.bundle.min.js' ), array('jquery'), null, true );
}
add_action( 'admin_enqueue_scripts', 'admin_scripts' );

If you need to load your scripts earlier for whatever reason, try admin_init below

add_action( 'admin_init', 'admin_scripts' );