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.
- Because I have just a few light changes I want to make.
- 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.
- Because I have just a few light changes I want to make.
- 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");
- 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
1 Answer
Reset to default 1Everything 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' );