Transcript
Introduction
In this lesson, we are going to apply what we’ve learned thus far by setting up our pages, posts, site logo, and navigation menu.
Setting up your pages
First up, let’s create our pages. I’ll make my way to pages, click on Add New Page and then once I do that, I will be able to add or select a pattern that comes with my theme and I’m using the Twenty Twenty-Four default theme. I’ll go ahead and select a pattern that appeals to me and name it Home. After publishing, I’ll make my way back to pages and add my next page. This time, I’m not going to choose a pattern, and I’ll name this page Blog. Next, I’m going to create an About page and select the relevant pattern. And lastly, I will also create a Contact page without choosing a pattern. Now I have my pages in place.
Setting your home page display
So next, I’m going to make my way to Settings and click on Reading. For my home page display, I will select a static page and set my Home page as my static home page and my Blog page as my posts page. As a reminder, if you selected your latest posts for your home page display, you will modify the blog home template for this home page or front page, as no page has been created. Please note that when we open up our static home page and open the settings sidebar, we will notice that this page has been assigned to the page template or the default page template, and my blog page or posts page has been assigned to the blog home template and this cannot be changed. Then, we’ll also notice that my other pages have also been assigned to the general or default page template, the same as my Home page.
Setting up your posts
Next, let’s shift our attention to posts, and as you will notice, I’ve already created two posts as well as categories and tags. Just a reminder, categories are used to classify content into main topics or sections and tags are like labels that give specific details about content. As an example, I’m going to go ahead and add a new post. The post is about New York, and I will add some dummy content. Thereafter, I will open up the settings sidebar and select the relevant category, in this case Travel, and I will add a new tag, namely City. Lastly, I will set the featured image or the post thumbnail. The featured image is, of course, the representative image for your post, and once set, we can hit publish and then view our three posts with their relevant categories and tags.
Setting up your navigation menu
Next, let’s take a closer look at the navigation menu, navigate to Appearance, and click Editor. This will open up the Site Editor, and we will notice our Home page on the right. If we open our Home page, we will see the dummy content or the pattern we added when we created the page. And at the top, we see the header pattern provided by our theme. And if we try to edit this header, we will see a message that says Edit your template to edit this block. Let’s go ahead and click on Edit template. Now, we can edit the header for the Page template. Please note that this header will also be found on the Blog Home template. So if we make any changes to this header in the page template, it will also automatically update in the blog home template. As we can see, we have our navigation menu on the top right, and the great thing is that this navigation menu was added automatically when we created our pages. When we select our navigation menu and open up the List View, we will notice that the navigation items are still part of a page list. So, to change this, click on Edit in your settings sidebar to detach the page list so that you can manage navigation items individually. Once detached, you can use the List View to reorder navigation items. Or you can use the arrows of the navigation block toolbar to reposition items where you want them.
Next, I’ve decided to add social links to my navigation menu. So when I click on the Inserter of the Navigation block, I will insert a Social Icons block and then select the relevant social media platforms. In this case, X and Instagram. And don’t forget to add the relevant URLs. When you select the Navigation block, you can click on the three vertical dots in your settings sidebar to create a new menu or select one of your existing menus. When you select Settings, you will be able to change the justification or alignment as well as the orientation of your navigation menu. Below that, you can also select a hamburger menu that will appear when your site is viewed on a smaller device. When you click on Styles, you have a variety of options to style your navigation menu further.
Setting up your site logo
Next, let’s talk about the Site Logo block. As you will notice, the header pattern that was provided by my theme includes a Site Logo block. Click on the Site Logo block to add a new image from your media library or to upload one directly from your computer. I will go ahead and upload a logo that I’ve already added to my desktop. And then I will enlarge it slightly.
Adding your navigation menu to your footer
Next, I would also like to add my navigation menu to my footer. So when we scroll down, we will notice that there is some dummy content below quick links, which was part of the default footer pattern that came with my theme. So when I open the List View and select the Navigation block, I can click on the three vertical dots in my settings sidebar and then select the relevant navigation menu.
Selecting a style
Now, my navigation menus are in place in my header and footer. As mentioned before, if we make our way to the blog home template, which is the template for my posts page, we will see that the header and the footer are the same. Once we have all these elements in place, we want to decide on an overall style for our website. So when we make our way to Styles, you can customize your site’s typography, colors, and layout. Or if you click on Browse Styles, you’ll be able to see a zoomed-out view of all the different style combinations that come with your theme. I will go ahead and select the Rust style as an example.
Adding content
Now that we have our pages, posts, navigation menu, site logo, and style in place, we can add content to our pages and modify some of the patterns we’ve added. And for a page like our Contact page with no pattern, we can start building from scratch. To modify how we want our posts to be displayed, we need to make our way to the blog home template. When we open up our blog home template, we can customize our blog page as well as the Query Loop block to decide how we want our blog posts or dynamic content to be displayed.
Practical
Go to WordPress Playground and complete the following tasks to test your knowledge. Click on ‘Activate Live Preview’ to get started:
- Create 4 pages: Home, Blog, About, Contact
- Set a static home page and posts page, and assign the Home and Blog page you created.
- Create a post and add a post-featured image. If you don’t have any images on your computer, you can use https://unsplash.com/ to search for free images. You can use the same example as in the video.
- Add a category and a tag and apply it to the post. You can use the same example as in the video.
- Go to the Site Editor and open the page template. Add a site logo to the Header of the page template. The pages you added will appear in your navigation menu automatically.
- Add the Social Icons block and links to X and Instagram to your navigation menu, as in the example shown. You can add any dummy content to the URL section.