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.
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.
So 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.
So next, I'm going to make my way to Settings and click on Reading.
And 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.
Just a reminder, if you have 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, 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.
And 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.
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 then 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.
Next, let's take a closer look at the navigation menu and make our way to Appearance and then
click on Editor.
This will open up the Site Editor and on the right, we will notice our Home page and if
we open up our Home page, we will see the dummy content or the pattern that 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.
So let's go ahead and click on Edit template.
And now we can edit the header for the Page template.
Please note, 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 top right and the great thing is 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.
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.
Next, I would also like to add my navigation menu to my footer.
So when we scroll down, we will notice that there are some dummy content below quick links,
which was part of my 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.
Now my navigation menus are in place in my header and footer.
And 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 the typography colors and layout
of your site.
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.
Now that we have our pages, posts, navigation menu, site logo and style in place, we can
go ahead and start adding content to our pages and modifying some of the patterns that we've
added.
And for a page like our Contact page with no pattern, we can start building from scratch.
And to modify how we want our posts to be displayed, we need to make our way to the blog
home template.
And 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.