Becoming a better WordPress developer #wcmtl2012

welcome everybody today I’m going to talk to you about how to be a better WordPress developer than you already are the talk is focused that developers that of all levels so whether you’re beginner intermediate or advanced hopefully this talk will have a little bit of something for you a little bit of something for every level so sit back and enjoy so why am I here I’ve been developing with WordPress since about 2007 started building high scale WordPress client sites and custom plugins as a freelancer and working with a couple of agencies and about three months ago I joined automatic as a code Wrangler and I’m really here just to share the experience and knowledge that I’ve gathered over the years so what is WordPress development you often hear these buzzwords themes plugins HTML Javascript CSS html5 css3 my sequel blah blah blah blah blah it goes on and on but it’s really important that all of these things come together when you’re building WordPress sites so you could know HTML really well or you could know PHP really well but unless you’re a very very focused developer that’s not really gonna help you you really should know all the different technologies and how to create them together so one of the main things that you should be comfortable with as a word president Oliver is obviously WordPress core you know that’s what runs whatever site theme plug-in that you’re building and it’s important to be comfortable with it so the first rule with core is not to hack core every time you hack core god kills a kitten so think of the kittens don’t hack core instead you should be contributing to core contributing to core makes you feel good and it helps others in the community WordPress is as you probably all know an open source platform meaning that anybody can contribute to it the code is freely accessible and freely retrievable redistributable and a really good way to sort of give back to the community for everything that it does for you is to contribute back a lot of people I can get scared by the idea of contributing to core they either think they’re not good enough or that they’ll get a bad code review on whatever they submit but really there’s all kinds of different ways to contribute to core and all of them are extremely welcoming and the more contributors are the better the platform will get um so a couple of ways that you can contribute is by submitting a ticket or a bug report so to do that you would go on track that wordpress.org which is sort of the project management tool that we use to keep track of WordPress the open source project along with your ticket or a bug report you can write a patch to submit as sort of the fix for the bug that you’re reporting or you can find a ticket or a bug report that doesn’t already have a patch and submit that now I’m not going to go into all the details of how to do that but there is a really handy a tool that I’ll mention in one of the next slides that sort of explains everything you need to know about contributing to court and I recommend that as a way to sort of get familiar other ways that you can contribute our answering support forum questions so if you go on the wordpress.org support forums there’s lots of beginner users who might not understand how something works or more intermediate or even advanced users who just have complicated questions and you can go ahead and just answer the questions you’ll learn they’ll learn in the process and everybody wins at the end or you can help to document something so whether it be through the WordPress codex or through the contributor Handbook which I’m going to mention in a minute you can basically help others by documenting something you’ve learned function a feature in WordPress anything that might not necessarily be properly documented already so WordPress has a lot of tickets anybody seen this guy before so he’s sort of a running joke in the development world not necessarily WordPress specific but for sort of the grammar nazis that have seen the word or the two words a lot misspelled this monster sort of came out as an image of a lot so we reached a 20,000 ticket milestone in the WordPress project Nathan who’s one of the lead core contributors of WordPress posted this ticket as sort of an inside joke we have a lot of tickets so it’s fine that there is a lot of tickets on the wordpress.org track we encourage that we want people to submit ideas submit bugs even if it’s a duplicate ticket don’t worry about it somebody will realize that it’s duplicate close it or comment or say oh can you provide more details about your ticket whatever it is don’t be afraid to

open one up obviously don’t like report a bug that’s specific to your installation or something like that make sure that it’s actually a court bug before you submit it but if you’re sure that it’s a cor bug or a cor improvement that you want to see then go ahead and submit it and so the best way to learn about how to contribute to cor is the core contributor handbook so about I want to say two or three weeks ago make the wordpress.org was sort of reborn from the ashes as this network of little sites that bring different types of contributors into one place so there’s make thought wordpress.org site for plugin developers for fema developers for people who want to translate WordPress for people who want to contribute to core for accessibility experts for all kinds of different things so if you go and make that wordpress.org you can see all of the different ways that you can contribute to core and a good way to start is to read the handbook which sort of goes through the the traditions and the the habits and the methods used to contribute to course I highly recommend that for anybody who doesn’t necessarily know about how WordPress is built and how it’s done so moving on using core to your advantage so your WordPress developer for a reason it’s because you like to use WordPress to develop you want to use the features that it has to your advantage so there’s a lot of built-in api’s not not nearly all of them are listed on here but these are just some of the examples of what you can do with WordPress that it gives you that you can use so there’s the WPE HTTP API which basically allows you to wrap post and get calls to other web pages to fetch data you have the filesystem API which you shouldn’t really manipulate files within WordPress but if you need to there’s a good way to do it there the settings API so you shouldn’t be writing your own functions to save options for the database or do any of the setting pages it’s all there for you there’s an API for it so you should use it obviously custom post types and taxonomies which I’m sure many of you are familiar with and again you shouldn’t necessarily be manipulating the database directly but in some instances you might need to so use the WPTV class instead of doing like you know the old-school PHP MySQL connect and all this fancy stuff it’s all there already in WordPress because WordPress uses it well you might as well use the API that it provides and really a lot more different API so you can use widgets menus taxonomy etc there’s tons of different api’s that you can use and the best way to find all of those is to just go through core we’d you don’t have to read every single line of code but just you know peek out what’s in the files see what’s there what’s available it’s a really good way to learn so hooks are really the main architecture for developing additional features or modifying existing behavior within WordPress so I’m just gonna spend a couple of minutes explaining how they work some of you are probably already familiar with them but it’s just sort of a recap or an overview of how hooks work so there’s basically two different types of hook action hooks and filter hooks action hooks allow you to run arbitrary code at a specific point during the WordPress code execution so somewhere in code there’s this line do action WP head and when that action fires you can basically append or add code that will run at that point in the WordPress code execution so here I’m adding an action to WP head called JQ – head and I’m gonna explain in one of the next slides exactly what’s going on behind the scenes on how to how to understand how that works filters hook allow you to modify a variable before its output save juice or whatever so a misconception that I’ve sometimes heard in the WordPress world is that filters are only used for variables or things that are going to be output in a template but that’s not true you can modify you can filter a variable at any point in the code execution before it’s inserted into the database before you use it in a and another function whatever you want it doesn’t matter it basically allows you to filter any type of variable at that specific moment it can be an array can be a string can be an object other that gets a little weird and so the syntax for that is similar to the do action instead here you have apply filters the name of the filter and then the variable that you’re going to filter so in this case I’m filtering the post content variable to a filter called the content and then I’m hooking my JQ dish filter onto that hook so a little bit more into the in

depths of how the hooks API works there’s basically a few different components to it so do action only requires one argument which is the name of the action that you want to happen but you can optionally pass in a number of additional arguments that will then be available within the function that you hook on to that action so for example say I’m passing in I’m creating an action at the time when I register a post type I want to allow other developers to do things at that moment I can pass in the additional argument that might be the name of the custom post type and I’m registering for example and the same thing a sorry just to go back to that for one second you can actually pass in as many arguments as you want to you can have one additional argument 2 3 10 15 20 obviously I don’t know why you would pass in 20 at that point it’s probably smarter to just pass in an array but there’s not really a hard limit on how many additional arguments that you can pass it that way and then the applied filters function works the exact same way so you have the name of the filter and then this it does have two required arguments the second one being the variable that you’re trying to filter obviously and then the same thing is with the what the action is you can pass in additional arguments as many as you want that would then be available to the filter now remember that you’re not filtering those additional arguments they’re just available us to provide a context to the other developer who might be extending or filtering your existing variable and so it’s really easy to register hooks to do it you just do add action and then the name of the action that you want to hook into and then the name of your callback function that’s going to run at the time of that of the execution of the action and then there’s two optional parameters the first one being the priority which deep always defaults to ten and then the number of additional arguments which by default is going to be one so by default you’re gonna pass in one additional argument but if you’re you’re the filter or the filter or the action accepts additional arguments then you would modify this so for example in this example where I have two additional arguments this value which right now is that three would be two because I’m passing in two additional arguments that I want to be available to my callback function and the exact same syntax applies to filters except instead of add action it’s add filter and then your callback function you basically declare a function like you would any other and then pass in if you’re doing a filter you would pass in the value that you’re wanting to filter or if it’s just an action or if you have additional arguments you would pass those in as well and remember that with a filter you want to return that variable value you want to return it at the end since you’re doing stuff to that value or at least that’s the assumption is that you’re gonna modify that value so you want to return it so that when it goes through the apply filters function it has that variable back so it’s important to find the right hooks when you’re working with the hook system Jannik covered a little bit about the right hooks to use for like jQuery I think in queueing this morning for those of you of you who are in the presentation but really the best way to find hooks is basically just a search to through core find what file or what moment in the WordPress execution you’re trying to do something and find the action or the the hook that you’re that you want to hook into of course if you don’t want to search through court there’s other references that you can use the plug-in API and the Codex is a good one Adam Browns hooks database is another good one and the WP candy article on hooks which isn’t really so much a reference but more of a teaching tool so if you were completely confused by what everything I just explained go check that article out it might do a better job than I just did and I didn’t say this at the beginning but all these slides are available on slides J Kadesh com so don’t feel like you need to rush and write all of these resources down a really cool and just handy action or sort of almost an easter egg that exists in the WordPress code is there’s an action called all which fires for every action so whenever in action fires this action also fires as well as filters not just action so whatever any hooks that run the all hook will also run so you can hook into that and then do clever stuff like print to the error log the current filter so that you can know exactly when a certain filter runs and

there’s a bunch of other helpers that you can use as well to help you sort of understand when a hook has run or remove an existing hook so has action will check whether any actions are registered to a certain hook has filter will do the same but for filters did action will tell you whether a certain action has already run and this the did action works for filters as well and then you have functions to remove so you can remove a specific action you can remove all actions or remove all filters from an existing hook be careful when you use those because you might remove something that you didn’t mean – that for example if you’re a plug-in developer and you call remove all actions on a specific action it will remove all the actions from all plugins all themes that run on that specific hook so just use that’s apparently all right so enough about hooks one of the things that you want to know as a wordpress developer is where to put your code so there’s kind of two main places that they could go either in a femur in a plugin so if usually and this obviously can vary from situation to situation so don’t take this as a hard standard but it’s sort of unaccepted you know this is how things are usually done themes are used for templates that will be used to display on the front end and for all related helper functions that might help you display that via plugins are for code that can be toggled on and off and modify the behavior of WordPress in some way or provide additional functionality and then there’s the MU plugins which is despite its name is not only for multi-site it stands for must use plugins and it’s just like the regular plugins folder except anything that you put in there will automatically load on each page load so and it doesn’t provide any kind of auto update functionality so anything that you put into mu plugins will always run for that site and it won’t necessarily appear in the plugins UI either so use that sparingly but it’s useful for things like registering custom post types or modifying things in the admin that you want to always run you don’t want if you’re building sites for clients you don’t want your clients to accidentally deactivate that plug-in or something like that it’s really handy for codes that absolutely must run on each page like when you’re building sites themes plugins you probably want to know when you’re doing something wrong so core does a lot of that have you worked for you if you turn on the WP debug constant on in the wp-config.php file it will give you all the PHP notices PHP errors warnings deprecated files deprecated functions that you might be calling improperly or by accidents so if in your development environments this should absolutely be on one of my favorite functions in WordPress is the doing it wrong function which basically will tell you if when you’re doing something wrong you can incorporate this function in your own plugins so for example if you have an API that you provide within your plugin for other developers to use anything that they might be doing something wrong you should check out this function to let other developers know that your drink’s agree on none of course there’s unit tests which I haven’t really seen many people use unfortunately and it’s something that I’d like to see grow in the WordPress community there’s a big effort on that from within the core developers of WordPress there’s a whole unit test framework that has been developed to run tests on WordPress core and that framework is currently being rewritten so that it can also work with plugins so plug-in developers can write unit tests for their plug yeah for their plugins anyway that’s sort of a complicated realm that I’m not gonna jump into we could spend hours talking about it and if you want to know a little bit more about debugging you should check out most presentation it’s up next right after mine coda is poetry that’s sort of one of the main sayings within the WordPress development world so what does that mean what do we mean when we say code is poetry it means that you have to make things legible classy and elegant and to do that you should follow the WordPress coding standards so I’m going to go through all the standards that are listed also on the Codex so the first one is the long form PHP versus the small form PHP opening bracket so within WordPress the standard is to always use the long PHP opening bracket the short one doesn’t work within all hosts so if you’re writing any kind of code that might be redistributed to a plug-in a theme whatever the safer option is always to use the longer form and that’s sort of the standard that’s been adapted within Korn within plugin developers as well single quotes unless you need to evaluate a variable so if you’re writing a string there’s no reason to use double quotes unless there’s a variable in the middle or you

you might need to escape a single quote otherwise so in this example where I have I’m setting the name of my dog which is Winston that’s actually my dog’s name and then my dog’s name is dog name in this case if I use single quotes it would completely break because I have a single quote that would end my string and then I also have a variable in there so in this case you do want to use double quotes but unless you absolutely need to the standard is to use a single quote naming is really important so don’t name things haphazardly if other people are going to read your code try to make it very logical so that people know what your variables your functions are and not just like like what Jeremy did in a previous talk option 1 option 2 or very one var – nobody is going to know what that is try to name your variables in a way that makes sense and also follow the standard which says you separate words by with underscores and you don’t camelcase or uppercase or whatever so all of these are examples of things you absolutely shouldn’t do camelcase upper case complete crap and then the actual thing that you’re supposed to do and similarly to a naming spacing really increases readability makes things really easy to read so the first one it’s an OK way to do it you know for each and then you pass posts as post you know it’s fine you can read you know what it’s going on but the correct standard is to use spaces between parameters that you pass within a function so always opening bracket space and then a space again before the closing bracket and then for loops if statements etc always have a space before the opening bracket but regular functions don’t so say I say that was gonna be my function then there wouldn’t be a space before that opening bracket and again just examples of really crap crappy code that you shouldn’t do and in serve in the same vein brackets indentation and empty line are important so this is a perfect example of what you should do so nice and legible spaces empty lines between different statements brackets to indicate when an if statement starts and ends etc you don’t need those I’ve seen developers do like a comment at the end of their if statement saying if statement ends but that doesn’t add any kind of indication to other developers all it does is clubber up the code if I see a closing bracket I know that the if statement that’s the card right above has ended that’s pretty logical if you’re using any kind of smart code editor or an ID then you get other things like highlighting so if I put my cursor on the is statement while it shows me exactly where it ends so don’t clobber up your code with useless comments Yoda conditions so if you’re doing an F statement always put whatever you’re checking against as the first argument and then the thing that you want to check as the second argument so what happens if you put only one equal sign then you accidentally assign the city variable to Montreal instead if you check montrĂ©al is city then you don’t incur the possibility of making that kind of mistake so the standard for WordPress development is to always use these what’s called the owner conditions because you’re kind of speaking like Yoda would don’t get too clever so how many of you understand what that statement does without reading what’s below one hand two hands so really not that many hands whereas how many of you understand the below a lot more hands so they do the exact same thing but the first one is really hard to the Crypt and understand what it’s doing so instead you know don’t be too clever try to do things in a logical way that people will be able to read and understand and sort of as a closing notes the code is poetry act of my presentation keep it elegant simple and avoid useless comments so don’t add comments of things that are completely obvious by reading your coat you should only common things either you’re doing peach p-block which is really handy for IDs or comments that really you’re doing something complicated that other developers might not understand in that case it warrants having a color this is an example of what not to do globalizing an options variable using deprecated functions like get settings assigning variables conditionally using uppercase false doing all kinds of things wrong in this example this is actually from a theme forest theme so it is code that actually runs on websites don’t do this and that this is more an example of what to do right so a nice wrapped class for those

of you who might not be familiar with object-oriented code it’s pretty simple you’re just basically encapsulating regular functions in a class that then makes it easier to so that you don’t have to namespace every single function etc anyway this is sort of an example of what to do right you’re returning early within the function if you need to not doing long if conditional statements naming things properly etc and name spacing things properly so here I have a class WP my house just as an example so there’s a lot of things that you should be doing that are beyond regular standards the first thing is when you’re inserting stuff into the database it you want to make sure that what you’re going to insert is properly formatted it’s not going to create a my SQL injection you wanna make sure that stuff you’re doing is secure so to do that there’s different helper functions that vary depending on the situation or the context in which you’re entering things so some of those are if this is for direct SQL statements if you’re inserting something into the database you should escape any variables that are gonna enter what WP DB escape method or if you’re you have a full SQL statement with some variables inside you should use WP DB prepare I’m not gonna go through the syntax of it you should look it up if you’re not familiar with it but just make sure that you’re doing this stuff properly there’s so much unsecure code out there you all of you here in this room should be writing secure code and that’s what I want you to take away from this part of the presentation and then there’s sanitize functions so sanitize title sanitize post sanitize different things depending on the scenario so these are to be used with not when doing direct SQL queries but like for example you’re using WP and serve posts well it uses the sanitized title before inserting the title in the database so those are the kinds of things that you should be aware of and then escape all the things so that was more on the input into the database now on the output from the database you can generally more or less assume that the data you’re gonna get will be of a certain type or that it will confirm to the standard that you’re expecting it to be but in some cases you really need to be careful and make sure you know validate and clean up whatever data is coming for a database you can’t guarantee that it’s gonna be what you want it to be so there’s a bunch of different functions that you should be using to basically clean up that data so escape attribute is one for example if you’re doing like a a class within and so let’s say you have a class I’m talking HTML here by the way a class and then you go escape attribute in the name of the class that you might be passing in and then you have escape URL if your path if you’re doing an href in Val which allows you to make sure the value is an integer WP Kasey’s which strips unwanted HTML tags escape HTML escape GS escape your escape text area escape all the things so there’s a full list in on the Codex or if you go in the WP include slash formatting file there that’s where most of the escaping functions don’t not all of them are located in the course so just make sure that you familiarize yourself and don’t break sites by not escaping data internationalisation so Yannick touched touched a little bit on this topic this morning but for those of you who weren’t in that presentation what internationalization is is basically making sure that any strings that you display are made available for translators to translate so the word press provides a bunch of helper functions to do that the two sort of basic ones being underscore underscore and underscore e which do the exact same thing except double underscore returns the string and underscore e echoes that string so just a quick little run through the syntax you pass in the string you then pass in the text domain for your plugin phim or whatever you’re writing so WordPress core doesn’t have a text domain so whatever strings WordPress core uses are just paths it would basically skip that second part of the functions but if you’re writing a plugin that you might root you want a text domain so that when the internal wordpress functions that look for translations look for the write files that are associated with your translation so there’s a whole topic on WordPress Deveaux internationalization for WordPress development on the Codex which kind of goes into a little bit more details but basically how it works

is that so you write all of your strings with these internet internationalization helpers and then you pass your all of your plugin files to a program called Pio edit and there’s others but that’s sort of the one that’s used most of the time and then it looks for those functions looks for the strings inside of them parses them out into a plain text file that does a little bit of fancy stuff and then that file is used as a template for translators to translate the strings within your plugin so that’s sort of how the basics of how it works but again more details on that codex page and there’s a couple of other helper functions not all of them are listed here but that might be more useful in certain situations so one of them is the underscore end function so that allows you to provide two different strings based on whether something is plural or not so in this case I’m looking at the common count variable if it’s plural it’s going to use the plural string comments if it’s singular it’s going to use the single string comment and then a little bit more advance of an example so here I’m doing two different sort of more advanced e things at the same time but so the underscore X function allows you to specify a context to your function so that when translators are looking at that string they kind of get an idea of what context that string might appear in without having to go and open up the PHP file where you have all the code and then they still may or may not know what the context is so this allows you to specify a context so here I’m doing a hello world and then I’m specifying the context as intro to the world so intro to the world is not going to be translated that’s just for other translators when they look at the translation template called the mo file they’re gonna look at that and sort of get an idea of what the context is and that again just as before I’m passing at the contact or cite the text domain then the other thing that I’m doing in this string in this particular example is using the PHP print F which could be replaced with s print or Sprint I don’t I never know what it’s called one of those things that you never have to say out loud so print F will echo the string and sprint F will return it and then I’m passing the parentheses s is basically going to be replaced with the word that’s assigned to the mood variable and so what I should have actually done is also internationalized that accrual strength but it was just a quick example but in this case I can basically dynamically based on a certain if statement that’s not in this example decide what the string is going to be within that hello world string because when that trend when the translation functions run within WordPress it’s before any dynamic variables are or any dynamic logic is parse so if I do hello mood world and a pass in that exact variable mood in here it’s not gonna work so this is the better way to do it and then finally as a plug-in or theme developer you should always leave hooks just like cord does so that others can extend your code obviously this doesn’t imply if you’re doing like some really fancy and enterprise thing that nobody’s ever gonna see but if you’re doing any kind of open-source work which you should be doing I make sure to leave lots of hooks and filters for other people to sort of work off of that this leads me to my final slide which really I encourage you to open source everything that you do except your clients password files you know you might be working for a client but whatever work that you did is can be used by others even if it’s not you know 100 percent polished 100 percent finished it’s gonna help others and one of the things that you’ll get out of that is the ability to do Co reviews for each other and a really good way to do that is by publishing your stuff either on the plugins repository on wordpress.org or on the github on github which is a really really nice tool for developers to sort of share and fork and collaborate on different things which really is what WordPress is all about so before we do the Q&A I just quickly want to mention a site called code poet which some of you may be familiar with or might not be so code poet is a site that is built by automatic but is sort of a resource for WordPress developers to look at ebooks which sort of have tutorials or experts advice on different things so we had like an e-book on security

we had an e-book on performance and then there’s also interviews resources and podcasts are coming soon to that site and you can also do a quiz which it’s sort of a fun trivia thing to know how you’re doing within the WordPress development world it obviously it’s not you know a hard ranking of how you’re doing but it something fun to do if you’re in that kind of thing so any developers should absolutely check that out