1

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");

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

1 Answer 1

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.com/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.com/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' );

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.