 Okay, we are recording. So welcome everybody. I've been having some, I wouldn't say Zoom troubles, but I updated my operating system on my laptop yesterday or the day before and I've been having some weird issues with it. So Zoom is currently a bit delayed. I'm not sure if that's due to the upgrade or if Zoom is just weird. So I do hope this all goes well today. Welcome to everybody who's here. Welcome to some familiar faces and some new faces. So while you are getting yourself all set up, if you would like to code along with me today, we only need to create block theme plugin. We're only going to be using that today. I am going to be running the session using WordPress 6.1 because that was released on Tuesday on the 1st of November, but it shouldn't matter. You should be able to do this in WordPress 6.0 because we're not going to be doing anything that requires any new functionalities today. And if you'd like to, please let us know in the chat where you're joining us from. While you're doing that, I'll introduce myself. My name is Jonathan. I am from Cape Town in South Africa. It's finally starting to get into summer weather here now. November is the sort of start of our sort of warm summer weather. So I am able to wear T-shirts and shorts again to work which is lovely. But yesterday we had a thunderstorm and it rained all day. So it's just one of those weird times of the year. I am an ex-developer. I used to write code for a living and now I hopefully teach other people how to write code for a living and I'm a sponsored contributor at Automatic. I'm sponsored to work with the training team. We are the group of people who create these workshops and the tutorials on Learn WordPress and the lesson plans and everything around the Learn WordPress platform. And if you want to find me on Twitter, I am John underscore Bossinger because when I signed up for Twitter, it didn't allow lots of characters in your handle and my full name was not possible. So I had to go with John because it was either John Bossinger or Jonathan Boss and I just thought Jonathan Boss sounded way too pretentious. So most people in the WordPress space just know me as John and I'm okay with that. No voice. Everybody else seems to be able to hear me yo-it so it might just be a volume thing on your side. Can anybody else, is anybody else having volume, sorry, sound issues? Can everybody hear me? Adrienne can hear me. I know Catherine can hear me because we spoke before we started. Okay, so it's good to go. As I say, Zoom has been doing weird things to me today so it might be my Zoom instance, I don't know but I'm glad it's working for you now. Okay, right. So today we're going to be talking about internationalization in block themes and for the eagle-eyed among you, you will see that I've spelt internationalization in the UK English version because I'm South African and that's English that we've learned. So all my UK friends are probably quite happy and possibly my Canadian friends. I'm not sure if Canadian or Canada uses the American spelling or not but if you're from America, you're probably used to a Z there. I have been writing in UK English for my entire life. So when I started writing content for American publications, changing that S to a Z creates me great. Few announcements before we get started. First of all, welcome everybody. And again, thank you Catherine for co-hosting today. Catherine is effectively becoming my regular co-host and I have no problem with that. Catherine was very kind to offer to co-host the very last minute this week. I did have Sarah who was going to co-host with me but unfortunately she had to step out at the last minute due to some personal things. So Catherine is kind enough to step in and join us today. So thank you again, Catherine for joining us. As always, we're presenting in focus mode but please do consider enabling your video so that I can see your lovely faces if you would like to, you don't have to but you're welcome to enable your video and then Catherine and I will be able to at least see you. You are as always welcome to ask questions. You're welcome to either ask them in the chat or unmute to ask them. The only thing that I do ask is if the question is not specifically related to what we're doing on screen, please keep it to one of those gaps where I grab a sip of coffee in between and then pop your questions through then. If you would like to do it verbally, you're welcome to use the raise hand icon in Zoom or just if you've got your video on, just raise your hand as well. I'm sure Catherine will be keeping an eye out for those but you are welcome to ask questions or answer other people's questions. This is very much a let's learn together situation. As we discovered in previous workshops, I don't know everything. I know a little bit about a little bit. Okay, then before we get on, I'm supposed to ask this at the end of my sessions but I don't have any slides at the end of my session so I do it upfront. If you're interested in getting more benefit from the Learn WordPress platform, please consider taking the Learn WordPress Learner Survey. Jarwait, I'll answer that question in a second. The Learner Survey is just kind of getting feedback from folks who are using the platform, what they would like to see from it. It's going to help us to find our goals as a team for the next year. So please do consider if you haven't already taken that taking that. If you want to code along with me today, please make sure you've got create block theme installed. You can install that from the dashboard or download it and install it manually. And then as always, if I'm going too fast, please let me know. I will be posting the session to WordPress TV afterwards. I am off tomorrow so I'll probably only post it next week, right about Monday. And then as always for more WordPress focus content, please visit learn.wordpress.org. Jarwait, I'm actually going to answer your question about internationalization in the first bunch of my slides so I'm going to do that when we get there. So I did see that question. So as mentioned, my first learning outcome today is what is internationalization, lots of letters. What is internationalization? How internationalization works in classic themes. So we're going to look at how theme developers implemented in classic themes. And then we're going to learn how to do it in block themes and why there's a difference. The objectives today, we're going to create a brand new blank theme and then activate it because I keep forgetting to activate it. And then we're going to create some footer credits in the footer template part. We're going to create the proudly powered vibrates that I'm sure you've seen in WordPress themes all over the place. We're going to change it slightly to my requirements and I think Adrian's going to enjoy that one. And then we're going to create a copyright section as well because copyright is something that's quite common on themes. You have a little copyright footer with a date, the year of the date. And then that's also a common thing that folks do in PHP is they use a functioning PHP to make that work. So we're going to show you how that works out. And then we're going to enable internationalization for the human readable text. So we're going to look at the basic translation functions. I'm going to share some links with you about where you can find information about these things. We're going to look at the translates and echo functions, the translates and escape functions and the translate echo and escape functions or translate escape and echo functions. We're not going to cover all of them. We're going to cover them very broadly. So I do recommend afterwards if you want to get more in depth into this and understand how this works to go and read the documentation. The goal today is to understand how to do it in a block theme if you've never done it in a block theme before or if you've never done it in a theme before. You hopefully will learn how to do that today. Okay, so let's get on to the first question. What internationalization? No, what is internationalization? I thought I fixed this, but clearly I didn't. Catherine pointed this out to me before we started. So Yahweh, to answer your question, what is internationalization? Let's go to the WordPress developer handbook which is this first link over here and let's go and read what the handbook says about internationalization. Internationalization is the process of developing your application, be it WordPress or be it a plugin or be it a theme in a way that can be easily translated into other languages. Internationalization is often abbreviated as I-18-N because there are 18 letters between the letters I and N and it takes a long time to type out internationalization, ask somebody who put together slides for this workshop. It's also a difficult word to say because there's lots of consonants in it and there's lots of T's and N's and L's and I sometimes stumble over my words so I'm probably gonna say it wrong a few times today so I do apologize. But the long and the short of it is if you have any human readable text. So in my case, if I'm creating a theme, I am an English speaker, if I'm creating any text that the visitors will read that is in English, I need to make it possible for folks to be able to translate that. Now I'm not talking about text on the front end of a website. I'm talking about, for example, let's have a look at a theme in the dashboard. So if I open up my WordPress dashboard and I've got 2021, 22 and the new 2023 theme, if I click on theme details on 2022, there is some information here that the user sees. There is the name of the theme, there is the words by the WordPress team on the right hand side, there is the enable auto updates text and then there is a description of the theme. Now, those of you who don't know WordPress is fully internationalized, meaning all of the English strings in WordPress because WordPress is the beginning was predominantly developed by English speaking developers. All of those English strings are internationalized, meaning they are made available to be translated. And there is an entire team, and I'm going to try and get, this Zoom thing has popped over my screen, so let me try and hide it quickly. No, that's not the one that I want. I want that one. There's an entire team within the WordPress community called Polyglots and they are the folks who translate specifically WordPress itself, WordPress core, and then they also translate all of the default themes and a whole bunch of plugins. And if you're somebody who speaks a foreign, sorry, foreign language, different language to English, then you can join the team and you can help translate things. And if you have a look at the top of this URL here, there's a link to something called translate.wordpress.org and this is basically the platform that manages all these translations. So you'll see all the languages are listed here. Afrikaans is the first one alphabetically, Afrikaans is a language that exists in South Africa, so it's a language that I do speak, so I could contribute to that and I think I have in the past, but most of all the languages are represented here. And I'm using Dutch as my example today because I know Dutch has 100% translation for both WordPress and the theme that we're going to be looking at. So I can click on the Dutch locale and then I can see all the projects within the WordPress projects that is translated. So there is the 6.1 branch, there is the 6.0 branch, et cetera, et cetera, et cetera, all the WordPress versions and then all the way down to the themes and the default themes and plugins. So you can click on themes and you can see all the themes. I'm going very quickly here because this is not important to today and you can see all the plugins. Now the way this works in development is there are a predefined set of internationalization functions that developers use when they are making strings translatable. So let's open that up quickly so you can see what that looks like. And whenever you're developing a piece of user interface that requires a label or some text to describe it, it's a good idea to know how to use these functions. So there are groups, I'm going to zoom in on this a little bit so it's a little bit bigger. Let's make it a little bit bigger. There are groups by basic functions. So functions that just do basic translations of different types. Then there are translate and escape functions. Escaping is something that has to do with making sure your code is secure, which we're not going to cover it too in depth today, but we'll dive into it in a second. So it's things like escaping HTML tags within translatable strings and things like that. Then there are some data number translation functions and then there are also functions that you can do in JavaScript. So if you're creating blocks or any kind of JavaScript functionality, there are functions that you can use there. But what does this look like? So how did these functions work and how do the teams use them? So I want to show you a very quick example in a theme. I'm going to switch over to my code editor, which is not currently open, which is why I can't switch over to it. And I'm going to open up my WordPress site and I'm going to show you the 2021 theme. So there's 2021, I'm using 2021 because it's a classic theme, it's not yet a block theme. And we're just going to have a look at the footer. And if we pop into the footer.php file and we have a look from the top and we'll find that the first string that the user might need to translate or see is the secondary menu text over here. Now this is code that you'll see it's sitting inside the area label attributes of this nav element, but the word is secondary menu. So that's going to sit in the code, but for some reason you might want to make that translatable. So you would use one of these translation functions and the translation functions typically accept the string to be translated and then the text domain of the either plugin or theme. In this case, the text domain of 2021 is the word 2021 or lowercase or one word. Where does that get defined? Well, if you've ever looked at how a theme is developed you will know that all themes have the style.css file and inside the style.css right at the top there is always this header. And in the header there is always or there should be if it's on the dot org repositories there is always the text domain label and that's where the text domain is specified. So the way it works is when you define a string to be made translatable, you pass in the string and you pass in the text domain and then all the strings that belong to that text domain are then when you upload it to the theme repository or the plugin repository are sent through to the Polyglots team on that translate WordPress page listed under that text domain and then folks can come along and translate it. So very quickly, I wanna show you kind of what that looks like. So if we have a look at for example, oh, let's look at Seriously Simple Podcasting. Now this is quite a nice little bit of serendipity. I used to work full time on the Seriously Simple Podcasting plugin. That was one of my previous positions before I joined Automatic. And so if we click on that, that's a plugin we worked on and we will see that 19% of it has been translated into Dutch. So the page is there for the plugin and then you can click on, I think I'm not quite sure where it is. I think it's clicking on stable, for example, the sub project and then you can see all the strings that haven't made available. So in the code, other developers and myself have made sure that we've used these functions with these English strings and then members of the Polyglots team can come along and they can include their translation. So if I spoke Dutch and I was part of a team, I could click on details here and I could see the word podcast list as the original string and I could then write in the Dutch version of the word podcast string. And once all the strings are available, anybody who switches their WordPress site to the language Dutch, it'll download the language packs for WordPress so that you can download the language packs for the plugins and the themes and you can see everything in your chosen language. So that's an overview of how all that works. That's not how we're diving into today. That's a whole different conversation that I'm sure you can find topics on WordPress.tv about how that works and how to translate and how to take part in the team. But that's the basic overview of how it works. As developers, we want to make sure that we make our content translate. So we use these functions in our code wherever we're outputting English strings either in the interface or to the user when we're developing themes or when we're developing plugins so that it makes it translatable and then the teams can come along and they can translate those strings for us. One thing to note, this only works if your plugin or theme is uploaded to the WordPress.org repositories. It's one of the benefits of uploading your plugin or theme. It'll get added to translate WordPress and then translators can translate it for you. If you want to ship translatable versions of your strings in a private theme that you might be selling or a private plugin you might be selling, you will need to look at hiring somebody to create those different language strings for you. And then there's a special file format that you put it in and you can ship it on your site or whatever the case may be. That's also not something we're gonna go into today. Maybe we can do that in the future session but you just need to be aware of that. That's how that works. Cool. I'm gonna take a sip of coffee now because I need one because I've said a whole bunch of stuff. If there are any questions around any of that that I've just discussed, please ask them now. Otherwise we'll dive into the actual how do we do this in our code in a minute or so. Okay, doesn't seem that we have any questions which is great. If you do have any questions about this afterwards feel free to hit me up on Twitter. I'm happy to answer. I haven't done a lot of translating because I'm already English speaking so it would be ideal for me to translate it to a different language. And my Afrikaans is not that great. Afrikaans is the second language in South Africa that most folks my age did up to standard grade seven and then didn't have to in high school. Now there's other languages other, what's the one looking for official languages which I don't speak unfortunately so there are teams in South Africa that are working on those languages. But what I have done is organize translation events where folks have translated work. So I do know a little bit about it. Okay, so the one thing that you will note before we continue on is you will note that the translation functions. For example, this escape ATTRE which is a escaping and attributes and then echoing it out. For example, down the bottom here translating the proudly powered by word presbyt with the HTML. They are in PHP and block themes aren't PHP, they are block markup. So how do we do PHP translation in block themes? Well those of you who were around a couple of workshops ago you will remember a concept called theme patterns. And I included the workshop in the slides here so I'm gonna just open that up very quickly. So theme patterns were a way that we could include some PHP combination of PHP and block markup or just PHP and insert that code into a block theme. And we use patterns to enable internationalization in our block themes. So I don't expect you to understand how patterns work. We are gonna cover them today while we're going through this. But if you want to get a deep dive into how patterns work and how you would do them and how you would use them before trying out internationalization I recommend watching that workshop again but we are gonna cover the basics of that today. So we use patterns. We make sure that the code, the block code that we want to make translatable isn't a pattern. We include that pattern in our template and then it is available and ready to get good. Okay, so let's get to doing some coding. I love this picture of this lady with the code in front of her face because I feel like that sometimes we're writing code. So what I'm going to do now is I'm gonna switch over to my WordPress site. I'm not going to delete this. I'm going to close this window here. And we're going to start by creating a brand new block theme that we can work with. So if you haven't already please make sure that you've got the create block theme installed and ready to get rock and roll. Currently it's version 1.3.7. You can just install it from your WordPress dashboard by clicking add new at the top of the plugins page search for create block theme, hit enter. It should be the first result that comes up. There was a stage where it was the second result for some reason, I don't know why. And then from here you can click on the install button and then once it's installed you can click active and you should be good to go. So if you haven't done that and you do still want to follow along please do do that now. I will slow down in a second if you need to catch up. Once that's installed it adds the create block theme menu item to your appearance menu. And if you click on that that takes you through to the create block theme page. And from here you can create a blank theme. It's the create blank theme option right at the bottom of that towards the bottom of that page. You click on that and it'll ask you for some details about your theme. The only thing that you need to enter is the theme name which for my purposes today I'm going to be calling John's translatable theme. As you can see my naming conventions are very boring and just to the point I'm gonna leave out the descriptions and the URIs and everything else and just let those go with the default and I'm going to hit generate. That's gonna create a theme directory for me. It's gonna create some theme code. And if I head over to my themes list it'll be there. There's John's translatable theme and I'm going to activate that theme. So that's my blank theme. It's now ready. If I hop on over to my code editor I will see that John's translatable theme is there and it comes pre-installed with a theme.json file which we're not gonna use today a style.css file which we are going to use today. Read me which we're not gonna use some templates but we're not gonna use and some template parts one of which we are gonna use today in this case the photo template. So those are the two things that I need to be aware of. Linda says boring into the point is much easier to find in the future. Yes, I agree 100% Linda. I used to give them random names and then as you say never find things and I'll just keep them to the point. Right, is there anybody still needing to catch up with that? If I can just get a couple of slowdowns or readies or anything in the chat so let me know where we are and then we will continue on. Okay. So Linda is good to go. So we're gonna move on from there. Now the first thing that I want to do and I think I mentioned this in my objectives is I want to change the photo slightly. Currently, if I click on the editor and I navigate to the template pass list by toggling the editor navigation clicking on template parts and then clicking on the footer. It'll take me to the footer in the editor and what's currently there is only the proudly powered by WordPress but I want to change that slightly. I want to add the copyright text. Now there's a few ways you can do this. I'm gonna do it the way I like to do it but you don't have to do it this way. You can do it your own way, it doesn't matter. You're welcome to follow along. I'll share the code of what I'm ending up with here in the chat once I'm done so that you can just copy and paste it on your side if you want to. But what I like to do is I like to switch to see if you look at the default code that's enabled if I enable the list view over here the default code that create block theme generates is a group block and then another group block within that and then the paragraph block for the proudly powered by WordPress. I want those two things side by side and further apart and to do that, we can use the road block. So the group block nest things one underneath each other whereas the road block allows you to put them side by side. So what I'm going to do here is I'm going to click on the second group block and I'm gonna click on the little options on the right hand side and I'm gonna say insert after and that'll start a new block for me. And then I'm gonna hit forward slash on my keyboard because that brings up the auto insert your list and I'm gonna type and it selects the first block which is a road block and then click on row and it'll add the road block in there for me. So the road block is sitting inside the paired group block. Then I'm gonna drag the paragraph that contains the proudly powered by WordPress into the road block. Now the way I'm, this is working on WordPress 6.1. So if you're working on 6.0, your mileage may vary but the way it works on 6.1 is I click on the paragraph block and I drag it down and you'll see there's a little you can't see it now because I've selected the group. So let me just leave it back where it was. Let me unselect the group and let me just select paragraph, there we go. If I drag it, move it down. You'll see it, there's a little, I'm pointing to the screen again for those of you can't see my hand but there's a blue line underneath the road block on my screen. That means it's gonna put it underneath the road block but I've still got my mask held down and if I move over to the right, you'll see it suddenly jumps to a little bit of a shorter line and that indicates it's gonna add it inside the road block and then I can let go and now it's added it inside the road block. So if I expand the road block there there's the paragraph inside the road block. Okay. The other way that you could do it I'm gonna go back a few steps is you could click on the paragraph block and you can click on the options and you can say copy block and then you can click on the road block, click on the plus icon and I think it's just paragraph and then control V to paste, it'll paste that in. So that's another way you could do it. There's multiple ways to get around it. The other option is you could just create a paragraph block and just start the typing it but at the end of the day, you're gonna end up with a group and then a row and then inside the row, the paragraph with the parody powered by WordPress. Is anybody struggling with that? Does anybody need me to slow down? Yes, I discovered this the other day Linda about the how to nest things in. So you move it down and then you move it over to the right slightly and it pops it in and nests it correctly. So hopefully those are the cool little things that you also learned from these reactions. So if anybody's struggling with that, let me know. What I'm also gonna do here is I'm going to remove this inside group block because I don't need it anymore but notice that I don't know if you can see it on my screen. So I'm gonna move these out the way. Notice that if I click on this group block and I scroll to the settings on the left hand side and I scroll down, there is some padding being applied to this group block. There is 80 pixels of padding on the top and 30 pixels of padding on the bottom. So if we remove the group block, we're gonna lose that pattern. So we're gonna remember that for in a second. So for now, I'm going to remove that block. There's again, multiple ways. I can click on that options button and say remove there. I can use the keyboard shortcut or I can click on that options button and remove there. This is my chosen way of doing it. So I'm going to remove that group. So there it is. And there the proudly powered by WordPress is on the left hand side and you'll see the padding all disappeared. So let's start by adding the padding back. So I'm going to add the padding to the row. So I click on the row and if the settings are open, I can scroll down. If they aren't open, you can click on the little, let me just hide them quickly. You can click on the little options here and say show more settings and then we're gonna scroll down to padding. And now the default padding option is kind of hidden. You can't, so when I say hidden, I mean, you're not actually physically setting physical pixels or rims or whatever. There's the sort of lock spacing option and you can just kind of go one, two, three, four and I'm gonna go all the way up to five and that's a background thing. It's implementing some default padding, whatever it is. If we click on the little set custom size, it actually shows that what it's doing is it's adding 2.25. So in the theme JSON, 2.25 is set for when you go five along that slider. This is perfect for me who is not a front end developer. I just wanna see padding happen. So I'll just slide it up to five and I'm good to go. So that's what I'm wanting to have here today. Cool. Now that I've got that, now I want to add that copyright footer. I'm gonna stop in a second if you need to catch up, so don't worry. But what I'm going to do now is I'm gonna click on the row block. And when I do that to the right-hand side of the row block, a little block insertor button appears, I'm gonna click on that and I'm going to select paragraph and there my block is and I'm just gonna start typing in copy rights and I'm gonna make it 2022 for now. Actually, I'm gonna make it 2021. I'll show you why I'm making it 2021 in a second. So there's my copyright. When I hit insert, it creates another paragraph which I don't want. So I'm going to remove this but there are my two paragraph sections. Now I want these spaced out and there's a cool feature of a row block. So if I select the row block and I click on this justify items button over there or in the settings under layout justification, I change it to space between items. So the two ways of doing it is either from here change items justification to space between items or under the layout, sorry, I lost the row under the layout space between items and there it moves everything nice and wide for me. Okay, so I'm gonna stop there. If there's anybody who still needs to catch up please let me know in the chat or let me know if you're ready to go but that's the basic changes that I wanna make today and then we'll internationalize those changes after coffee. This is why I started making these an hour and a half because it takes me half an hour just to get to the point where I wanna start writing code. Okay, everybody seems to be up nobody's telling me to slow down. Linda says just following along now Linda, do you want us to wait a few minutes so that you can catch up with us or are you good for me to continue? Okay, Linda's good to go so I think we're ready to rock and roll. Okay, last thing I need to do is I need to get these changes to my theme files. So the two steps that I'm gonna do is number one I'm gonna save these changes to the template which will save it to the database and then I'm gonna use create block theme to export the changes to the files. So I hit save on the editor. It's gonna say, do I wanna save the footer? Yes, I do. It's gonna save that. But as we know, if we have a look at the template parts in the list there's a little blue dot above it which says this template has been customized. So those customizations are stored in the database. I'm now gonna go back to my dashboard and I'm going to go to appearance create block theme and I'm gonna use the overwrite option. And what that does that takes all any changes that I've made in the database and I promise you this is not me I'm gonna use the overwrite plugin create block theme. I just think it's an awesome plugin and I use, I'm going to be using it for any of my theme development because it makes my life so easy but I use it in this purpose to basically take all those changes of rights to files because I don't have to copy paste things all over the place and worry about. So I select overwrite and I hit generate it then writes all those changes to my theme files. If I open up my theme in my editor and I have a look at my footer there I can see my changes. The proudly powered by bits is there and the copyright bit that I added 2021 is there. Okay, we're good to go. The one thing that I forgot to do in the editor which I'm going to do now is I wanted to change this proudly powered by slightly and I wanted to make it proudly powered by coffee. So I'm gonna change that here in the footer and I make it proudly powered by coffee and I'm going to change the link to point to the Wikipedia article on coffee which is this one over here. You don't have to do this I just, I like doing this for the sake of doing something different. So I'm gonna change this URL here. And so this is an example where you might have a theme that you're building that you want to sell. You're not necessarily uploading it to the theme directory or you want to, it's for a client and they want to have a proudly powered by that's custom to them. So that's how you could do it in the template. If I refresh that on the front end I should now see if I go back into my editor I should see my footer now says proudly powered by coffee there it is at the bottom, excellent. And if I edit it there it is proudly powered by coffee. Okay, so I'm gonna leave that foot to open because we're gonna be refreshing the editor to see what does or doesn't change as we go along but that's what I'm working with today. Interesting point of fact, I think there's a proudly powered by coffee t-shirt in the WordPress swag store which I hope to buy one day. So if anybody wants an interesting coffee t-shirt there's one to go. Right. So now we need to start internationalizing this making this translatable ready. So I'm going to start with the copyright 2021 code but to do that I first need to ship all of this into a pattern. First thing I'm going to do is I'm going to use the shortcut that Adrienne pointed us out to us last week in Visual Code Studio I can select all of this and I can right click on it and I can say format this because it looks terrible the way it was it looks a lot better now so now I can see things a lot nicer and a lot easier and immediately I can see that first of all and I discovered this morning so this is interesting little tip we'll notice that there are actually two group blocks in this template but we added a group block and a row block. So interesting little tip a group block is just effectively sorry a row block in the editor is actually just a group block in the code and the difference is if you have a look at this code on the right over here the difference is the layout options. So the layout is a type flex I'm not going to get this on screen now hang on I think I need to maximize this there we go the layout is of type flex and then uses flex wrap no wrap so that's the only difference that I've been able to and then I think the justify content we changed so that's the only main difference between the row block and the group block on the front end I just thought that was interesting okay so those things we don't need to worry about the only things we need to worry about for translation is the copyright text and the proudly powered by pot so this is the whole thing that I'm going to put in my patterns so everything from the opening paragraph around the proudly powered by and including the paragraph block code and the HTML code for the copyright code that's what I'm going to stick in my pattern. So the first thing I need to do in my theme is I'm going to create a new folder and I'm going to call it patterns if you remember from the patterns workshop that's the name of the folder we need to create and I'm going to create a new file in my patterns directory or folder and I'm going to call it credits.php So that's where we're going to start off with then I'm going to grab Sorry, Jonathan while you're doing that Adrian Grace had an interesting tip about line wrapping in VS code Oh, cool option Zed if that's easier Awesome that might be easier but I tend to want to just do it manually myself I'm weird that way All coders have their own preferences, huh? We all have our weird little things that we do We probably shouldn't, yes But thank you for that, Zed, Adrian So then I'm going to copy the block code out So I'm going to grab everything that I want to internationalize and it's important to make sure that you copy the block code in other words, the HTML comments that relate to that block along with I can't just copy this HTML or this HTML and put it in my pattern I need to include the block code as well because that makes up the block pattern So I copy all of that Actually, I'm going to cut it because I don't want it there anymore and I'm just going to pop it over here in my credits And I discovered this recently that reformatting this doesn't make it look very nice So I'm going to manually do it I'm going to move the nofollow row to the end of that line And I'm going to unindent all of this So it just looks a little bit neater There we go So that's fine like that I'm happy with that like that Then for those of you at the Patterns Workshop you will remember that we need to add a header to this pattern So in the resources of the slides which I'm sure Katherine who is on the ball will share in a second I included the documentation on using patterns somewhere I just need to move this so I can find it No, it wasn't on this page It was on this page Here we go Advanced Topics Theme Patterns And this document is great because it gives some good examples that we can use and some code that we can use So the two things we're going to use is first of all the headers So if we scroll down to the using patterns directory to read it to the patterns part there is an example pattern with the example header We just need the header today because we already have our pattern code So I'm just going to grab this code out of here and I'm going to pop it into my pattern right at the top So there we go So it's opening the PHP tag It's got the title, the slug, the categories the block types and the viewport width Okay We don't need the viewport width We don't need the block types and we don't need the categories because we're going to be manually adding this pattern to a template We don't want it to show up on the patterns list for users to select We want to control where it goes We just need the title and the slug The title we could just keep very simple and we can make it credits So there we go And the slug is always the theme slug which is typically the directory of the theme which in our case is the same as the text domain John's translatable theme So that's great And then we give it a name and we can call it whatever we want So for our purposes I'm going to open up my style sheet file and I'm going to grab John's translatable theme and pop it in there And then I'm just going to call it credits So I'm just going to call it credits like that Okay Then the last thing I need to do Don't worry, I will share this if you need me to share it and we can switch back to it if you're following along The last thing I need to do is include this pattern in my foot to HTML template So again, I'm going to go back to the documentation and there's an option in the menu on the right hand side here If we go scroll the way down There is a including block patterns in block theme templates section So I'm going to click on that And here is an example And it's this WP colon pattern syntax So I'm just going to copy this one out as an example And I'm going to pop that into my code So there we go Where the original strings were that we want to translate I'm going to pop that pattern in And you'll notice all it requires is the slug of the patch which we've already set up which was John's translatable theme credits And we'll pop that in there Okay So does any... Did the wrong thing now Let me just copy that again and then we paste it there Okay Does anybody need me to stop and pause and show anything for a second to catch up? If you don't If you're happy with where we are give me a ready and we'll move on Otherwise we'll hang out here for a couple of seconds and I can show or share code In fact, I might just share all this code once I've had a sip of coffee So let me do that now So the foot to HTML code looks like this So if you want to just pop it into your foot to HTML find that's great And the credits dot PHP pattern In my case, it looks like this And the only change you might need to make is to translate Sorry Is to change your thug Your slug Now one thing to also notice In this case, my theme slug In other words, the theme directory and my theme text domain happen to be the same It is perfectly possible to have those two be different So for example, if I wanted to make my theme slug have hyphens in between the name So John's hyphen, translatable hyphen theme in the in the theme directory in themes Then my slug in the pattern would be John's hyphen, translatable theme But I could still leave my text domain as one word, John's translatable theme And then I must make sure I use the text domain when I'm using translation functions And that sometimes catches folks up because they change one and then don't change the other but they use it all over the place and they forget that they can be different theme slug What's that in coffee, John? Yeah, so the theme slug is usually just the theme directory name But in the WordPress theme repository it's the name that they used It's like the identifier of the theme in the theme repository Slug, yes I don't know if it's the coffee that makes me mess up my words with the nervousness of presenting I never can remember OK, so now we need to check that this works And the reason why I made this copyright text 2021 is because I want to change it to 2022 refresh the editor and then I should see the change and then I know everything is working as expected So if I make that 2022 hop over to my editor and hit refresh now I should see this change to 2022 and there it did So that's good So that means I know that my pattern is registered My pattern is being pulled into my template And the interesting thing is if you if you click on the options of editor and you switch to the code editor here now you will see that not the pattern but the actual template So it starts over here Sorry, it starts over here The actual template code has been rendered in PHP and then inserted as is into the photo template So as the template is being rendered either in the editor or on the front end it does all the PHP processing for the pattern and then sends that code to the template and then renders it there So you don't see the pattern in the editor So your users don't know you're using patterns which is great They just think, oh, you're doing block code and it's amazing in your edition OK So let us close the code editor And now let's start preparing this for translation So if we go over to copyright 2022 Now there's a couple of things I'm going to share with you today I'm going to go kind of fast but stop me if you're not following The first thing I like to do is I like to make the 2022 text so that I never have to change the date ever because there's a joke that goes around on web developer Twitter on the 1st of January of a year Remember to log into your client's sites and change the copyright date OK, and that's because it's a string It's just a hard coded string and folks have to update it every year The wonderful thing about if you're using a PHP-based platform like WordPress is you can use PHP code to do it And the function we're going to use today I did link through into the second page of resources You'll notice there are lots of resources this week is the date function So the date function allows you to output string dates So you can give it any kind of format and you can output a day month year, year month day the year, the day, whatever the case may be It'll take the current timestamp work out the date based on the format you pass it and then output that string It's important to note that it returns a format to date string OK, so it's always going to be a string that'll become important in a second So I happen to know this It's not listed in the documentation anywhere, but I happen to know that if you use the following codes I'm going to open up my PHP tags which is less than sign, question mark, PHP and I say date, which is the function open close the regular brackets and in string quotes, either single or double doesn't matter, I use an uppercase Y Let me make this a little bit bigger so that folks can see then and then end the statement with a semi colon and then close the PHP tags That's going to generate the current year every single time So on the 1st of January, 2023 it'll change to 2023 and I never have to update this again So it's perfect to use when you're developing themes that have a copyright footer So let's test that Let's see if that still works So if I switch back over to my editor and I refresh, it should stay on 2022 and it hasn't and that's important because date returns the string it doesn't output it onto the screen So we need to now output it So in PHP, there's a couple of ways that you can do it and one of the most common ways is to use the echo statement Echo and print are two statements you can use in PHP print just means print a screen those of you who come from C days or coding in Windows and those kind of things, you'll recognize that Echo is just echo this to the screen same kind of thing So I add echo in front of the date to tell PHP to actually output this to the screen and I refresh this and it should work Excellent, so I've got my copyrights so that's good to go Because it's a year number I'm never going to have to translate it Numbers are fairly universal unless you're working with a system that doesn't have numbers which is possible but generally fairly universal But the word copyrights I'm going to want to make translatable So that's where we're going to start So the most basic I'm going to struggle with that internationalization function is this one right at the top here, which is basically just double underscore I don't know why they chose double underscore I would have preferred something like TRL or something It's whatever the reason they did it they use double underscore but you can pass in the string that you want to translate and then the text domain and then it'll make that string translatable So we can do this very easily for our copyrights We can now say, right Let's go question mark PHP double underscore So depending on your keyboard in my keyboard it's the character just too right to the backspace but it's the underscore not the hyphen and then I open up the brackets to pass in some variables The first variable I pass in is the string that I want to translate and because I'm in PHP I need to put that string in quotes and then the second one is also a string and it's my text domain which in my case happens to also be my theme slug So I'm just going to copy it from here and I'm going to pop it in over there in the PHP statement close the PHP tags I'm good to go So now copyrights is ready to be translated So when the translation functions work for this theme on translate.wordpress.org copyright will come up as one of the options and folks can translate it Let's test that my code still works So if I go back to the editor and I refresh boom, I've lost the word copyright OK, and that's because I'm using a translation function that doesn't echo anything So I have two options here The first option I'm sure you've all figured out already I can just use the echo statement That'll also work OK, let's test that There we go Good to go However, WordPress is nice WordPress has a couple of functions that I can use to both echo and translates and you'll see the second one on that list is underscore E And if I click on that it says displays translated text So WordPress has this nice short hand that I can use to echo and translate So if I go back to my code and take away this and make it one underscore and then E then it sets it up for translation and echoes it all in one And I don't know about you folks but I love things that are shorthand I love things that work quickly for me So let's go back to the editor And there we go It's working and it's ready to rock and roll Excellent OK, I'm going to stop there I'm going to leave the code on the screen if anybody wants to catch up I'm going to grab a sip of water this time and then we'll talk about making this look a little bit better Hello How are you getting this editor? All this directory? How are you changing the code? I'm using I'm using visual codes visual studio code VS code Can visual code Say again What is that code? It's fine Let me find the link Are you asking about the editor that I'm using? Yes, yes Yes, OK It's called the shorthand for it is VS code Visual Studio Code Catherine has shared the link for it in the chat It's a free code editor that that Microsoft has put out And it's what I use for these online workshop sessions Can you send the link please? If you look in the Can you see the the chat, the zoom chat? Yeah Catherine has just shared the link there now right at the bottom OK, thank you OK, excellent The open source developer part of me feels a bit weird sharing Microsoft products in chats But anyway, that's a whole different conversation OK I do I do recognize though that it's one of the easiest editors to get into So it is what it is OK So now I want to talk about this code This code is not pretty OK This code has two open close PHP tags It has an echo here It has an echo here as well which means it's echoing twice which means it's increasing the amount of processing required It would be ideal if it just did one echo And so there are functions that you can use to combine all of this information So we're going to have to take a step back So I can show you another PHP function before we can take a step forward So bear with me So the function that I want to show you is actually mentioned in the developer handbooks I'm going to just give me a second here Going to find that And I'm going to find what I'm looking for There's a whole section on how to internationalize your theme and how to set things up I think it's in there And this thing is annoying me I have to let you know And you'll see here there's an example I'm going to scroll down to the bottom here and show you folks this We can share the link in a second It's not there It's nationalizing your theme I wonder if it was here It's the basics Setting up internationalized JavaScript It gets further down No, it's not there It's on the guidelines There it is I think it's in the guidelines page which I think I've actually got in my slides Yes, it's the very top one at the top So let's actually grab that out So it's the first one on the second resources page And they talk about best practices So basic strings And then here it talks about using echo or using the shorter version that I showed you And then it talks about variables And what to do when you're dealing with variables Now, in our case, if we have a look at our code the date part could be put into a variable and then output as part of the string So here you'll see that it talks about the printf family of functions So there's printf and sprintf Now, these are specifically PHP functions So let's hop on over to the PHP documentation And now I've lost the thing that I wanted So the printf function basically outputs a formatted string And if we have a look at the description that basically you call the printf function you pass it a string with a specific format And then you can pass in multiple variables or values or other strings And this is perfect for using our for doing what we want to do to kind of clean up this code So let me show you You might remember we saw it earlier when we looked at how the foot to text was done in the classic theme So we're going to kind of do a similar thing here So let's take a step back I'm going to just comment out this code for a second using HTML comments I'm not going to work because it's got PHP We'll just leave it there for a second And so I'm going to open up PHP here And I'm going to show you how printf works So we go printf And then we're going to pass in a string format Now, what the format looks like is usually the human readable language and then a series of string replacement characters And let me show you where they are You can you can dive into how this works If you scroll down on this page There's a whole list of what they call specifiers So there's a literal percent character And there's one that's an integer And there's one that's a string And if you have a look further down here S is the argument that is treated and represented as a string And that's what we're going to use today So what we can do is we can say printf copyrights And then we leave the space Because we want that space between copyrights and dates And we use percentage s and that tells printf That I'm going to be passing you a variable That you need to put into the string where percentage s is Replace it with the string, this variable And then we can pass the variable in Now, the variable could just be something as simple As a PHP variable that contains a value That we could have set up higher up Or we can pass it the result of a function Which in our case here, we can use the date function Now, what's cool about that is that one line of code Is going to output copyright space 2022 Without worrying about echoing and all that kind of stuff So that already shortens all of this for us So let's test that first And then we'll look at how we translate it So I'm going to clean this up a little bit here I'm going to auto format it Okay, so we've got some nice For those of you who don't know WordPress Coding standards have spaces and things in You don't have to follow it, but it's recommended And then I'm going to replace I'm going to actually just take this code out here And I'm going to pop this into my paragraph And there we are, good to go Now, that's not translatable yet But I think you'll agree it's better than having Two different echoes all over the place Okay, so let's test that this works So if we go back to our editor and we refresh There it is, copyright 2022 Okay, I'm going to copy this code out If anybody needs this on their side But that is basically, let me change I need to change my... I've managed to change my chat settings So that I can't send a message to everyone And there we go I don't use Zoom chat much Hang on Everyone, that should work No, that went to Catherine Don't know how to change it Okay, Catherine's done it for me, thanks Catherine So that works nicely But now we want to also make sure that we Make the string that we're passing to s.f.translatable So the way we can do that is using the same Translation function we had earlier So over here we can go using the double underscore method Because we don't want to echo it at this point We can pass in this string And then pass in the text domain So we're using the translation function Inside the printf function And what I like to do to kind of show this is You can do this in PHP You can kind of move things onto the next line So it makes it a little bit easier to read So I'm going to move that to there And then I'm going to move the date down a little bit So we can just see it on the screen And then I'm actually going to move the printf as well So that we can There we go, there we go, there we go This bracket is around the printf So that's a bit more obvious where that is And then I'm going to pop that over there So that gives us So the printf takes the string And takes the date and basically puts them together And then the string we make translatable By using the translation function inside a printf Now the question that you might be asking at this point is Okay, Jonathan, but you said earlier That the translators will get the translatable string And they're going to get copyright space percentage s And go, what is this percentage s? How do I translate it? Maybe somebody asked that You might not So the way you can fix that is You can use a PHP comment Just above your translation function So let the translators know what these weird variables might be And how they can use it So let me show you an example of this in the wild So if we go to Now it's going to take me a few seconds to get you Because I struggled to find it the other day But if we have a look at the Brazilian in the Dutch language If we click on over to the themes And I'm going to show you it's on one of the very last pages 2023 I couldn't search it the other day for some reason Let me try and search it now Oh wait, hang on See here Yeah, I'm not quite sure how this works So I just did it this way by clicking on themes And then I went to Sort of right at the end And then I kind of jumped to sort of the middle somewhere To find like all the Ts So just bear with me while I find it As I say, I don't hang out in the translation area A lot So there's T for travel So it'll be TW There's 2011 So let's try and find 2021 I'll share the link once we find it There it is 2021 So let me share this link in the chat If anybody wants to I can't send messages to the chat anymore I don't know why I'll copy it over for you Okay, thanks, Catherine So in this 2021 set of translations We can actually do a filter here I want to show you this in a second And the filter was I actually searched for percentage S Because I know other developers would have used it And I did apply filters on that And there's a good example here So the string Percentages comment is being used somewhere in the theme And if the translator clicks on it Then there's a little comment that is attached to it And the comment is comment count number So that tells the translator Okay, the percentage S is the comment count number So when I translate this I need to make sure that I translated correctly And they actually include the percentages in the translation And then the translated word So the way you do that in your code Is just above the translation function And that's one of the reasons why you'll see Whenever this translation is happening They like to make the code So that you can do something just above the function Once it's all compiled above and below Doesn't matter, but just before the function You can open up a PHP comment Which is the slash asterisk And you can say I think it's just translators Translators Colon And then you can say Whatever that character is Is the word I'm sorry The date The year The current year And so what that does Is that tells the translator What that replacement is going to be So they know what to how to work with And then you close the comment And then you're good to go Now if you remember We looked at the footer template In a different theme earlier So let's kind of have a look at that And you'll see here down at the bottom There's an example of that comment So for translators when they're Translating the proudly powered by word precipitates They've said the percentage is Is the word wordpress So when you're translating this Understand the context of what you translate And that is how you set up Your strings to be translatable That's not the actual translation itself That's a whole, as I said That's a whole different kettle of fish But now the string is translatable It's ready to rock and roll And we should still see all of this In the front end Let's test this So if we go back to the editor And we hit refresh There we see copyright 2022 So that's good to go That's still going to work The way we wanted to But in our code The word copyright And the specifier Will be sent to the translators And say right For this theme, for John's translatable theme This is the string copyright space And the date So please translate it for our language Okay We're going to pause there for a second While I grab us a cup of coffee If anybody has any questions Around any of what we just did Please do shot Before we continue Jonathan, I popped the link to the 2021 Dutch translation I think that's what you were looking at If you want to just double-check that Yeah, let's have a look Yes, that was the one Yes, 100% Thank you, Catherine Close out coffee We can start closing down things here I'm trying to figure out How I switched my messages back now Because I sent a message to Catherine About something And now I can't get it back And it annoys me There's a little blue drop-down menu That if you can click that You should be able to get back To everyone in meeting I don't know if something's got borked Because of the OS update though It's very possible It could be because I'm screen-sharing as well So Oh, yeah, yeah, yeah Anyway, I don't need to share Anything else Okay Okay, everybody happy with that Anybody need me to show the code Anybody need me to show anything else The last thing we're going to do Is we're going to We're going to try and make the rest Of the credits translatable And we're going to cheat outrageously By copying code from somewhere else Like all good developers do That's the way to do it But what we'll do is we'll go through All of that code and explain what it's doing So you understand what's going on Okay So now we want to translate This proudly powered by coffee bits So let's just first do this So that we can just get the code That we need to translate And what we need to translate Contains some HTML So it's the proudly powered by And then a URL to Wikipedia coffee And then the word coffee So there we will use some different functions And we're going to switch over to this Put a php Sorry footer.php And have a look at what that code is doing And I'm going to talk you through it So I'm going to grab that code very quickly Just as it is here I can't share it in the chat So Catherine, I don't know if you've got a footer.php For 2021 that you could grab The powered by section and just share that with folks And I'm just going to pop it above this If you're able to send directly to me Ah, let me do that Send it to you Yeah I'll send to you And then if you can please share with folks Thank you I don't know what's gone on with my zoom today So that's the code that I'm copying out So let's let's walk through it And let's understand what it's doing So as we as we have just learned The print f is doing that string replacement Okay It's replacing the specifier The string specifier with the word WordPress Then it's using the escape HTML Translation function So let's go and have a look I think I've actually got that in the In the slides Yes, if you have it there It is a It is a translation function And if we have a look at the description It says it retrieves the translation of the string text And escapes it for safe use in HTML output So the reason in a theme Specifically, this is a as an example The reason you whiteboard So the HTML that we're escaping is the is the anchor tag The a tag with the href and everything else Now we are coding this ourselves So there's very little chance of this code becoming corrupted somehow But the reason that you would do this is Maybe you set up a filter or an action earlier in your code That allows folks to change this URL And somebody could change it and inject something Which opens up a vulnerability which you don't want So that's why it's always a good idea to both escape your HTML Before you output it and then translate your strings So that's where this escape HTML function comes in So it's because we're sending it an anchor tag In the in the variable that's being passed So that's the instead of using the standard translation there We're using escape HTML Then we're passing in the string to be translated The probably powered by but We need to change 2021 to our theme So we'll do that over there And then the second one this is all effectively Let me move to this video This is all effectively the same or similar to what we did over here with the date It's basically a string variable That's going to contain some information That we want to replace with the proudly powered by But you'll notice as well that it's using escape underscore URL Now this is not a translation function This is specifically an escaping function Because we're passing it a URL So again it's keeping this code secure And then inside of that then it's actually using another translation function Because we want to make the the URL translated Now why might you do that? Well for those of you who don't know All the WordPress.org URLs also have what's known as Reseta sites So they're language specific sites to that locale And you can go to NL for example talking about Dutch language You can go to nl.wordpress.org And that's a localized version of WordPress.org for Dutchworks So if you're using a URL that you want to make enabled to translatable Then you can translate that as well So we've got quite a lot going on here We've got printf doing its thing We've got html being escaped and translated Then we've got the variable of the actual anchor tag With the link and the text But then the link is being escaped And the link text is being translated So you'll see there's the translation function And it's passing in 2021 So we need to change that as well And then it combines it with WordPress over here And you'll see this here Actually relates to that string WordPress there The string doesn't understand about the anchor tags and all those things And that's what the translators will see to be translated So that basically does all of that for us We need to change our URL So that it's still proudly powered by coffee And for fun I actually while I was putting this together I thought I wonder if there's an nl version of this URL Because you'll notice that the Wikipedia one has en at the front So actually though let me try And while the page exists there's no content yet So nobody from the Netherlands is translated This page on Wikipedia into Dutch So if you're Dutch and you want to translate the coffee page Please go ahead But it does exist as an option So that was the one thing we need to change We've already changed the text domain there So that's good This we need to change to coffee So let's change that And then we can remove this And now the way we know that this is working Is nothing should change on the front end When we refresh the editor We should still see all of the same stuff So that's what the code looks like Let's pop on over to the editor And let me refresh that And we should still see proudly powered by coffee Which we see which is excellent And we still see the copyright by 2022 Which is great So now it means our footer is fully translatable Folks can come along And they can translate the proudly powered by bits They can translate the URL And they can translate the copyright bit Now there's no easy way to make sure that this is done correctly There is a piece of software that you can use I didn't include it in my slides Because it wasn't part of today's session But it's called POEDIT And it's basically software that you can use To translate your PHP projects It does have WordPress support The free download There's a manual way that you can create your translatable strings Or the pro version has a specifically a PHP option I'm going to open up POEDIT quickly Hopefully it's going to work on my desktop Well, after the upgrade While you're doing that Yeah, I hope so While you're doing that, Jonathan Linda had a good question And maybe you could clarify And just confirm that what I said was correct So Linda's asking Will you have to do all this For every bit of content on the site And maybe you want to make a distinction between What content What you need to do this for And what you don't So let's have a look at my WordPress site As an example that I've got here locally So if I wanted to make my site Fully localized, translated Whatever the case may be Then I would have to do this for every piece of content But I might not want to do that So for example, my I'm going to go to I'm going to plug my home page quickly My jonathanbosinger.com site, for example I don't I am I am English I write in English So I don't feel the need to translate all the content on my site And if I wanted to I wouldn't be able to do it using this method This is only specifically for If I'm developing themes Or developing plugins And when those plugins and themes are being used There is ink There is language around the usability of the plugin or themes As we said earlier If I click on themes in the editor And I go to, for example, my In my site now, wrong one Let me not do that We go to the local site that I was working on And I go to the themes in the editor And I open up jon, translatable theme There is some text here That I might want to make translatable So that when somebody installs this theme on their WordPress version And if they're in a different language It'll show everything in their language Yes, so the people using it will type in the content in their language Correct If you want to translate your site And make your site available in different languages There are plugins that enable you to do that And then you have to literally create So for every page You have to create the different language version of that I've actually worked on a project It was for a local NGO And they had everything in English And then everything in Afrikaans And we had to create Afrikaans pages For every English page that exists What we're doing today is specifically for The elements around the theme That you're developing for either the WordPress repository Or if you want to sell it And you want to make sure that it is translatable Mostly if you want to install it into the theme repository Because the translation things are available there If you're just building themes for English-speaking clients Or clients in your home language So if your home language is French Or your home language is Dutch And you're just building themes for Dutch clients Or French clients Then make it Dutch or French And then don't worry about the translations But if you're loading it onto the WordPress repository Which a lot of folks do And you want to make it translatable Then include this functionality Okay, I hope that answers that question Cool, so the PO edit that I was mentioning I think it was running here in a second So I'm going to try and find it There it is So I don't know how this works I discovered this recently When I did my live stream in preparation for today But you can create a new translation You can browse files Or you can translate a WordPress theme or plugin And this is the paid version So you have to have a pro version to do this So I can't show you how it works But it basically will scan your theme or plugin folder And then generate the relative files that you need So if it's a plugin or a theme That you want to translate yourself You don't want to wait for folks to translate it You can use this to do it And then you can either hire somebody to do the translations Or put it out to the community One day I actually want to try it It's an experiment I want to try one day There's obviously AI technology now that can do translations One day I want to try This one's using machine translation With deep old Google translator, Microsoft's dead One day I want to try it myself Or when it takes something in English And run it through an AI And see how it works and see if it comes right But apparently this will do all of that for you I don't know what the pro version costs Let's have a look here quickly I hate it when they hide prices Way down at the bottom But there are apparently other ways to do it Which we can maybe do in a future workshop or something But that's one option that you can look at Okay So that is my bit for today Does anybody have any questions around all of this That haven't been asked already? Otherwise, if not, we will wrap it up for today Linda says, the longer it takes to find the price The higher the price is I generally find that to be true myself, yes Okay, I think we've covered everything we need to cover I don't think anybody has any questions If you want to see this code live I very, very quickly, when I was preparing for today The reason I'm a little bit late in my preparation today Was that I had to work from home on Monday and Tuesday So I couldn't do my usual live streams and preps And things like I usually do on a Tuesday So I did it all yesterday And then I put everything together this morning I've actually created I don't have the slide in my resources I apologize, I'll share it with Catherine To share with you in a second I created a version of this Exactly what we did today Just in a very simple theme And it just has the The photo template part Let me find it Which includes the pattern And then it has the pattern And then it has the credits PHP with the code You'll see that the formatting is slightly different The theme domain is slightly different Because that's the theme of this theme But it gives you the basic idea of how it works So if you needed to catch this up You're welcome to grab this code from PH to see how it works Once again, thank you all for joining me today It was lovely to see some folks that I've seen before From next week We're going to take a break from theme development projects And we're going to be doing some block development I've decided to kind of push myself out of my comfort zone We're going to be developing blocks without using React Or any of the build tools So we're going to be using vanilla JavaScript So no needing to require install Node on your computer And run the build tools We're going to be doing vanilla, vanilla JavaScript It is possible I've never done it before So I have some prep work to do before we get But what I would like to also mention while we're here I'm going to do a little bit of a plug for you folks On learn.wordpress.org I recently released part one of my developer's guide to block themes Part one covers block theme basics Building your theme structure in the editor Saving changes to the database And custom templates and template parts And for those of you who will remember When I first started doing workshops We covered all of those Part two will cover all the stuff we've been doing recently So things like downloading and using fonts Using patterns What was the other one? I can't remember Now I'm going to have to check on the issue on GitHub If you want to follow along, you're more than welcome to Let me just find... I'll share the issue with Catherine So she can share it in the chat Now I'm not going to find it, you watch Represents, looks, looks, global styles Where is that course? There it is Part two, here we go So that's going to cover Custom fonts, patterns, global styles variations Which I think last week Internationalization which we did today And you'll see there I used the Z And then also locking down your theme How to use block locking Which we did in the previous workshop So all of the stuff we've been covering in the workshops Is going to be in the course as well So it's a great resource to use If you forget how any of the stuff works If you can, I would love you all to go through the first course And please send me any feedback That you might have Anything that you think is missing From the first four modules And then go through the second course And send me any feedback there And then as you encounter problems In your theme development Things that we haven't covered in the course Please do let me know Because I want to build a follow-up course On all of those things I am actually going to be... I've got a little side project that I'm working on I'm going to be building a theme For the WordPress directory I have partnered with a designer Who's happy for the design to be open sourced And I'm going to use it to kind of see Whether everything that I've been teaching you folks Actually makes sense in the real world Because I haven't built a theme in a long time So I'm going to be going through that process I'm going to be documenting that process Probably doing some live streams Probably some workshops And then the ultimate goal Will be an actual theme that you can install And you can see the code And you can see the process So hopefully if I pick up things I'll be able to add it to that course as well But I do highly recommend going through part one If you would like to Part two will probably be Towards the end of November And then we'll go from there Linda mentions accessibility Yes, that is something I definitely Do want to look into As I mentioned in my previous workshop I'm not an accessibility expert I'm usually the guy Who takes the design that is already accessible And does what it needs to do And I just turn it into a WordPress theme So that's something I definitely want to look into And we can maybe add that And maybe it could even be its own course And we could talk about all the different things That relate to accessibility But I'll need to connect with a few experts And get their feedback first Great, thank you again everybody for joining Thank you Catherine for co-hosting with me today It was lovely to see you all Next week bring your code editors Bring your WordPress sites We're going to be building a plugin We're going to be writing some JavaScript Hopefully I will be prepared It's going to be new to me as well So I will do my best to prepare my best But please do join me for that We'll probably be doing that for about four to five weeks Linda, I think the link is there But if you just go to learn.wordpress.org And look at the home page It's under courses It's the first course under courses at the moment There it is over there Or just both bag me on Twitter And I'll share it with you Great, thank you all for joining I'm going to stop this now And we will call it a day Now I can't find Catherine Can you press stop Because my things have gone missing