OK let’s create a new file called editor-style.css and place it in the root directory of the theme (or again, the child theme if you’re customizing a third-party theme). I’ll also include a template at the end, which should get you started.
#Wordpress editor how to#
This should give you an idea of how to build the stylesheet for your site. Instead, I will show you an example based off of the theme I use on my website. There are thousands of WordPress themes out there, so I couldn’t possibly write a stylesheet that makes the editor exactly like each one. We’ve added editor-styles support to our theme, so the next thing to do is to add the CSS goodness to the stylesheet we defined in functions.php so our styles correctly load up in Gutenberg. Now we’re getting right into our wheelhouse: writing CSS! Step 2: CSS tricks (see what I did there?!) WordPress has solid documentation for the add_theme_support function if you want to dig into it a little more.
#Wordpress editor code#
What this little snippet of code does is tell WordPress to add support for a custom stylesheet to be used with Gutenberg, then points to where that stylesheet (that we’re calling editor-style.css) is located. Let’s drop in the following lines at the end of the file: // Gutenberg custom stylesheetĪdd_editor_style( 'editor-style.css' ) // make sure path reflects where the file is located įire up your favorite text editor and open up the theme’s functions.php file that’s usually located in the root of the theme folder. If you’re using a WordPress theme that you don’t develop yourself, it’s probably best that you setup a child theme before making any changes to your main theme. OK I was lying, just a little more waffling.
#Wordpress editor crack#
Right then, enough pre-waffle! Let’s get on with making the WordPress editor look like the front end, shall we? Step 1: Crack open the functions.php file A few lines of PHP in your theme’s functions.php file that tell the editor you wish to load a custom stylesheet for editor styles.This whole thing consists of two pretty basic changes: Fire up the default Twenty Twenty theme that’s packaged with WordPress, fire up the editor, and it sports some light styling. WordPress gives us a hint of what’s possible here. Right? Well, maybe it’s not that mind blowing, but it may save you some time if nothing else.
But what if I said it’s totally possible for the WordPress editor nearly mirror the front end appearance?
The back end posy editor generally looks nothing like the front end result. It’s no surprise that a WordPress theme’s styles only affect the front end of your website. I’m a WordPress user and, if you’re anything like me, you always have two tabs open when you edit a post: one with the new fancy pants block editor, aka Gutenberg, and another with a preview of the post so you know it won’t look wonky on the front end.
0 kommentar(er)
