 All right, so hello everyone and welcome to part five of my informal live stream series where I'm updating a blog's design and so for those who Watching this as the first part in these series and do go back and check parts one to four What I've been doing is I Have a live site these items blog which I'll share the link in the zoom chat again And this site runs the 2022 theme and so what I've done is I've downloaded the site to a local WordPress installation on my computer and I've updated the theme to 2023 Now the 2022 theme and the 2023 theme look different so what I've done is I've updated the theme and then I've been modifying the 2022 2023 theme theme files So that the site looks very similar to this and so last time This is the original site Last time and this is what we ended up with so you'll see in the address bucket says local folks This is the site on my local computer And this runs the 2023 theme Hello Lisa welcome And Last time I got it pretty close. So this is the original site And this is the new site. So I made a few adjustments Just regarding design and the footer. I like the new footer much better. So let me pull up the old footer Yeah, the bottom of the site was a bit. I don't know there was too much information there So I've managed to sort of squish that a bit and make it nice and tidy Now last time We were going to take this local site and put it back on the server. So what we did was we used the create block beam Plug-in So let me pull that up WordPress create block beam So I'll drop this link in the zoom chat So we were using this plug-in and what I was doing was I exported let's see. So this is my local site I exported the edited 2023 theme as a child thing of the 2023 theme So the create block theme lets you export The themes from your site So I exported the child theme. I then went over to my live site Uploaded the child theme and when I activated the child theme the site Through a critical era and broke down And that's where we left off last time So as you can see the site my live site is back up and running. So I was able to figure out what went wrong and Today I want to Reproduce that with everyone. So this session I'm going to upload that buggy Child thing once more I'm going to break my size on purpose And then I'm going to show you how I figured out what the problem was and how I fixed that last time So any questions about all that before we jump into this No, I mean you explained it really well I have a Is it is it better to have your like a blog separate from like if you have your a website for your business Or can you have your blog be part of your website? I Recommend having a blog as part of your website and so the reason being The biggest reason for me is SEO. So search engine optimization and search engines Like sites that produce new content regularly So if you have a business, I think a lot of businesses the site content doesn't change that frequently right so In that sense search engines look at your site and if it starts if it feels like it's getting outdated It's a great feel I want So a blog is actually a great way to always have fresh content on your site and sort of give you a An edge above competition in search engine results So yeah, my my recommendation is to have a blog in your company side rather than the separate side Good because that's that's what I did and I just did it recently. So I'm up to three block blog posts Okay. Yeah, yeah When I say blog regularly, I don't mean every day. I think search. Oh, no, no, no, no. Yeah, because I started this Couple months ago. So Okay Yeah, yeah I think I think so if I if I understand correctly search engines like consistency So even if it's once a month month if you post once a month for 12 months That's better than posting say 12 days in a row and they're not posting at all for a whole year Um, so as long as you stay consistent. Yeah, that's great. Okay. Great. Great Do the blogs have to be on the front page? to No, no, not necessarily um, seo, yeah As long as they show up in your site map Um, search engines will be able to find them And they can see there's new content going up now Yeah, if they show up on your front page, it helps people find the blog posts So there's benefits in putting them on the front page But for seo purposes specifically, there's no need for them to have to be on the front page. All right So let's dive into this Lisa, I know you came in a bit later. Were there any questions you wanted to ask before we dive into this You're all good. That's fine. No pressure all right so Let's see. So last time what we did Oh, good. Thank you. Thank you. All right, so at the moment I'm looking at my local site dashboard and each part in this series. I've said if there's an update Um, regarding the course of world the theme or the plugin Let's make sure we update it first but You'll notice here the update on my site this time is for the create lot being plug-in so To give you an overview of what actually happened last time Um When I uploaded the child thing to my site and activated that I actually did nothing wrong. There was a bug in the create block theme plugin which So there was a bug in the plugin which introduced a bug into my child theme and that's when my site died um And so I was able to identify the bug and I notified the create block theme development team And they patched the plugin and so the update you're seeing here Is because I filed a bug and they and they patched the plugin so I was a bit happy because in a small way I was able to identify a bug and I was able to contribute to WordPress I didn't actually fix the bug like I'm not a developer so I can't fix the plugin itself Um, but I was able to collect enough information to let them know And so they've now updated the plugin so hopefully today if we go through the same process It shouldn't happen um But so I do want to show how I figured out what was wrong and to do that I Saved the buggy Child theme on my computer from last time So what I'm going to do is I'm going to upload that to my live site And I'm going to break my live site and then um show you how I fixed that so Let's see. Let's come to appearance themes um so this so um Just to refresh our memories last time what I did was I went to this is my local site. I went to tools I know it wasn't I went to Appearance I went to create block theme And I exported all the edits I had made on my local site as a child theme of 2023 So then I entered some information here. I generated the child theme I downloaded that to my computer and that's what I'm going to upload again over here. So It's actually still here. So I'm going to delete this once Um, so I'll delete that All right. So at the moment my live site is using the 2022 theme And um, we installed the 2023 and then I'm going to upload The original theme I made last time upload theme So Ben's original 2023 I'm going to install And installing it didn't break it So we installed it. Okay, and it was when I activated it that the site crashed. So let's try this again Activate and This is what we got live time. So there has been a critical error on this website Please check your site admin email inbox for instructions And if I come over to my live site and refresh that Um, you'll see a critical error has broken the site so, um When this happens, I've learned um to look at the php Errors of a website. So when there's a critical error on the site The php errors Usually give you a hint as to what has gone wrong Um, and the way to view your php errors Is to first of all login to your server. So This is my website. This is the wordpress admin of my website I want to log into the actual server because that is usually where you'll find the php errors. So My site is hosted. Whoops. My site is hosted on pressable Pressable here we go. So pressable.com um and um So there are heaps of um hosts out there. So I'll just share the link in the zoom chat here But this is what I use And then let's see. So I want to get to my admin. So I'll log in to my pressable account We do that and log in not intercation code All right, I'm here and you'll see I have three sites. I have um Two test sites and then this is my real site the bsons.blog so This screen you're seeing right now. This is going to be different for each host. Each house has their own Back end display. So this is what pressable looks like, but most how most posts should have similar features um, so for pressable Let's see. So I just clicked into my site details and Let's see Okay, so pressable has a logs. I think this is where I went to logs. There we go So I went to my server under logs My pressable automatically logs php logs for me and so I had to look at the most recent error and you can see this was logged at um zero o'clock 15 minutes and four seconds. So that's um Just about when I broke this site here And you'll see the error here php pass error syntax error Unexpected identifier s expecting bracket in this particular location online 18 now If you're not a developer, that's a lot of gibberish. So I'm going to try and break this down and um Explain what is the most important part of this error. So Um, before we dive into it, I know a bit of programming, but I'm not a developer So I know enough to get myself into trouble most of the time. Um, and this time I was able to get myself out So that was lucky But anyway, so we know there's a php error um And we'll skip all this for the moment and the important part is this here so This is a location of where the error occurred um, so This is a file system. So under the a s r v folder under ht docs under wp hyphen content under themes under ben's original 2023 under patterns Under home dot php online 18 is where the error occurred um, so I'm not really sure what all this top stuff is but you'll see the error occurred in themes Ben's original 2023. So We activated my theme in the site growth and the error confirms That the error has indeed occurred in my original theme um, and in fact, it's happened in the patterns folder Under home dot php. So This means the error occurred in the home page template Of my original theme. So something on my home page template broke the site Um, and it happened on line 18. So what we now need to do is open this file and check line 18 Now there are a few ways to do that. Um, the first one Is um, sometimes your host will let you open the file directly um and uh, let's see Where would it be php mine? Oh, not that Hmm Sometimes it lets you open the file system right from um your server here No Whoops dashboards no Hmm Oh, anyway, the other the other way you can do it is what I did was I connected to my site um with ftp or sftp So ftp is called a file transfer protocol Um, and at the moment you can see i'm communicating with my site over my browser But if you if you use ftp You don't go through the browser and you sort of directly communicate with the server giving and receiving Files so For ftp, there are a few different softwares out there you can use. I use a software called Transmit So let me bring that over here um And you see I I already have a connection set up here bsams blog um, so I will connect You'll find the sftp logging credentials in your host's settings. So Let's see you can see here sftp um Principal tells me what my sftp logging credentials are so I've gone ahead and entered that into my sftp software and um On the right hand side. I've now connected to the server directly And on the left hand side That's it. I'll just um I'll put my desktop So on the left is my computer desktop on the right is my server And what I want to do is I want to find the file the error is in So coming back over here We know the error occurred in This location So let me bring this over here um So you'll see Um ftp doesn't always connect you to the very top folder. It sometimes connects you somewhere down um And you'll see I've connected to ht docs. So not sv but h doc. So we're starting from ht docs The ht docs there should be a folder called wp hyphen content And you see here there's a wp hyphen content. So I'll open that up Um And it takes a moment to load because it's connecting with the server and getting the information And next we want to go into themes So I'll open themes And then next we want to go to ben's original 2023 So we come to things we come to ben's original 2023 I'll open that up Then we come to patterns So I open patterns And then the error is in home dot php So the error is in this This file so we've identified the file and now we want to open the file and look at line 18 So what i'm going to do is with ftp. Um, I can't actually open it on the server So by double clicking that This is going to bring the home age home dot php to my desktop so I've copied this file over here to my desktop And I am going to Make a copy of this So duplicate Home copy Um, and the reason why I duplicated it is because I'm about to edit the home dot php And then put that file back on the server um And when I do that I don't want to create new errors. And so I always want to have a backup a copy That so that I can come back to this point in time And redo something in case I mess up so Home dot php I've created a copy so now I'm going to edit home dot php And to edit the php file you need a text editor And again, there are a number of text editors out there So I'm going to use one called brackets So you can use a text editor of your choice And what I'm going to do You see some of my Old files open there, but on my desktop. Um, I have home php So I'm going to open that In the text editor There you go And so you'll see I've got the home dot php from the desktop Open in my text editor And next we're going to look at line 18 and see what the problem is, but let me pause there for a moment Um, I hope I haven't lost anyone. Have you all been able to follow along understand what I'm doing here? Laura, yes Yep, that was good Yep All right, so um Now we know So we've opened the file in that has the problem And then we look at line 18 So You see the line numbers down on the left here and we come to line 18 So now we've identified the problem is in this particular line somewhere All right, now that we've got this far Can you make that screen bigger? That's a good idea just a moment If you Oh increase font size here we go. Okay, so how's that is that easy to see? Good. Yep. All right So line 18 now The one thing I like about brackets is you'll notice here before line 18 Everything is color-coded pretty nicely and then after line 18 it all becomes orange um, and that is because the brackets editor understands php code and so Um, it colors different aspects of the php code into different colors here And because something is wrong in line 18 The the bracket software has Identified there's something wrong and it gets confused and it can't color code everything correctly after that And so this is a confirmation that the error message I saw on my server And brackets have both now agreed that something has to change on line 18 here so um, hopefully once I make the change on line 18 Everything else after this line will get correctly color-coded as well. So that's a non developer way of checking error messages A developer would probably actually look at the details to figure out what's going on But this gives me another hint that something needs to change in line 18 And then what we see So now this is where we finally come to the actual error details So there's a php pass error Syntax error Unexpected identifier s expecting a bracket so Again, that's all difficult, but I understand this part. It says there's an unexpected s somewhere on line 18 that is breaking all this So let's have a look at line 18 And for me I sort of look at the color So so far it seems to be color-coded And then we come down further And then what I notice is that This s here Is sort of where it starts to get strange. So you see The the colors all sort of stop after here. There's an and there's an s here This is a very non developer way of thinking through this, but there's an s And the error over here said an s is the problem and what I notice Is the s comes after an apostrophe And there's an apostrophe here. There's another apostrophe there And I'm starting to think It's not the s that's the problem, but it's actually the apostrophe here That is causing the issue all right So um So this is ben's profile picture. Um, let me delete the apostrophe and see what happens All right, and you notice when I did that All the text after this got color-coded correctly Um, so that that gives me a hint that I'm probably on the right track here So here if I add the apostrophe back in That breaks That breaks the php language again and if I delete the apostrophe it corrects that so what I'm thinking is It's not the s itself that the problem is but it's actually The apostrophe the symbol here That's getting entered Now what is this? What is this ben's profile picture text? Um, I don't understand all of this, but I do understand figure Is the html code Used for images um Or and or here we have img. So it's an image And then under the image we have alt which is alternate text And so alt equals All of this now that's php codes. I don't understand it exactly, but it seems the apostrophe Inside the alternative text Of one of my images On my home page Is breaking my site All right, so putting all that together An apostrophe in the alternate text of an image on my home page Rogue my site And that is a very weird Error, um But I'm going to test my um theory here. So what I've done is I've deleted the apostrophe and So it's not correct english, but let's let's save this file Upload the file back to my server and see if this actually does solve the problem. So Um I've removed the apostrophe the color looks all good It looks like a proper php file again. So I'm going to save that Okay, so I just press control s on my keyboard to save that um, and then we come over here um and You'll notice the time the date on the home dot php on the left is right now. So 9 30 japan time um, so that's been updated Um, and you'll see on the right here the home dot php on the right is 9 13 Now what I'm going to do is I'm going to upload home php To the server and then this timestamp here should change Letting me know that I've uploaded and the file back to the server. So I'm going to double click this And actually that was incorrect because what it did Was it added the home dot php way up here when what I wanted it to do was replace this file so Actually, let me delete this home dot php That's not what we wanted to do And what I probably have to do is I probably have to Click into that folder. All right, so we're in wp content themes bsums original 2023 patterns and I want to um, I want to Update this home dot php. So we see that's 9 13. Let me try again. I double click that It says and a file with the same name already exists. So I'm going to replace And you'll see that changed to 9 31. So that's the current time right now And well what that did was it just removed the apostrophe. So I removed the apostrophe on my desktop I saved the file. I uploaded that back to the server. So hopefully My site should be fixed now So to check that We come over here Let me do a refresh And you'll see the wp had been fixed and on the front end. I refresh that Then the site has come back Now The layout looks a bit broken The layout looks broken, but the site is back online at least um So that was a very roundabout way but Basically, I identified an apostrophe in the alternative text of an image on the home page broke my site and um So if I go back to my local site and go into themes No, it's not going to editor I may have already fixed this but what I found Was the alternative text was here So it was this particular image the apostrophe in this alternative text here When it was exported into a child theme for somehow The create block theme plugin didn't process that symbol correctly and so that broke the php um So what I then did and hopefully I have a link No, I don't okay. So what I then did Um was I went to the create block theme plugin And if you scroll down it says how do I report an issue? So I opened this and it says if you have a bug to report, please submit it to the github repository as an issue So I went to the create block theme plugin repository and the issue was now closed, but um Is my issue You Already passed it Fane Oh, here we go right here apostrophe. There we go. So I filed an issue I filed an issue apostrophe in alternative text crashes site with a critical error I um wrote what the information I could And then this developer here opened a Pool request. Um, so we're getting to develop this stuff here, but basically he Updated the plugin file Right here. So There was something in the plugin details that needed to be fixed. Um, he was able to fix that Somebody confirmed the fixed the fix and they launched that And that so that basically updated the plugin So now what I want to do today is I've added the the apostrophe back to the alternative text here and I've saved that And I'm going to export this child theme again So An update was launched to the create block theme plugin. So I'm going to install that update um And this is where I have my fingers crossed again because this should now work, but we'll see how it goes So create block theme has been updated. I go to appearance create block theme And I'm going to create a child theme again So the theme name is going to be Beesons original 2023 Version two Like now I'm going to call that Ben's Ben's original 2022 version two Um, this is my second attempt at exporting a child theme Um So then we can leave all that I'm going to generate That doesn't look nice Um What on earth is that? What on earth is that? hmm Let me let me try something else. Um export on 20 Let me try then if I refresh this page And let me try So Ben Maybe it doesn't like the possibility of Ben's original 2023 Version two let me Let me do this without any symbols Yeah, there's a um a lot of coding that doesn't like special uh symbols and there's even like a list of symbols not to use in certain places Yeah But are you trying to make a child? Are you trying to create a child theme out of a child theme? Uh, is that what I'm doing? Let me think what so I'm looking at my local site. What is my theme right now? So the theme right now, what do you have activated? Yeah, so 2023 is activated and then I should be able to just come here And let me look like I created a new theme cloning active. Let me try this. So not a child theme, but I'm going to clone 2023 so Ben But if you clone it won't you and then you get an update for 2023 wouldn't it affect your your new theme? Wouldn't it be better to create a blank theme? Even though it's not blank it would take over all your All your changes wouldn't it? um So with the create one thing plug in if I press create block and create blank theme It would change my the current theme on my side to a blank theme so I can start fresh with all my edits Okay, if I do clone 2023 It'll save all the edits I have right now As a new thing Now as you said if 2023 is updated in future. I won't get those updates but I don't want to have to deal with this great blank theme plug-in issue again So let me just see if this works and I can always come back and re-export as a child theme later later Then maybe like it doesn't even want numbers 2023 Generate all right some we have a quick look to see if I know what it is Do I actually hook? What I'm going to do is I'm going to log out of my site and log back in and see if that helps. Um, so Oops log out Let me just close this let me close all that Yeah, it might be a caching issue too. Yeah. Yeah So I this so what you're seeing right now is my local um installation March 2023 site redesign So let me press WP admin that should automatically log me in. Okay, so I'm in Let's just check for my theme 2023 The site The site looks okay. It doesn't look like they're broken anywhere All right, then we come to create both things And let me let me try a child theme again. So then original 20 23 Generate Please oh, please All right, then Well up on the top where you kept going through like when you were troubleshooting before it said that line 70 there was it Can you look at the very top where it has line 70? You're like, what's wrong there? undefined the right key in So this error is in WP contents plugins create block theme plugin admin create theme theme styles.php online 70 So this error is now inside the plugin itself It's in the in the create log theme plugins And then But this one Hey, Ben. I just used the plugin on my on my end in local and I was able to get a zip file Of it with no errors popping up all right, so How about okay, let me uninstall create block theme and Like uninstall the plugin and install it fresh and see if that helps so I'm going to deactivate Create block theme I'm going to delete Yes But I haven't actually used that plugin on my site yet. Um, I've just been editing the 2023 um theme as is so I refreshed my site and that still looks okay So again, yeah, I tried to use the create block theme when it first came out and I got one of those critical error pages So I was like, okay. I'm just gonna let it uh sit here and get tested out a little bit more All right, um, let's see so Update to six so the WordPress version can actually be updated as well. I might do that Yeah, because um, there was that bug and security issue over the weekend Yeah That they updated for So I've updated the WordPress version. Um So based on that Let me reinstall the plugin to see if that helps. So just checking the site still looks fine So we come to plugins We come to add new Let me go to create block theme I'm going to install that to activate All right, so that's been installed. We got to appearance. We're going to create block theme um Let me try again Bins 2023 child generate please work Please work. Please work Oh dear That's so weird Well well I am going to Try something else When I first migrated the site from the server to my local site I used only one WordPress migration Why don't I try using that again to upload the site From my local site to the server. So I'm not sure why the create block theme plugin isn't working. Um I don't actually want to start editing with the plugin itself. Um, because I think Laura you said it was working on your computer. So I was doing this I'm being my local setup. That's breaking it. So for the sake of this live stream Let me let me upload my site some other way. So Um Because this layout is broken isn't it like the header and that isn't coming through so Yeah, something's off So, all right, so we've we've switched tactics and we're going to use only one WordPress migration. So I'm going to export my site as a file to my local computer Um, and for those who aren't too many with the plugin Have a look at part one of the series and you'll see me introduce the plugin and how I use it to download the site from the server to my computer So I'm going to download This so I have this on my computer here And this basically just made a a complete copy of my local site And if I upload that file To the server, I should be able to Just migrate the site that way Um, so I'm going to import And maximum upload size is too good. I think that works So I'm going to drag and drop the local File here. Let's hope this doesn't take too long We're almost there. The site is almost imported um So, yeah, this is this just sort of refreshing a bit Recapping a bit. This is part five of my informal live stream Um, so if you're watching the recording do check out the other parts as well And this is this will be the final part of this particular live stream. So hopefully With um only one WordPress migration. I'll be able to migrate my site back update the theme and um complete everything. Um, but um training team the WordPress training team host, um online workshops like this Multiple times a week actually um, so if you have Spare time or if you want to learn more about WordPress do check out the learn WordPress online workshops Meetup group. I'll share that link in the zoom chat here um, so if you click on events I think there's a calendar view Let's see. So we're at the bottom of may the times you're seeing a japan time because I am in japan Um, so if you open up this calendar, um on your computer, you'll be able to see the times in your time zone um But yeah, we have a few we have another workshop tomorrow. Oh tomorrow is Um, anniversary 20th anniversary. Yeah of WordPress. Yeah, because it's on saturday. So Yeah, so that's happening. Let me have a few more next week And then have I booked my June ones yet We have created a full page WordPress website How to translate content for learn dot WordPress.org so this is one I'm hosting next month. Um This workshop is hosted in english um, and the learn dot WordPress.org websites Um hosts like hundreds of other content in english as well And um the training team the WordPress training team has started to translate these content into other languages So I'll be running a session next month. Um for translators about how they can translate the content into their own language Um, and then I will actually be hosting a Japanese workshop here as well all about WordPress caching. So Yeah, I'll be speaking a couple more times next year next month All right So coming back to my site the upload has completed And um with all in one WordPress migration, you'll always get this message here. So this isn't a problem. Um It actually means the upload was um successful So it says the import process will overwrite your website including the database meaning your plugins things Please ensure that you have a backup of your data before proceeding to the next step so What I did before this step was I uploaded the file to the server and now the only one WordPress migration plugin is about to sort of Open that file up replace all the files on the server and it's giving me a final Confirmation. Are you ready to proceed? And it says make sure you have a backup of your data before proceeding And uh with pressable my host I have daily backups So I know I'm safe. Um, but if you are using this on your own site, do make sure you have a backup because sometimes This site migration a lot of different things can go wrong. So make sure you have a backup before you proceed So I'm all set. I'm going to click proceed and hopefully Hopefully this will work This is this is the same place last time where I was like this should be done and then it Wasn't successful. All right. Your site has been imported successfully um Save thermal instruction and optionally review the plane. So save thermal instruction I'm pretty sure you have to do this each time So you don't actually have to change anything. All you have to do is come here and press save changes thermal instruction updated All right, so now Come here refresh Yay All right. All right. That's looking pretty good. Oh the foot is changed. So I'll just check I'll come over here Let's see come to appearance themes. What theme is this using right now? It's using the 2023 theme And if you go to the editor and click on templates Um Click on manage all templates You'll see the home has three dots here and click customizations So it's pulled all the customizations from my local site into my live site and my live site Now uses the 2023 um theme so Success. Yeah um So that that took five sessions so five hours but I took my site Change the theme from 2022 to 2023 but kept the look the same and um Yeah I'm done awesome Um, thank you so much. Um for coming today and for those who have been to all five sessions. Thank you for coming um I think we're a few minutes early, but I think that's a really good place to to stop. I don't want to touch anything else and break anything more. So Um, thank you so much for coming. Yeah. Thank you Lisa. Thank you so much Yep, and I'll see you all again on another online workshop soon. All right. Great. Do another one. This was fun Thank you. Thank you All right then. Bye