 All right, so once again, hello everyone. I'm Ben from Japan. It's 9 a.m. for me today. It's about 15 degrees Celsius outside, nice and warm. And today I'll be delivering to you part four of my informal live stream where I'm updating of the logs design. So we started this series in March and all the parts have been reported and uploaded to WordPress.tv. So if you missed those, do go and check those out. But yeah, today should be the final part where we actually get the new design uploaded to the web. So what we've been doing is, this is my personal blog and this is made with the 2022 theme. So I've just got the link in Slack here. I'm not Slack, sorry, in the Zoom chat. This is made with the 2022 theme. And what we did was we downloaded this site into a local installation. We're using a software called local by Flywheel, which allows you to install a WordPress site on your local site. You don't need a server anyway, it just lives on your site. And that is this site over here. And this site, the local site, is made with the theme 2023. So we're using the most recent default theme with WordPress. And I've been customizing the 2023 theme homepage so that the site looks exactly the same as the 2022 theme site. So you can see, we've done a pretty good job, like this header pop area here, I think 2022 and 2023 look identical. And then, let's see, last time we came down here, we did custom posts and we started adding a subscribe box here and a search field. And then I think we just had the footer left. So let's see. All right, so I have this footer set on my live site right now. So what we're going to do is we're going to edit the footer on the new site so that it looks a bit similar. And then today, we're finally going to take this theme that I've been working on my local site and putting it back on the live site so that my live site has been updated to a new theme. So that's what we've been doing over the last few sessions. Does anybody have any questions about that? Anything they want me to clarify before we jump into this? Jerry, site looks nice. Thank you very much. Yeah, so, all right. Well, let's jump into this. So, what we want, so I keep switching between tabs but if you look in the address bar here, you'll see this as B-SUN's blog. That's the current live site using the 2022 thing. And if you see it says local host, that is the local site on my computer that we're working on. So let's modify the footer so that it looks a bit more like this. So to do that, oh, and as I mentioned, whenever there's an update available, you should generally update. And sometimes when you update a theme or plugin, it could break some features on your site. And but if you look here, this is our local site, our local site, so it's safe to test there. If something breaks, we can still fix it. There's the Jetpack plugin needs updating, all right. I'll go ahead and update that. Just take a couple of seconds and then we can jump into editing the actual site. Now, if you have any questions while I'm talking, feel free to add them to the Zoom chat here and I will get to them. Is that done? Yep, that looks good. All right, so we're editing the footer. So to do that, we go to appearance, editor. And you can see a preview of my site here and we want to edit the footer. So the footer is actually a template part. So we go to the footer, template parts footer and here we are. So I'll click on that. And now I can edit the footer. So what do we have? So we have the site title. We then have the tag line. We have some social icons on the right and then we have a subscribe field again. So let's see, I have the site title. I have the tag line and the social icons. We got that far and then we want a subscribe field. So let's see. First of all, the site title, let's make that larger. So it's already in age one, so that's good. So we come to the blog settings on the right, typography, yeah, that looks pretty good. Appearance, I think I had an italic site. Yep, italic, we click on the appearance here. If you scroll down, you'll see we have different italics, regular italic. Yeah, that looks pretty good. Let's see, what else? So the tag line is also italicized. Is that how you say it? So let's see, typography, appearance. So you'll notice here, the appearance doesn't automatically appear for the tag line block. But if you click on the three dots here, that shows different settings you can use. So we want appearance, and now I can make this italic into a regular italic. Actually, I might make it a bit thinner, light italic. Yeah, I think I like that better. Now, I think there's the gap here, the gap between the title and the tag line is a bit too large. So how do we fix that? I think it's a block spacing setting in the stack block, here we are. So let me open this up. At the moment, I have the title and the tag line inside a stack block. So let me see if I can modify the block spacing, here we go, in the stack block. So we make that zero. Yep, yep, yep. Maybe I want to add just a little bit of space there. How does that look? Maybe, actually, what if I go zero? Let me do five. All right, there we go. Beatshine's blog, bit of a gap. Now let's come over to the socials. So, whoops, here we go. So this is a really cool block, this social icons block. You can add the official icons for different social services here. What icons do I have? First of all, I have my WordPress profile. So let me just copy the link there. And here, let's see if you click on the block, there we go, you'll see a plus mark. I can click on the plus and then you can browse all the different social services for the official icon. So for the moment, we want WordPress. And then once you click on the icon, it lets you paste an address here. So, there we go. I've added WordPress, then I have Twitter. Oops. So let me copy my Twitter link. Copy link address, Twitter. So get rid of that sharp and add a Twitter link. Then what I have, I have LinkedIn. So copy link address. To be honest, I'm not really a big social media fan. So I'm not too active on these accounts. They're more for me to follow other people and see what they're doing. I don't have Instagram, so I'm gonna remove Instagram. And then click here, click on the plus. And we want LinkedIn. So here we go. You can search for the block by typing there. Click on the block to add an address. Here we go. And then get hub. Copy link address. You can click the plus. You want to get hub. Here we go. Click on that. Paste address. All right. Now the order was different. We have WordPress on the far left. Oops. So you can move the order of the blocks with the brackets here. So we'll move that to the left. There we go. And now if you click on the social block, social icons block, we can change some of the settings of the icons here. So open links in new tab. I think I want to turn that on so people can keep my website open. And then here we go. So if you come to styles, we have logos on the color. I think I want to make this white. There we go. So we have white. And then size. I think I want to make these icons a bit bigger. Normal. How's that? It's bigger than what I have now but I think it's a bit easier for people to see. That. And then maybe spacing you want to add just a little bit of spacing between. Oops. That's vertical. We want horizontal spacing. So. There we go. Just some space amount. Just a little. All right. So looking at the chat here. Em, didn't WordPress drop the Twitter API? So let's see. I think you're referring to WordPress.com and the Jetpack plugin. So they were using the Twitter API. So when you post something, it automatically tweets on your Twitter account. So you could automatically notify people on Twitter that you had published a new post. And that feature finished this week. But what I'm doing here is I'm just simply linking my Twitter account. So people can click there and jump to my Twitter. It's not that it's automatically posting or anything. It's just directing people to my Twitter account. So that still works. Yep. And then Jerry, I like that you can modify this. I presume you mean the icons here, the spacing and all that. Yeah, so I really like this social icons block. I think it's pretty cool. All right. So let me just say what we've done so far. So we don't lose that. Now, we also have a subscribe box there. And last time, so we already added a subscription field here. And if I recall correctly, it took a bit of effort trying to get this in there. So what I'm gonna do is I'm actually gonna go and copy these blocks and just paste, excuse me, paste them directly into the footer rather than trying to set it all up again. So I'm going to leave the footer editor. I'm going to go back to the homepage editor. Let me click that. Let me scroll down. Here we are. So let me see. What did I have here? I had a email field. I click on forms group. Maybe I want to copy the entire group. All right, so let me copy this. So I've selected the group with the subscription form. And I'm going to click on copy block. Then I'm going to step out of the page editor. And I'm going to go back to the footer. If I click, let's see. So I want to add after the group block I already see there. And I want to add, I just hit paste on my keyboard. And that pasted the entire group block over here. So it's still need a bit of modification, but at least we have the blocks here. So look at the chat here, Jerry. For the clarify, WordPress no longer allows you to create a blog post and have it automatically post to your Twitter social media account. Didn't know that happened. Yes, so I don't think that's a WordPress core feature. I think that's a Jetpack plugin feature or a Jetpack social feature. And so if you had the Jetpack installed, then yes, you could automatically post to Twitter. But Twitter recently started requesting payments for that. So until now it was something you could do for free, but Twitter started asking for payments. Oh yeah, thank you, Laura. And I think the Jetpack team just decided to discontinue it because it was like somebody had to cover the payments and they didn't want to ask the customer too. So yeah, that feature is no longer available. But I think like there are other plugins that do it. And if you pay it, if you pay Twitter, you can still. So it's not completely off the table. It's just not as easy as it used to be. Yeah, there we go. Went from free to something like $42,000 per month. It was a big jump. So my Broadway subscription field over, so that's actually inside the gray box. So let me see if I open that, open this. So maybe we actually want to move this form into this top group. Was that top group? Yikes. Let's see, the top group already has a gray background. So let me insert a paragraph. Oh, there we go. And then I'll add this here. All right, that's looking a bit better. So I just moved the form out of this bottom group, which we no longer need. Move group inside the top group, which already has a gray background. Let me close that. So we don't need this paragraph off anymore. I'm not sure if I like this actually. My thoughts are getting very wordy. Is that a word? There's a lot of content here in my footer. You know, I'm thinking this email subscription field and this search field. I added those to the homepage template. But let me just open a post. Maybe I want that to appear on all the footers. So the footer isn't just this gray section, but also this subscription and search field. Yeah, why not put the subscription before your social? Yeah, I'm going to actually change my site design. So I'm actually going to make this whole thing the footer. So this email, the blue email area and the search field in the footer. So it appears at the bottom of every page. So, so, so, so, let me delete this form. Remove form. Right, so that looks like a simple clean footer. So let me save that once more. What I'm going to do is I'm going to come over here, open the homepage template. And I want to copy this block. Let's see. The cover and the group. So I'll select both of those. Copy, copy blocks. And I'm going to add those into the footer. Can I just drag and drop here? Let me try that. But I've just opened the footer. Let me drag and drop the cover and group inside the footer. Ooh, all right, all right. So they're all inside the footer now. This search bot needs a bit of spacing above and below it. But I think I really like that. And then, so now this is going to appear on all the pages, not just the main page. So we refresh here. Yeah, so that when you tell a bit of spacing there, but now if you click on any of my posts, then you have the same information at the bottom of the footer. I think I'm going to go with that. So let's see here. Click on the footer. Another way to edit the footer is if you click on the footer block here, you can click edit. And that will take you to the footer editor directly. So that's also cool. Let's see. So this group, I think we need, okay, and I just saw your questions. So we need to get to that in a moment. So we want to add some spacing above and below this search bar. So dimensions. What happens if we add some padding? Let me do that. Let me do that. Let me save. Let me come over here. Let me refresh the page. There we go. That looks pretty good, I think. Let me just check that on mobile. Inspect. Change the mobile view to the very bottom. Yeah, that looks pretty good, I think. And now, if we open any of these posts, you'll see at the bottom, we have the subscription form and all that there, but the actual footer itself is a nice clean gray footer. So I actually really like that design. All right. M, is there a way to resize the space out those social media icons? There should be 45 by 45. So I presume you're talking about these. If you click on the social icons block, that's it's a social icons block, the main block here, and come to styles, you can edit the horizontal whip here. So you can space them out or put them closer to each other like that. Is that what you're referring to? I think I had this on like 23 or something. There we go. And is that what you're referring to? Well, you're talking about the size of these icons. You can change. Can they be larger? Yes. So the icon, you'll see there's a size setting here. So if you click that, you can make them large or huge. So you have four settings here. I'm just going with normal for the moment, but yes, you can change them. So what's that? Wicks, wicks, that looks fine. All right. One thing though, is I probably want to make this gray footer a bit smaller. There's maybe remove some gap on the top and bottom. So where is that gap coming from? Group. Is it some? Oh, look at this, look at that. Oh, here we go. There we go. Shrink that. Same. Let's come over here, refresh. Ah, there we go. That looks much better. Oh, except the top and bottom aren't even. So let me inspect that to see what's going on. Let's go to normal desktop view. So let me inspect. There we go. Computed. So we have, so you can see here the number padding. So there's too much padding on the bottom. Ah, here, of course. I didn't change this one. There we go. Change that to one. Come over here, refresh. All right. And then this white gap at the bottom here. So I remember we had an issue with the white gap at the top and we managed to get rid of that. So let me figure out where this white gap is coming from at the very bottom. So that is some padding on the page itself. So if I recall correctly, what we had to do was we had to step out of this. We need to go back to the homepage editor and then click on global styles. So styles. Was it layout? Yeah, John, you're saying global styles. Layout, padding, top. Oh, here we go. So padding at the bottom, make that zero. B sun's blog, let's refresh. There we have it. All right. I think that is looking pretty good. Let me just check mobile. Inspect. Come to the bottom. Yeah, I think I'll leave it at that. I want to complete this series. I want to get this back onto the web. So I'm going to say our homepage is complete. So just to note, I haven't changed the individual post designs. So you can see here, for example, if I open one of the posts, you can see here this design is different to this. You know, maybe I might just quickly edit that. I might just spend five minutes to edit the individual post design, so it's a bit similar. And then we'll upload this back to the web. So John, as a matter of usability, would it be possible to move the search option into the navigation? Just asking, into the navigation, let's see. So you're talking about this into the navigation. Do you mean up here next to the menu? So John, are you asking about moving this search box into the navigation menu up here? Maybe add a label for the search field. There's no context for what it is. Ah, here. Right, right, okay. Oh, so I'm not sure if that's what you meant, John, but Jean, I do understand your question. So let's see. And that search field looks odd. John, from the footer to the nav. So just a moment, so let's go at this one at a time. So optional placeholder, maybe I should add a placeholder. I'm here to search. Maybe that would give it a bit of context. And then move would be obvious next to the nav items. John, from the footer to the nav. All right, so I think we're all talking about moving it up here. Now, I'd say it's possible. So let's see, search. What I'm going to do is I'm going to copy this, duplicate, and then I'm going to move this up here. Let's see. So, top of the home header. Navigation, sort of. Navigation is inside a cover block. So we can put this search inside. Here we go. Oh, where did that go? All right, so the search is inside the navigation. So yes, we can do that. Or we can probably move it outside. And then let me move down. So you can see this is inside the cover, but not inside the navigation. So we can put it there, or we can put it inside the navigation. If you put it inside the navigation on mobile, on mobile, oops. All right, all right, let's go back, let's go back. Okay, what have I done? Let me go back. Yep, so the answer is yes. You can move the search through the navigation. Jerry, can you just add a row under the navigation for the search? So I presume this is what you're doing. This is what you're talking about. Inside the cover, we have the navigation and then we have the search. So if we save that, you'll see over here. Yeah, so we can do that. I am going to remove it for the moment. And I think for the sake of time, I'm going to leave it just down here for the moment and maybe afterwards I'll update my right side. But to answer your question, Jerry, yes, we can put the search field up next to navigation. And M, I agree with you that it would be more obvious up here. So I will do that after we're done. I'll probably want to tweak the settings a bit so it's not this huge search box. But the answer is yes, it can be done. All right, let me delete that. Save, save. All right, and I just want to spend five minutes to quickly update the post design. So we've been working on the homepage and the homepage looks pretty good. And then if you open a individual post, let's see, let me open the same post just so it's easier to compare. You'll see the post is designed with the title at the top, featured image and then the text and comments at the bottom. So I'll probably want to just update my post design so it looks like that as well. Actually, look at the header. Oh, the header is totally different. So I actually made a second header for my current site then. All right, let me see how much I can do in five minutes. So edit home. So to edit the post template, we open the list of templates and we go to single. So single is the template used for hosts. So we have the header at the top, but that needs to be changed. First of all, here we go. We want there to be the title and then the featured image. So let me open the list of blocks and group. So we want the title to come before the featured image and I don't even think we need this to be inside of groups. Let me just go like that, remove the group, featured image. So we probably want this smaller. Let me just save that, come over here. All right, something weird is going on here. Let me just remove this and start fresh because they might have different like padding and margins settings already added. So before the post content, we want to insert before, we want a title block, title. So we want the post title block and then we want a featured, post featured image block and we want to set the width to none, that looks good. Save, let's come over here, let's update. And it's full width. So why would that be? Is it a group setting? In the blocks, use content width. Let's turn that off, there we go. Update, there we go, that's looking a bit better. So Jerry, you're continually impressed with all that WordPress can do and how flexible it is. I am as well and it's getting, it's much better now than Wednesday, the block editor was first introduced about two years ago. You can do a lot more with block now. And the theme you're using is default 2023, right? Correct, this is just the default 2023 theme. M is the single template, a separate template just for posts. I believe so. Let me just, let me just step out. What does it say, single? Displays single posts on your website unless a custom template has been applied to that post or a dedicated template exists. Yeah, so you can set different templates to post if you want. So if there's no other template assigned to a post then it will use the single template. Why it's called single, I'm not exactly sure. Post template almost sounds like it would be better but that's what it's called. So single is how to edit your post layer. And I'll just know the thing. I actually have a line here, a separator line. So I'm gonna add that. That's something easy to add. Insert after, separator, there we go. Let me save that once more. Update, yep. So this can be tweaked a bit more. It can be tweaked a bit more but for the moment I think that looks pretty good. And for the sake of time I'm gonna leave the header as is but you can see what I've done on my current site is I've actually made a second header template part. So yeah, so what I would do is I would come out here come to template part and at the moment if I click on header I only have one header but actually I only have, oh, home header. What's that? Home header, and then what's header? So I've already made two headers. The home headers what I'm using on the home page and this header is what I'm using on the rest of my site. So Em, can you assign a different template to a single post, a single page or post? Yes, yes. So how you would do that is if you open your list of posts if you click quick edit you can see here you can choose the template it uses. So if you select default template that uses the single template and if you've made other template you can select the other template here. So the 2023 thing comes with a blank template which has no header, no footer. So I could select that if I wanted. But yeah, so this is where you would change the template under quick edit. All right, so this is done. The edits have been made and now I'm going to take this back to my active live site. So to do that last time what I did was I used only one migration to download my site into my local site and I am going to, I could do the same thing. I could do the same thing and export my site from my local site using only one WP migration and import it back into my live site. And hopefully everything would go okay but I am going to try something different today. What I'm going to do is I'm going to add a plugin called create block theme plugin. So, oops, add new. And what I'm going to do is I'm going to save the edits I've made as a child theme, create block theme. Here we go. So what this is going to do is this is a official plugin by the WordPress project and it can save all the changes I've made to my theme as a custom theme. So I don't actually have to code and create a theme. I can just export the changes I've made as a child theme and install that child theme or install that custom theme onto another site and apply my changes there as well. I'm hoping this is going to work. So let me show you. I've just installed create block theme. So should give me new, oh, let me refresh. Create block theme should give me, oh, here we go. So it's under Appearance, open Appearance. And if you come down, it says create block theme, right? Jerry, is that what they mean by fork? Yes, in the sensitives. So you have the main 2023 theme here and you have different options here. The create block thing gives you a few options. So the first one is export 2023, export the activated theme with user changes. So I could make a new theme with my changes and it's called 2023. But what I'm going to do in this case is I'm going to export it as a child theme of 2023 because whenever the main 2023 theme is updated with like bug fixes and that, I want those updates to come into my new site as well. So if I export my current theme as a new theme, then the updates don't come in. But if I export my current theme as a child theme, then the parent theme still gets updated and those updates are reflected on my site. But the customizations I made exist in the child theme so they're not affected. I hope that makes sense. So I'm going to create a child theme of 2023 and I can actually call this whatever I want. So I'm going to call it Ben's original 2023 theme. Oh, theme names cannot contain the word theme. Oh, okay. Do you know that? Ben's original 2023, let's do that. Theme description. This is the custom theme I designed during an online workshop series in March, May of 2023. So I can write whatever description I want. And then the only thing that's required is the theme name. So you can actually leave the rest here. I might add my WordPress username here. Screenshot, oh, look at that. I think that's new, that wasn't there last time I used this plugin. I'm just going to leave it all as is. Probably if you're going to redistribute your theme with other people, you might want to set these tags properly. But I'm just going to use the theme for myself. So I'm going to leave it like that and I'm going to click generate. And what that has done, it has taken all the changes I've made and created the child theme and given me a zip file with the child theme in it. So I have the zip. Now what I'll do is I'll come to my live site. So you notice up here, there's be some of the blog. We'll come to appearance themes. And you'll see it's using 2022 right now. Let me just go ahead and update that while we're at it. All right, so at the moment we're using 2022, but I'm going to change this to 2023 and use the child theme I've just created. So I first have to add 2023. Oh, here it is. So we'll install 2023. But I'm not going to activate that. I'm then going to upload a theme and I'm going to drag from my computer. Here we go. So B sounds original 2023 zip. I'm going to install that. All right, theme installed successfully. I'm going to activate that. That is not a message you want to see. Oh, that is not a nice message. All right, has my site gone down? Yes, oh no. Okay. My site is down. And that's what you get when you attend a live workshop like this. I am going to have to go into the back end of my site and figure out what's going on here. Yeah, and that's what happens with mad science experiments. Hit the back button. I tried hitting the back button, but my, okay, I've come this far. Come this way. Let me refresh. No. What if you restore the original and restore through local? So what has happened, folks, is I can't access WP admin on my site anymore. So I'm going to have to log in to my server and restore a backup of my site inside the server so that I can access WP admin again and so that I can fix whatever error is happening right now. And that is going to be more complicated than what I can do in the last 10 minutes. Em says, what happens if you didn't download the 2023 theme that your child is built on? Does the child theme stand on its own? That is a good question. That is a good question. I think this series needs a part five. I'm going to go back and yeah, yeah, John. Do you hear episode five coming? I think we need episode five. So I'm going to go back and figure out what exactly went wrong there. Maybe I should have just used only one WordPress migration to migrate my site. Yeah, I'm going to figure out what happened and we're going to have a part five where I show what exactly you should have done to get your changes from your local site up to your real site. Yeah, so we're a few minutes early but I think I'm going to close the workshop there so I can spend some time to figure out what actually went wrong here. Yeah, Laura, you just wanted to have a cliffhanger for a part five. I mean, that's the best cliffhanger I could have done. And what if you try to activate the 2023 theme first? Maybe that child is looking for its parent. That is a good point. I'm going to try that as well. All right, so I'm going to close this online workshop here today. Were there any final questions or thoughts people wanted to share before we do? And then I will message everyone in that Meetup group. So everybody signed up for part four here and I will message everyone when I've decided when I can host part five. And hopefully by part five we'll be able to fix what's going on here. John, regardless, this session has been very informative. Thank you, thank you for saying that. And I look forward to seeing everybody in part five. All right, thank you for joining everyone and have a great rest of your day.