 All right, so once again, hello everyone, and welcome to today's online workshop. Today's title, Updating a Blogs Design in Formal Livestream, Part Three. So, let me minimize that screen. All right, so what we're doing in this workshop is we're using my personal blog as an example and I'll drop the link in the Zoom chat here. We're taking my blog, which currently uses the 2022 theme and I'm changing the theme to 2023. And because it's a different theme, it looks different. So what I'm doing is I'm editing the templates in the 2023 theme so that the 2023 theme blog looks like this 2022 theme blog. So we're updating the theme's blog and what we're doing is we're doing this on a local site. So I used a plugin called only one WordPress migration to export my site from the server and we're using a software called local to build out this site on my local computer. And then once it's done, we'll upload that back to the server. Hopefully we can do that in part four but we'll see how we go today. I have a question here, are you using a child theme? No, I am not. At the moment, I'm just editing 2023 additives. All right, so I need to log in here again, just a moment please. Was that successful? Don't log in. No, just a moment please. There we go. Okay, so just to sort of refresh, I'm using the 2023 theme here and yeah, we're just editing the templates and what have you. All right, now before we jump into that, again, we have lots of updates here and especially this here WordPress 6.2 is available, please update now. It's always a good idea to update to the latest WordPress release because it has heaps of bug fixes, security patches, et cetera. So we're going to do that right now. Now, when you update your live site, make sure you have a backup because sometimes when you update your WordPress software it might clash with some plugins or your theme or some code you've added and you need to sort of rewind and fix those things. So whenever updating WordPress, it's good to backup your site first. We're working on the local environment here. So it's, even if something breaks, it's not that anybody's going to see it, so I'm just going to update. But hopefully, hopefully there aren't any issues and the update will go smoothly. Let's update to version 6.2. Let me use that. You asked, how do you backup? That's a good question. So there are a few ways to do this. If you manage your site server, then you can just like download the backup of the files on your server. You can just, usually your host, your website host has a backup mechanism. So some hosts like look after the backups for you. So you ask the host to take a backup or they take daily backups. If your host doesn't do that, sometimes it's an extra cost. You can just download your website files to your local computer, update the website and if it doesn't work, put the files back or you can use different plugins that also provide backup features. So for example, for my main blog, I use the Jetpack plugin, which has a backup feature and again, I pay for this monthly, but then that takes all the money backups for me and gives me a way to wind back to a previous backup if an issue happens. So there are a couple of ways to back up your site. All right, so that update went smoothly and you notice here, we're looking at local hosts. So this is my local site and this one bsons.blog is the main site. So it's looking pretty good at the moment. Nothing looks like it's broken. That's good. We'll also come over here and I know there's a few more red notifications. So let's see, Jetpack plugin needs update. Again, it's a good thing to update plugins and things as well because updates usually have security patches and sometimes new features too. So generally, whenever you see these red dots ask you to update something, it's a good idea to do that. All right, so we'll update those themes and hopefully we can then get started. All right, so that looks like we're ready. So last time, so let's see, in part one we imported the site to my local site and we made this header. So that header looks pretty much the same as our real sites, that's pretty good. Last time we worked on this section here and I remember we had a hard time getting this image to sort of align right. We tried this and that and we realized the image had to be inside another block, inside a group block or something to make it align right. So we finally got that done and then we also worked on the query loop block. So we have recent posts here and this looks pretty similar to what we have over here too. I think I just tweaked the design just slightly. But yeah, that looks pretty good. All right, so we've gone through that, we've got through that and today we're going to work on this footer area, the footer area. Oh, I remember now, last time we were trying to add this page nation numbers. So trying to see like all the posts and then we're trying to see how we could add that to my front page here. One of the attendees contacted me later and told me how you could do that. So thank you very much for doing that and let's see if we can set it up. All right, so to edit the homepage, we're going to the site editor, which is here. So you go to appearance and then editor. All right, and then this sort of black design is new with WordPress 6.2. So if you're not familiar with that, this is a very new feature of WordPress. But anyway, so we click in the right here and then you'll notice we're editing the home page template. So come further down and what we were trying to do is add the page nation numbers here. All right, so let me see if I can remember what this person told me. So you click on the query loop. I think it was the query loop log. Let me just close this out. All right, there's a page nation block you can add, but you can only add it to a specific location. So let's see, I think it was maybe after. So this previous post next was, this wasn't it. So let me remove those because those weren't right. All right, so after the post template, insert after, let's click on blocks and you come down to theme, post-exer post, next post, categories, post name, post template, page nation. Here we go. All right, so this page nation block, page nation, I'll tell you pronounce it right. This page nation block, you can only add that under the query loop and next to the post template. So last time I think I was like trying to add it next to the query loop or inside the post template and I was working in like incorrect locations and that's why the page nation block didn't show up. But now it's added and again, we can edit this a bit. So let me figure out, so how did I have playing on this side over here? So we had numbers on the left and next page on the right. I'm not sure if I like that. Maybe page nation, let me send to this, just to find some senting. And then here, you can also change the text here, I think. So older post and then in newer, oops, newer posts. I think I like that. What other settings do we have on the right? Let me close that out. Page number, well, to wrap it off the line. Arrow, what's an arrow? Oh, let me go with that, the Chevron, sounds fancy. I have a feeling, like does this text look small? Like photography, yeah, maybe I could adjust a little bigger. All right, let's save that and refresh the homepage. And yes, we've got this to appear. So that feels good, because last time we were really stuck on that. And ooh, I'm not sure what this large gap here is, but I like this design better. So let's go back to page number, is, but I like this design better. So yeah, all right. Now we come to the footer of the homepage. So this gray area is the main footer and these sections are added to the homepage. So let me add this into your email address below to receive updates from my help. So that's a subscribe block. So let's see, we have a group block here. Hmm, the footer is inside the group block. Hmm, I'm not sure that I like that. I move that out. Let me see if I bring it up here. Oops, now that's gone. I want to pull this outside. Hmm, let me put that there for the moment and then down, down. All right, so that footer is outside of the group block. So that's the group block. So underneath this insert after, what do they have? So again, I think this is a cover block with some content inside it. So we have a cover block and for the color, what is this color? Let's inspect that. We can find the color here. So that's two, 89, 128. So let's see, come over here. So we want to change that to RGB, 289, 128. There we go. Oh, it's pretty blue. And then, so we have a paragraph block here, into your email address to this. So we can, let's see, we just add that like that. And then remove the paragraph block and then that's a subscribe block. So I think that comes with the Jetpack plugin I'm using. Let me see, if I type subscribe, it's usually the sign up. Think, this is probably what I'm using. Think that's what I have. All right, so I don't ask people to call their name. So remove name field, email. Well, this notice here, I didn't have that last one. All right, but that was pretty good. And now that I'm looking at this, so with the word, with 2023, you can add styles. And inside, oops, inside styles, let's see, colors. I can actually change the theme colors. I don't know, it's a very green theme, but my theme uses the blue and the gold. So I am thinking, I might actually change this. Change these two, the blue and the gold. And that way, the colors should change across my whole site. Let me inspect the button, computed, 189, 150, 34. So I think if I change this, then this button should change color automatically as well. So the numbers were 189, 150, 34. 189, 150, oops, 34. Yep, that gold changed, that's good. Now I might set this green to the blue, let's see. So inspect 289, 128. All right, let's try that, 289, 128. And so now these colors appear in my theme palette. And so whenever I want to go and use them, I don't have to look up the number anymore and they're always there. I should have done that to start with actually, but you can see now my palette is more what I want. All right, so I have a question here in the Zoom chat from Debbie. You say, I'm using the Divi theme. How do I change theme to WordPress without breaking my site? WordPress looks much more user-friendly. So probably the whole process I'm doing right now is what I recommend. So what I've done is I've kept my live site live and I made a copy of my site and I'm changing the theme on my copy so that when the site design is completely changed, I'll just flip the sites around. So next time we'll hopefully upload this site I'm working on to the server. And I think that's just what you have to do when you're changing themes. So you keep your Divi theme site available and then some hosts provide a feature called staging sites. So a staging site is like a copy of your real site where you can work on and then hosts that provide staging sites usually have a button that says, upload your staging site to your real site or something. And so you can work on your site and then switch it around. I think that's just the best way to go when you're changing themes. So we have here, where, how do you copy your site? And another question, can you just repeat how we get it to do the local host thing? Yeah, so, all right. So we have, that's good, that's good. People are interested in making a copy of their site. So there are two options. The first one, the staging site, that would be a feature your host provides. Not every host provides it, but many hosts do. And for the staging site, inside your server settings, so not your WordPress dashboards, we're talking about your server dashboard. If your host provides staging sites, then there'll be a button there somewhere that says, create a staging site of your real site. So once you press that, automatically your host makes a copy. So you can work in that. And then there's a button that says launch your staging site or replace your staging site. So once you're done, you press that, then your host puts it back for you. So if your host offers staging site capabilities, that's probably the easiest way to do it. But what I've done right now is I've used a plugin. So what I'm using is a software called local by Liwill. And there are different services like this. So this isn't the only service you can use, but this is what I'm using. So let me drop the link in the Zoom chat here. And what local does is it allows me to make a WordPress site on my local computer. So you'll see, I just pulled up a new screen here. This smaller screen is the local software. So once you install that on your computer, you get a screen like this and you have a big plus button here. And you see it says add local site. So when you do that, the local software creates a new WordPress site on your computer. So if you use a staging site, your web host creates a copy on their servers. If you use local, you can create a new site on your own computer. So not on the server anyway. So if your host doesn't provide staging sites, this is a good idea. And you see all these here, these are all different WordPress websites all on my computer. That the moment we're using March 2023 site redesign. So this is the local site we're working on. So, but once you make this up, you still have to copy the content across. So what I did was, let's see, let's come back here. So I used a plugin called all in one WordPress migration, WP migration. And so when you click on the plugin, there's an export and then import. So what I did was I export. So on my real site, I installed this plugin and I exported the site. And then on that local site I created, I installed the same plugin. The plugin is free. It does have a premium version, but the basic plugin is free. So I installed it on both sites. I exported from this site and then I imported on this site. And so I'm working on the local site right now. You'll see at the top here it says local host. And once I'm done, I'll use the plugin to do the same thing but backwards. So I'll export it from my local site and import it to my public site. All right, so that's how you copy your site. And you can watch me do that whole process in part one of these series. So the recording is up on WordPress.tv. So do check that out. Yeah, no problem really. John said the local process is much less intimidating than it looks and very straightforward. Yes, and so again, watch part one. If you watch part one, you'll just see how I did it and you can follow along step by step for the video and do the same thing. All right, so coming back over here. So we just changed the global colors here and I should have done that at the very beginning. So now you all know this is feature WordPress 2023. And so now I don't have to keep looking up the color codes. I can just use that across my whole site. So we have this and now let me see how I want to design that. So this is my live site, B-Samsa blog. Honestly, this is way too long. I don't like that design. So let me see how I can just use it over here. Something I do like is this has joined 30 other subscribers. I do like to show that. Honestly, I do have a lot more subscribers but because of the Jetpack plugin, they're all signed up with their WordPress.com account not the email account. So they don't show up there. Anyway, let's see. So submission settings, what does that say? So this is all inside the Jetpack plugin. Submission settings. Once somebody submits a show of custom text messages, let me show a custom text message. Thank you for signing up. Please check your email link box too. So that's that. And then I want people, I want to get notified about this on my personal email. See our in connection, use other connection in advance. Don't need all those. All right, I think that looks pretty good. So this field, field with 100%, I think that's too large. That's too large. Let me see, what happens when I press 50%? Oops, wrong block, wrong block. Here we go. And that goes like that. I'm not sure if I like that sort of leaning to the left. Let me see, what does it look? Yeah, that's not what I want. I think I want all of this to be centered. So I want that to be centered. I want this, maybe, let's see. How can I do this? What is this? It's inside a form block. Maybe if I put it in like a table block, can I do that? Or a column block, actually. And so before, let me see if I make it a columns block. All right, all right. Let's see if I do that. So I want the email field here. And I want the subscribe button there. Oh, I want the subscribe button here. Oh, this one's locked. Why is that locked? Let's unlock that. Can I move this here? There we go. All right, so that's there. So when I close this, all right, so that's like that. Let's see, that one's floating up. We don't want that. So let me, what happens if I come like this? What's a line middle? No, a line bottom, that's better. And then let's see, so the columns block. How does that look so far? Let's open it over here. This column, oops, inner blocks use content with. That looks pretty good. Here we go, inner blocks use content with. That looks a bit better. Let me see what that does. Okay, not bad, bad. Oh, I have this still set to 50. So let me put that back to 100. That looks pretty good. That looks pretty good. I probably want this text centered. I want this centered as well. Let's see, can I center this? Terms consent. Or maybe, maybe I just need to add another paragraph block. So under columns, insert after, you know, it looks better. Let me remove that. Otherwise we can make this smaller. And that way I can align this to the center. All right, so let me save that again. How is this looking? All right, that's looking pretty good. So now we have lots of space around the place. I want to sort of squish that up a bit. So let's see where this space is coming from. For the cover block, minimum height of cover. No, this is not right. So let's save that. Does that shrink it down a bit? All right, that shrunk it down a bit. And then let's see, maybe the gap above and below the form. So if I were to group all of those, then the group block has block space. Let's see, let's make that zero. Oh, that's looking pretty good. What's this space here? Can you see that? Can you see that purple space? Let's see. Here too, there's a margin, there's a margin there. All right, let's see if I click on columns. Padding, oops, that's margin. And then margin bottom, zero. Let's see if that works. See if that works. There we go. That's looking pretty good. Still feels like there's a lot of ticks there. I might just get rid of that top paragraph block because the button says subscribe. So hopefully, let's see, hopefully people understand. This is how you subscribe. Yep, I think I like that. Let's look at inspect. And what I wanna do is look at mobile view. We come down an email field and here too, goes to the very right. That doesn't look nice. Let's see, let's do that. Let's see. Why would there be no gap on the right? And so that's sort of going out to the right. Look spacing, ooh. Let me add a bit of padding. What does that do? I don't know if I remove padding, but it's not. I've got margin. What's happening to the margin here? Padding, wait, bottom left. What happens if I add some? All right, so that's looking a bit better. Let me add a bit more padding to the right. What does that look? And then if I look at the desktop view, now that's lopsided. Why would there be more padding? Why would there be more padding on the left and the right? Let's inspect once more. The form block is sticking out to the right. The form block. So let's look at the form block. Oh, is it this padding? Top, right, bottom, left. So what happens if I make that zero? Oh, okay, okay, that looks better. And honestly, on mobile, I think that's okay. Like being that close to the edge of the screen. And then on desktop, and that looks pretty good. And then maybe we want this button centered. Ah, yeah, okay, okay. I'm gonna come back here. Yeah, that's looking pretty good to me, I think. Inspect, come to mobile. Yeah, let's go with that. All right, so I'm gonna just say that subscription section is done. I'm pretty good with what I got there. And I might just make this text just a little smaller. Let's see. So we might make this like 0.8 rim. Yeah, all right, let's stick to that. And then finally, let's make the, oh, I have a search, I have a search here. Huh, do people use the search field on people's sites and blogs? Like, I use Google search when I look for things. I'm not sure that I use an individual search field on people's blogs that often. Maybe in the Zoom chat here, let me know if you use this search field. Hmm, Debbie says yes, okay. Well, let me add one. I might not use it, but other people do. Yes, I use the site, so Jean says yes. All right, all right, so let's add this. So search, don't says that would be a great option in my opinion, especially if a good number of blog posts. All right, all right, so let's add this. So I've added a search, and again, I think this comes with the Jetpack plugin. So depending on what plugin you have, ooh, that looks pretty good. I don't think this is the default WordPress feature, so you do need to use a plugin to add this. But anyway, so we've got that. We've got that. Is there a WordPress option in the block option? So let me see if we search. Is that a WordPress option? I know the Jetpack plugins agree. So the fact that's, let me check that. WordPress search block. Ah, there it is. All right, so that needs a WordPress feature. Ah, I guess it was a search, okay, it was a search widget. So it used to be a search widget, but now they've made it a block so you can add it in your widgets or on your page content itself. It's probably what's happened there. Yep, no problem, John. All right, so we have this. Again, that feels too wide to me. What does it look over here? Yeah, yeah, yeah, that's definitely too wide. All right, so we could say, oh, ah, let's do percent. Let's do percent, let's say, but if I do percent, let me save that. When I on mobile, it's at 50% of the mobile screen as well. Yeah, so that's not what I want because that gets really small on mobile. So let me put that back, make that 100. I'm not seeing dimension settings here, so let's, oops, let's put this, let's group this. Because when you group something, you get all the dimension settings again. So let's see, let me save this. So at the moment, just grouping, what does that do? See, that looks pretty good on its own. And then what happens if I look at, look on mobile? I'm down here. So how did I fix that before? It was leaning to the right, was that margins? You look at margins, not margins, was it padding? Let me set the padding to zero, does that fix it? All right, so that's like that. And then we want some padding to the left and right. So let's do this, left. And unlike, I mentioned this last time, I like to use the viewport width because you can set the number and then it will use the percentage of the screen width. So mobile, if you use pixels, it uses the same pixel count on desktop and mobile, which doesn't look too great. But if you use view width, then it will do 10% of whatever screen you're looking on. So on desktops, the margin would be larger, but on mobile, it'll be smaller. And I like that. So let's make left and right 10. Let's save that. Let's come over here. And that looks pretty good, I think. I'm not sure if I like that icon though, let's see. Oops, I don't want that. Search. Ah, but we have subscribed, so maybe to differentiate it a bit. Yeah, let's go with that. All right, so that looks pretty good. And we have just 10 minutes left. Okay, so let's start on this further here. I have a question here. Where did you go to look at the mobile view? All right, so what I'm doing is I'm using a feature of my browser. So when you right click, I'm using Google Chrome right now. If you right click, it says here inspect. So when I click on inspect, usually it'll look like this. So you have all this like code and that that shows up on the right. And up here, there's a small icon that says toggle device toolbar. And when you click on this, it then shows a mobile view in the left here. And you can see up here, it has like some like different major mobile phones you can use, for example, an iPhone 12. This is how people will see this site on the iPhone 12. I mean, it just helps me get a quick view of what it looks like on mobile. Now with my real site, I will also definitely check on my real phone before making it live. Because the browser, this feature is pretty good, but it's not 100% perfect. So I will check on my phone once, but that's what I'm doing right now. I'm using the inspect tool of the browser. Yep, all right. All right, so we have a few minutes left. So the footer. I really like this footer here. We can probably change the spacing a bit, but I like the design. So we're going to just change the footer. And what I did, do people see that? I clicked on edit. Let me see if I can go back. Here we are. Let me see if I can go back and show people once again. So hit that, and play paths, template, here we go. Home. So when you click on the footer, it has an edit button. And if you click edit, what it does is it just focus on the footer. So it gets real about the rest of the page and I can simply edit the footer. Now, I'm just going to get rid of all that and I'm going to start new. And I'm pretty sure I found a pattern. I found a pattern that looks like that. So what I'm doing is I'm going to the insert a pattern and I'm going to footers. And I have a feeling it was one of these. What's it about? With the social icon? With the website title and credit line. Let's go with that one and see how we go. So that's the site. So what is this? This group uses a row block. Ah, okay. So am I using a row block over here? Let me inspect and then look on mobile. So it's probably a row block set to stack on mobile. Okay, so let's see. I will, I don't need that. So underneath site title, insert after. We have the tag line, site tag line. All right, but what I've done is these are always stacked on top of each other. So site title and tag line are like this. That, all right, so I just put those inside the stack which are inside a row, which are inside the group. I'm not sure what this group is, we can get rid of that. Okay, and then underneath we have the subscribe field again. Ah, I guess that's because it's across my whole site. So whatever page you open, there's a subscription field. I'll think about that. But something I do want is this gray. So what color am I using for the gray? Let's think about that. Oh, my color, I don't think I got the right thing. Let's inspect. Here we go, 60, 60, 60. I'm going to add that to my global styles actually. So colors, so not a pure black. What I have is a dark gray. So 60, 60, 60, we'll do that, we'll save. All right, so now when I come over here, let's see group. Can I give the entire group a background color? The entire group a dark gray, there we go. And links would be white and text would be white. There we go. That's pretty good. Let me save that. How does that look on the main site at the moment? All right, all right, we're getting there. We're getting there. We're not quite there, but we are at the end of the hour. So I feel like that's a good place to stop for the moment. So I think part four will be the completion of these series. We'll finish the photo and then I might have a quick look at the other pages, but I might just leave that so that we've pretty much remade the homepage. And then I think we'll work on just uploading the site back to the main server. So part five, I'll be doing that on May 4th, the Friday. And we'll, sorry, part four, part four on May 4th. And what we'll do is we'll complete the photo and then we'll work on exporting the local site, importing it to the real site and launching the new design live. So yeah, any questions people had, I can answer before we finish off. Merrily, this is so much fun. I'm glad you enjoy it. It's just me sort of figuring things out. But I do want to point out, I'm not using any code. So if you're used to making sites, then like even a couple of years ago, two or three years ago, before we really had the block editor and site editor, you would have to add CSS code to your WordPress site to make these minor adjustments that move things left or right or add or reduce padding. Whereas now I haven't used any code at all, it's all inside the site editor. So I personally am really excited about that. And then Demi, you said, great session. Thank you so much. When is part four? Yeah, so let me pull that up again. Part four, here, I will share this link in the Zoom chat. So part four and final part of this series is on May 5th. So I'm in Japan, so this is showing Japan time. For folks in the US, this will probably be the evening of May 4th. Sorry. Yeah, May 4th. So for me, it's May 5th, but for folks it's May 4th. All right, don't listen to me. Click on this link and you can sign up and see what time that is in your own time zone. All right, and that's it. So once again, thank you everybody for coming today. Lisa, it'll be tough to wait until May. I know, but hopefully you'll all be able to come again and have a fun session with me again then. All right, thank you everyone. Thank you for your time and I hope you have a great day. Bye.