 All righty greetings everybody It's the first live stream or my first live stream of 2024 at least I don't know if it's the first live stream ever 2024 but it's my first live stream So welcome if this is the first time you've joined me And welcome if you've joined me before I do Mostly WordPress related live streams I'm going to turn the volume down in the music a little bit. Mostly WordPress development focus live streams Welcome I find nicknames to be weird, but they're cool, but they're weird to try and pronounce Yes, so my focus for 2024 is Going through the process of contributing to WordPress So if you don't know me, I am a sponsored contributor to the WordPress project. I create educational content for learn.wordpress.org that content includes online tutorials video tutorials lessons lesson plans online workshops and Something that I'm going to be focusing on for the rest of 2024 at least Majority of 2024 is going to be the process of contributing to WordPress So if contributing to WordPress is interesting to you, then hopefully this live stream will be interesting to you If it's not something interested in then maybe it'll be something you become interested in Or maybe you just like sitting watching somebody fumble around with things But everybody is welcome. I want to just take this opportunity to say that I recently Reconfigured and reset up my streaming my obs streaming setup So if the sound is wonky or weird or too loud or anything, please let me know And I'll do my best to fix it I'm not the best when it comes to streaming software, but I'm always willing to learn but at the moment all of my All of my things look right. Are you For those of you, are you hearing the background music this background music playing? It's just starting now. So if somebody could just let me know if they're hearing that music as well You should be hearing it, but I'm not seeing it show up on my On my desktop audio setting This is very silent. Let me see if I can get what I'm gonna do is I'm gonna turn it up a little bit on here. I Do you have it very quietly in the background? So I'm gonna turn it up a little bit Okay, I've got some confirmation effects in here. So that's good If that if that's ever too loud, let me know as well and we'll turn that down a bit But I like saving a little bit of background music in the stream Okay So if you have never contributed to core before That's where I'm gonna kind of start today a good place to get started would be Thank you. Yes, it is meant to be very subtle. So thank you for confirming that A good place to start is the make WordPress.org core channel I need to just check something else here. I haven't set my resolution correctly, so I'm gonna just change that quickly One second everybody. There we go. That's a bit better Makes everything a bit bigger on the stream, which is like how I like it to be So if you've never contributed to core before this is the URL to visit I'm gonna share it in the chat with anybody who's following along Basically, this is the core WordPress team Oh, I can't that's embarrassing. I can't share things to the chat because I haven't logged in So give me a second here folks. I'm gonna just take a tab off screen here Because I need to show my passwords and things actually now I can do it over here. So let me do that quickly It's terrible when you haven't even logged into your own twitch chat To be able to communicate with the chat that's embarrassing can tell it's the first The first stream of this year. Oh, it's trying to ask me to sign up. I don't want to sign up. I want to log in Log in there and let's do this Yes, you're wondering what I'm doing. I'm just logging into The twitch chat. There we go. Now I'm connecting to the chat so now I can paste things For you There we go. So that's the link that I'm working off This is the core the core team within the WordPress project And the good place to get started would be to go to the handbook. There is a handbook for every team It's usually linked in the top menu here And in the handbook, there are some chapters around how to get started and there is a section on about the team There is a section on contributing with testing and then contributing with code and contributing with ducks and then various other things We want to focus on contributing with code So if you click on that it talks about Why contributes We're all human who the committers are various bits and pieces of information here, it's always a good idea to read through all of this But I'm going to focus today on the get if I had version of the WordPress core repository So originally WordPress core was managed using something called SVN And SVN is known as subversion. Sorry. I'm just checking messages on my phone here And so that's originally what folks use to and and still does to this day WordPress still uses SVN to this day But it has also been mirrored over to a github repository Using git and you can find it here. There are two places you can find it The one is if you don't want to have to use github. There's a mirror at develop.git.wordpress.org So if you just want to use git on the command line and you're happy to do it that way you can use that If you want to use github, which a number of open source contributors do use You can go there and you can get set up with all of that. So that's what I'm going to do today I'm going to focus on the process of getting this all set up Got an hour and a half, but I don't think I'll need the full hour and a half So in the read me so this is a mirrored version of the WordPress codebase And you can work on it in git and then what happens is that? If you're working on a core ticket, which is what we'll probably look at doing next week You can link to pull requests in the github repository And you can and you can make things work and happen that way So for now, I'm just going to focus on the github side of things. So that's my profile Just going to focus on getting the local environment set up And then once it's set up next week, we'll dive into looking at some tickets Seeing if we can fix some tickets Or at least start working on some tickets Okay, so let's go down here And there are a couple of ways you can get set up the first way is to use github code spaces So if you're comfortable with github code spaces, you can use that If you and I just want to mention sorry before we get going If anybody has any questions about all of this stuff as I'm working through it You're welcome to post your questions in the chat happy to answer them So if you have anything you're not sure of anything doesn't make sense Feel free to post them in the chat There is sometimes a slight delay But I will keep an eye out for them and I will answer them as best I can All right, I'm just moving some things around on my screen here to make the chat window bigger No, I don't want extra viewers. Thank you very much Okay, so So For local development There is a A local development environment called WP ENV Which is spoken about here And it uses Node.js to manage it and to run it So that's what I'm going to focus on today You don't have to use the development environment that they talk about here You can use pretty much any other WordPress related development environment I'll maybe dive into that in a second and show you how that all works But for now I'm just going to focus on the one that is recommended I already have Node.js installed on my machine So if I open up my terminal Type Node minus V No, maybe not that one Maybe that one there we go I've got version 18 installed I see that the documentation says WordPress currently supports Node version 20 and NPM version 10 So I need to get that updated Now fortunately for me, I use something called NVM NVM is a Node version manager Yes, I will share the link for GitHub for you There we go Pop that in the chat there There we go So NVM is a Node version manager tool I'll share that link as well And it basically allows you to Easily install and manage different versions of Node And what it also does, which I quite like about it Is it allows you to switch between versions of Node on a per project basis very quickly So for example, because I have, so let me show you this NVM minus V Will show me what version of NVM is installed If you've never installed NVM before There is a tutorial on learn.wordpress.org Which I will share with you as well That actually is titled installing Node.js and NPM for local WordPress development And this talks you through the process of installing NVM And in this tutorial, there's a video portion and a text portion In this tutorial, I talk about how you can install it for Mac OS and Linux So if you're using Mac or if you're using Linux There are the process to install I also talk you through one way to install it in Windows My suggested way to do it in Windows is to use PowerShell But there are other alternatives that you can use But I just like using PowerShell in Windows That's just a personal preference Go away So I talk you through all of that There's also something called NVM Windows that you can install So there's many different options And then once you've got that installed Then you can use NVM to install the different versions of Node that you might need So if we run NVM list on my machine right now You'll see I have version 16, version 18 and then whatever the system version is So because I need version 20 for WordPress develop I can just run NVM install 20 NVM install 20 And NVM will go ahead and get version 20 of Node for me Download it, install it, do all the things that I needed to do So that's very, very cool That's now installed and being used So let's go NPM Let's go Node minus V So that confirms version 20 is installed If we go NPM minus V That's version 10 for NPM which is great But if I need to switch So let's just do a quick NVM list here So you'll see now I've got version 16, 18 and 20 installed I can if I want to I can go NVM use 18 And then it'll start using version 18 in this terminal instance So if I now say Node minus V It's back to version 18 And if I say NPM minus V It's back to version 9 So that's one of the reasons I like using NVM It's one tool that I install And then it does everything else for me through commands It allows me to switch quickly and easily Whatever the default version that is installed Will be the default version that's available When you open up your terminal So if I say, if I exit the terminal NVM minus V now No, not NVM, sorry Node minus V It's because it's back, it was It was, I said use 20 But I didn't say set the default to 20 So now I could say something like NVM use 20 And there we go And now it's using version 20 Let me show you again Let me exit out of here and we'll go back And we'll see what version is now in use It's NVM will be version 18 again So there's a way that you can set 20 to default Which I can never remember how to do So I'm going to check in here quickly Let's show this in documentation I think it's under usage You can say Which one is it? Use exec run There's a special command that you could run to say Use version 20 as the default Or use latest as the default Or use latest as the default or something I might have it in my In my random access memory page on my blog Let's have a look here No, I don't Okay, that's fine So say NVM set default I think it's this one Here we go NVM alias default And you set the alias the default version that you want So I'm actually going to So what version is version 20? 20 is? So I think you can just do this I think you can just say NVM alias default 20 So let's try that So that's now set the default to 20 So if I exit out of here And I log back in And I say No We're back to version 20 But if I say NVM list We've got 1680 and 20 installed I'm feeling for the learn WordPress code base It needs version 18 I think we still need to update that to version 20 So I'll just leave it on version 20 And just switch to 18 as on when I need it Okay I'm going to make a quick note about alias In my random access memory page So this is a page that I have on my blog That I sort of Are bookmarks of things that I need to remember for myself I've managed this for a number of years now It just helps me remember where things are So I'm going to add a new section here quickly Which just says Set Default No JS version in NVM I'll just bold that And there we go I'll leave it as 20 So that's the fun part of live stream folks You get to see all kinds of things that I do every day All right So that is that So now I've got version 20 installed Which is great So I'm going to close this down Close this down We don't need track right now So we've got version 20 and NPM version 10 Let's just check that NPM NMSV's version 10 Excellent You can also install node By default using brew in Mac Using Chaco in Windows For example Many ways to do it I just prefer NVM I also need to have docker installed and running Fortunately Or unfortunately depending on how you want to look at it I do have docker installed on my local PC I only use docker when I'm working With the WPE NV local development environment I don't use it for anything else So the two Code bases that I That I use docker for Are the WordPress develop code base When I'm working with that local development environment And the learn WordPress Learn.wordpress.org code base Because they both use the same Local environment underneath the hood So they both need docker to be installed Okay So it says here that once I have Node and once I have docker I need to ensure docker is running Which it is That's good Then I need to get clone this repository And then change to that directory And then run these four commands So I personally Have the following Folder structure setup So my folder structure is I have a development folder And then I have a projects folder inside of development And then inside of projects I have all the code that I regularly work on If I list that out Now you'll see a bunch of things in here That I work on Where is it The learn WordPress code base There's also some other things that I've worked on And tested and played with In and around WordPress And then just things I'm checking out Like a flappy PHP pant If you want to see what that is That's a bit of fun I'll share this quickly It's a very simple flappy bird like game Bolting PHP So if you're interested in building games in PHP Go and check this out It's quite fun Because I'm working on And so I'm going to get clone this If it's not clear Which notice they don't actually say it on here But you do need to have gets installed on your local machine So depending on what system you're using You'll need to install get You can just go to get.sh I think it is to No not get does it What is it Oh there we go Get-scm.com That's what you can find to install get You can use Choco as well if you're on Windows Many other ways to do it But you will need to have that installed And then you can run the command So let's close this down So then in my terminal I'm going to just clear this And I'm going to Get clone WordPress develop And that takes a while So that's a whole bunch of code It's downloading history It's downloading various other things It might be Not too slow on my machine Because I had downloaded it previously And deleted the directory before this live stream So it's not going too slowly Okay So while that's being downloaded Oh it's done Okay so once that's done Now we have the code on our machine What I like to do at this point in time Is I like to open up PHP storm Which is the PHP editor that I use You can also use visual studio code If you use that or whatever tool you use I like to now go and just open up that project Directory And just kind of see what's going on in there So if I go over to my development And I go over to projects And I go and find WordPress develop There it is there The other reason I do this now Is because PHP storm does a process called indexing Where it indexes all of the files in the project So now would be a good time For it to do all that indexing It starts asking me if I want to install dependencies I'm not going to do this here I'll do this in the command line But you'll see here So right at the bottom of my screen here PHP storm is indexing all these files And so that's what I That's one of the reasons why I open it up now And let it do all of that PHP storm also starts asking me a bunch of questions I'm going to move my head out the way a little bit So as you can see those questions It says do I want to run composer install I'm not going to do that right now I might as well enable WordPress support PHP storm has a thing where you can By default enable WordPress support That supports things like WordPress function Auto completion and various other things So I'm going to enable that support But I'm going to point it to the source directory Inside of this project So I'm going to open this up here And go to development projects WordPress develop And I've pointed to the SRC or the source directory And I'm going to go OK there So that's going to do some more indexing Which I'm quite OK with Let me move my head back in the corner here And we can get on with things All right, now the other cool thing about this Is once I've checked out the code I don't need to have the browser window open anymore To run the commands The readme file is included in this code So that's another reason why I open up the project file now So if I was to be disconnected off the internet It wouldn't matter, I could just follow the instructions here OK, so now I need to start doing All kinds of NPM things NPM install, NPM run dev And all of this I'm going to start by doing that As I mentioned earlier You don't have to use So before we go any further This local development environment Is based on something called WPENV Or WordPress ENV And WPENV lets you set up a local WordPress environment For building and testing plugins and themes Also you can use it for Testing core, working on core It was announced In March of 2020 So it's been around for about Almost four years now But it's something that The WordPress core team is in the process Of looking at Not necessarily moving away from But possibly adding another option So this was originally sort of launched As the WordPress project Sort of recommended tool For local development But the problem was that Docker changed their licensing And so folks are looking into Other options And one of those options That folks are looking to Is something called WP Now WP Now is something that was Launched by A developer team at WordPress.com Which is the hosted version of WordPress Managed by the company automatic And this uses something called The WordPress Playground Which if you haven't heard about The Playground before The Playground is basically A version of WordPress That actually can run in your browser It's kind of cool to see it in action It's basically using something Called WebAssembly So it's a fully functional Instance of WordPress Running inside the browser So it's all packaged as this WASM module I think it is And what's cool about The Playground is that recently The WordPress plugins team Or maybe not the plugins team To use WordPress Playground To create previews for your WordPress plugins So if you're a plugin or theme developer This is a very cool little tool So I want to show you one of my plugins And how that works quickly I know we're going completely off topic here But there's a plugin It's a plugin that I helped maintain I haven't updated it for years I need to Called list all your roles And there's this test preview button And that is because I've got It opens up a new tab It opens up an instance of the WordPress Playground And it automatically installs the plugin This list URL is plugin for me In that instance of the Playground So what the user can then do Is they can test out the plugin They can see how it works They can see what it does It does take a few seconds to get going But once it's done And there it is And you'll see what you're also able to do Which I think is quite cool The Playground instance is very direct Uses straight to whatever settings pages You might have Or whatever functionality within your plugin So now I've directed the user Straight to the list URLs page They can actually test this functionality Out right here And they can see how it works Before they install on their WordPress site So this is very, very cool I've linked the Playground instances Well already So do go and check that out But anyway, the point is I haven't decided whether I'm going to test out Playground Yet for local development or not I was planning on doing it I was actually planning on doing it last year But I ran into some trouble with it Not trouble with Playground Trouble with my time To get to testing it So for now I'm going to focus on WP and V Purely because it is the one That is listed in the documentation It is the one that is suggested By the core developers to use At a future live stream I want to see how it works I want to see if it can work for core development So look ahead for that when I do plan on doing that Sometime in the future Doesn't show up when I visit your plugin page So are you saying when you go to list URLs It doesn't show up for you If you go to let me pop the Let me pop the URL there That might be because I'm not sure but is it possibly A translated version of the page It might be a bug with the Playground I'm not sure So if you It only shows the download button Okay When you click on the link Does it change to Because I know WordPress has Translated versions of the plugin pages Does yours perhaps Switch to a translated version I wonder I wonder if it's because I'm logged in Let me see Let me see what happens if I log out If it works then Ah there we go it's because I'm not logged in So that's why it doesn't work Interesting I was not aware of that So if you do have a profile on WordPress.org Why don't you do me a favor and log in And see if it then does show for you And if it does show for you Then it's obviously only for logged in users And that's maybe something to Okay so some of you are logged in And it's not showing on your view either That's very interesting I wonder if I'm not going to debug it now But I wonder if it's the way I've implemented it I will do some testing on that Thank you for letting me know that folks I'll do some testing And see why that's happening It's a fairly new feature Okay cool So I'm logged in but no test button there Okay awesome thank you folks Thank you for that feedback I'm not the person who manages that But I'll definitely dive in a bit deeper When I've got some time later And see why that's happening Alright So I just bring some attention Let's go back to core development So let's run I should have actually been running NPM install while I was waffling Because then it could have erred Yeah what's going on here Oh I'm not inside the WordPress develop folder So I need to switch to WordPress develop And I need to run NPM install A whole bunch of them So it's the JSON file inside of the Assets directory It's called a blueprint Let me see if there's something that I missed Hmm There's no setting anywhere That's interesting I'm going to check something Yeah While this is doing its thing Let's see that's still busy So let's go and do this Let's log out And then I'm going to log in I have another test A profile that I used to test Updating content to learn WordPress So let's see That's interesting It only seems to show for me Because I am the logged in user Who is the maintainer of one of these plugins That's super interesting That's super interesting Well thanks for pointing that out folks I'm going to Make a note of that On the On the post where this was Originally Added which I think was It was on the meta channel This is still busy Doing things I think it was in meta So let's see if I can find it Developer resources No Yeah, plugin previews Are now available for Updating Hang on There's a live preview Let's see if we can fix this together folks This is fun Yes That seems to be the case I need to go to the advanced view tab Which is down here And then I need to go to Toggle live preview There we go Please toggle the live preview link For all of these jurors Okay So now that's toggled So now those of you who've tested it earlier Would you mind testing it again for me And let me know if you can see that live preview I'm not going to lie I love the fact that my live stream About contributing Just helped me fix something On my plugins So thank you for your feedback there Awesome Ignis Fairey says Fairey says visible now Yeah, it works, cool Okay, awesome, thank you folks Helping me fix bugs in my code On life Cool That's excellent Okay, awesome, thank you I missed that That's good that they added that feature I thought it was all by default Okay, so you can check out The live preview there You can test it out If you're a plugin developer And you have a plugin On the .org repositories I do recommend testing that feature Out I'm not giving it a try You can, I believe In the blueprint You can define That certain plugins Need to be required for your plugins So you install those plugins at the same time So yeah, it's very I'm going to share this link as well So if any of you are plugin developers Go check that out And go and see if it's something You want to try out Okay, NPM install is done So that's perfect So we managed to install NPM And fix something else at the same time That's great So now let's build the dev environment So it's NPM run build dev So let's do That And this is just basically Building any kind of Development assets for You know, JavaScript and CSS And all those kind of things Specifically, most of this functionality Is required because of the block editor The block editor is built As I'm sure you all know Built on JavaScript Built using JavaScript on top of React So it uses Webpack And these sort of build steps To generate all that code So you need to run that build Before you can start using The core code base So that takes a few moments While that's running We'll get the next command Which is to start the local Development environment This essentially As far as I remember It will download the relevant Docker images Set them up And then connect your code To those images Or containers as they're called in Docker So it's busy downloading those now Looks like that was pretty quick So that's kind of cool And if you open up your Docker Toolbar You should actually be able to see Those containers running So there we go So there's a whole bunch of containers running There's the WordPress containers Let me make this a bit bigger So yeah, and there's some WordPress CLI Containers happening I don't know where those came from I think this might come with Last started 27 days ago So it must be something else I was doing 27 days ago But here's all the WordPress develop stuff So there's a WordPress develop one container There's a PHP container Which obviously handles the PHP side of things And a MySQL container Which handles the database And all those things Some of these containers I think need a bit of a cleanup But I'll do that I'll do that after this All right And then the last thing you need to do Is run npm Run env install I think what this does Is set up the actual database It probably sets up the default data It looks like it's downloading Maybe some things as well I'm not sure what it is actually downloading I could dive into it if I really wanted to But I don't mind letting it do its thing So while I wait for that to happen I'm going to grab a sip of coffee And then we will see what happens Ignis Fiery says Got any recommendations for a Docker tutorial? Unfortunately I don't And that's because I personally don't really like Docker I only use Docker when I have to Because of the WordPress local development environment I actually prefer to run My WordPress local development environments In a different way Which if there's time at the end of this I'll show you If you're interested But ultimately What I ended up doing Was just becoming comfortable With the fact that some environments require Docker Making sure I have Docker The free version Just installed and running The Docker client And then just running the commands That I'm needed to work with Docker Other than that I've never read any tutorials myself I've just kind of fumbled my way through What I do like about the WordPress one Is that it actually gives you Because they're using NPM There are ways to run things using NPM So to run a WPCI like along command There is an NPM option to say Run the command in the Docker container But yes, personally I don't like Docker I don't like the way it works I don't like the fact that For example Your containers are Your containers are all separate And if you want to log into the MySQL database You can log into the container And how to get there is not clear to me I like access to things straight away So personally I just use it But I'm certainly an expert in Docker At all And I can't recommend any tutorials So if anybody else I see WP Meisters sharing a tutorial there If anybody else has some tutorials On how to use Docker Please share them But I'm the wrong person to ask Ok So with that done According to According to this Everything should be set up and running So I should be able to go to localhost Colour on 8889 And I should see WordPress develop running And there it is Localhost 8889 That's another thing I don't like about Docker Is the port numbers Anyway So there is my localhost 8889 It's all set up and ready It's using the latest theme I do have an option To log into the admin directory Which I think they do Yeah, they do They speak about that here So these are the database credentials I'm not going to need them To log into the site I can go to this link And the username and password is Admin and password So we'll go admin and password And that will log me into The admin dashboard This is another thing I find With Docker instances And I don't know if it's related to My setup Or what the cases be But I sometimes find them to be very slow As I say I'm not sure if it's something to do With my configuration But sometimes I find them to be slow So that's just a personal thing And here we go Here we have the very latest Of WordPress You can see at the bottom It says here Using the development version 6.5, alpha 5, 6, 9, 6, 6 So it's the most recent Pushed version of WordPress It was committed to when Literally one hour ago We got some updates So it's the most recent version So this is a great way to test out WordPress versions that are coming up Test out new functionality See what breaks, see what doesn't And this is what you can do Used to test your local development You can then create A pull request in GitHub You can link it to a track ticket And you can do whatever you need to From there Okay So that's my local dev environment I'm going to stop there I'm not going to do any diving Into code today What else Also, we'd just like to show you today Is the alternate way that you can Work with the core code base This is the way I prefer to do it This is just my personal preference So I have a Setup that is kind of custom to Myself It's something that I created Called WP Local ENV It basically runs Instead of running in a container It is a virtualized Ubuntu server On my machine It uses something called MultiPass Which is a canonical product Canonical of the folks That are the company behind Ubuntu The founder of Ubuntu Is the CEO of Canonical And basically it allows you to Set up and run a virtual Ubuntu Server on your machine Now the reason I want to show you this Is not because I want to show you MultiPass But I want to show you If you're using any other kind Of local development environment Where you don't have these Commands that allow you To set up the environment And it all just works And it all just configures You need to kind of do things A bit manually yourself So I want to show you that now So let's say you're using Something like maybe local WP Or devkinster Or you're using things like There's lauragon There's devilbox There's all these different kinds Of local development environments That are not specific to WordPress But they create a local web Server on your machine And then you have to configure The virtual host yourself And configure maybe the Local development URL yourself Or whatever the case may be And then you install the software Manually This is how you would set up The development environment In a manual way So what I'm going to do Is I'm going to create In my setup What I'm first going to do Is I'm just going to stop I'm going to stop the local environment Just for now So it's not running anymore Envm run Env stop So it's Envm run Env stop That's what it was Just check that Oh no, it's Env- Env-stop And now it's basically You're going to shut everything down And Oh ee Evn Can't spell today Env stop There we go Okay, so that's stopped Let's just check That it is stopped Okay, that still works though That's weird Did I do something wrong? Oh it hasn't actually stopped Envm Now that's right No, it's Envm No It's Envm Envm run Env stop I can't read today Let's try that again There we go Okay, so it removes containers It stops containers If I now refresh this This should stop working That stops working That's great What I can also do now Is I can shut down Docker Which I don't like to keep lying around So I'm going to shut that down And that's all So that's all for not working right now Okay, so imagine if you will You're using whatever your preferred local environment is And you've set up a blank local site To do WordPress development The first step And I'm just going to Change direction here And just remove The WordPress develop No, I'm still there See there I'm on this rf WordPress WordPress develop That could take a while Because it's quite a big folder While that's doing that I'm going to go through What is my process For setting up a new site So I'm going to show you Quickly what that does So basically I just run a command I go sudo site set up And I'm going to call it WordPress-develop For now In my long password I can't even type my password right I really should connect that To my fingerprint reader But anyway So now what this does This uses Apache in the Ubuntu server It sets up a virtual host for me So it does all the similar kind of things It's something like a Lara gone Or a What are the others Local WP Whatever setting up a clean site For you with a local test URL And if I go to The way this is configured On my site Is I have a WP local ENV directory I have a sites directory And then inside of my sites I have any sites that I'm working on And there you'll see As WordPress-develop So if I create Let's actually pop into that Folder there So let's go and open that up Local ENV sites WordPress-develop So currently it's empty There is no code there And if I create a WP file for example So let's just call it Index.php And I say Echo Hello WordPress-develop Echo I've typed wrong There we go And I Check this out So we go WordPress-develop.test There you'll see Hello WordPress-develop So this is my local environment That I use It's very similar to any other Local development environment That is not specific to WordPress That just creates Blank sites for you To then work on whatever Code you're working on So with that in mind To be able to Use the WordPress-develop From Git The first step is the same The first step You still need to Check out the code What you will need to do Is you're going to Check out the code Into the folder That you've created For your local site So I'm going to go to CD Local ENV Sites WordPress-develop And you could obviously Depending on how Your local environment Your local development environment Works You could just delete this Folder and then Create the new one By running Git Check out and all of that But if the Let's say the folder name Is slightly different Or whatever the case may be Then what you can do Is you can still run This command Git clone Da-da-da-da-da And then you can use AI I think it's a full stop Or a period At the end of that Come on So space Full stop Or for space period And what that'll do Is that'll tell Git to clone Or that code Inside of the current directory So if I run that Command Already exists Oh wait Is that right? Maybe it's that No I can't remember I'll have to do Some research Git Clone Inside Current Directory I know there's a way to do this And it's driving me crazy now Da-da-da-da-da Test Yeah, there we go Come on That's a full stop I thought it was a full stop Hang on, yeah It's just I thought this would work I'm confused Okay Well then the other way You could do it Is you could See if I can get this working here So that's the other way You could do it Inside of this folder You can go Dot forward slash WordPress develop And basically What you're wanting to do Is you're wanting to clone All of the code Inside of whatever Your local environment Folder is I just want to see That that's doing What I expected to do No, it's not It's cloning it Into this folder Which is not what I wanted I'm annoyed now Because As far as I know That's supposed to work Okay Let's just see That's not what I wanted So let's try this again So let's go WordPress develop Let's go back up one And then let's say GetClone And then let's point it To the WordPress develop directory See if that works Oh, maybe Because it's not empty Because I've done this before And I'm sure it works So let's just go rm minus rf Stylish Delete everything inside Of this directory Yes And then let's try The GetClone command again Because as far as I know This should work Basically just telling it To clone it into this Current directory Maybe it's all these other things So let's rm DearStore And rm Dear There we go Okay, so it doesn't like The fact that there are Other files there The idea comes From PHPStorm It creates what's known As an idea folder Which stores Sort of PHPStorm settings I don't know why There's a dear store In that directory But that is the command That I remember working And it's probably because I created the idea Because I opened up PHPStorm to create that file That's the problem So there we go I learned something today Cool So once that's downloaded By defaults If you're running Any kind of custom environment The folder that it creates Is going to be Your document root Or your web root And it's going to be Looking for Your index or PHP file Or whatever else To be able to serve the site So what What you will notice Once this is all checked out So now let's open up this again You might notice that The actual source directory Is the one that contains All of those files So if I were to browse To WordPress develop test Right now It actually doesn't give me Anything useful to work with And if I have a look Here in the root You'll see that I don't Have any index.php file Or anything else to work with So what I then need to do Is I need to point to The SRC directory That will then show this page And that then tells you You're running WordPress But without the JavaScript And CSS files These need to be built Before running the tasks You need to install the dependencies So to do this You need to have NPM installed And then you run And off you go So you still do the same thing You still run NPM install As per normal So inside of WordPress develop Going to run NPM install Yeah, I don't even mind I'm aware what the default Directory file is But I've never had that problem Where it being there Is causing the problem So I think it was the IDA file Or folder That was giving me that problem there Because that's never I've never known The DS store to give me That issue So it must be the PHP storm IDA folder That was the issue there Okay, so now You just need to make sure That NPM is available And then you run NPM install Using whichever way you want And then you run NPM install And then once you've got NPM install Run Then you need to run Either the dev environment Or run the watcher Or whatever the case may be But then everything Runs from the source directory So let me wait for this Okay, that's finished So now I'm going to go NPM run watch No, not NPM run watch I'll go NPM run dev Just for the sake of it Let's go do that And depending on How you're working with WordPress If you want to contribute To JavaScript things You might need to run the file watcher If you want to contribute To PHP things You might need to not But it's always a good idea To run the first build And then go from there Yeah, that's doing its thing So let me show you What this looks like over here So it's still giving us that error Because we haven't built Any of those files So it does specifically Wait for this process to finish It's almost there Come on I suppose this is the Upside of a live stream As you don't expect me to be Talking all the time Okay, now it's running All the dev stuff Okay, almost there Okay, so then What you end up with So this isn't quite finished yet But what you then end up with Is you end up with The standard WordPress Five minutes install So you will need to manually Install the database To get this all working So you will need to have Some way to access Your local Your local development environment Database I use PHP my admin So I'm going to Quickly log into there And I've already got This WordPress Develop database That gets created for me So I'm going to Copy those details there I'm just going to check If this is Okay, this is watching So that's fine And so now I can go through the process And I can do the So that's the database name The username in this case Is root The password is password It is localhost And that is the default prefix And then you can run the installation And then that's your Standard WordPress Local installation So I just call this WordPress develop And I'll just go Username password I don't mind about The weak password And we'll go WordPress develop.test And I'll just discourage you Cool And then that's the standard installation Done And you're using You know You're using whatever Your local Your preferred local Development environment is Configuring it manually Yourself But you get the same The same result So how you do This is entirely up to you Whether you want to use WP and V The local The local development environment That way Whether you want to use Whatever your local Current development environment is You have some options Available to you For each of those options You will need to run The npm install things And the And the dev And all of that To get it going But then eventually You get to this point Where it's all working The other thing I like to do You'll notice that it's Running on The SRC directory right now I don't really like The fact that it's doing that So the other thing I like to do is I have the option to SSH into my No Can't spell today I have the option to SSH into my local Virtual instance And so what I like to do Is I like to edit the Apache virtual host Two sites enabled And then what I do is I point the document root To the SRC directory And I point the directory Directive to point to The same directory And then what's cool about that Is that I once have done that Let's think there for a second Once I restart Apache Then I just have to go to The web root of my local Development environment And it all just works The reason that's not working The reason is showing Issues with the The CSS there Is because I have Not updated my site options So ideally I should Have made that change Before I changed things On the server So currently my Site URL of my home Appointing to WordPress WordPress test SRC Which I need to remove And this one as well So that's why I don't do the Install until I've made that Change on the virtual server So now if we go here Now this all should be There we go It's all working beautifully And if we navigate to the Admin page It's access to the Admin page We can log in Oh No You can tell it's my Second week back at work I've forgotten how to type And there we go And it's all working So that's if you're using Your own custom environment If you don't want to use The environment suggested by By the core team More than welcome to You just have to do A few things slightly differently I think That local environments Like local WP And DevKinster Because they're WordPress focused I think they might Offer a way to get this all Set up within that Local environment But if you're using something Like I said If you're using LaraGon Or if you're using MAMP Jamp, desktop server Maybe not desktop server Because that is kind of WordPress focused But any kind of Local development environment Where you have to Install WordPress Generally manually Or set it up manually yourself That might be the process That you'll need to go to To get the core code Set up and running Okay That's where I'm going to stop today I had set aside An hour and a half For this session Yes, unfortunately Desktop server is gone You're absolutely right I know many people use this And it was It was one of my Favorites of the WordPress Sort of local Development environments Because it wasn't really Tied to Like a hosting platform So you didn't get All of these upsells And things So it was kind of independent And it worked really, really well I didn't use it personally Because I used other things Because I'm weird that way But it was It was a very cool option So yes It is a pretty good desktop server It's gone But yes Depending on what you use And how you use it It is possible to set up The core code base And whatever you're using You just might need To do some work arounds Or some things like that Okay So I'm going to I'm going to call it a day here I had set aside An hour and a half For these live streams And I think this hour Is a good place to stop So next week My plan is as follows We are going to go Looking for issues In WordPress track My main goal For these live streams Is I'm going to be focusing On the REST API component So if I click On the list of components And I scroll down here I'm going to find the REST API Here somewhere There it is REST API You'll see that There are In the REST API Which is Not the smallest But not the biggest either There are 142 open tickets There are a bunch of Maintainers on the REST API But the REST API Is what powers The block editor The site editor The post editor It's all powered by the REST API So my goal this year Is to try and help With any REST API issues That are coming along I happen to enjoy Working with the REST APIs So I'm looking forward To seeing if I can help Improve the REST API In WordPress Ignis Fire Yes, this will be A weekly stream Unless something happens to me I plan to do this Every week from the same time And it's going to kind of Follow along from each week So next week I'm not going to do Local development environments again Next week I'm going to Start diving into the issues I'll probably start with What I might do Is I might pop into the REST API channel And say to folks What a priority What do we need looked at Maybe I'll chat To some of these component Maintainers And find out what they See as a high priority But the goal is to Focus on the REST API for Maybe not the whole of 2024 But for at least A good chunk of it I might every now and then Branch off and do something Different every week So What I'm going to try and do Is kind of keep up to date With things that are happening In WordPress core And when new releases are Coming out I might do a live stream Around the new release Or if something new Pops up in my In my dashboard That I think is cool To discuss that week We'll discuss it that week But if nothing else Is available to discuss We'll just carry on Working on REST API issues So that's the plan For 2024 If you are somebody Who used to come to my Thursday Online workshops Hosted I'm sharing the link here Hosted on the Learn WordPress Online workshops I used to do a workshop Generally every Thursday Those Thursday sessions I've now switched to These Tuesday sessions So you will find them All listed here as well There is today's session So if you're coming Through that way You can find me there Otherwise you can Just subscribe to me on Twitch Next question Are these sessions recorded? Yes I will be recording And uploading these sessions I'm probably going to see If I can get them uploaded To the WordPress YouTube channel So I'm going to pop That link in the chat as well So they will eventually End up over there Basically for them To end up over there I first need to Upload them to WordPress.tv And then it gets Copied over And then it's updated there So the goal is For every one of these Livestreams on a Tuesday To be available On YouTube By the end of the week Hopefully So my plan is On the Tuesday I'll do the livestream Wednesday I'll probably upload it And then migrate it over And hopefully by the end Of the week It's moved over So that's the plan at least And also I'm thinking About doing a playlist On the YouTube channel So that you can Find them all in one spot And if you have Any ideas for These weekly live streams Is anything you want Me to dive into In terms of Business development WordPress Contributing to WordPress You're welcome to Send me those questions And we can Maybe dive into them If you want to Send me questions Or suggestions Or anything like that The easiest way to get Hold of me Is if you go to My profile on WordPress.org Which I will share In the chat now You will find My Twitter Link You will find My website Which is There And you can On my website There is a link to My email address as well So you're welcome to Connect with me In any one of those ways And yeah If you see anything That you aren't sure of Or anything That you want to know About In the WordPress Development space Please do Reach out And let me know And we'll see If we can Look at Covering some of those Things in future Live streams Alright Folks I'm going to say Thank you Directly for my For my plugin I really appreciate that If you have any questions Around setting up The WordPress core code base If you've never tried it before And you want to try it You're welcome to Reach out to me In any one of these channels I would also suggest And encourage you If you're interested In WordPress development To join The WordPress Slack So if you go to Chat.wordpress.org You can then sign up For the WordPress Slack And I am available In that Slack You can send me a DM In the WordPress Slack And you can ask me questions Or things there If you get stuck You're welcome to give me a shout there And I'll do what I can To help Cool So that's going to be me For today everybody Thank you all for joining me Anything else Let me know Please do let me know And I look forward To hanging out With you in these weekly streams As we dive into Contributing to WordPress And hopefully We can fix some bugs together Hopefully some extra eyes While I'm doing these These bug fixes Will be Will be helpful I will say this as well As we move forward And as we try to fix bugs It probably will be A less chat Less of a chatty stream Because I'm probably going to be Sitting trying to figure things out So I hope you'll be With me as we do that Alright Folks, thank you so much It's been lovely to interact With you all today And I will see you next week Same time, same place Bye