 All right, so once again, hello everyone and welcome to today's workshop in today's workshop. I don't actually have any slides prepared though. Let me share my screen. I'm trying a new format today. So today's topic is updating a blog's design and I've called it a informal live stream. And what this is is I am going to take my personal blog and update the design. So I'm going to change the theme. I'm going to give it a fresh look and you're going to watch me do it. So you're going to see me change themes on the site and it might go well. It might not go well. We'll see how it goes. And basically I'm just going to be working on the site here and answering any questions you have in the chat. So I'll sort of explain what I'm doing, my thought process. But if you have any questions, you can unmute and ask or you can drop it in the Zoom chat. And hopefully it will give everybody an idea of how you can update a blog's design without having to pause the site or keep the site live but still update the design. So we'll see how that goes. Does that make sense? Does everybody understand what we're going to be doing today? Laura says very cool. All right. So hopefully that makes sense. And these online workshops hosted by the training team, these are a place where we can all learn together. So I don't know all the answers. So if we have questions, we can help each other answer each other's questions. And hopefully this will be an hour where we can all learn together. M says mad science experiment. Yes. That is exactly what this is. And I will say this is part one. I don't think we'll be able to complete the full redesign today. So I do have a part two scheduled later in March. And so the links in the meetup.com event. Let's see. There's a link to part two here. So do sign up for that as well if you enjoy today. All right. So the site we are going to be updating is my personal site. And I will drop the link in the zoom chat here. That's B sons blog. This is just what I'm using today. We can use any site. It just happens to be my own site. But let me open the WordPress admin dashboard for this as well. The sun is long. Right. So what's this WordPress administration email verification. So, oh, well, this email is correct. You all got to see my email address. But anyway, let's see. So to be honest, this has been a while since I've logged into my site. So I'm just trying to figure out what I'm seeing here. So this here is a advertisement from the jetpack plugin. So I'm just going to close that for the moment. And what you see here now is the normal dashboard of the site. Okay, John, before you begin, can you tell us if you have a reason to update your site? That's a very good question. The reason I'm updating my site is because I am currently using the 2022 theme. And when I use this theme, WordPress, they were still working on the template at the time, the custom templates. And so I tried to modify the theme design on my own, but I didn't have the full power of full site editing yet. This is over a year ago. And so now we have full site editing is pretty much done. We have a new 2023 theme, which uses custom templates and custom template parts. And so I wanted to transform my site from the 2022 theme to 2023 theme, set up custom templates for myself, and just give it a refresh. It's been, I think, a year and a half or more since I used this design. Does that answer your question, John? As a general rule, you don't have to update your site design that often. But for my personal blog, I just want to give it a fresh start. And I'm using full site editing seemed like a good idea here. All right. So yeah, we're going to change this to the 2023 theme. But while I'm working on the site design, I still want to keep this site up and live. I don't want to sort of break things while I'm working on it. So what I'm going to do is I'm going to copy my site content into a staging site. Work on the staging site and then bring the content back. So the staging site is like a testing environment where you can work on your site design and without affecting your real site. Now, depending on your host, your host might provide a staging environment. But today I'm going to use a service called local by lie wheel. Here we go. So I'll drop the link in the zoom chat as well. And what this is, is this allows you to easily create WordPress websites within your computer. So you don't need a server anywhere. Your computer becomes a WordPress server and you can build your site there. So what I'm going to do, this is my life site on the live server. I'm going to export the site, put it into a local site on my computer, work on the local site. Then in the next session, put the data back on the live site. Now to do that, to export your site content. And there are a few ways you can do it. But I like to use a plugin called all in one WordPress migration. I think it's what it's called. All in one WordPress migration. So let me get the link for everyone for that as well. There we go. So this is all in one WordPress migration. This is the plugin we're going to be using. Sushma, will this class recording be available? Yes. This recording will be available and uploaded to WordPress TV in a couple of days. So let's install this plugin. And there are other migration plugins you can use as well. I'm used to this plugin. I've used this plugin a number of times. And I like how simple you can export and import the plugin. So only one WordPress migration that has been installed. So what we do is we come to the new menu item here and click on export. Sushma says, thanks. No problem. All right. So we're going to export site. So we're going to export to file. And the reason why I'm going to work on my local computer is just because I find it simpler than working on a server somewhere. It's just a preference. You can definitely use your staging environment on your web host. There's no problem with that at home. You can do pretty much the same thing as what I'm doing here. I just like using a local environment and playing around and no worry about things breaking on the internet. Mark Andrew says he can update the event chat on Meetup with the actual link when it is posted. Thank you, Mark. That would be really, really helpful. All right. So my site is ready to be downloaded. So I'll click that. And you can see that's downloading here. And while that's downloading, let me open my local. Let's see. Hopefully you can see this on the screen. So what I'm doing here is I've already downloaded this software local. It's a free tool. It's a free tool you can use to build sites on your own computer. So what I'm going to do is I'm going to add a new site. You can see all my online workshops, all the test sites are using my online workshops are on local. So you can see all these sites here. But let me make a new site. So I'm going to create a new site. And this is going to be called March 2023 site redesign. Continue. We can just go with that. WordPress username, that. For the password, just a moment. You can fit any password. This is just for your local install, like local site. So you can set any password. But I have a password I frequently use to my own site. So I'll just add that there. And that's basically it. You just give it a name, give it some login details. And then local makes a site for you. I'm just giving my computer permission. There we go. Right. So here we are March 2023 site redesign. I'm going to start this. And by starring that, it just put it at the top here. So I can come back to it easily in my next online workshop. So this is the local software. This isn't WordPress. This is the local by Flywheel software you're seeing right now. And I like to turn this setting on one click admin. So usually when you open the WordPress admin screen, you have to enter your login details before you get in. But with local, because this is all on my computer, by turning this on, I can click WP admin. And it goes to the dashboard without me having to enter my login details. So that's just a setting I like. All right. So what I've just done is I've exported the content here. So that's downloaded on my computer. And I've just created a brand new website called March 2023 site redesign. So let's open this in a new tab. This is what the site looks like right now. Very simple. And so what I'm going to do is I'm going to import my current site data into this site. So then we can just work on the local site for the rest of this session. So to do that, we need to add the all in one WordPress migration plugin to this site as well. So I'll search for all in one WordPress migration. All right. So we installed the same plugin over here. We activate. So we see the menu item over here. And this time I'll click on import. And so you can drag and drop a backup here to import from maximum upload file size 300 megabytes. And this is at 700 megabytes. OK. So this is the first hurdle we come to. Now to increase maximum upload file size. So what we can do is we can edit the HT access file of this site to increase the maximum upload. So this is where it gets a bit technical because let's see. So I want to go to the site folder. Does local have a dot HT access file? Does anybody know maybe this isn't going to work? Index. Activate. WP config. I think you can actually modify this in WP config. Here we go. Edit the WP config file. So what I'm trying to do here is I'm trying to increase this maximum upload file size to 750. So we can upload this backup file. And to do that, this is the WP only one WP migration plugin help site. And it says how to increase maximum upload file size. One of the ways is to edit the WP config file. I have just opened. There we go. And this is the files inside my computer for this site. And we have the WP config dot PHP file. So we want to edit that. So let me do that. WP config. And we have a few questions in the chat. So let me. Let me see what it says. Oh, let's see. So Laura, the original WordPress dashboard looks different than the new one. Why? I'm guessing you mean this one? This dashboard looks different to this one. And I think that's my host. Let me just close this for a moment. My host, I think my host is WordPress.com. And so the WordPress.com host has sort of colored in the dashboard for me. So that's just the design by my host over here. What you're seeing right now is the simple plain WordPress installation colors. And that's why they look a bit different. Oh, okay. So everybody's been answering. Oh, great. Everybody's having a conversation answering for me. So that looks wonderful. John says a lot of hosts have different looks to their dashboard. Exactly. All right. So coming back to this WP config, we want to increase the maximum file size to 750 megabytes. So let me just copy all that. And this is the WP config file. Let's see. Now, I'm not a developer. So I don't like to go into code and edit stuff too often. But I do know if you scroll down in the WP config file, there's a comment here that says, add any custom values between this line and the stop editing line. So stop editing line is here. So right here we'll paste all the custom values. So right here we'll paste all this from the only one WordPress migration. And we want to change the upload max file size. We want to change this to 750 megabytes. And I'm not sure if this is relevant, but I'll change this just in case, the memory limit, the 750 megabytes. So I've added some code here. I've changed it to 750. I'm going to save my changes. And hopefully that has increased the maximum upload size on my site. So let's come back here. Let me refresh this page. 300 megabytes. Mm-hmm. Local. I think you'll need to restart the server. OK, let's try that. So let me stop the site. All right. So let's close that. Close that. And then let me restart this site. And let's see if this works. Only one WP migration import 300 megabytes. Let me see if I can upload anyway. So I'm dragging the file I downloaded before here. Nope. Close. Let me open this again. Let me just go through and change that as well. 750 for post max size. Stay. Let me close that. Let me stop the site. Restart. Only one WP migration import 300 megabytes. So yes. Unlimited is the pro version of the plugin. So that's that. I've been able to do this. I have a feeling it's because I'm doing a local. Let me look it up. So local by flywheel increase upload size. Let's try that. Maybe local has an idea. Local community. Oh, here we go. Someone else is trying this exactly. How do I increase that? Navigate to the conf PHP, PHP, any HBS update lines to the value you need. Oh, okay. So in the comments here. Robert says, are the lines starting with an at mark comments? No. The line starting with an this slash asterisk. These are the comments. I think at the at Mac, the at mark. It means something in programming, but it's not comments. It actually means something. So I've been trying to update the WP conflict, but let's, let's try something else. Let's try this answer. I've just found on the locals help site to see if this works. So it says navigate to com PHP, PHP, I, and I HBS. So let me open my files again. So we want to go to com PHP, PHP, I, and I HBS. So that's this far. So we will open this file like that. And then let's see post max size upload max file also after memory limit to 512. So max it's max. I think, I think the time I think the past memory limit. Okay. So I think this is it. So let me just go way over post max size 1000. So max file uploads. Is that when you know this person's in post max size upload max file size upload max file size. We actually see upload max file size. Let me let me just quickly. Load. Let me go upload max file size 300. So let me change this to 1024. All right. So I think hopefully this is it. So let me save the changes. John says go big or go home exactly. And because this is my own computer. I know I'm not going to like break something drastic or hopefully not. So I've updated that. Let's let me just call this site once more. Let me stop the site. Let me restart the site. Let's go to here import and yay. All right. So maximum upload file sizes now 1000 megabytes, which means I should be able to drag that backup file. The import process will override your website, including the database, media, plugins and themes. Please ensure that you have a backup of your data before proceeding to the next step. So if you're doing this on your server, then you want to make sure you have a backup of your files there. This is just a brand new blank site on my computer. So I don't have a backup, but that's okay. Let's proceed. And hopefully this works. Okay. So save permalink structure. All right. So now the login details here, because I've imported my external site here, the login details are the same as my external site. So not my local login details, but my external personal blog login details. So let me just put my password manager login. All right. So you can see this is on the server. So on the server, it says bsons.blog slash wp admin. And we know this one is my local site because the domain says March 2023 site redesign dot local. So that's how we can tell this is a local site and the other ones, the server site. The dashboard color is also different. So that also helps us identify the two sites. But now when we open this site, we should see exactly the same thing as my site on the server. All right. So something that broken here, probably because of a plugin setting. So let me have a look at that. So permalinks. But so far, I think the import has gone smoothly. So let's see. Let me go to dashboard. So this says you are currently running a development version of Jetpack currently in offline mode. Because your site URL is a known local development environment. So what it is, is when you look at my site, some of these things are cold. And that this is supposed to be my sign up form into email address below. So that's the subscription form here. And that's turned into code because Jetpack, the plugin Jetpack has turned off. It knows it's a local site. And so it's not doing everything it should. But we should be able to just leave that. And when I take the site back to the online version, it should work okay. So the first step done, I've been able to migrate my site from the server to my local environment. And now we can actually work on the site design. Any questions so far? So let's see. That page really held that was really good. We don't need that one anymore. Let's just keep it there so we can differentiate between the sites on the left and the local sites on the right. And can you turn the features Jetpack back on for a true view of how it will look live? Let me see. Let me see if I can turn. Okay, so it says this is specifically for offline local development sites. If you have an online staging site, you'll want to follow the staging sites guide. So it doesn't actually say if I can turn it back on. I think I might just have to update the site on the server to do that. It looks like if my staging site was online, like with my host, then they have a different guide for that. All right, so now to get into the redesign. So for the redesign, the first thing I want to do is change themes. So at the moment we're using 2022 and I'm going to add a new theme. So click add new and then search for 2023. Oh, here we go. So I'm going to activate. And that's it. It's activated. So let's refresh this. And yeah, that's what the site looks like. So now what I want to do is I want to turn this back into this, but in the 2023 theme. So there's one setting I want to check before we start. Not in general, we want to look at reading. So my home page displays a static page. So at the moment I'm looking at settings reading and there's a setting here. Where you can show your latest posts on your home page or show a static page instead. And when I look at why this is this is the live site. I actually show my recent posts on the front page here. I have a blog page. But now with the query loop blog. I'm actually I'm going to turn it. This way. So I'm going to set it so my front page on page shows my latest posts. And I will create a separate blog page. For that. So blog. So on pages place my latest posts. And the reason why I'm doing this is because I've done a couple of template editing in full site editing. And I feel keeping it to this setting makes things a bit simpler. So what we'll do is we'll come to WordPress appearance editor. And to this looks. This looks new. Right. So at the moment my home page is showing recent posts templates. Oh, um. Oh, is this. Do I have Gutenberg installed is that why I'm seeing this new editor. And luggage. Good. Oh, um. Let me temporarily turn that off because that just took me by surprise. I wasn't used to seeing that new editor. So what do you saw right now that is going to be that is going to be included in future versions of WordPress. So that's coming soon. But I am okay just working with the current version of WordPress. Let me come back to editor. There we go. Okay, this is what I'm used to. So on the templates. We have a few templates. This is a home displays posts of the home page. Mark Andrew says March 21st 6.2 should be released. Oh, collect in like three weeks or two weeks almost. So home display posts on the home page. So that's what we want to edit. We want to edit the home page template so that it looks like this. And what I've done is I have a custom header here on for the home page with a menu. But then if you look at my other pages, you can see I have a separate header for the other pages. So this is my life. So I have a different header for the home page and for other pages. So coming back to my local side, what I want to start by is creating some template parts. So the header is going to be what people normally see on my pages, this one. And then I'm going to make a new header called the home header. And that's going to be used just on the home page. All right. We have that. So I want to make the home header look like that. So let's see. I believe I have a cover blog. Select media from the media library. And all my followers are here. Here we go. Select that. And then the sun's blog. So that at the moment this we have a paragraph log. But I actually want to add into it before I want to add the title block site title. All right, because the site title actually already says B sun's blog. And for SEO purposes to by adding the site title block that becomes an H1 header and is great. So this is going to be the home header. So I don't need that to link to the home page. Let's see. And then we need to edit this. So it's in the center. The text is white. We want to make this large three, not five, not eight. That's looking good. And then let's see typography. The font actually looks a bit different. Here we go. On my site. Hmm. Let me see. So font family. I don't have any sense. Sometimes. Hmm. Okay, that looks like it. B sun's blog. That's that. So I'd say the appearance is probably bold. Or maybe semi-bold. That looks good. And then next, this is my tagline. So again, we don't need that. After the blog, we do want to add a tagline. It's like tagline. There we go. And then we'll send to that. Make the text white. Hmm. I think we made that talent. So that's probably what we did again. So typography. Appearance. I want to make that. It's not appearance. And typography. As a decoration. No. Letter spacing. No. No. Letter case. No. Font family. No. Oh my goodness. Where's, how do you make this italic? Appearance. Where is my spacing? Can I not italicize this? Hmm. Might have to come back to that. Aim says, does the color background add a color behind the text? Yes. Yes. I believe you're talking about this one. Um. That would. So if I did this. Like red. It would add a background to the text like that. I don't actually need that. So I'll turn that off. And John says, try command. I know let me try that. And I know. That's not working. Hmm. It feels odd. Like I would, yeah. And no problem, John. I would expect it to be here. So let me come back. So if I go to the header or the site title blog. What's it called? It's called appearance. No, no, that's not what it was. Where's italic there? Ah, it's under appearance. Oh, okay. Okay. I need to scroll down a bit. Click that. I'm over here. And appearance. Yeah, Mark Andrew. Thank you. So under appearance. I was just looking at the bold here, but if you scroll down. Ah, we have italics. Okay. So that's what I want. There we go. Regular italics. And then I probably want to make this a bit bigger as well. Let's try. Oh, that's a bit too big. Let's try to. Haha. Um. Okay. So we've got that. Now, to be honest, the gap there feels just a little too large. Um, so under dimensions. Hmm. That, that gap right there, that, that just feels a little too large. Um, I almost think it's a block spacing. Maybe it's margins. Let me try margins. Right. So that only makes margins larger. If I do that. Bottom. Can you make, can you set minus margins? Like minus 20. Oh, you can. Oh. All right. Oh, did that work? Or did it? Did it replace minus 20? No, I put it back. It puts it back to that. Hmm. Hmm. Um, and if you split the tagline into two lines with that changing everywhere, it's already displayed too. Um, see me like going. Okay. I'm trying to split it. So enter doesn't put it on the new line. Shift enter isn't working either. With the tagline block, it doesn't look like you can turn it into two lines. Hmm. Jean. Laura. Laura says check the top padding of the tagline. Okay. So that tagline dimensions. Heading. I'm link. Top. I make that zero. Hmm. No. Okay. Let me check. Let me see what Jean says. So if we turn these into a group block, so select two, turn them into a group block. And then the lock space. And here we go. What happens when I make that zero? Did that work? It did. Okay. So what I did there was I grouped. The site title and the tagline together. And then in the group block, I changed the block spacing to zero. So, um, that looks a bit better. Now this. Can I make that? There we go. If I make that full width. All right. All right. That looks pretty good. So one other thing is this menu bar. Um, so I think I will want to add that to the header here as well. So under the main cover block. We'll add one more cover block and insert after cover block. And what is the color we have here? I want the exact same color. So I'm going to inspect. And let me see if I can find the color codes. Computer. Nope. Let's see if I go to that shell. Nope. About that one. There we go. RGB 2, 89, 1, 2, 8. So here we'll go to RGB. It's 2. Oh, um, that's definitely not the color I want. Let's come back here. Um, RGB. So it's 2. Okay. And 89. And then 1, 2, 8. There we go. That's the color we wanted. Um, and then here we will add a navigations block. At the moment. Here we go. So home about blog contact categories. So the menu already exists. So we just need to set to primary and that looks good. Um, but then we want to sort of fix this up a bit. So it looks the same. Let's see. Um, Typography. So let's make this a bit larger. Three. Oh, that's, that's too large too. Yeah. Two looks a bit large as well. One, no 1.5. Maybe let's go with 1.5 and block spacing. Uh-huh. Okay. That's probably what I have over here. Yeah. So split apart a bit. Um, topography. Do we have appearance? Because I think I've got it a bit thinner. So let's make this. Um, light. Right. That looks pretty good. And then the cover blog. Let's see that feels way too large. So. Min and unheight of cover. If I said that, does that shrink it? So if I go 200. Well, yeah, that looks like it might work. 100 pixels. Okay. Maybe if I go. That looks pretty good. Um, and then here. All right. So we want to get rid of this white gap. To do that, let me try. What Laura or Jean actually said before. So let me group the two cover blocks. Let's see. So the first cover block. Second cover. Let me group those. Does this work? Turn that off. And then I want to change the block spacing. To. Zero. That actually worked. Let's see. Let me save all this so we don't lose what we've been working on. That looks pretty good. I think. That. This one's blog. That doesn't look too bad. Um, So we've just made the home header. Custom template part. So what I'm going to do is I'm going to add this to the home page template. At the moment. This is what the home page looks like. And we're going to replace this header. With the new custom template part I built. Come here. Um, So we'll remove the current header, remove header. And instead we will. So before. And we will add a. Custom. There's a template part template part. Here we go. Template part. And we will choose the. This one. Alright, so let me save that. Let me refresh this page. And that looks. Almost almost good. Um, so. What's happening, but what I'm worried about is this white gap at the very top. So that is probably something I want to remove as well. So what is this white gap? This white gap. Here we go. Is. Padding. On top of. The main page. So it's not, so I'm looking at the code here. It's not actually padding on the template part. It's on the actual page. Hmm. Hmm. Hmm. How could I remove that? How much padding is there? 28.8 pixels. Yeah. Yeah, Laura. This is easier to say than to type it in. Yeah. Yeah. Somebody had told me about taking the, the, um, a little toggle and like moving it over and then moving it back instead of using the numbers. This here. Yeah. Yeah. So, and then. There's that. Hmm. Yeah. I know what you're talking about. Like sometimes that can do leech. Head up. Head. Elements. Additional classes. Hmm. Maybe I should ask Google removed. Yeah. Yeah. The top of. Um. WordPress page. Could it be in global settings, John? Oh, that's. Okay. So, so let me, let me do that. Let me look at global settings. So global settings. Let's come over here. Layout. It's probably where. Um, adding. Let me, let me move that with the back. Let's see if that works. Let's, let's save that. Come over here. Fresh. Oh, it did work. Thanks, John. That's exactly what we needed. Okay. So what I did right now is we saw some white gap at the top here. I went into global styles. Uh, layout. And then change the top padding to zero. If you leave it, it looks like it's on zero. Um, but it actually isn't. So what I did was what Laura said, if I moved it up, moved it back, made sure it said zero, save. And then that removed the gap at the top. All right. I am extremely pleased with how that header looks. M was that header section created. Inserted as a div or as a header. Um, the answer is a header. M. And the read. So I can, I can show you the code. Um, inspect. And. Here. Um, So it's a header with the class WP block template part. Um, and that's because I created it with a custom template. Um, so when I made a custom template part, it asked me, is this a header or just a general custom template part. And because I selected header, it created it as a header. I don't think that's the case with my current site. It is what it might be. Oh, well. Um, okay. So that's that. Let me just check to see what this looks like on mobile. Beesons blog. Um, I mean, we could work on that a bit maybe next time, but it's pretty much what my current site looks like as well. That's okay. All right. So we are at the top of the hour. Um, so basically what we did today was we imported my public site into a local environment. So we can work on it. And we created a custom header template. Um, and we created a custom header template. Um, and then we changed the theme. So we changed the theme from 2022 2023. And then we recreated the header we see on my current site. Over onto this new site. To be honest, I'm very happy with the progress we made today. We shared information. We all gave each other ideas. I had to look online to find some answers. Um, we looked up a couple of plugins. Um, we looked up a couple of plugins. Um, we looked up a couple of plugins. Um, I thought it was very good. Um, does anybody have any final questions or comments they want to make before we close off this session? M says a group mad science experiment. That's exactly what this was. And hopefully everybody else found it enjoyable as much as I did as well. Um, so obviously we still need a part two and we may even need a part three to get through all this. Um, so, um, please do sign up for part two. This is, um, a couple of weeks out. It will be on March 24th, um, but it'll be the same same time as today's session. I will drop a link to part two in the zoom chat here. Part two. Um, Jean, look for the part two. Mark Andrew. I loved all the input really good. Robert. Great. I can use this. Thanks. Oh, I'm so glad you could use this. Um, that's, that I really enjoy hearing that. Um, nice experience. Thank you. Um, so you just have to save the URL to the local build. Or is there a way to find it? Save the URL. Hmm. The URL you see up here. This, this URL is for the local site. Is that what you're talking about? Are you talking about something else? Yes. Once you close the local site, how do you find it again? Oh, okay. Um, so what it is is local. The software local, the free software. Um, this saves the site here. So what I do next time is I open local. On my computer. Um, and then I just click, um, start sites at the moment. I will stop the site. So that then sort of closes the site, um, in the background. And next time I'll just click on this one. Click on start site and we can start right back from where we left off today. All right. Thank you everyone for joining. And I look forward to seeing you again, um, in the next online workshop. All right then. Bye. Bye.