Hey there and welcome back.
Today we’re going to kick off a series on how to create a block WordPress theme now that full site editing is completely within WordPress. And to do that, we’re going to walk through how I built my first block theme, Semplice Monospazio. And yes, uh, naming WordPress themes is not my specialty.
But anyway in this series we’re just going to go through each of the different steps from the design to how to use the theme.json file to maybe some styling that you still kind of have to do to cover things like hover and focus states. And then we’ll cover block patterns, and then from there we’ll create the index template, the archive template, the single post template, the page template and a few others.
By the end of this, you should have a general idea about how to create a block theme. This theme doesn’t have a whole lot of fancy features, but really we don’t need that for right now. We’re just trying to create a basic block theme, and maybe as time goes on and we learn more, we can add in new, cool features to it.
But before we begin, if you want to see the rest of this series or you want to see more videos about how to do web development, like HTML, CSS, JavaScript, PHP and more, be sure to hit the subscribe button and to ring the bell for notifications.
Now let’s get started.
Okay, so before we begin I do want to point out a few links that you can check out if you want to see what this theme looks like and see the code ahead of time as we go through this tutorial. First off you can download this theme from the WordPress theme directory. And you can install it on your website the same way you would with any WordPress theme.
And then the second thing you can do is you can come over here to the GitHub repository for the theme and download the files and play around with it and see what there is with the theme ahead of time as well as follow along with what I’m doing here in this tutorial.
The links for both of those are down in the description below if you want to check them out.
Now let’s dive into this theme. And today’s video is just going to be a high-level overview of the design and what I’m really trying to do with this theme. So as I mentioned earlier in the intro, the theme name is Semplice Monospazio, which is Italian for Simple Monosopace, which is basically the whole idea for this theme. It’s a monospace theme that’s minimalistic, very simple. Nothing too big or too fancy. Just something that we can create and upload to the WordPress theme directory to really understand how to create block themes first. And then we can build crazier and bigger themes as we go along.
So what I like to do whenever I’m designing a theme is to sort of create style titles. I go through things like the fonts, colors, typography, all of those sorts of things. So we come over here. We have our base colors here. And then I like to add in some color options for people to choose from. And as you’ll see later on the full site editing features really make changing the color styles a whole lot simpler. It’s something that’s built in and you don’t have to build it in yourself with the theme.
So again sort of these colors and then dark and light versions of red, orange, yellow, green, blue and purple. And then there will also sort of be a dark mode theme that a user can use.
And then we move over here to the typography. And we’re using Ubuntu Monospace for all of the fonts — heading and body text. And then I just sort of go through the heading levels, different font sizes to make sure that they look different than what you see here with the body text.
And then buttons. And this is how unordered lists will look, ordered lists. Sort of your block quote. And then your pull quote. Those are two separate things as you’ll see, especially as we get into the theme.json file later on.
And then here I quickly styled what the form elements are going to look like. Nothing drastic, just really simple outlines. And then we go over here to the table. We’re not going to have a whole lot of borders, but we’re going to alternate the off white I guess you could call it or the light grey and white. And then this is what an image will look like with the caption centered. This is what a cover block might look like.
And then finally we’re going to come over here to the calendar. And this is something that’s very simple. Not really fancy basically. Again it’s a monospace, minimalistic theme. Nothing too big or too fancy.
Again, this is sort of what a widget will look like with the heading and then this sort of border bottom and then the rest of the widget.
And then we come over here to what the header will look like. Again it’s something simple with the site title, the site description and then the menu.
And then it’s similar with the footer. We have the copyright text. And then we’ll have the site title again. And then the user can add in social media icons for the various social media sites that they have. And then finally just another menu. It can be the same one that’s in the header or it can be something completely different.
Alright next up with the theme I have a few different block patterns that I’m going to include. These aren’t going to be anything super fancy. But they might be something that’s useful for the user with their website.
So first off is this sort of callout. And it will be a section that can be placed maybe at the bottom of a single post template or somewhere else or the bottom of a page template. And it’s something simple. It has this heading, some description text and a button. And then repeat that with the different colors that we have.
Next up is a sort of two columns section. This can be a more fancier callout or whatever or maybe on the homepage instead of it just being the posts, maybe they want to have some text. And this can help them create that. We have the heading, description and button. And then we add an image on the right. And again like we did over here, we repeat this with the different colors that we have.
And then finally getting into two different query block patterns that can be used and easily switched out with the index and archive and category templates as we’ll see later on in this series. So the two different types is one is a grid and one is more of a list. So the grid is obviously a three by however many you want. And it’s got the picture up here at the top, the title the category, the excerpt, and then a link to the post.
And it repeats across. And then we also have different variations with the different background colors.
And then the list view is a little bit similar. It’s obviously more vertical. You have the title, the category, description or excerpt, and button here on the left. And then on the right you’ll have the featured image for the post. And again, this one doesn’t have the background for each color, but the button color does change for each color variation that we have for the theme.
Next up I went ahead and designed the page template for the theme — the default page template. There are two sort of variations, and how we do this in the theme is a little bit different from how you might have previously with the legacy PHP themes. It’s a little bit trickier to get right the first time. But once you see it once and you have the code example, you should be able to do it for your own theme pretty easily.
So we’re starting with the no sidebar option. Obviously we have the header that we talked about before. And then this is just a simple page title. And then you have your body copy and whatever blocks are in the body copy and all that fun business. And it’s just simple and narrow. It’s about 800 pixels wide. And then we have the footer which we talked about earlier.
And then the page with the sidebar template, it’s simple. It’s basically what we have over here. It’s shifted over. This time the width of all of the content here is about 1200 pixels. So this shifts over, and then we add in the widgets over here on the side. And it’s really cool to see how a user might be able to pick out do they want no sidebar like over here or do they want the right sidebar like over here.
Next up here is the single post template. Again this is very similar to what we just did with the page template. Although now with the post we have a little bit more features. Like we have the featured photo right here. We have, sort of, the post meta, the written by, posted in, posted on and tags, right over here on the side. And then we’ll have the next post and the previous post links down here. And then finally comments. And then it’s the same thing with the left sidebar — or the right sidebar.
Moving on here is the archive template. For each of the no sidebar and the right sidebar in the designs mocked them up a little bit differently using the grid version here as well as the list version. The list version will be our default archive and obviously the index and homepage and all of that fun business.
Again it looks very similar to what we’ve look at with the other two templates. We have the archive title here. And then a simple underline to provide a little bit of separation. And then we have our list or grid of posts below that. Some easy navigation and then the footer. And very similar over here.
So again, if you haven’t figured this out already a lot of this is very simple and very easy because I wanted to create something that I could figure out “all right, what gets into the WordPress theme directory and how do you create a block theme without really adding too many bells and whistles right now”.
And then the search results look very similar to what we just saw with the archive. This is the page title. And then our search bar. And then our list of posts. And again all of this can be changed out as you’ll see in the site editor which is really cool.
And finally here we have our 404 page. Just again it’s something very simple. Just telling whoever is looking for the post or page that we can’t find that page. And then they can either search the site for it or we can list out our pages and/or categories.
So that’s basically it for the designs for this theme. Again it’s very simple and very easy for us to explore and play around with and see just how do you create a block theme. And hopefully it will be easy enough for you to follow along. And then once we get through this maybe you can go on and create something that’s bigger and bolder and has more features.
So that’s it for today. Next time we’re going to dive into the theme.json file, which has a lot of really cool features, but it can be a bit tricky, especially if this is your first block theme. And then we’ll go over the styling I had to do with this theme to cover some things that the theme.json file doesn’t cover.
As I mentioned before, if you want to go ahead and check out the theme, you can download the theme off of the WordPress theme directory or you can check out the GitHub repo. Again, all of those links are down in the description below.
And if you want to see the rest of the videos in this series as well as other videos on web development and code tutorials and so on and so forth, be sure to hit the subscribe button and to ring the bell for notifications.
But that is it for today. Thank you for watching. And I will see you next time.