Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
If you've been following this course from the top and you've walked with me through each of the lessons, you will now have a fully built out, custom WordPress theme, built from scratch. Your theme is responsive. It handles all the different types of content you can add into WordPress posts and pages. And it has fallbacks for typical scenarios like a 404 page, or a search that's broken. Now that the front end of your theme is complete there is one more step I want you to take. And that is adding styling to the post editor.
And I'll show you why. When I look at the markup html tags and formatting posts, I can see all the formatting that I applied to my theme. And it looks great. Everything looks exactly as I designed it. The typography's easy to read, and everything is fine. However, if I open the editor for this post, in a separate tab, and look at the content, you'll see the content looks completely different. That's because the content in the editor is currently using the default styling from the WordPress editor. And the editor knows nothing about our theme.
So that means when you insert content in here, you don't actually know what it's going to look like and the only way you can find out is by previewing the post, and that is, quite frankly, unacceptable. If you change the look of the content on the front end, you should be able to see what you're doing when you edit the content on the back end. So your block quotes should look the same in the editor as they do on the front end. Your headings should look the same, your links should look the same, and so on. So the last step in our theme development process, we're going to add editor styles to our theme to match back end, to the front end.
And this has to be done in steps. First I'm going to create a custom style sheet just for the editor. And I'll place that style sheet in the include folder, just so it's out of the way. So here I'll create a new file. It's a cascading style sheets file. And I'm going to call it, editor style. Now I'm going to clear the style sheet and here I have to insert all of the styles for all the typography that I added to my style sheet. However, I have to slightly change my selectors because we're now working with a completely different mark up than we did before.
To help you in doing this both for this theme and for future themes, I've created a full template for you that you can use. So here, if you simply copy out the code snippets for this movie, and copy out all the css, and paste it in, you get the full setup for the entire page. And here you see we start out by defining the html for the body that has the editor as 700 pixels wide. Then we set the color for all the font, including the default font family, and then we basically apply all the same styles that we created for the front end, into the back end.
But the markup is slightly simplified, so if you take this and you compare it to styles.css, you'll see that for the most part it's all the same. Now I'm going to save editorstyle.css, and then I have to tell WordPress that this file is available to use. Here I have to go into functions.php a final time, and add in my editor styles. So here I'm going to scroll down until I get to, my simone setup, and here at the very top I'm going to add in my last code snippet.
So it's this snippet here, I'll copy that out, and paste it in. And what we're doing here is first, we're defining a variable called font_url. And this variable points to our two fonts. So here we have Lato, and also, PT Serif. So this is the same url we used previously to on que into our site. Then, we're calling this function, add_editor_style. And we're saying, we want to add the editor style found under the include folder, called editorstyle.css. And then, we want to queue up the font url that you see up here.
So now, when I save function style php, and I've created editor style, I can go back to my editor and reload my post. And all of the sudden my post in the editor is now styled to match my post in the live view. So now, when you create new content within the editor, everything you see within the editor will match what you see on the front end. And you have a completely transparent theme experience. So when your done building your theme and your done with all your styles, make sure you create an editorstyle.css file, and queue it up in functions.php along with any custom fonts you have.
So that the editing experience matches the front end experience.
Get unlimited access to all courses for just $25/month.Become a member
58 Video lessons · 59214 Viewers
61 Video lessons · 92180 Viewers
82 Video lessons · 104056 Viewers
56 Video lessons · 106747 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.