 Welcome back to the channel. In today's video, I'm going to show you how you can write better code that can be used by people who will come after you or even yourself 6 months from now, where you have a code that is funky and you don't know what happened along the way. So on my screen here, I have two pieces of code. Both of them are working and you can see from this that we have this particular plugin that I wrote in some video before to show you how you can query external APIs and bring in information inside your WordPress theme or your WordPress site using a plugin. And on this other side, I have this very code that has been jumbled up and it's funky. You have this argument starting from here and then it's ending here and then you have these arguments that should be in this particular function by their way down. So it's a little bit harder to read and find out where some errors could be hiding. And yet when you read this code, it's a lot cleaner. You're able to see what's going on. You're able to tell what is going to happen in the near future. So one of the challenges I had was when I was submitting a plugin to the WordPress repository and I got a report that told me, hey, you have so many things that are not up to the coding standard that we do have. And then I realized this could be security issues. This could be things that hackers could use to get into the plugin or into someone's site. So today we're going to learn how to use the WordPress coding standards and we're going to do it via GitHub to make it easy so that once you publish your code to the public or in a private report, if someone wants to send you a pull request, then it would require them to format the code into a standard that you do appreciate. And this could be the WordPress coding standard or any other coding standard that you might come up with along the way. So let's jump into this and we're going to make this code look a lot cleaner and make it as funky as probably as this is. So let's get this particular link and once I'm in my editor, I'm going to come to the plugin section. I'll open up my terminal inside my editor and I'm going to say git clone and I'll add the link for the repo and we're going to clone that down. And you will see that we're going to have our funky code right here but at the end of the day when we are submitting our PR, we're going to get stuff that will help us to make sure that this code is actually clean in whatever we do according to WordPress coding standard. So the first thing that we're going to do is we're going to look at the turn up GitHub action that is available and that is open source and that is free for you to use. And what does this look like? So I'm just going to go to my browser right now and I'm going to go to github.com and I'm going to go to slash turn up. And in the turn up you're going to look at the repositories that are available and we're going to be looking for the WordPress actions. And there is this particular block that we're going to go into and you will see that turn up has outsourced so many actions like one of deploying your plugin to the WordPress repository, one of updating the particular assets like your burners and so on or just changing the readme so that you can concentrate on writing your code via github and then everything will be pushed to the WordPress repository. But what I'm really looking for is this particular one which is for linting. And linting in simple form is basically just making your code look a lot neater. So what we are looking for here is this particular documentation that they have and they tell us that we are going to have something that looks like this at the end of the day. So first of all, we need to write a file that can be named anything but it's going to be a yaml file and it's going to be inside the .github, workflows, folders. So in our plugin we're going to say we want a new folder which we'll call .github and inside it we're going to open another folder which we'll call workflow. And inside this workflow file we're going to create a file which we shall call maybe coding standards for short. And I'm just going to prefix it with WordPress to be WordPress coding standard and I'll say .yaml. Now this is a file that will be recognized by .github and what we're going to do is just copy what we have here and then I'll explain what goes on inside this code. So we'll copy and we'll paste this here. Now what's going on is that this yaml file needs to have a name of this .github action. This WPCS check is the name of the .github action that's going to be running every time that we check whether our code meets the standard that is actually there. So I can choose to change this. I'll make this a bit more expressive by saying WordPress coding standards check. And then what happens is that we have this rule that's going to say on every pull request we want to have the coding standards checked. So this on is an event that can be anything. It can be on pull request. It can be on merge. It can be on a number of events that available inside .github. So we say we want to have this job. So we shall say this is going to run on the latest version of Ubuntu. So we are basically saying our server for our WordPress is going to be an Ubuntu latest. And then we're going to say every time we are running this coding standard job, we want you to use the 10 up WordPress coding standard actions stable release that is out there. Now this is all stuff that you don't really need to memorize. What is important is the next part that we are going to look at. Now in here you will see that we have some additional variables that can be passed. And if you look at this, we're going to start with this part that says with. I'll copy everything and you'll see that this is well documented. But I can show you how you can change a couple of things and make it do more stuff for you. For example, right here by default they tell us that they are going to turn off the warnings. So you will see when we turn on the warnings to true. And you will see the errors that will keep on getting back in the particular pull request that we'll be making. Now we also check to say that all this PHP checks should start from the root folder. And this particular dot or period is really really important to say. Start checking from the root of the particular folder or this particular repo that we're working in. Now we have this part that says you can exclude particular folders. So you're able to add them when they are comma separated. Let's say you'll have something like let's say node or you'll have something like tests or you'll have something like assets where you can be able to skip whatever is going on. So that is a possibility. But I'll show you a better way of doing this using a different file. And then here we can choose to say we want to use the WordPress coding standard or we can use these other options that are available like the WordPress core standards or the WordPress doc standards or WordPress extra or we can even use the WordPress VIP go or WordPress VIP minimum coding standards. So there are very many options you just need to switch out what is here or you can use a number of them in one go right here by putting them as a comma separated value. So we'll leave this blank and then we're going to say the repo branch we want to work with in this case is going to be the main branch because I've named my particular branch right here as main. I don't have any other branches. So I want that to work whenever we make a pull request to the main then this particular coding standard check should go on. And then we have this final option that says use local config. So right now this is turned to false. But if we change it to true, it gives us an option to work with a phpcs.xml file and we shall see how to use that. But for now let's save this. I'm going to right click this and open this in an integrated terminal. And I'm going to say git add dot. I'm just going to commit this and say we have added our WordPress coding standards action. I'll clear that and I'll say let's git push this. And when I push this and I go back to my repository, I'll reload it. And you'll see that now we have a new folder with some actions and we have some WordPress coding standards check going on. So the first thing that we're going to do since we said let this work out on the pull request we're going to go back to our code right here. I'm going to say git switch dash c and I'm going to create a new branch which we shall call wpcs for WordPress coding standards. And what I'm going to do here is just add some more space down here. And once I'm done with that I'm going to git add git commit. And then I'll say added some white space and then I'll git push this let this go to the origin which is my remote and we'll say let it go to the wpcs branch. So once I push this I'm going to go click on this link. So once we push that I'm going to go back to our folder here and you'll see that git have automatically tells us that there is a branch with some changes. Do we want to compare and make a pull request? So I will click to compare and we'll see that there was some changes of some spaces that was made and what I'm going to say is here in the comments I'll say I added some white space to test the coding standards. So I'll hit create pull request here. First thing git have checks is to see if I have any much conflicts and you'll see that nothing is going on. So we expect our actions checks to happen here and we'll see that that's nothing is going on. So I'm going to go back and check and we'll see that we made a little typo. This is supposed to be workflows and not workflow alone. So I'm going to go back to my main branch. I'll say git checkout I'm going to go back to the main and then I'll change this to workflows I'm going to rename it to workflows then I'll git add git commit and I'll say correct the workflows folder name and then I'll git push this to my main branch if we come back here and look at the code we'll see that this is looking fine as it should be if I go back to my pull request here it will not run because I've not made a new commit so I'm going to go back here and git checkout and say let's go to our WPCS branch and I'm going to rename this as well after renaming this just make a few more adjustments add some more white space here I'm going to say git add I'll say git commit dash this and say add some more white space and then I'm going to git push this to our branch and then if I come back here and reload you'll see that the check for the merge conflicts is done away with and that's finished but now we have our coding standards check starting to work out here so if we want to see what's going on we can click here on details and we'll see that there is this particular check going on for the WordPress coding standards you briefly saw that running and you'll see that this is now marked red all these other jobs are ticked meaning that they run well but if we click on this one you'll actually see that we have quite a number of errors showing up so we'll see it's telling us there's a missing art package tag which should be in the file comment it is going to tell us that they're opening parentheses that are missing in the different things you'll see that there's white space that's found on particular lines what we have here is just one file and it's just maybe less than a hundred lines of code that we do have but if imagine you had written a plugin that has hundreds of files something like wukamas and you've not been writing this it becomes so hard to manage that plugin in that you would even give up on working with it other people will not be ready to contribute to your plugin because it's so messy now we can decide to work on one line at a time so we might need to reduce all these errors that are happening but it is also possible for us to fix all these errors really really quickly if we started by looking at maybe let's say the last line which is on error line 77 it says they are empty lines empty lines are not allowed in the multi line function calls and this is on line 77 column 1 so what we're going to do is come back here to our code go to line 77 you'll see it they tell us in this particular function these multi lines are not allowed so I'm going to delete them and then I'm going to also make this one line of a function I'll save this and I'm going to say git add git commit fix line 77 I'll press enter here and I'll say git push let's go back to our pull request and you see every time we make a commit this particular action is going to be run you'll see that right now it's running brown here and you'll see that some checks are actually happening because we've added a new commit to our particular pull request and when we wait for it to run of course in the background or if we choose to go and look at the details you'll see that all the jobs are running we still have errors going on that's expected but if I scroll down to the last line you're going to see we no longer have line 77 in our errors it's no longer going to be that we don't have line 77 right now we have line 73 and it has only two issues it says expected one spaces after the opening parenthesis but zero was found and then here it says expected one space before the closing parenthesis zero was found meaning that there is supposed to be a space here under space here so if I save that and say git add and git commit fix line 73 git push that will go up to the server if we come back you'll see that there is now a new check going on for the commit that we've just pushed you'll see that we have a new commit here and there is going to be new checks going on right here we'll go to the details section you'll see that we still have errors going on but if we scroll all the way down you'll see that we fixed line 73 and you'll see that now the next line we need to fix is like 68 then we'll go 67, 66 all the way up now I've chosen to go from the bottom coming up but you could choose to start from the top going down there is no problem with that but now we've been able to fix this according to the word press coding standards we might decide to say I think this is too much I want to make sure that when I'm fixing one rule I've fixed it for the whole plugin and not just only one thing so you might decide to say ok now let's change the rules a bit I'm going to git checkout and go back to my main and we're going to go to our work flows inside WPCS and we're going to say ok we're now going to use a local config file that's going to help us setup the particular coding standard that we want so I'm going to change this to true and that means we now have to come inside our plugin here and we're going to create a PHP cs.xml file and there are several ways you can actually name this but I'm going to go again to github I'm going to go to github.com I'll go to the wordpress and then I'm going to look for the wordpress coding standard's repository and inside here you'll be told how you can actually make your PHP cs.xml file much easier and in here you can be told about particular rulesets that you can add to that particular file so you can call it PHP cs.xml.dist and here we actually have a particular example and they show us what will happen so it's basically an XML file that has particular rulesets and in here you can have the description of that particular file you can exclude particular folders from being checked let's say you don't want it to check the CSS because this particular thing is going to work with PHP so CSS does not get in any way interacted with rather it might cause problems for you if you have a minified version of CSS and this is going to cause your particular PHP max time out to happen so if you get an error when you're having a run time max out check whether you need to exclude some particular folders now we're going to add some of those and then we're going to look at some of these particular rules that we need to have and what we want to do with them so let's first look at how to exclude some particular files so I'm going to copy this and then I'll copy the exclude pattern and I'm going to come and paste it inside my file here you'll actually realize there isn't much apart from the standards that are being stated and then we have the name plugin project we'll call this plugin project custom set of rules to check for coding standards in our WordPress project and so let's say we have a folder here I'm going to rename this and say maybe this is called style.css and this particular file is going to be inside a folder which is called assets so inside assets we'll have our style.css now what we're going to do is come back here and we're going to just say let's ignore everything inside assets so we're going to say ignore assets and we can do just the folder called assets or even just naming it as assets we'll put a slash to say this is assets and we shall say ignore everything inside there but this is a lot cleaner for me so I'm just going to say let's leave it at that and say this is going to be closing the rule sets let's go back to this particular error space let's say we want to ignore this rule that says let's remove all the white space at the end of the line let's ignore this particular rule so I'm going to copy its name from the source here so we'll go back to the documentation in here and we're going to look at the rules that we have here so we have this rule and we're referencing the particular coding standard we want to work with and so I'm going to come back here and say in this rule of course we need to close the rule and we are working with the wordpress coding standards for now so we want to say inside this rule inside the wordpress coding standard rules we want to exclude this particular rule where we're ignoring this white space so I'm going to copy this and it comes from the source right here we're going to open this up and say exclude exclude and we'll say the name that we want to exclude is going to equal to what we copied there and then we're going to add this as a solve closing tag and say let's ignore that particular rule so I'll come back here and say get add and then I'll say get commit and we'll say exclude this particular rule I'm now going to push this to my main branch I'll say get push so that we can exclude this particular rule I'm going to get check out WPCS and inside that we don't have all these other things but I'm going to just for once reduce some space and say let's remove this space save this I'll say get add get commit remove white space I'll get push this and once I do that and come back to our particular pull request that we made I'll reload this to see that we have the remove white space here and we'll see that we have some much conflicts to fix so I'm just going to quickly resolve this and say we need to have this as true we're going to use a local config file I'll mark this as resolved I'll click merge and you're going to see that our checks are going to actually run we have no much conflicts but if we go inside the details again and you'll see that this is telling us that there are some issues that are happening we've installed the paths correctly checking of the warnings is disabled and it's telling us we need to pass a particular file to run at this point we're going to go to our main branch again and that is happening because when we were adding our php.xml rule we did not tell which files this should run through we're going to have a particular rule here which is called file and we're going to say run from the root folder but ignore this particular rule ignore the assets as well so I'm going to hit git add git commits and this is all happening in the main branch and I'll say add root folder git push and then I'll git check out to my wpcs branch where we are trying to run or we are trying to make a pull request I'll remove one line and I'll say git add all git commit remove white space again git push and we'll see this is saying it has some issues that need to be sorted out I need to git pull to make sure everything is okay into my branch I'll say let everything I'll work out as it's supposed to be then I'll git push again so git push and then we shall go back to our checker you'll see that we have a number of commits that have come in running we shall quickly run to the details and you'll see the jobs are setting up everything is setting up well because we provided a root and you'll see that all the errors keep coming back as before if we decide to check the logs and look for this rule that we pasted you'll see that the end line is not anywhere in the logs because we chose to ignore it so you might decide to say there are so many errors let me just get a number of rules and ignore them and start with only a few and then at the end of the day I'll make sure that I have all my code working and looking nice as it's supposed to be so that I have fewer errors so this is one way you can keep your code best clean you can have better code that is in most cases going to be bug free because you run it through the coding standards and you're making sure that everything is well escaped the database queries are prepared well and you're not having SQL injections coming in so you'll tackle so many things like security and making the code look cleaner and easier to read in maybe in a few months to come or for a junior developer to work with and this is one way you can also solve issues of code reviews you might not have to be that not so nice manager or person who is always reviewing people's code and saying you missed a little space here and whatever and it's nagging to the people who have written the code because in most cases we do not separate ourselves from the code we take it personally but such tools and such things like this particular GitHub action can help you reduce some of those issues and tensions in the workplace and yet making your code look a little bit better we're going to go back to the particular code that we had that was a lot cleaner and once I get to it I'm going to actually just copy it all I'll get its raw form I'll copy it and I'm going to paste it inside our WPCS file here and see how many number of errors we're actually going to get so I'll save this and I'll say git add and I'll say git commit and say add cleaner code and then I'll git push oh, I made a typo there I'll say git push and once we push this and go back and look at the action again so I'll reload this to see if we have any much errors you'll see we have a new commit here coming in with cleaner code I'll look at the details you'll see we still have a few checks that are failing and when you come back here you'll see that we have just a few lines of code that need to be fixed maybe a few things that like tab indentation that needs to be done we don't use spaces I'll add a missing add package in the comment so we need this code we need to see the logic operators that are prohibited from being used in line 14 so we're going to go and fix some of those we'll come here and say add package and I'll just copy this right here and say the package is going to be called underscore query query APIs that's our package I'll quickly move down to line 14 it says logic operator is prohibited mmm this is a bit tricky it has a missing doc function for this particular function so I'm going to come back here and quickly look for it you'll see we have a doc block so I'll add a demi doc block here and say this function gets and displays so gets data from api and va dumps it that function what else can we solve here they said we need to tab indent each array item in a multi array declaration must end in a comma so we come back here I need to add a comma here at the end of the day I'm going to select this and I'm going to change this to tab indentations using my code editor I can make things a little bit easier for myself so this changes as well I'm going to come back here it says spaces must be used for midline alignment tabs are not allowed this is on line 34 so I'll come back to line 34 hopefully that has not changed I don't see that line 34 meaning we're going up here I'll press enter to make sure that's working get add commit and say more fixes and I'll get push and we'll go back and see what's happening here I need to reload this first so that we see more fixes is being checked we can click on details and we'll see the jobs that are running we'll see that we still have a few errors we have three lines of things that are failing so basically that's how you set up github actions for your WordPress project and this could be a theme it could be a plugin but this will help you solve and fix so many errors it will make your code more readable and better to work with so if you enjoyed this video please give it a thumbs up don't forget to share it with your friends help us, your senior managers make sure they are looking at this and writing better code and making it easier for you to progress making your projects shorter in the amount of time you use to develop making them last longer in terms of their lifespan don't forget to like, subscribe or leave a question in the comments otherwise enjoy whatever you're coding