 All right welcome. This is how to add a blog or news page to a WordPress website. All right. I am your host, Sarah Snow. I am hitting the road on Sunday in a class CRV, switching up my intro a little bit. So that's really exciting. I'm a former teacher. I also helped establish a program called Comic Book Classroom which promoted literacy through reading comics back in Denver, Colorado. And I live and travel with five birds and two dogs in my partner. So you may hear some background noise today. I love teaching WordPress, writing blogs, and swing dancing. I'm a training team contributor and I am lucky enough to be sponsored by Automatic. My screen isn't shared. Hmm. I'm going to do that now. Oh wait, no it is. Okay. Fascinating. We have a new Zoom and it's doing different things. That's right. All right. Quick expectations. Of course, respect yourself and everyone in this room. We are learning together, including me. I learned something new about query loops and blogs and WordPress every single time I do this, even though I have like a good Jillian website. So this is a social learning space. You are the source of great brilliant information. Can't read and talk. And this really works with kind, deliberate participation. So find your chat box. Definitely ask questions here, answer questions here, write down observations, things that break, things that are fun. All of that is welcome here. Do plan to experiment and it is totally fine if things break because we are going to be using that sample tester website. So stay curious, stay patient, and this is recorded and you can find these recordings over at learn.wordpress.org. So today's agenda, we are going to learn what I think is or to find out if it's right, the easiest way to create a blog and news page. If it turns out it's super difficult, that's really great for me to know. And I think this will work on both classic and block themes. And you are going to practice this on a website of your own. And you are also welcome to learn an alternative way to create a blog or news page. This one only works with block themes. It's slightly more advanced. And the idea is that you are going to practice doing this on a site of your own. So the first way is we are going to add a query loop to a page. So I am going to head over to local. Are you all able to see my screen still? I want to make sure I share the right one. Yes, desktop. Okay, we're good. Okay. So I set up a sample blog. I saved my glorious tester blog 10 minutes ago. And this is what I'm going to use today. Oh, it wasn't actually sharing. Oh, interesting. Okay, that's fine. Now you can see my blog. Perfect. And my blog, my local environment. Jerry, thank you so much for alerting me to that. All right. So we're going to start here and you're going to open your WP admin. I'm hoping you are using a test website for warning. If you are doing this on a live website, you definitely want to make a backup just in case something doesn't go the way that is expected. You're also welcome to attempt to use WordPress playground for this. This is an installation that is just in your browser here. It is under active development. So it may or may not work as expected. It may completely crash and burn. Either way, what fun, right? So either use your own test site or you can just watch along. So here we are in our dashboard. If you look at my website right now, my website currently looks like this. And again, this is just a glorious tester blog. There is not a lot here. And one thing that I think you should know is that if you're starting with a blank website, it's really important to be able to kind of see what you're doing. So we're going to start actually by adding some sample content. So if you know of a great sample content generator, drop it in the chat box. Otherwise, today we're going to use a plugin known as Fakerglass. So head to plugins, add new and search for Fakerglass. When you get here, click install now. This is going to generate dummy content that will be easy to remove, but it will also allow us to see what we are doing. So one dashboard, I'm going to write this in the chat. This is installed. Click the activate button. And when you are ready, type ready, thumbs up emoji in the chat box. So I know we are ready to move on. One thumbs up, perfect. If you're just observing, it's totally fine to be like, Hey, I'm just watching. See a second. Ready? Awesome. Wait for one more. All right. Excellent. Looks like we are just about here. Perfect. All right. So now we are going to use this plugin. So I love Fakerpress. So you're going to hover over that button there. Actually, where was it? I think, is it posts? It's been a minute since I've done this. Yes. Okay. Go to Fakerpress and posts because blog is generally, or even news pages are usually not always, but usually they are posts pages, or posts, not pages. So let's go ahead. We're going to, we're going to generate some fake content so we can get a really strong visual of what it is we're looking at. So I'm going to generate 15 posts. There's a lot of settings here, but let's just go with either 10 to 15. Okay. So once you add that, then let's put in a date range. So let's say that these blog posts happened in the last 15 days. So that is for 6 to 421. You'll see that that changed automatically. We just want post types for this. There are a lot of extra options, but for right now, we just want 15 posts from the last 15 days. So I'm going to write them in the chat. We're going to have some comments on here. Again, this is going to create a bunch of data for us that you're going to see. We're going to scroll down now. If you want, you can adjust the content size. That just is how long your content is, but don't worry about it for now. Keep scrolling down. Where are my pictures? Oh, image providers. So we have placeholder.com, and I believe what that does is just put blank pictures. I think Lorem Pixum is the only one that we want. So go ahead and just X out placeholders and just leave Lorem Pixum. So X out placeholders. That's what it was called. Keep Lorem Pixum. And when you are ready, scroll down to the very bottom and click generate. If you want to play with this a little bit, you can, but those are the four things we need. This is going to take a minute. When you're at this point where you've got your spinning little clock, go ahead and give me an emoji, thumbs up, or type ready. So I know you were with me. I'll notice that this is spinning, spinning, spinning. That is expected behavior. It's okay. Always gets me anxiety, like something's going to break. I've got a second ready. Excellent. Waiting for one more, and then we'll move on. Oh, hey, I was patient enough that it actually finished. I think that's the first time that's happened in one of my workshops. All right, I've got my third ready. So if yours is still spinning, don't worry too much about it. It does take a minute. What you'll find is if you head to your post, which is what we were generating, and all posts, suddenly we have a bunch of fake blog posts. Don't worry, we can get rid of them. It will take a sentence. That is okay. So now we've got a little something to work with. It's using some text. It's got some random placeholder images. Some of them actually have Lauren pick some images as well. So you're going to be able to visually see this a lot better than if you just went in and added something. We've got our blog posts now. And wherever you are, I'm going to actually switch really quick to a classic theme because I really want to make sure that this works with it. I'm pretty sure it does. I'm pretty sure I've done it before, but I'm just going to switch really quick. You do not need to switch. It's just for my own quick edification because I don't want to lie to anybody. Okay. So I just installed 2019 theme. Actually, I think, yeah, that's all. Just installed the 2019 theme. And my site currently looks like this. So you can see all of these different blog posts. But imagine that this was a different website. Imagine that this wasn't a front page. I wanted to add, or this was a front page, and I wanted to add an actual blog page to it rather than have the blog be on the front. So the first thing that I'm going to do is I'm going to go to pages and then add new. This is going to welcome you to the blog editor here. And you can give this page. This is going to be your new blog posts page. So you can name it whatever you want. It could just be blog. Everybody knows what that is. Most people know what that is these days. This can be news. This can be, I don't know, your thoughts, whatever you want to name it. Give it a name. So go to pages, click have new. Give it a name like blog or news. Choice is yours. So your next step here is you're going to use your insert, which can be found in one of two places. I usually look for it up here. It is also right there. But we're going to click toggle block inserter. And you're going to look for a block known as the query loop. And what this query loop is, is a way to display your blocks. So you can either choose to start blank or you can choose from patterns here. So step four, locate your inserter. Click it. Five, search for a query loop. And I recommend choosing a pattern. It's a little bit easier to to manipulate something that already exists rather than build it from scratch. So to choose a quick choose. And from here, you've got a bunch of different patterns to choose from. There's normally a way to switch. I wonder if that's not true on classic themes. So I'm on a classic theme right now and I'm just kind of scrolling down. There's sometimes a button here that lets you switch from like a, which we'll call it a list view to like a more grid view. And it's just a different type, but you can scroll down and just find one that you like. I wonder if there's one that's like grid. Yes, that's the only grid one. That's okay. I'm going to show you a couple of things. So I'm going to select this one. These are some of the patterns that are available to me. Your theme may provide more patterns. And now I have a post page here. Let me know when you are here and you have selected a pattern because we're going to talk about some of the things that you can do to customize it and play with it. I'm actually going to publish this page really quick and show you what mine ultimately looks like. Not working. Fascinating. That should be working, but I just had this problem on another website too. Why is that a thing? Okay, see, this is why we have these mad science experiments sometimes. So what they should be doing is displaying my blog post, but when I look at it on the front end, it's not showing up. I wonder if they're trying to discourage people from doing it. That's a good question. Okay, hold on just a quick second. I'm going to explore because I've seen this before on my own website, which I'm not trying to promote. I just use this for instructions. I'm just trying to see if the same thing is happening on like, hey, if anyone has seen this before or knows what's going on here, don't worry. I do have a way that will work. Okay. For us later, I just wonder if they're trying to not let people do that. I'm going to click around a little bit. Let me know when you're ready and you're playing with it because this is good practice. You're going to do something similar in a way that 100% will work on a block theme at least. Make sure I've got my query loop selected. Okay. So earlier today, I noticed that this was not working. I wonder if it's the inherited from a template. Sometimes they just have interesting settings turned on. You are learning with me today. Select you one more time. What is that setting? Fascinating. I need to figure out why that is, y'all. If somebody happens to know the answer and you're like, I think it's x or you just have a guess by all means. Here is why that's not working. We've added our query loop to our page. I'm going to use this tool up here. This is known as our insertter, our list view. This allows me to see everything that is here. It also allows me to get really specific with what I'm trying to work on. If I just start clicking around and I'm just trying to see different settings change over here, you're noticing that I'm not actually able to get to that query loop. It's selecting the post template instead. So for this one, what I've just learned right in front of you, which is why these are mad science experiments, you want to make sure that you select your query loop up here. And you want to deselect this inherit query from template. Just because I'm on a classic theme, I think, there isn't an archive research probably. That's my working theory and I'm going to find out. But I'm going to click update here. I'm going to view this page. Voila, my blog posts are here. Any questions so far that you've got? Are you ready for the next section? Emoji will do the trick. I'm hoping people are just experimenting. Okay, yes, we're ready. Cool. So as far as styling this goes, a lot of this is from your global style. Don't worry too much about how it looks on your test website. A lot of that will come from a different thing. But you've got a lot of options here. So right now, my query loop is pulling my blog post that the sample was that I just created. And it's saying, hey, I want your post title here. I want your post excerpt. I want your post date. You also have the ability to add some blocks underneath it. So for example, one thing that I really like is rather than a post excerpt, I like to remove that. And you'll notice it disappeared from every single one of my query loops. I like to put featured images in. So I think I'm going to put that above my post title. Right now this is grouped together. So I'm going to use these three dots to press insert before. I'm going to use my inserter to find what is known as the featured image block. And you'll notice that if a post has a featured image, suddenly that exists there on every single query loop post. And part of the beauty of doing it this way is that a lot of the changes that you make to your query loops. So for example, your post title, if I make a change to the text, let's say that I don't like this blue, I want to make it black. This should have changed. Did it change from something to something? No. Why is it not changing? Interesting. Is it the group? Is the group overwhelming it? No. Is it the post template? Huh. Okay. So for some reason this isn't changing, but if it were, it should apply to everything. Default format, link to post. And you'll notice that as you're looking through your different query loops, you've got a lot of different settings. So if I wanted to, I could say, hey, I want the date to link to my post. You could say, hey, I want my links here. This is a link. You could also say, hey, I want this to open in a new tab. There should be some styling here. I'm not quite sure why this isn't working. Part of this is that I'm working on a classic theme and I haven't ever done this on a classic theme before. So some of the expected behavior is not happening because a lot of this applies specifically to block themes. Jeffery's working theory's post title may not be text, but a header. Ooh, that's probably... Okay. So that would be something I would change in global styles. So other things may impact this. Great thought, Jeffrey. I love it. But yeah, so you're able to manipulate this and play with it this way. And now if I wanted to have this news page over here, I would be able to edit my website and I would be able to add this to a menu. So I'm going to create a new menu. I'm just going to call it the news menu because we don't have anything else here. It's going to go in the primary area. So it should be up here somewhere. And I'm just going to add that page that I just had. There it is. This is just a test theme. It's not meant to look particularly pretty, but now if I go to that website, I can click my news and here are all of my different blog posts. So that is the first way that you can do this. And it does work on classic themes. There's definitely some experimentation. That's why we do these on a test website to play with this to see how this works in a safer environment. But now I'm going to switch to a block theme. And we're going to do something really similar. It's just a slightly more advanced topic though. So I'm going to switch really quick. If you have a question, now is a great time to drop it in the chat. See what this looks like now. So I don't know if you remember what the theme looked like to start. But now you can see all of those blog posts that I've had are here. Some with featured images, some with placeholders, some with, some without. That's okay. So the next thing that, the next option that we have is we can create a template. And this only works in block themes. If you have a classic theme, this editor is not available to you. So I'm going to go to Appearance and Editor. This is how I get into my site editor if you are brand new to this. And right now, my home page has a query loop on it. There it is. It is right there. I'm going to remove this really quick just because I want to make sure that you can picture what's going on. Because I don't want this blog page on my front page. I want to have a separate blog page. So I'm just going to go ahead and remove that query loop. In fact, I'm going to remove this entire group and I'm going to create a home page really fast with the pattern. And if you're like, whoa, that's really cool. I want to know how to do that. Let me know in the chat. I will get you a resource. There are definitely some tutorials about how to use patterns. So I'm going to use my Inserter here. Just make a static front page. What am I doing? I need to click on, there we go. I just want, let's just do home. No results for home page. Oh, come now. Okay. All right. We'll do this. There we go. There's a lovely pattern. Now we have just a standard home page with a lot of images on there. Okay. Okay. So I've got my home page here. I want to add a news page here. Oh, I stole it from my other theme. Fascinating. So that's one of the benefits of the way that I just showed you. So one of the benefits or drawbacks, depending on how you feel about it, one of the benefits is if you make a page using a query loop like this, if you view it, even though I switched themes, you'll notice this layout is basically the same. I still have my featured image space. I still have the title. I still have the date. It still links to it. So it does preserve a lot of your blog content. It just applies the new themes styles to it. So you'll notice that the fonts change. The images are a little bit more uniform, a little smaller, things like that. So if you really take time to design a page like this, just in your page editor rather than your site editor, this will transfer. But there is another way to do it that is more advanced that I'm going to show you next. So right now I am going to start by removing this query loop. Now, you're welcome to keep this page as you want if you want to compare and contrast. Actually, let's do that. I'm not going to remove that query loop. I'm going to just make a new page and I'm just going to title it blog. So make a new page. This one's just going to be blog. We may talk about how to separate news from general blog in a minute, which could be very exciting. But we're just going to publish this page. We're not sticking anything onto it. Now, if you are brand new to blog themes, you're looking at this going, whoa, what is this? What am I looking at? Like, what are all of these different things? There is a great tutorial difference between the site editor, page editor. There's a quick tutorial. We're not going to go into it today. But if you're trying to figure out the difference between what we just did and what we're about to do, you may double check this intro to site editor and template editor. And then this tutorial here, it's about 10 minutes understanding the page editor, which is what we just used, and the site editor, which is exclusive to blog themes. So highlight those, save those. It'll be glorious if you need that. Okay. So we've created a blog page. Yeah, are we ready? I'm going to go, I'm going to assume yes. Quickly type no, stop. It's not ready. Okay, yes, great. At any point, you are welcome to say, hey, slow down. You are talking super fast. I try my best to go slow and then I get excited. So now rather than working in our page editor, which was here, this is your page editor, we're now going to work in our site editor. And the difference is your page editor is meant to be where the large majority of your content lives. So your personal images, your personal writing, your thought streams, news of your company, et cetera, that lives in the page editor. And that transfers from blog to blog as, or not blog to blog, that transfers from theme to theme as you saw on your news page. Meanwhile, your site editor is found in a block theme only. We're using a block theme here. If you wanted to find other block themes and play with this, if you go to appearance, add new, there is a brand new tab up here for block themes. There are 282 block themes for you to choose from and play with. So you are welcome to do that now or later. But each of these block themes will have this editor button instead of a customizer. And this takes you to your site editor. So generally speaking, you don't want to write your content here. So a lot of the times your images, your text, your thoughts that are in your head as you're typing onto the page, these generally don't live here with some exceptions. But that's just the briefing. This is more for structure. This is for the design of your website where things are positioned on your screen from your post title to your featured image to where the text is. That is what this is about. This is about design, not your writing. So in order to create a blog page here, I'm using the 2023 theme. If you're using a different block theme, let's say you got excited and found something fun to use, you may see some slightly different templates here. Your log post display usually lives in your index template. So if I click this, it looks like this theme already has this in here. So I'm going to click this pencil button and you're going to guess again that, hey, guess what? There is a query loop on this index page. It works virtually identically to the way it did in the page editor. So if I expand this out, look, there's that query loop. You are welcome to remove it again. I like to use three dots to select insert after. And you may notice if you're using a different theme, you may have different patterns here. So I'm going to choose another pattern here. Oh, and my icon that I'm used to seeing is not here. What? Wild. Okay. But you'll notice, like for example, I don't think this one might have been there. Okay. So these are the same. Let me actually choose start like. Nope. I don't know where one of my former options went. There used to be a thing that separated things from like a list of posts to a grid of posts, but I'm not finding that any more fascinating wordpress changes all the time. I'm going to remove that. I'm going to just insert after and select another one here. Let's do this one for a little bit of difference. So you'll notice that this is pulling in your posts again, the sample ones that we made. And it's done this in a couple of columns. So we've got our featured image on the left. We've got our post title, our excerpt on the right. You can see that that's working here. And you definitely have your settings again over here. So in the site editor, you've got settings. And as you click through all of these different things, you will find different options. So you can do things like, I feel like you should be able to change the size of this, but I might not be correct. But you should be able to edit it the same way. Yeah. Okay. So you can see we've got this set up here. Now, how do we get it so that my blog page isn't blank? You're going to click on this W icon up here. This is our index. I believe it should be your blog page. Now I might be learning something else here. I'll double click this. Looks like there's an alternative template here. Okay, we're going to find out. It might, the one I'm about to do may pull from this blog template. I believe it'll pull from the index, but we're going to find out because everything is a little different. So to set this, so let me show you what I'm talking about. So for pages, we created this blog page. If I view it right now, it's just blank, right? This is just a blank page. How do I get this to display the structure that I set up in my templates? You are now going to head to appearance, not appearance, settings. I believe it's under settings general. Could be wrong about this. It's not under general. Let me find out. It's been a long time since I visited this section. Hold on. Ah, here we go. So we're going to go to settings and reading. So to set this in a block theme, switching the home page from your latest posts, that's what we had been using to a static page. I can now select my post page here. So I'm going to select blog here. Probably should have made a home page because right now it doesn't, I don't know what would happen if I did that with that. Let's find out. If I don't select a home page, my guess is that it's going to show my blog page. I'm going to select the sample page that I have right now to serve as my home page because that is going to show this sample page. That is going to be what we see. So the sample page just looks like this in general. If I just go to my website, looking at it from the front, as you can see, that is what is now on my front page. But now let's see what that did. No, I didn't want to add one. I want to go to pages, all pages. You can see now that this has been designated as my post page. I'm going to click the view button so we can take a look at it. Oh no, I was right about something that I thought yesterday. Interesting. Okay. I'm going to click edit site. We're going to, so this is, what template is this? Hold on. I'm learning with you guys. Sorry, y'all. I thought that that was going to default to the index page, but it looks like this page template, known as home, this is going to display the latest post. Okay, that might be a change. Okay. So, okay, so we should have been editing the home page template. That's not going to be true for everything though. You see why I said this was the more advanced version, y'all. So with this in mind, I can remove this group and add a query loop instead. I'm just going to choose a random one standard page. I'm going to save it. And now, see my structure there, heading back to my dashboard, pages, all pages. Now this is my post page. That was that, apparently, your home page. You can see that I have that template there. So there's definitely a lot of complexity here. Not all lock themes are going to have all of these template parts. So you may want to experiment with this a little bit, just to get your bearings here. But it is 1238. And I want to make sure that you can get all of these fake posts off of your website as well. So let me think about what I want to do next. Give me two seconds. The template version is a lot more complex than I expected it to be and I'm going to have to play with that a little bit. But that's okay. The easiest way to do this to any website is just to add a query loop to a page there, the way that we did before. That's okay. But once you're done, let's say that you have been experimenting, you've been playing either with the way your query loop appears on your page or on your template in your editor. And now you're ready to write. How do you get rid of all of these? I'm going to head to fake or press. And I am going to just click on it. When you click on it, it brings you to the screen to erase your fake data. So all you have to do to get rid of all of that is type let it go, click delete. And now if I head back to those posts, we just have the default hello world. So if we go back and let's look at our news page just because that went a little bit better. And I'm really glad we had today's conversation because I'm working on making a tutorial for this. My news page now only has this hello world on it. But now if I write a new post, I think of the Simpsons, Mr. Burns says it, my post is here. Now I can publish it. And if I look at my pages, my news page, it will be there and in the layout that I select. And that's part of the reason why we want to use that fake data to begin with, just because if I were to try and manipulate this here, there's not a lot there. I don't even know really what I'm looking at. So that's why we use fake or press coming full circle there. Okay. So I think that's where we're going to pause. We had some really good user questions. So the first one that I got was, hey, can you run two blogs on one website? I'm not sure who asked that question, but it kind of depends on what you mean. So one of the things that was really, really cool was that we have a news page, right? And we also created a blog page. And let's say that I wanted to write a blog, but also have a news section in particular. You can do this through using either categories or tags. So let's say that my ahoy-hoy here, I don't want to edit the template. I want to edit the page. Got a little trigger happy. There we go. I'm going to edit this post. And I can use either categories or tags to separate this a little bit. So let's say that I wanted this to appear on both my blog page and also my news page, but I only want news to appear on that news page. What I can do here is I can select this category. I'm going to create a new one, news, add new category. And I will provide a link to a video resource. It's super short after this so that you can learn how to do this step by step. I've added this category here. Now if I head to my news page, which is where that query loop goes from, pages, all pages, news, edit. I can say, hey, I don't want this hello world. This is just a random blog post. It's something else that I wrote. It's not news though. My news is for my company. I can select this query loop. And there is a way to, where is it? Ah, it's under this filter. So I made sure. So what I did here to start was I selected query loop to make sure it's the right block and none of the other ones are selected. I scrolled down. You're noticing that there's a lot that you can do and play with here. I can select this filters button and a category is known as a taxonomy. So I'm going to filter this. I'm going to say, hey, I just want news to appear here. You'll notice that the hello world post is gone. However, if I head back to my post page, it's still there as well as that news article. So can you run two blogs on one page? You can have like different categories of the same topic, but let's say I wanted to write a blog about my dogs and a blog about my work. I probably wouldn't use the same website for those. Those are very different things. People who are interested in my dogs probably aren't interested in my work and people who are interested in my work probably aren't as interested in my dogs. So that was one question. As far as the best placement or positioning goes, I think this is all subjective. And then as far these last two, what's the best way to get a response and how do I creatively come up with content to share? I have a resource for you. So I'm going to show you a workshop that was recorded in the past. This is also where you will be able to find this recording as well. So you're going to go to learn.wordpress.org, click on View All Online Workshops. And this view recorded on the Line Workshop button. So that's one way to get there. You can also just save this link. I had a series called Get Blogging with WordPress. What was it? Blogging Content. I can't remember what it was called. Blogging Content. Here to start blogging in 2023, Planning Your Blogs Content. This one covers ways to write content well. So it is figuring out what is engaging, coming up with topics, all of that jazz as well. So I highly recommend that. And the last thing that I will leave you with is one more video resource so that you can play an experiment on your own. And that is also at WordPress. This one's a lot shorter though. And that is Taking Advantage of Query Loops. This will teach you a lot of the ins and outs of all the different things that Query Loops can do for your log page. All right. I could paste in the chat. Oh, apparently he's not letting me paste. Why not? There it goes. Alrighty. And I think that is time for us. So any final questions before we log off for the day? Well, thank you all for attending as well. Oh, I appreciate it very, very much. All right. Have a great day, y'all. I hope you have a good one.