All right, as I said, good day everyone.
Welcome to today's online workshop.
And the topic is setting up a WordPress blog.
And that is actually going to be my focus this morning
is setting up my own WordPress blog, showing you
step by step how to do that using a blog theme.
And then at the end, we will allow for some questions
and answers.
But yeah, hopefully as we go through the process,
you will be able to learn with me.
Right, so I'm actually going to jump straight
into my test website to get us going.
And let me first show you what we are going to recreate
this morning.
So I'm just going to show you my blog that I created.
And of course, it's got some dummy content.
I used a lot of dummy content, so don't worry about that too much.
But yeah, this is my interior design blog
that I'm going to show you how to create.
And it's called Style Your Nest.
And as you will notice, I've set up my header
and my navigation menu top right.
And then this is the first spot.
And I'm just on my home page, so scrolling through.
And one thing you'll notice on my home page,
I've actually made a section for my latest posts.
And if we scroll down to the bottom,
we will see my footer is in place.
And then my blog page, if you click on blog,
it will take you here.
And you will see all my blogs and even categories.
And I'll show you how to set all of that up as well.
Now, the interesting thing about setting up a blog
is that you have a choice.
Do you want your home page to be your blog page?
Or do you want a separate blog page?
Or maybe you want more than one type of blog page
or a news page.
You know, there's different ways to set it up.
So if we jump to our test website,
I will show you the route that I followed.
But I will also show you the other options.
So first things first, let's create our pages
for our blog.
So I'm going to make my way to pages.
I'm on my dashboard.
Oh, and just a reminder, for this demo,
I'm using the 2024 blog theme.
OK, so again, let's jump to pages.
And at this stage, you might have decided
to use a completely different theme.
There are even specific-- maybe I can just show you that as well.
If we go to WordPress and if you click on "extend themes,"
let's click on "blog themes."
And let's say I'm going to type in "blog."
You know, there's even themes specifically for blog sites
that you can explore.
But as mentioned, today I'm going to use the default 2020
for theme.
OK, so first things first, as I said, let's create our pages.
So I am going to have a home page.
So home, let's publish that.
I'm not going to use a pattern now.
So and our next page, I'm actually going to create a blog,
a separate blog page or a posts page.
So I'm going to create that year.
If you wanted your home page to be a blog page,
you would, of course, not have done that.
OK, so publish our blog page.
And then I've got an about page.
And for my interior design site, I decided,
oh, I'm also going to have a page called "Inspiration."
OK, so I've set up my pages.
And the next thing we need to decide is on our home page display.
And to decide on our home page display,
we need to make our way to "Settings."
And we are going to click on "Reading."
And below "Reading Settings," you'll
see your home page displays.
So at the moment, our home page is our-- sorry,
our home page is our latest posts.
And that is by default.
But I am going to change that because I
want a static home page and a separate post page.
So I'm going to click on "Static."
And I'm going to select my home page.
And maybe I should just quickly--
I'll do this first, and then I'll show you the opposite.
If you decide for your latest posts to be your home page,
then you would, of course, not have created all these pages.
So there's my blog page.
So I've got a static home page and a static post page.
And now I'm going to click "Save Changes."
All right, so let's just stop there for a moment.
I'm going to open up a different playground.
And as a reminder, playground, what it was playground,
is like a sandbox to play around and to test out
your skills in a safe environment.
So I just wanted to show you this.
If I go back to Settings Reading, let's say this is my site.
And I have selected my latest post page to be my home page.
Then if we make our way to Appearance and Editor,
we will actually see that our blog home template is our home page.
And it will display your latest posts.
So that is a route that you can follow.
But then, of course, you would not have created a separate home
page because this is your home page.
I hope that makes it clear.
Did you want to add anything there, Catherine?
No, I don't think so.
I know that this topic can be a little bit confusing,
but you can either go with the way 2024 is set up by default
and not make the changes in Settings,
or you can make those changes and see the effects
when you make those changes.
But yeah, it's important to note that you will build
your home page for your blog in your blog home template
because that is the home page display that you have selected.
But of course, we have gone the other route.
We have selected a static home page and a static post page
or a separate post page.
So we are actually going to build our home page
within the page that we created.
And of course, for our post page, we will also
create it in the blog home template.
So let's click Save Changes.
And the next thing that we are going to start doing
is creating posts, right?
So our home page is in place, our blog page,
and then of course, if we go to Posts,
that is where we create posts for our blog or our post page,
whatever it may be.
OK, so I kind of used WordPress playground
just to show you this blog.
But now I'm going to jump to my other test website
where I've actually already started creating--
well, I've added images and some other things
to make it easier for this demo, right?
So let me jump to my home page.
I mean my dashboard.
And you will notice if we go to General,
my site title is Style Your Nest,
and my tagline is Make Your Space Yours.
So I've added my site title and tagline there.
I just wanted to show you that.
If we go to Pages, there's my pages that I've created
that I've just shown you how to create those pages.
But now this is where I wanted to make something very clear.
If I click on-- so I have not done that year yet,
because I actually wanted to show you year.
So let's go to Reading.
And my home page displays still sit to latest posts.
So let's select my home page, static home page, and post page.
But now I want to show you the template that
has been assigned to these, because that's
an important part of the important piece of the puzzle.
So if I go to Pages Now, you will notice next to Home,
it says Front Page, and Blog is Post Page.
If you open your home page, you will
notice that this has been assigned to the page template.
OK?
And if I go to my blog page that I created,
it says there you are currently editing the page that
shows your latest posts.
This has been assigned to the Blog Home template.
And I am actually going to build my blog page
within the Blog Home template.
I'm not going to add any content here.
I'm going to do that within the Blog Home template.
OK, so coming back, you will notice my pages are in place.
And if we go to posts, you will notice
I have already created a lot of posts.
So let's open one of them up.
I've added some dummy content.
And you will notice on the right side,
I've added a featured image.
And of course, the featured image will be displayed
on your posts page via the Query Loop block.
OK, so you will notice something else.
I have added categories, and I've added tags.
Now these are taxonomies.
And taxonomies in WordPress is a way of grouping posts
and custom post-types together.
So, yeah, tags is just a way for you
to granularly search your content.
And categories have parent and child relationships.
And they are usually the broader classification
of your content.
So to add a category, we go to categories,
and we go to tags.
But let's first create a new post for ourselves.
So I'm just going to grab some dummy content here,
show you how I created a post.
Right, so I'm going to add a new post.
And let's call this--
oh, let's me add my content so far.
I'm just going to call it a bathroom post for now.
And then on the right, I'm going to set a featured image.
And here's one of my-- as you will notice,
I've already added all my images to my media library.
So I can just grab the image that I wanted to.
All right, let's publish.
And of course, in your blog post now,
you can add a lot of other content,
and images, and so forth.
But this is just a demo.
So there's our new blog post.
And let's go to categories.
Now, for my interior design or home design website,
I've created some categories called art, bedroom, DIY,
flow, furniture, garden, home designs, kitchen, living room.
And if we go to tags, you will see more
the granular search options, as I mentioned.
So countertops on suite, floating vanities, guest kids.
And I'm going to create a new category called bathroom.
You'll see there's one called bedroom.
So let's create one called bathroom.
And I'm going to go ahead and add the new category.
You know, you could decide here if you
wanted to be a parent or a child category.
So for example, you could have said, OK, you want bedroom
to be a category and guest bedroom to be a subcategory,
for example.
OK, so I've got my new category.
And let's go to tags.
And I'm going to add a new one called both.
Let's say both tab.
Add a new tag.
OK.
Now let's go to our posts again.
Let's open both room post.
And in our sidebar on the right, you will notice this.
You've got the option to add a category.
Now at the moment, this post, all my posts
are added to the home designs category.
So I can say, oh, I want this to be assigned to the bathroom
category.
And then here below tags, I can type both tab.
And I can assign that tag.
And I can go ahead and hit Save.
All right.
And if I go to years post called bathroom inspiration,
if you click on Quick Edit--
so yeah, you will notice it's added to home designs.
And some of the tags is on suite and storage.
So of course, you can have multiple tags to a post.
But you usually have one or two categories for a post.
So let's quickly click on Quick Edit.
And then I can say, oh, I want the bathroom category as well.
And comma.
And I'll also add both tab.
So that's a quick way to add categories and tags
as well if you click on Quick Edit.
All right.
So now all our posts are in place.
Now let's move on to setting up our home page.
All right.
Any questions before I move on?
I don't see any questions in the chat.
All right.
So of course, the main thing with a blog is your blog post.
So this is, of course, the main focus is our posts.
So we have decided to have a static home page.
But on our home page, we are going to display our latest posts.
And then of course, on our blog page,
we will be able to display all our posts.
So I'm going to open my home page.
Now for now, of course, here's all the content.
I'm going to remove that now and show you
how I quickly created this home page using patterns.
So I'm going to click on the Insertor
and make my way to patterns.
And let's go to call to action.
I'm going to select this pattern.
Then I'm going to click on that and say Add After.
And I thought I wanted to add some quite blocks.
So let's add all our content and then we can style it a bit.
All right.
The next thing I wanted to add was a columns block,
two equal columns.
And in the left column, I'm going to add a quote block.
And my quote is your home is living space, not storage space.
And if I select the quote block, I can click on Add Citation.
And the person who said this is Francine J.
And now, of course, to save time, we can just duplicate this column.
Let's say duplicate the column.
And we can delete the empty column,
because we only want two columns.
And on this side, I wanted to say a room should feel collected,
not decorated.
And the person who said this is Albert Hadley.
All right.
Let's select our main column.
And we are also going to--
we want this to be full width.
It's just double check.
I think this is also full width.
Yes.
So we change the line to full width.
And now, we're going to say add after.
And as mentioned, I want you to display my latest posts.
So let's add a query loop block.
Now, Catherine will actually be running a lesson on the query loop
block later this week.
Am I right, Catherine?
That's right.
On Thursday, my time, I will post a link in my chat.
So yeah, if you want to learn more about the query loop block,
she will go into more depth.
But of course, the query loop block is used to display our posts.
And I will show you how I am going to display my latest posts
on my homepage.
Now, the great thing is when you add the query loop block,
you can choose a pattern.
Or you can start blank, but I'm going to choose a pattern.
And then you will notice there's lots of different patterns.
And of course, it's pulling in all my posts
that are already created, right?
We've looked at our posts.
We've created posts.
We've created tags.
We've created categories.
And those things will now be displayed on the front end
via the query loop block.
So I have decided on this pattern.
It says, "grill of posts featuring first post two columns."
So I'm going to select that.
But now you will notice there's a lot.
But I'm going to change that.
But if you want to modify a query loop block,
you have to open your side-plus settings.
And you actually have to deselect in here
a query from template.
So I want to change the query loop.
So I'm going to deselect, inherit from query.
And then you will notice you get more options here.
And you even get more options in the block toolball.
Let me just show you again.
Look at this changes as well.
OK.
And of course, there's actually two query loop blocks here.
There's one in the left column.
And there's one in the right column.
OK.
So let's select the query loop in the left column.
I've deselected inherit query from template.
And I actually just want to display one post.
And that will be my latest post.
And that's why it's the biggest one on the left.
So I'm going to say one.
And then we're going to select the query loop block
on the right.
Again, I'm going to deselect inherit query from template.
And something important to note now is the offset option.
You will see the offset is set at one,
meaning it will skip the first post.
And that's the one year on the right.
If I don't select this offset, this post
will show on the right as well.
And we don't want this post to be shown on the right.
So we're going to say offset.
We're going to skip the first post.
And in the right column, we only want to see two posts
in this query loop.
All right.
So now we can click Save.
And we will notice we only see our latest post
and then the other latest two posts.
And of course, the cool thing you'll see now
is we can see the date.
We can see the author.
We can see the categories.
Now as a reminder, let's just select our query loop block
and then open it up here.
So our post template block shows that there's a featured image,
a spacer block.
And then there's a stack block.
And within the stack block, you've got the post title,
you've got an excerpt.
And then you've got your post meta and blocks.
So you've got the date block by the author
and then your categories.
Now, of course, you can remove some of these blocks.
You can add-- so if I wanted to add the tag,
I could say add after.
And you know-- whoops.
You can add tags if you wanted to.
And then you'll notice, oh, now the tabs display.
And of course, if you change it in one query loop,
it will update everywhere else.
I'm not going to do that now.
I actually like this display.
So I'm going to remove this.
All right.
But our latest posts are in place on our static home page.
And then the last thing I wanted to add
was just another pattern.
So let's say add after.
Let's just make sure this is also--
yes, this is also full width.
And now we can add another pattern.
So of course, you can create your own blocks, et cetera.
But patterns just make it so much easier to build.
All right.
So let me go to featured.
Wes, before you do that, could we take a peek at one thing?
Yeah.
We had one really interesting question
where if you go back to that post,
you see how you have add a read more link on two of the three
posts.
But why is it missing from the leather couches post?
Oh, it's just because if you click on it, it appears.
Yeah.
I saw that yesterday if you click on it, it appears.
Yeah.
So nothing's strange.
Thank you.
OK.
That was an easy answer.
OK.
Cool.
Yeah, I noticed that yesterday I was like, oh, that's odd.
It disappears.
And then it comes back.
But yeah, somebody's got eyes like a hawk.
OK, so I'm going to add another pattern, go to patterns.
I'm going to go to featured.
And let's see what other options there are.
Oh, here's the one I want.
So I'm going to click on it.
And of course, it just--
it gets added automatically.
All right.
And now let's just change the image here.
I'm going to change my image here.
We can start changing the content.
And of course, start styling a bit.
OK.
So let's replace this image and select one of the other images.
And we can go to this pattern and we can replace this image.
And you will notice I've actually selected a portrait image
for this option.
So you will notice this is a portrait image
because the pattern also shows a portrait image.
But it would have scaled.
And now, of course, I can change the content here.
I can update the call to action.
So for example, if I look at this call to action,
it says our services.
Yeah, I can rather say something like find inspiration.
Find inspiration.
And I need to remind myself I should not
type that in capital letters.
I should actually use the options below typography.
So if I go to letter case, I can select uppercase.
There we go.
OK.
And now, of course, we can also update the content
in our patterns and so forth.
Now let's go ahead and install this a bit.
And I'm actually going to use global styles to do that.
So let me just do some padding for this column's block.
So as you will notice, it looks like we need some padding.
So I'm going to open styles in my right column.
And then for the top and bottom, I just
want to quickly check something.
I just wrote this down for myself so that I don't forget.
All right.
So for the top and bottom, I'm going
to add a little bit of padding.
But for the left and right padding,
I'm going to add a bit more.
And I'm going to drag this to 5.
OK.
And if we select this block, I just want to quickly check
something here.
It looks like--
yeah.
It looks like my pattern here is actually
part of this block now.
And that's not what I wanted.
So I am going to just pull it out there.
You can see, you just drag and drop and pull it out of that
container block.
There we go.
So now you will actually see this space
between the two sections.
Sorry, I don't know how that happened.
OK.
So I've added my content.
I've shown my latest posts.
So I'm just going to click Savior.
And now I'm going to make my way to appearance
and click on the editor to open the site editor.
And here we can actually see our page now, our home page.
And you will notice that my pages were added automatically
to my header.
So to update the header, we actually
need to do that within the template, right, not in the page.
So to update your header and footer,
we can go to templates.
And remember, our home page is attached to the page template.
So we can go to pages.
And let's go ahead and add our logo.
So I've added my site logo.
There we go.
I can enlarge that a little bit.
And of course, if you wanted to use a different header,
if you could select the header in your list view,
and you'll notice on the right, below design,
you can actually see all your pattern options.
So you could have selected a different pattern.
If you wanted to, I like this pattern,
so I'm going to stick with this one.
And the same for the footer.
If you select the footer, you'll notice
I've selected this pattern, but there's other footer patterns
to choose from as well.
OK, so we've added our logo.
The next thing we're going to do is
we are going to open up styles.
So let's just return.
Make our way to styles.
And yeah, you've got different styles to choose from.
And it's easier for me if I go to edit styles and you
browse styles from here.
You know your global styles.
Because now I don't have to do a lot of work.
I can choose one of the styles provided by my theme.
So let's see.
This is Ember.
Fossil.
And this is Ice.
OK, and I've selected, I've decided on Ice.
So I'm going to save.
And now the great thing is this style
has been applied to my entire site.
OK, but you'll notice this image is great.
So if I wanted to remove that, you know,
we can go back to our home page.
Go to pages.
I could have done that in the site editor as well.
You know, if you open your home page,
there we can see our style has been applied.
And I think there's an overlay color here.
What is this?
This is a deodorant filter that's been added.
So I can say clear.
OK, so I can say, "OK, I'm going to save this
here."
And then, you know, now you'll see all my images are clear
and they don't have a deodorant.
All right, so my style has been selected.
My home page has been set up.
Now we can start looking at our blog page.
But any questions before that?
I do not see any new questions.
All right, so now, of course,
I said we've got a static blog page or post page,
but we are not going to add any content to our page itself.
Remember, as I said, we are going to build this in the blog home template.
So I can go to my blog home template,
going to appearance, clicking on editor,
or I can click on blog home here and I can say, "Edit template."
And you will notice that there's already a pattern page added to,
and there you can see all my posts.
So technically, my theme has already provided this pattern for me.
But I want to change that.
So I'm going to select this group and I'm going to delete this.
It says, "Be careful, some of the little blocks will stop your post or page content from displaying."
And that's, of course, true, but we are going to add a different query loop block.
I'm going to show you that I actually selected a pattern again,
because that was better and easier and it was an easier way to display categories and tags.
So let's just start over again and click on the Insertor.
Let's make our way to patterns.
And then you will notice there's an option for pages.
And there's different patterns.
And there's actually one that says, "Blogging."
So I'm going to select that pattern.
And as I select that, it gets added to my, to my blog page.
And of course, this pattern already has a query loop in place.
But the great thing is on the side, you'll notice there's a column.
And it's got all the important information that I want.
All right, so let's tweak this the way we want it.
So let's say, delete that part.
Select the group. So about this author, you know, so I've added some dummy content,
an interior designer known for creating elegant functional spaces with a personal touch.
And here we can actually see popular categories.
So of course, people will be able to search your content with the categories you created.
And then useful links. So this is an navigation block.
So let's add a link and let's call it, let's say, you know, we call this latest
trains. And we can actually say, oh, there's going to be a page called latest trains.
And we can add that there. This isn't dropped now.
So let's just kick save. I'll show you now.
If we go back to pages, you will notice there's a latest trains page.
And of course, now we can add content here. It's not going to be one of the pages on our,
in our navigation menu. Let's just refresh this now.
But it might be a, you know, I can make that bold.
And somebody can click on that and find something, a page on, on latest trains or whatever.
You can add some other links there. And of course, the great thing about this pattern is as well that you've got the search block as well.
Now, at the moment, this, my, my pictures not showing, it's because I'm on a, on a local site, but I just wanted to show you, it will appear correctly.
And there's another site that I, that I'm using on a different hosting. So of course, the, the profile pick will appear correctly.
But at the moment, it's, it's not showing up.
All right. So now the cool thing is all my, my blog posts are, of course, displayed on, on this page and people can just keep scrolling all they can use the categories to search for.
All right. Now, let's look at the front end of our site again. And of course, the style, you know, the global styles that we selected is automatically selected.
It's automatically applied to our blog page.
So there's our home page again.
And if we click on blog, you know, you can add, you can add a heading there if you wanted to.
But now all our content is being displayed.
Now, at the moment, you'll see art and home design. So your categories are, yeah. So if you click on art, you will see all the posts related to art or, you know, if you click on bathroom, you will see all the, all the posts related to bathroom.
Or the bathroom category. And of course, folks will be able to use this to search. So if they click on flow.
Or they may use the, the search block.
And of course, now you can go ahead and add content to your about page, your inspiration page.
But in essence, your, your blog is, is ready to, to go live.
All right, that's everything that I wanted to show you today. And, and now I'm, I'm happy to, to answer some questions and, and open the floor for discussion.
So I am going to stop recording now. And then we can discuss this further. So if you are watching online, and thank you very much for joining us and we'll see you, we'll see you next time.