Today is the day.. I’m chronicling my journey through creating a full-site editing theme. I’m going to be writing out my experience here, but if you’d rather go through it on video, I’m going through that way as well.
I’m really excited about this. I think WordPress theme building is going to be a lot easier. You’ll be able to build WordPress themes without actually needing to know as much code as you used to when you were building classic themes.
But what does it really look like? Is there a lot that we can learn from what this looks like. I’m ready to dive in.
Before we dive in though, I should mention a couple of house cleaning items.
I will be doing all of this work on my iPad Pro. Which means I do not have typical access to a local development server like Local by Flywheel.
I’m going to be doing this work on a staging server and SFTP/SSHing into the server to create all the files. This means that it goes against my best practices, but since this is really just about the code itself, I’m going to let this slide.
Video Tutorial
If you want to see everything visually and get a little more detail into the how and the why of this tutorial, I encourage you to check out the video version.
Minimum Requirements of a WordPress Theme
Alright to get us started with this we need to create 3 things on our server.
- A theme folder
- In is an index.php file
- A style.css file
WordPress really just needs to two files in order to understand that it’s a WordPress theme.
In the style.css file, you will need to use a header block, basically consisting of some information to let WordPress know it’s a theme. I’ve copied that below so you have an easy place to grab it.
/*
Theme Name: Twenty Thirteen
Theme URI: http://wordpress.org/themes/twentythirteen
Author: the WordPress team
Author URI: http://wordpress.org/
Description: The 2013 theme for WordPress takes us back to the blog, featuring a full range of post formats, each displayed beautifully in their own unique way. Design details abound, starting with a vibrant color scheme and matching header images, beautiful typography and icons, and a flexible layout that looks great on any device, big or small.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: black, brown, orange, tan, white, yellow, light, one-column, two-columns, right-sidebar, flexible-width, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, translation-ready
Text Domain: twentythirteen
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/Make sure that you replace what’s appropriate with your own information. Save that file and then let’s go ahead and create the index.php file.
In the index.php file we’ll just put this in there.
<?php
// silence is golden.
Save that as well and then we should be good. Go back into your browser, reload your page and you should see that you have your theme listed. I’ve gone ahead and even activated mine, so you can see that in the image below.
Ok. We’re good really well. We’ve got WordPress seeing our theme and now we need to get the Full-Site editing portion working.
Full-Site Editing
Now that we’ve got our theme working with WordPress, it’s time to get the FSE side of it working.
To do that, we need to add 2 items to our server.
- We need to add a folder called ’block-templates’
- We need to add an index.html file inside the ‘block-templates’ folder.
With these two things in our theme folder, we should see the Site Editor menu item on the left of the WordPress Admin menu.
Once you see the Site Editor menu item, you are in the home stretch.
Wrapping Up
That’s everything you need to get the Full-Site Editing features running with your WordPress theme. In the next post and video, we’ll take a look at the Theme.json file and start looking at further customization options you have there.
Make sure you subscribe to my list to get these directly in your inbox. And maybe head on over to YouTube and subscribe to my new channel there, too.
