Hey there and welcome back!
So today we’re going to wrap up our series on creating a block or full site editing theme for WordPress. Today’s video is a lot simpler than what we’ve done in the past, but it contains a lot of crucial information, especially if this is your first time uploading a theme to the theme directory.
First we’re going to check our theme to make sure that it’s going to pass the automated tests when you upload it to the theme directory. Then we’ll bundle the theme. And finally we’ll upload it to the theme directory.
Now I will go ahead and say that this theme has already been uploaded and approved into the WordPress theme directory. In this case, what you’re going to see me do is actually upload a minor update I made to the theme.
Things will look a little bit different simply because since it’s already been approved, the process for updating a theme is super simple. When you upload your first theme or if it’s the first time you’re uploading this theme to get reviewed, it will take a little bit longer for it to get reviewed and approved.
But before we begin, if you want to see more videos on WordPress development and web development in general, be sure to hit the subscribe button and to ring the bell for notifications.
Now let’s get started.
Okay, so with the starter theme that we’ve been using, we do have some really cool build tools both when it comes to compiling CSS and JavaScript as well as bundling our theme together.
So for this theme, now that we’re really ready to go, the first thing that I want to do is to just bundle the theme. And you go into the terminal and navigate to the directory and hit NPM Run Build.
And while it’s doing this, I should say that a lot of these tools came from the WP Rig starter theme, which is a great legacy PHP, I guess now, starter theme. I’ve linked to it down in the description below. The build tools are great once you’ve sort of wrapped your head around them, and it’s something that I wouldn’t be able to do on my own. So shout out to the team over there.
Okay so now our theme has been bundled. We can see that we were working in semplice monospazio hyphen dev, but now we have the one without the dev as well as a ZIP file. So this is the ZIP file that we will eventually be uploading to the WordPress theme directory.
Now before we do that, we want to make sure that our theme will pass the automated checks when you upload it to the theme directory. And there is a great tool that you can use – it’s a plugin – that you can use in your development WordPress setup to test that.
This plugin is called the theme check plugin. It’s as simple as that. You can find it in the plugins directory on your site, add it and activate it. And you go here to theme check, and we’re going to find our bundled theme, which is here. And just hit check it.
And as you can tell, this theme passes all of the automated tests, so there would be no issues. There is a manual review whenever you upload it. So someone will manually look at it, look at the code – not necessarily critique the design per se, but just like look at it in a development environment just to make sure that there’s nothing weird happening with it. If you make some decisions, they’re not necessarily going to question it, but they will check it to make sure nothing looks broken and hopefully that there aren’t any accessibility issues.
So now that we know it will pass the automated tests, let’s go in and upload our new theme. So you go to WordPress.org slash themes. And then you have to go to the bottom and find the add your theme. Hit the link. You will either need to log in to WordPress.org or create a new account on WordPress.org before you can get started.
I’ve already logged in. So then you hit upload new theme. And we’re going to find our zip fie. Okay, and as I mentioned before we’re uploading a minor update to the theme actually. So again what you see from here on will look a little bit different. Just make sure everything looks good. And we’re going to hit upload and now you’re submitting your theme to WordPress.
So this is something that you’ll see if it passes all of the automated checks which we have. And then you’ll get an email saying that they’ve received it, and you’ll also get this link to the trac ticket, which is where the review will happen for you. And this is what a trac ticket looks like. Very simple. As you can tell this has already been closed and it’s already been made live automatically since it’s just a theme update. If this is the first time uploading the theme, it will be open and you’ll be waiting for a review basically.
The good news is that I submitted my first theme back in 2015 and it took a couple of months for it to get reviewed just because it’s real life human people reviewing it and there were a ton of themes that were just in the backlog.
For this one I think it took about a week for the first person to review it, and then there was a little bit of a back and forth to make edits and what not. And within about two to three weeks from uploading it to WordPress.org it was approved and put into the theme directory. So hopefully you’ll have a little bit more luck with that.
I will also say I’m hoping to do in the future a series or maybe just one video that goes more into developing a theme for the WordPress theme directory, including what you need to do to make sure that your review process goes as smoothly as possible. Because when I finally got that first review for my first theme, the amount of changes that were needed were way long – like here to that door. It was a lot, and it was a little bit scary, but I went through it one-by-one, and it made me a much better developer, and the other themes that I’ve submitted have had a much smoother process because of it.
But I would like to do either one video or a series of videos that go through things like escaping data, validating data, sanitizing data. Those are sort of the big things that I missed as well as making sure that your strings are translatable. And all of those pitfalls that you can fall into especially if you’re learning web development for the first time and this is your first ever WordPress theme.
So we’ll talk about that later. This was sort of a higher overview.
And again going through the trac ticket we can see that it’s already been made live.
And then finally we can see it here in the WordPress theme directory. This is what it will look like. This is the screenshot we submitted it with. You can see stats. And all of that fun business. You can download it, preview it, whatever.
But that really brings us to the end of this series. I hope you have a good experience creating full site editing themes if that’s something that you want to do. But just go out there and do whatever you want, because this is a really fun process as I hope you saw here.
So we have now created and uploaded a full site editing theme to the WordPress theme directory. Yes, it’s been tricky, it’s been long, it’s a little bit different, especially if this is your first time creating a full site editing theme versus a PHP legacy theme.
But it’s been worth it. And hopefully it will be improved shortly, and people will be enjoying your theme.
So go out and create great block themes. And I would love to see your work. If you have a full site editing theme you want to show off, be sure to leave it down in the comments section below. And if you have any questions about creating full site editing themes or WordPress themes in general or just web development questions, be sure to also leave them down in the comments section below and I will do my best to answer them.
But again to see more videos about WordPress development or web development in general, be sure to hit the subscribe button and to ring the bell for notifications.
But that is it for this video and this series. Thank you so much for watching. And I will see you next time.