In this part of WordPress from Scratch, I will be walking through how to design a homepage from scratch. The Full Site Editing capabilities of WordPress 5.9 is what will enable us to fully design a homepage, without the need for a page builder. Full site editing will allow WordPress websites to be much more lightweight which gives a nice bump in speed from many website builders out there.
Creating a Header
In the previous part of WordPress from Scratch, I give an overview of template parts. To begin building our site, we will start by creating a template part for a custom header.
First, let’s begin by opening the Site Editor. You can either go to Appearance > Editor in the dashboard, or you can click the Edit Site button in the topbar.
Once the editor loads, you should see the following screen:
Next, click the black WordPress logo button in the top-left corner.
After clicking this button a sidebar will appear on the left. Click the Template Parts tab. You will then see a list of template parts.
We could edit the default header, but this is WordPress from Scratch, plus I generally prefer to just create a new template part rather than modifying the original template parts.
Let’s start by clicking on the blue Add New button in the top-right corner of the screen.
Name the template part Custom Header (or anything at all, really), select the Header area, then click the blue Create button in the bottom left corner of the modal.
After creating the template part, you will see a blank slate in the editor that we can build on.
Many websites you visit probably have a logo on the left side of the header. We can utilize the Columns block to allow us to put a block (an image for our logo) on the left side, and put the navigation links on the right side.
Start by clicking the blue + button at the top-left corner of the screen.
After clicking this button, the block inserter will open. Type column or columns in the search box, you should see the Columns block show up.
Click the Columns block once it appears.
The columns block will prompt you to choose how you want the columns divided to start. The really nice thing about the editor is that you can give columns a specific width if any of the variations aren’t what you’re looking for.
Generally though, logos will take up a relatively small part of the header. Since we want the logo to be smaller and placed on the left side, the 30 / 70 variation will best fit our needs.
Once you select this variation, you will see two spots where you can add blocks.
If you have an image to use as a logo, you can add an image block next. Otherwise, let’s just add the name of our site here.
One really great thing about searching for blocks is that most blocks have aliases. For example, you don’t have to type paragraph to add a paragraph block. You can search text for example, and the paragraph block will still appear. This feature should be helpful for people coming from different page builders.
This is where we will write the name of our site. For a lack of a better name, I just wrote, “Jared’s Company Site.”
Before we continue, it would be nice to be able to take a look at our header so far on our site. We will first have to replace the default header provided by Twenty-Twenty Two with our custom header.
Head over to the Templates screen.
In the next part of WordPress from Scratch, we will be building an about page.