Building a home page with a block theme


In this tutorial, we will build a home page using a block theme without any plugins or code.

Learning outcomes

  1. Set up a static home page.
  2. Create a header and footer for your page template.
  3. Adding various types of blocks and patterns to your home page and modifying them.
  4. Using block toolbars and sidebar settings.

Comprehension questions

  1. Which template do you want to assign to your home page?
  2. Are you familiar with using header and footer patterns?
  3. What is the function of the Post Content block?

Transcript

Hi and welcome to Learn WordPress. Today we are going to build a home page with a block theme. The home page is your site’s main hub and serves as the face of a brand. It should prompt visitors to delve deeper into your site, and of course grab their attention. In today’s session, we are going to set a static home page, create a header and footer template part, remove the site title and build the home page using the block editor. The plan is to recreate this home page I’ve already created. I’ve only used blocks to create this travel home page, and I have attempted to create opportunities to pull the reader deeper into the website.

Firstly, I’ve created three posts. I’ve added all the media I’ll be using for my website. I’ve created pages for my navigation menu, I’ve installed a block theme Twenty Twenty-Two, and now we’ll go ahead to Settings and then click on Reading.

The next step is to set a static home page, select a static page and set your Home page and your Posts page, and then click Save changes. When we make our way back to pages we will notice now it says Posts page next to blog and Front page next to home. When we open up our home page, we will notice it has been assigned to the default template which is the page template, and that means it will share the same header and footer as other pages. If you would like you could create a custom unique template that is specific to the home page by clicking on New.

Once you have set your static home page, make your way to Appearance and click on Editor. This will take you to your Site Editor. Click on the List View so that you have a better idea of the structure of the page, and then the first thing we’re going to do is we’re going to remove the post title. And then if we click on post content, remember this is where the content of your page will be displayed. I’m going to use patterns to replace the current header. So once you’ve selected the parent block, click on Replace and then search for the relevant pattern that meets your requirements. I’m after the header pattern with the site logo in the middle and the navigation items on the sides. Then I will add the links to my pages as well as the site logo. Lastly, I want to change the background colour to white and the colour of the text and links to black.

Now we can follow the same process for the footer, select the Footer block, click on Replace and find the relevant footer pattern. Voila!

We are done setting up our template, now we can start adding content to our site. So click on the WordPress icon or site icon and make your way back to the dashboard. Open the home page and now we can start creating. The first thing I want to add is a feature image so I’m going to add a pattern. I’ll make my way to the pattern directory and type in Hero banner. Once you find the pattern you’re looking for, you can merely copy and then paste it into your page, and then start modifying.

Firstly, I’ll replace the background image, alter the opacity and then start personalising the content, and in no time, you will have a hero image with accompanying text. Next, I will insert a Gallery block and select three images from my Media Library. Then I will click on the List View, select the Gallery block, change the alignment to full width and the block spacing to zero.

After the Gallery block I want to add a special offer and to do this I will use a heading and a Columns block. I will go ahead and type in Special offer, change the alignment to centre and hit enter. Then I will add a Columns block with two columns. I will open up the List View to ensure I’ve selected the parent block. I’ll change the alignment of the block to full width. In the left column, I will add an image, I will change the style to be rounded, add a caption, I will add a Buttons block and say you will get 15% off with this special offer. I’ll change the alignment to centre, the radius to 100, add a link and change the background to black; and then do exactly the same in the right column. Before I continue, I would like to create some space using Spacer blocks.

Now I’m going to insert a Query Loop block to display some of my latest posts. So let’s add a heading and name it Where to next, I will change the alignment to full width and the text alignment to centre. After hitting Enter, I will insert the Query Loop block and click on Start blank. And then I will select the image date and title option as well as the grid view. Then I will change the alignment to full width. Select one of the images and in your sidebar settings, change the height to make sure that all the images are exactly the same size and meet your requirements. Lastly, click on the List View and remove any blocks that you don’t deem important. For example, the Pagination block, the No results block and the Post date block.

After adding another Spacer block, I will go ahead and insert a Cover block. I will choose one of the images from my Media Library, change the alignment to full width and then enlarge it, and modify the focal point picker accordingly. I will also change the opacity to be slightly darker. And once we have done that, we can start adding our content. In this case, I’m going to introduce people to some of the top travel destinations in 2022. As you have noticed, you can change the size of your text in the sidebar settings. Then I will add a Buttons block. I’ll change the text to bold, the text colour to black and the background colour to white. Then I will make the radius 100 and I will add a link.

Next, we want to introduce visitors to our team so I’m going to add a Media and Text block. After changing the alignment to full width, we will add an image on the left-hand side and the appropriate text and button on the right. We will follow the same steps or process as in previous examples.

Next, I would like to insert a call-to-action pattern so click on Browse all and then make your way to patterns. I’m going to search for a buttons pattern and once you click on the pattern, it will insert into your page immediately. And now I will go ahead and modify the content. Setting up a subscription to your newsletter is another way of engaging with your visitors and making contact with them. I literally only changed the text and remember to add a URL link to your button.

Finally, I’m going to add a Gallery block with six images. Make sure you select the parent block in the List View and change your gallery to display six columns. Then make your way down and set the block spacing to zero and once you have changed the alignment to full width, you are good to go. When I click on Preview in a new tab, I will be able to see my completed home page which was created without any plugins or code.

All the best as you use a block theme to create your own home page and website.

Workshop Details


Presenters

Wes Theron
@west7

I am an Instructional Designer for the WordPress open-source project sponsored by Automattic. I am a strong supporter of the open-source movement. I have a background in education and content development. I am a husband, father, dreamer and lifelong learner.

Other Contributors

Nadia Maya Ardiani