 All right, so once again, good morning everyone. Well, it's morning for me actually, it's probably night time for most people here. But thank you for joining today's online workshop. So online workshops, community-based learning sessions run by the WordPress trading team. These sessions are recorded and they'll be posted on WordPress.tv after the session is done. And yeah, so at the moment, I have what's called focus mode turned on in Zoom, which means if you turn your camera on, I can see you, but the other participants can't. That's just to keep a bit of safety for our participants. But anyway, if you have questions throughout the session, feel free to unmute and ask, turn your camera on and ask, or you can even use the Zoom chat to ask questions. My co-host Sabir is here with us from India. So it's like 5.30 in the morning for him today. He's gone up early for us. So thank you, Sabir, for joining us. And if you have any technical issues throughout the session, feel free to ask him and he will be able to help you out. All right, so today's session is titled Updating a Blogs Design Part Two. And I've written here informal live stream. So what we're doing is we're using my personal blog, which I'll drop the link in Zoom here. So this blog is currently using the 2022 theme. And what I'm doing is I'm updating that to the 2023 theme and I'm just doing a live stream, walking people through the process so they can see what it involves. Like, how do you update the theme on the site? And something I'm doing is I'm keeping my public site public and I'm working on a local site on my computer. So my site is still up and running. I'm working on my local site and then once I've got all the updates made on my local site, I'll upload that back to the server. And yeah, so last time in part one, we used the only one WP migration plugin to download my site from the server into a local installment on my computer. And I'm using a software called local by Flywheel to run WordPress on my computer. So just to show you this green screen here, this is the local software on my computer. And you can see I have lots of sites here that I use for my online workshops. Each of these are individual WordPress sites. And so last time we created this March 2023 site redesign website, which is hosted locally on my computer. So we can come over here. You can see the URL at the top here ends with dot local. So that's a local site on my computer and we're working on updates here. And then once the updates are done, we'll take that back and put it on the server. So just to confirm, does everybody understand what we're working on? Does everybody know what the focus of today's workshop is? Yep, Emily, thanks for the thumbs up. Gene for the green tick, great. So last time we had a little bit of an issue because the download file from the server was too big to upload into local. So we did a bit of a Google search trying to raise the upload limits for the only one WP migration plugin. But we got that done and we succeeded and we've changed the theme. So it's got appearance, themes. We did change the theme to 2023. And then we also worked on creating this header at the top of the site. So this is what the live site looks like. 2023 comes with a very plain and simple header. So we updated the header so it looks like this. So yeah, I thought that went pretty well. And so now what we want to do is update the main body of the homepage today so that it matches what I have over here. Or at least something very similar to this. We have an email sign up form, a search bar and a nice footer at the bottom. And so what we'll be doing is updating the 2023 theme to have a similar look. Now, before we get started, excuse me. So I haven't touched this site since the last online workshop. So it's been two or three weeks since we last opened this. And you will see there are a few red notices here about updating themes. In general, it's good practice to update themes and plugins whenever there's an update available because there could be security patches or just the developer's fixing broken code. So before I get started today, I just want to go through and make sure all these updates are done. And so I'm working with the most current and hopefully safest version of WordPress and themes. Let's see. I have the latest version of WordPress. There are updates to these two plugins. So let me update both of those. I think I have automatic updates set on my live site on the server. So the plugins there update automatically but I just don't have that set up on this local site at the moment, which is why I'm going through and doing this manually. All right, so those are updated, what's the other theme? The 2022 theme, I'm not, this theme isn't active on my site, but it is still installed. So I'm just going to update that as well. And yeah, we've got rid of all those red notices here. So that just makes me feel a bit better. All right, any questions before we get started, are we ready to dive in? Looks like we don't have any questions. So let's dive in. So we're working on editing the homepage. Now in block themes, you do that from appearance editor. All right, so I've just opened the editor, the site editor, and you'll see at the top here, the name of the page we're working on, we're working on the homepage. Last time we created a custom template part called the home header, which is what you're seeing at the top here. And now we're going to look at the main body of the homepage. So with 2023, close the right out, the content of the homepage is inside of group block and you'll see there's a header, there's a query loop, there's a spacer, and there are some columns at the bottom, what are the columns? This section here. Okay. I am just going to delete all this, I think. I'm just gonna delete all that. And I am going to manually recreate what I have on my other homepage. So at the moment, we're down to just the header, the footer, and blank content here. If I look at my real homepage, first of all, we have a section at the top here with a little bit of an introduction and my folder on the right. And then we have recent posts underneath that. So this is a query loop block. So let me just make a couple of sections. So here on this main section, we have a left and a right. So we have two sections next to each other. So that is inside a column block. So there are a few ways to add blocks. I like just going with the backslash and then columns. Let me add a column here and then it was similar to this, I think, the ratio, left and right ratio. So in the left, I'm just going to copy all this, copy all this text and paste it inside a paragraph block. There we go. And then in the right, we have a image. So I will add a image block. Let's see, select image from the media library. Have I, here we go. Now insert that and then let me just close the left out for the moment. So in this, this image is rounded. And the way I did that was I went to the image block settings here and clicked on rounded. So that's that. And then this yellow bar underneath here, I think I created that with a cover block. So what I did, come over here, let me close that out. So underneath the columns, I added a, let's insert after. Here, I added a cover block. And then I'm just going to select green for the moment so we have something. And then I removed this paragraph. So you just have this colored space here. And then I really like this gold color. So I want the exact code for that. So let's see, this is 189, 150, 34. 189, 150, 34, we open the settings. And if you change text to RGB, you can set the red, green and blue. So 189, 150, oh, what was it? Was it 34? 189, 150, it was, okay. So one, there we go. So then do that. And you can see I have this here. And then minimum height of cover. So at the moment, there's no number listed here, but the 2023 theme does have a minimum height set here. It's just not visible. So the theme does have a minimum point already set in the background. And in order to override that, we need to add a number here. So if I had like 30 pixels, let's see what that looks like. So let me save what I've done so far. Let me refresh this page. All right. And that looks pretty good, except the text and the image are stuck. Or like they go right to the left and right. But that's not what I have here, right? I do have a margin. So let's see. Let's see how to do this. There are a couple of ways I could do this. I could probably add margins to the columns block to move the content in from the left and right. But I'm actually going to look at the global styles because I have a feeling all the blocks are just going to go to the left and right. But can I change something in layouts here? Adding, I wonder if this is it. The left, let me try adding like 50 pixels. Right, 50 pixels. Hmm, that fixed the footer here. That fixed the footer. But it didn't change the columns block. Hmm, maybe I do need to change the settings on the columns block, let's see. Um, dimensions padding. So what happened if I do that? Ah, okay. So maybe that is what I have to do. So let's see. I just want padding on the left and right. And last time we talked about, we can add pixels here. Like, oops, we can add like 50 pixels to the left and right. Which looks good on desktop, but it doesn't look too great on mobile. Oops, but I just saved that. We come over here, I save that. So now I have a bit of like a gap on the left and right, which is nice. But if I look at this on mobile, let's see. They don't look too bad. What I was gonna say was sometimes I'd like to use, there you go. Rather than pixels, I like to use the viewport width. So that sets a percentage against the actual screen size people see. So at the moment, let's say 50 pixels, it's 50 pixels regardless of where you're looking at it on the desktop or mobile. Whereas if in viewport width, if I set say five, that's 5%. So whatever is 5% of the screen you're currently looking at, that would be the padding added to the page. Let me just save that. Does that look any better on mobile? So you can see that sort of closed the gap a bit on mobile because that calculates the width of a mobile screen and that's 5%. And on desktop, it does the same. It calculates the width here and that's 5% as well. All right, so that's pretty good. Now I guess one thing is my picture looks a bit large, especially on mobile. At the moment on my current site, when I switch this to mobile, I have the picture sort of floating up in the right hand corner here. Whereas on this site, the one I'm working on now, you see my gigantic face here. That's not the design I'm looking for. So let me see what we can do. Now the fact this is floating in the right here gives me the impression I did not use the columns block. Let me try something else. So instead of before, so I'm leaving this text in that here. Let me try something else. Let me close that out. I wonder if I did that. Let me just add a separator so we know. I'm recreating this below here to see if I like this better. So I add the text there and then I have a feeling I added an image block in the library. An image block, rounded. And then you used to be able to align this, align the image to the left and right of the page. People know what I'm talking about. I thought there used to be a second. Oh, here we go. No, no, we're looking at the wrong image. We're looking at this image block. There used to be a setting here where you could align the image left or right on the text. I'm not seeing that anymore. Amy, yeah, I know what you mean. Let me see, so this is life. Let's make that like 250 or something for the moment. Yeah, we have that text. So the text is left on. If you use auto for left and right, you will center it. Use auto for left and right. Are you talking about this here? No, no, margin, margin, okay, margin. Nope, isn't that? No, no, I'm just, I'm gonna ask Google. Word, press, image block, align right. You add an image block. If these, those are the things I'm looking for. These here, this here. Let me come back. Add text of an image block. No, that's not what we want. That's not what we want. Oh, let me, let me, let me go back. Let me go back. I am really puzzled. You are not in a column now? No, I'm not in a column now. So I'm trying something else here. So this is, this is the one in the column. What I was trying to do was I was trying to write a line. This, do you know what? I'm going to open this blog and see what I've done here. I'm going to cheat a bit. Let me duplicate that. All right. Then let me log into this site. And we come to pages. I never done it. We come to editor. Gene says image class align right. You know, I might have to do that. Let's see. So post content, post content. All right. So this is the setting I'm looking for, this one. You can see. So what I have at the moment is I have an image block which is align right next to paragraph blocks. And so this isn't inside a column block. It's just simply aligned right. And that's what I was looking for. That's what I was looking for. But if I come to my current site, that setting isn't there. I am really puzzled. So let me try what you suggest, Gene. So in advance, what does the text and image block do? Oh, okay. Let me try that in a moment. Just a moment. It is still rounded. So you suggested adding a class here, align, align right. Stay, close that, close that. Now, the big image is still there. So let's see. Emily, I'm using the 2023 thing. And on my other site, I was using 2022. Not sure if that's part of it. So Amy, let's see. You asked what does the list view look like? I guess you're talking about this. I'm going to go to the paragraph. And then Gene, you have a suggestion. What does the text and media and text block look like? All right. So that's another suggestion. So let me come down here. That's right. So keep that, insert after the media and text. All right. So that's the one you're looking at. Select media, here we go. Media, but the media on the right. And content. Once again, we'll copy that, paste that here. That's what that looks like. The media stack-for-mobile-cognition-for-multi-column will size default to stack-for-mobile, this one, Ryan. We'll turn that off. You can't actually make the image round. I am going to look into that after this video is done. I am puzzled here, and there should be a setting. There should be a setting here that just is aligned right, but it's not there anymore. So I am going to look into that later for the moment. Let me go with that original columns layout I had. Let me delete. Let me remove those blocks. So this looks okay on desktop. Let's see. Image, all right, what, what, what, what? This is the setting I was looking for. So when it's inside a column, align right. So what happens, what happens if I move this inside here? And then I go align right. And then for example, say if I delete this column, open the settings, so this is just the one column block, the image, let me shrink that to 250. Okay, okay, this is what I was hoping for before. All right, so I'm puzzled. I'm puzzled, but I've got what I was looking for. So what's happened is when I add an image block directly to the page and add that, you can see the alignment settings aren't here. But if I click on the image block inside the column, there is an alignment setting here, which to me is puzzling, but that's what I was looking for. So yeah, the mysteries of WordPress, I guess. Let me see, if I were to duplicate these blocks, let me pull the mouse off the column and I'll put them under the image. So if you look at the left here, I have a second image here and the text under it. And again, we don't have the align option. Let me group these, I group them and then click on the image. I do have the align setting. Huh, so when it's just sitting on the page, it doesn't have alignment setting. But if it's inside a column's block or a group's block, group block, then it does get alignment setting. Having a one column column's block doesn't seem right to me. So I'm gonna go with the group block setting here. I am really puzzled about that. I don't think that's how it used to work. So I might be wrong here, but yeah. All right, well, I guess it works. So let's see if I close that out. All right, so we have that. But now the text. So the text inside of a group block has a huge margin on the left here, which then makes me think maybe a column's block is better. So the column, what's this gap on the right? I mean, right, if I go to a one. I mean, if I make this 100% again, since we got rid of that second one. Yeah, that's interesting. I actually like the column's block layout here rather than the group block. I'm gonna delete the group block. Now I am gonna go with a one column column's block. Let me save that just to see what it looks like on the front end here. All right, it's looking pretty good. That's looking pretty good. So that's a desktop layout. And then if you go to mobile, that looks okay. The image still looks a bit large. The text is a bit broken. Maybe I can make the image a bit smaller. For example, let's see. I make this 200. Save, let's see how that looks on mobile. Yeah, that looks pretty good. I close that. Maybe if I move this down one. Let me see how that looks okay. And then if you inspect this on mobile. Yeah, I think I'll go with this for the moment. I think that looks okay. Huh, so we all learned. Yeah, Amy, you like the bolt to expand the entire column. Yeah, that's what I thought too. All right, well, that image alignment setting got me really puzzled there, but we've sorted it out. So let's move on to the next section. Let me just pause and then when you have any questions or comments about what we just did right now. Looks okay. If you have any questions, just drop them in the Zoom chat and I'll pick up on them. So we did this top section. Next we have the recent posts. So this is using a query loop block. So let's set that up. So let's see. So under the cover, insert after, we will add a query loop block. And let me see if I can find a pattern I like. So let's see what you have. So what you're seeing here is different like templates for the query loop block, which we can choose from. I am, and you can edit this after you added it. So I'm going to start with this left one actually because that has the title and the image and everything. So I've just added that and you can see it's already brought in some of my recent posts. But if you look over here, so I actually have my recent post in three columns. You can change that setting here. So we change this to grid view and there we go. So you can see we now have three columns. And then how many posts do I have showing? I have one, two, three, four, five, six posts showing. So let's see you come here. The query loop block post template. You can see, no. There used to be settings as it has it moved over here where you could change the number of posts that are shown. It used to be up here. It's my WordPress file or something because the setting isn't appearing again. We come to query loop. There was a setting right here, which lets you change. Oh, maybe I need to turn this off. There we go. All right, so query loop block. There's a setting here, inherit query from template. We need to turn that off. Turn that off and then we get settings. All right, all right. So if you click on this display settings, there's items for page. I'll increase that to six. And then we should see six posts. Yep. And then we have the title, the date, image, excerpt, and continue reading. So the order is a bit different here. Let's see. So we have the post title. So the post date, we need to move that up here underneath the title. We have title, post date, fidget image, excerpt, and then a separator. So it was separated, whatever separated over here. I don't. I don't think I need a separator. I'm just gonna delete that. So we'll delete the separator. And then let's see the date. We want to write a line there. And you know what? I'm going to just delete the excerpt. I don't think I need the excerpt. Remove, post excerpt. But, I'll enter half done. Is there a read more? Read more? Let me add a read more button. Well, actually, I guess you can't read more because there wasn't anything to read in the first place. Maybe I should add an excerpt. Insert half done. Let me excerpt. Can I reduce the text show? Well, I don't need so many words showing here, but maybe I can't change that. That might not be as easy as I was hoping. So what I'm looking at at the moment is, it sort of feels unbalanced. Like some images are coming above others. Maybe I should bring the title down here. That looks a bit neater, I think. Yeah, I might go with that. So the date, I move the date down under the title. I love the title looks. Okay. But this way, I think all the images sort of wind up next to each other. Look a bit nicer. Let me save that. Let me see how it looks on the real page over here. Yep, and again, it's using up the full screen width. Let me come into settings, settings. This doesn't have any margins to things. Does that mean it has to be done in global style? Over here you go to layout, mentioned padding. So the query loop blog, query loop blog doesn't have padding settings. So what I've learned is you can turn this into a group blog. So you have the query loop inside the group. And if you click on the group blog, you do have padding settings. So, oh, wow. That's not what I was looking for. Let's see. So the group blog, adding right, nope. What am I clicking on right now? To feature in the host template. Query loop, here we go. Query loop, max, okay. How does that look now? All right, that's getting there. I accidentally edited a padding over here on the group blog. Just redoing that. So at the moment, this is going from left to right and I want to add a bit of gaps to the left and right. The query loop blog itself doesn't have padding and margin settings. So I'm going to turn the query loop or put the query loop log inside a group blog because the group blog does have left and right padding settings. If I just put it into a group blog, it goes like that. But we have huge gaps on the left and right. And that's because now the query loop blog has a line setting and that's set to 650 pixels maximum. So I'm going to change that to full width, save that. And then for some reason, we have a gap on the left and no gap on the right. Not sure why that is, but let's go to group. Look into padding and let me just manually set. So on the right, we want to say, let's use the viewport width again. Say 5% and the left, we want viewport width 5%. Let's save that, let's open this. And then that looks pretty good. That looks pretty good. And you can spec this on mobile. So yeah, I think that looks okay. It's a bit different to what I have currently. I've tweaked it a little. The continue reading, I might add that. I might increase this to 10, increase that to 10. And the continue reading, so what that is. So you can add a read more link text here. So, what's continue reading? And then I think you can tell us some is that. And you can change the color of that. This is a link, so that yellow isn't good. Let's see, I probably have the same gold color set as before. So let me see what that one, that was 189, 150, 34. So 189, 150, 34. And this color combination would be hard for people to read. Oh, okay, let me make it a touch darker. So it's a bit different to the gold I had, but this way it'll be easier for people to read. All right, so let's save that. Let's come over here. And Amy, you say, is the gold a bit low contrast for accessibility? So yeah, we're on the same train of thought there. This is just decoration, so I don't think that's an issue. But yeah, for the text here, choosing a color that's good for accessibility, I think is important. Yeah, that's probably a bit, that's probably a bit light. All right, so we've got our query lip lock set. I might just sort of make the post date a bit larger. The post date, that's your typography. Amy, let me manually type that to 1.3, 1.5. Let's go with 1.5 and see how that looks. And I actually want to add a bit of a gap between the date and the image there. So I want to add a margin on the bottom here. This we can do with pixels. Yeah, that'd be great. I think that looks a bit nicer. Let's come over here, let's refresh the page. Yeah, there we go. I like that. Cool. Amy, you said you've got it. Yes, great. All right, so we can just have 10 minutes left this. I need to start figuring out how to wrap this up for today. But if you have any questions or if you want me to explain something I've done today one more time, we have 10 minutes left. So do send that in, the chat. But yeah, that was an interesting, it was interesting for me to say because some of those seconds, like even right now, this looks like it's flush against the right. But on the real side, we do have a gap. So that's interesting. Something I did miss was this recent post. I don't have any text at the moment saying recent post. So what I did was above the query loop. I mean, so before, this is probably a heading block. So, you know, some people don't know about this. So let me do that again. So usually when you add a block, you would type backslash and then the name of the block, I mean, so before. But with the heading block, you can type a number of sharps and then a space and you can get that level heading. So at the moment I have four sharps. And if I press four sharps in the space, this is a level four heading, which I can just start writing in. So at the moment I want a level two. So we can of course change that to level two or just remove that insert before. If I go sharp, dark space, that gives me a level two heading just like that. So yeah, it's a bit of a secret, not a lot of people know, recent posts. And then this was aligned to the center. And the reason why this is a level two heading is because a page should only ever have one level one heading. And for the homepage, the site title should be that level one heading. So let me just see inspect the site title. We can see here it says H1, so that's level one heading. So every other heading on the page should be level two or lower. So that's why this one over here is a level two heading. The typography, hmm, yeah, I'm probably want to match, I want to make the headings the same as the site title. So what is the site title's typography? What header, group, site title, what font do we use? Source, serial, pro, all right. So over here, what I'm going to do is I'm going to go into global styles, typography, and headings I'm going to make source, serial, pro. And then that should automatically change the font on all headings on my site. So just to go over that again, I'm not changing the block settings here, I went into global styles, global styles, typography, heading. And then here I can change the font for all headings, all that one. If you want, you can just go through and change like each level heading font one at a time. And before this, I just did that, save, come over here. And so now recent posts matches the heading font up there. And you can, the post titles have changed too. So all the post titles, these are heading blocks as well, I'm pretty sure. Yep, that's a H2 heading. And so they've all changed now to this same font style like that. And for consistency, I might change the date as well. So post date, post dates. Let me go into blocks. So wherever the post date block appears on my site, post date, here we go. I want that typography to be source, serif, row over here and refresh. And that has a bit more consistency. So the main body test has a different font to the headings, et cetera. And I've heard somewhere it's good to keep your fonts to just one or two types. Once you start adding three fonts and four fonts and five fonts all on the same page, that gets a bit too much. So keep it to just one or two fonts. All right, so let me look at the questions here. So Amy, you say, if you wanted to change the gap with between columns, is there a setting in the query loop block, all right? So you're probably talking about this gap we see here between the two images. Yep, all right, so let's have a look. Select the query loop block. We're coming to the block settings. Settings, columns three or five, the post filters cause, see the query loop block doesn't have any dimension settings, filters, like block gap and padding and all that. So it's not there. How about the post template? No, post template doesn't have that item. I think the answer right now is nope. I would expect the query loop block to have dimension settings, but that is probably coming in a future WordPress effect. So we do need, we need to wait a bit more for that. Any other questions people had? We did that, we set up the query loop block. Next page, do I have that setting? At the bottom of the query loop block. Ah, there's no way to show more posts. Okay, so that I do want to add. So post template, where's it here? So I'll let's see, that would be locks. I mean, you say, thanks, no problem. Theme, post title, post author, category, hang. Next post, previous post. Is this what we want? Previous post, next post, three more. Or actually, does the query loop block have a page nation? Want to read in error query from template. Post title, most oldest post, or have a this post template? Nope, we set after. So maybe that is previous post. Reversing, that doesn't feel right. Next, next post. Is this it? You know, that's not what we want. This, this setting. Well, we might start from there next time, figuring out what these blocks are. Because at the moment, my new site doesn't have that. The next and previous buttons. But I would like that, because at the moment, you see six blogs, you see six posts. But that's all you see on the front page. So, hmm, I'll figure that out. All right, well, that is all for today. I had a good learning session trying to figure out how to get those images aligned up here. That was a bit of a puzzle for me. Hopefully everybody else learned something new today as well. Thank you for jumping in and trying to help me figure out that image align setting. And yeah, obviously we're not done yet. So I've planned a part three for this workshop. I've prepared a part three, but the link isn't easily available. So let me quickly pick that up for people. Updating a blog's design. Actually, I have the link saved over here. I'll be quick on that. Come over here. Let me know if I can. So the address, let's try that. Here we go, yep. So let me drop that in the chat here for everyone. So part three of this session will be on April 7th. So the same time as today. I saw a couple of people joined at the end of the session. I'm not sure if daylight savings and that has got people confused a bit. But we'll be starting this. It says nine AM my time. That's zero UTC. So an hour before, whatever time it is right now for you. We have part three. And again, we're going to go through my homepage and hopefully we can get to the end of it. Just in case we encounter some bugs again, I might have to schedule a part four. But hopefully you're all learning something new. Yeah, we might need a part four because after I've finished the design, I might need a full session about how to get the local site back onto the server and update the content there. So anyway, yeah, Jean, I'm glad you learned something new. Amy, thank you so much for your questions and jumping in. And Robert, I always like people with a camera on. So thank you for showing your face. Mark Andrew, thank you for joining. And yeah, I look forward to seeing everybody again next month. All right, then enjoy the rest of your day and evening. Thank you, Amy. Bye, everyone.