{"id":11827,"date":"2022-10-13T10:30:00","date_gmt":"2022-10-13T15:30:00","guid":{"rendered":"https:\/\/devblog.jacobmartella.com\/?p=11827"},"modified":"2022-10-13T10:30:00","modified_gmt":"2022-10-13T15:30:00","slug":"creating-a-wordpress-block-theme-uploading-it-to-the-theme-directory","status":"publish","type":"post","link":"https:\/\/demo.jacobmartella.com\/semplice-monospazio\/2022\/10\/13\/creating-a-wordpress-block-theme-uploading-it-to-the-theme-directory\/","title":{"rendered":"Creating a WordPress Block Theme \u2014 Uploading it to the Theme Directory"},"content":{"rendered":"\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Creating a WordPress Block Theme \u2014 Uploading it to the Theme Directory\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/n4fihHGVdKs?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>Hey there and welcome back!<\/p>\n\n\n\n<p>So today we\u2019re going to wrap up our series on creating a block or full site editing theme for WordPress. Today\u2019s video is a lot simpler than what we\u2019ve 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.<\/p>\n\n\n\n<p>First we\u2019re going to check our theme to make sure that it\u2019s going to pass the automated tests when you upload it to the theme directory. Then we\u2019ll bundle the theme. And finally we\u2019ll upload it to the theme directory.<\/p>\n\n\n\n<p>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\u2019re going to see me do is actually upload a minor update I made to the theme.<\/p>\n\n\n\n<p>Things will look a little bit different simply because since it\u2019s already been approved, the process for updating a theme is super simple. When you upload your first theme or if it\u2019s the first time you\u2019re uploading this theme to get reviewed, it will take a little bit longer for it to get reviewed and approved.<\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<p>Now let\u2019s get started.<\/p>\n\n\n\n<p>Okay, so with the starter theme that we\u2019ve 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.<\/p>\n\n\n\n<p>So for this theme, now that we\u2019re 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.<\/p>\n\n\n\n<p>And while it\u2019s 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\u2019ve linked to it down in the description below. The build tools are great once you\u2019ve sort of wrapped your head around them, and it\u2019s something that I wouldn\u2019t be able to do on my own. So shout out to the team over there.<\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<p>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 \u2013 it\u2019s a plugin \u2013 that you can use in your development WordPress setup to test that.<\/p>\n\n\n\n<p>This plugin is called the theme check plugin. It\u2019s 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\u2019re going to find our bundled theme, which is here. And just hit check it.<\/p>\n\n\n\n<p>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 \u2013 not necessarily critique the design per se, but just like look at it in a development environment just to make sure that there\u2019s nothing weird happening with it. If you make some decisions, they\u2019re not necessarily going to question it, but they will check it to make sure nothing looks broken and hopefully that there aren\u2019t any accessibility issues.<\/p>\n\n\n\n<p>So now that we know it will pass the automated tests, let\u2019s 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.<\/p>\n\n\n\n<p>I\u2019ve already logged in. So then you hit upload new theme. And we\u2019re going to find our zip fie. Okay, and as I mentioned before we\u2019re 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\u2019re going to hit upload and now you\u2019re submitting your theme to WordPress.<\/p>\n\n\n\n<p>So this is something that you\u2019ll see if it passes all of the automated checks which we have. And then you\u2019ll get an email saying that they\u2019ve received it, and you\u2019ll 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\u2019s already been made live automatically since it\u2019s just a theme update. If this is the first time uploading the theme, it will be open and you\u2019ll be waiting for a review basically.<\/p>\n\n\n\n<p>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\u2019s real life human people reviewing it and there were a ton of themes that were just in the backlog.<\/p>\n\n\n\n<p>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\u2019ll have a little bit more luck with that.<\/p>\n\n\n\n<p>I will also say I\u2019m 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 \u2013 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\u2019ve submitted have had a much smoother process because of it.<\/p>\n\n\n\n<p>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\u2019re learning web development for the first time and this is your first ever WordPress theme.<\/p>\n\n\n\n<p>So we\u2019ll talk about that later. This was sort of a higher overview.<\/p>\n\n\n\n<p>And again going through the trac ticket we can see that it\u2019s already been made live.<\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<p>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\u2019s 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.<\/p>\n\n\n\n<p>So we have now created and uploaded a full site editing theme to the WordPress theme directory. Yes, it\u2019s been tricky, it\u2019s been long, it\u2019s a little bit different, especially if this is your first time creating a full site editing theme versus a PHP legacy theme.<\/p>\n\n\n\n<p>But it\u2019s been worth it. And hopefully it will be improved shortly, and people will be enjoying your theme.<\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<p>But that is it for this video and this series. Thank you so much for watching. And I will see you next time.&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>We are now basically done with creating our WordPress block theme! All that\u2019s left is to give it a few more tests, bundle it up and submit it to the WordPress theme directory for review. So in today\u2019s video we\u2019ll do just that. And I\u2019ll give just a few pointers for how to make your review process quicker (by NOT making the same mistakes I made a number of years ago). And now it\u2019s time for you to create your own block theme for others to use. Be sure to leave links to your work in the comments below. I would love to see what you come up with!<\/p>\n","protected":false},"author":1,"featured_media":11828,"comment_status":"open","ping_status":"open","sticky":false,"template":"wp-custom-template-single-post-with-no-featured-image","format":"standard","meta":{"footnotes":""},"categories":[27,29,24],"tags":[46,79,216],"class_list":["post-11827","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-full-site-editing","category-theme-development","category-wordpress-small-business","tag-block-themes","tag-full-site-editing","tag-wordpress-themes-2"],"featured_image_src":null,"featured_image_src_square":null,"author_info":{"display_name":"Jacob Martella","author_link":"https:\/\/demo.jacobmartella.com\/semplice-monospazio\/author\/jmthemedemos\/"},"_links":{"self":[{"href":"https:\/\/demo.jacobmartella.com\/semplice-monospazio\/wp-json\/wp\/v2\/posts\/11827","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/demo.jacobmartella.com\/semplice-monospazio\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/demo.jacobmartella.com\/semplice-monospazio\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/demo.jacobmartella.com\/semplice-monospazio\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/demo.jacobmartella.com\/semplice-monospazio\/wp-json\/wp\/v2\/comments?post=11827"}],"version-history":[{"count":0,"href":"https:\/\/demo.jacobmartella.com\/semplice-monospazio\/wp-json\/wp\/v2\/posts\/11827\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/demo.jacobmartella.com\/semplice-monospazio\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/demo.jacobmartella.com\/semplice-monospazio\/wp-json\/wp\/v2\/media?parent=11827"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/demo.jacobmartella.com\/semplice-monospazio\/wp-json\/wp\/v2\/categories?post=11827"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/demo.jacobmartella.com\/semplice-monospazio\/wp-json\/wp\/v2\/tags?post=11827"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}