 So I've tweeted the slides using my grappler already Twitter handle if you want to look at those So wonder how many people of you have seen this error Suddenly you've refreshed your page your WordPress site, and you have a fatal error the sites all blank Cannot redeclair in Q scripts previously declared So this is one of the big problems So if you have two functions with the same name in your code So one is in Q scripts in your plugins folder, and the other is in your themes functions of PHP The problem is WordPress only allows Unique names for their function names So that's what I'm going to be talking about today or one of my points is that you need to use a unique name Because in different parts in WordPress and PHP code a unique name is needed So this is normally done with prefixing So prefixing is adding something in front of the other element So in this case we've got in Q scripts, and I've prefixed it with the word prefix So how do you go about creating a prefix? So let's say I've been creating a theme called beautiful Vienna. I'm not really great at choosing names So you would do something like beautiful underscores Vienna underscores But then I've some people I've seen who have wanted to use the initials So initials like BV underscores But what you need to be careful of there might be another theme Called breathtaking Vancouver and that has the same initials So if you prefix two functions with the same name, so you end up having BV underscores in Q scripts You'll have a clash again So in my examples for the examples, I'll be using Vienna as my prefix And so this is how the proper way of doing it So in PHP code, there are normally four different places where you need to do prefixing The first before we looked at its functions and then classes if you're using object-orientated programming global variables and constants So let's look a bit of a code So here you'd if you run two classes with the same name you'll get a fatal error like with functions So here I prefix my class With Vienna so to make it unique But then we come to our first exception The exception being that functions within classes only need to be unique within that class So it's like having street names. So street name has to be unique within a city But I'm sure you all know of different cities with the same street name. So it's the same thing applies to classes They're moving on to globals The problem with globals is that can be easily overwritten So if one plug-in defines the global and then another plug-in defines the same global variable and Then that will get overwritten. So you don't get the results back that you expect And then on the other hand with constants constants can only be defined once So the first time is defined that is the value that is set So if your plug-in or theme is trying to define the same constant later on the value Will not be changed So we move on to There we go. We move on to WordPress code So looking at which places in WordPress do we need to add pricks prefixing to So the first example we're looking at today is hooks. So filters and actions and you have a similar problem with hooks as With variables global variables and constants So here if you've got a variable and you define the value and someone else defines it before you or after you then they can change that value and so if the Value is not related to the content that you're expecting Then that can cause an issue So that's why you need to always prefix your variables and your hooks to make sure they're unique to your situation So that not other people are accidentally changing the content So moving on to a few other examples from Functions that are used in WordPress. So the first one is used when you want to define a new image size But the problem is if you use the same image size handle name Then the only the second image that the second time that you define it. That's the values that are used So if you're using here a thousand and five hundred pixels wide image and You go and define it again with another value. Then that's the value that will be used Or if you move on to settings if you're using this both the same settings name Then you'll be overwriting someone else's settings or you don't get back the settings values that you expect Or another one is with adding menu pages sorry adding menu pages if the The page log is not unique You'll end up having multiple setting pages on one page and also in the left-hand side in the admin bar With all the settings you'll have multiple links to the same page So moving on to in queuing scripts and styles So this is a style handle. This is the name of the style And if you've got two plugins that you're using the same name Only the first one will be loaded. So for example a plug-in Load the style for their plug-in on the front end and the theme loads afterwards and tries to just use the same name Their style won't be loaded and your theme your front page looks horrible because the themes design is not being loaded It's the way you can prevent this It's by using a unique slug and a method that I found was easy to remember is if the script or the style is unique Then you want to have a unique name Because we come to our next exception is you do not want to ex-prefix the 20 scripts Now the reason is that this script is a common script. It's not unique It might be different plugins are using the same script like how many plugins use jQuery and So in this example, I've got is for FitWidth, which is a JavaScript which makes sure that your YouTube videos are responsive And so I'm following the standard that core uses. So I prefixed The handle with the library that is dependent on so jQuery And then I have the name of the library that I'm using and this is all written in small characters And the spaces are divided with a dash I've also started a Little library with common standards that perhaps we could work to to creating a global standard that we could all use So moving on to localize script So if you want to translate or localize a script that is being a string that is being used in a script you'd use WP localize script and What you need to be careful of is that object name that is not unique Then you'll have the same problem of data being all written and it can come to some strange situations Where the output is string is completely different and not related to your script or to the situation So we've just looked at the four different places in PHP where we need to add prefixing and Then also the different places in WordPress. So with hooks add image size add option Looking when you're adding a many page in queuing styles and scripts and then when look trying to localize a script So I've got a question for you today. So the people who get the right answer get a free lunch So how many so with a raise of hands? How many people do you think? How many people of you think that how many functions they are in WordPress core? So put your hands up if you think they're around 800 No one okay. We're about around 1100 One person two three. Okay. How many people think they're around seven thousand for hooks and functions Okay, we're getting a bit more. How many people think they're at fifteen thousand Okay, we're on the same amount Of the right answer is around seven thousand so around seven thousand hooks and functions in WordPress core So my point is they there's so much code available so much Functions that you can use in WordPress core. So use them and don't try to reinvent the wheel So if you're not sure what functions WordPress core has there's a developer reference you can go to developer.wordpress.org and then you can enter whatever you're looking for like I've done here with scripts and then you get a list of hooks filters Functions classes that you can use So the first example for today is loading scripts So I do theme reviews and WordPress org and sometimes I see that people have hard-coded this HTML It's either in the header or some other template file But the problem is is that other developers who want to make changes lose control over it Because they have to go into the header dot PHP or the other template files to make the changes and It also becomes very difficult if you want to load the scripts on certain pages So by using the WordPress core feature the WordPress core function WP and Q script or style You are using a standard function that is available to all theme developers So they can edit it and so using that other people can say oh, I don't want this script to load on that page or on this page and You can also prevent like we looked at it with third-party scripts. You can prevent the script being loaded multiple times So the next thing I see is also when you have a dependency So you have a script like this one here. It's dependent on jQuery So jQuery needs to be loaded first before the script can be loaded and WordPress has also a solution for that You can define The name of the script that you need as a dependency So this makes sure that it's clear cleaner code I was working on a project recently where we had a couple of dependencies and it wasn't clear just looking at the PHP code which script was dependent on which one and So by defining it here You can just look at the PHP code without needing going to into the JavaScript to see what the dependencies are And it also makes sure when you're using multiple dependencies that it loads all in the correct order Become sometimes you like in this case. You need jQuery to load before the FitWords so that it works correctly The next point is using core scripts JQuery is included in WordPress core And so that's why you should always use that as a standard version all theme developers and plug-in authors know What version WordPress core is running? So if suddenly another plug-in side loading jQuery 3.0, which was released recently there might be some issues But when it's included in WordPress core Then every developer knows when the next version of WordPress is being released They can test their themes with the better version and fix any issues before it's released live So the next thing is also I've seen quite common is you want to load a certain script only a certain page Because it's a lot more performant and you're less likely to have issues So you want to use the right functions the right method So there's a number of conditional functions that WordPress core offers for example We have is archive here and so this allows you to say I only want this script to load on the archive page And then you also want to use the WP in Q scripts Action to make sure it loads in the correct place And then on the other hand we've got for the admin area. We've got admin in Q scripts But this is one of the common things I have seen that people don't always realize is that you can make sure that the code is the java script or the Style CSS is only loaded on certain pages. So you can add a little check here like I've done So this script will only be loaded on the edit page a new action That was included in Composer when it was released recently some time ago now Was customized preview in it. So there's no need to add a conditional To check if it's the customizer you can just hook into the Customizer action and then you're good. So I believe that everyone should be using WP in crew you script and style to load their styles. There's no reason not to Even if you want a script to load only and for IE You can add use WP script add data as it applies the same four styles You can use WP style add data and make sure that the style is only loaded on IE 9 or IE 8 So the next one, which is I think was quite new for WordPress and WP add inline script It allows you to for in this case. We've got we've loaded jQuery fit with and So we need to initialize it. So we want to say that this script should run on certain classes or IDs So it's not really performant to add a new CSS JS file just to load three lines of code. So you can use WP add inline script and that adds The script just after jQuery fit list is loaded and then runs it in line So this makes it a lot easier for other developers also to make changes and you're sure that it will load in the correct place So today, we've looked at two different things We've looked at unique namespaces and then we've looked at how to create a prefix and How that is applied to the different areas in code in PHP and WordPress and Then also, we've looked at how important core features are because there are standard That you can use and that are available to everyone And so that reduces the amount of issues that I cause between themes and plugins so I'd like you to go now and Try to work out how you can harmonize your plugins and themes. Thank you