Right now all we have is empty white space as our theme. It’s not very flexible nor does it look appealing. Let’s change that. Earlier I asked you to download the static version of our theme. Open up that zip file inside the unity theme folder we created. Let’s query a subfolder called assets unzip the contents of the static template into this folder. I’m also going to add the h t email in there as well so we can use it for reference throughout this course.
It’s important to note that WordPress doesn’t require you to have this folder structure. The only files WordPress requires are the indexed p p and style that C Ss files. The folder structure is completely up to you. I want my theme to look like the static version. The first step is to have WordPress lo the team out. Open the index of the HDMI file inside the assets folder. Copy and paste the contents into the index P2P template obviously. This won’t work but it’s a good starting point. If you refresh the home page you’ll notice that the site is pretty broken. If you press F twelve on your keyboard then you’ll open up the developer tools for either Google Chrome or Firefox you can then click on the console tab and you’ll see that we’re getting all these for all for errors.
If you’re unfamiliar with the developer tools then don’t worry. Throughout this course, I’ll be going over how the developer tools can help us develop better things. Let me give you a brief overview. The developer tools are a way for you to analyze and modify your site. It can be intimidating to beginners but it’s actually quite simple to use once you know how to navigate your way around. Let’s take it slow. The only thing you should know about the developer tools is the console tap the console will output messages about your site.
It’s mostly used for errors but you can use it for other things if you wish. Earlier I stated that this course doesn’t really focus on Javascript. I assume you already know javascript henceforth. I assume you already know about the console tab taking another look at the console. We have all these for all for errors meaning that a lot of the files we want to load can’t be found. This is because the paths that are inputted are incorrect. Technically these parts are correct. If you were to try to open the H team file by itself we could edit the index template and fix the links to point to the new path for our theme. But that is inefficient and not recommended we run into a couple of problems such as users being able to actually change the default WordPress folder structure to suit their needs rendering our fixed links useless.
We would also have to check if SSL is enabled forcing us to check if the protocol is a CPS or a GDP. Lastly, you’ll end up loading all style sheets and scripts on every page even if we don’t need them. There are just too many disadvantages to hard coding the Urals into the template. If you wanted to you can create the logic for this but you don’t have to because WordPress actually handles this logic for us. It’s something WordPress calls action hooks.
I’ll explain what those are. In just a moment. Back inside the theme folder. Create a new file called functions stop BHP this file is completely optional but if you have it then WordPress will automatically load this file and execute any code within this file. You don’t have to do anything to set it up. Be sure that you named these functions not P HP and not function PHP. I’ve had students in the past forget the EZ causing their code not to work the functions file can be thought of as your themes logic if you would like to query the database at style sheets. Process forms check if the user is logged in then this is the file you’ll want to edit. I personally don’t like to stuff my functions file with all my logic. I like to have structure and separate everything into its own file so let’s add some comments will first create a section for variables or functions that must be available throughout our theme. The second section will be for including any files. The third section will be for any filters and action hooks will discuss hooks very soon. Lastly, we’ll create a section for shortcuts. Keep in mind you don’t have to structure your file like this. This is just how I do it and how I recommend you do it. Just to make sure everything is working.
Let’s echo out a hello world message if you refresh the page then you should see the message output it onto the home page something I want you to notice is that the hello world message is output it before the template. We can now confirm that the functions file is loaded before the template. Let’s remove this because it’s not good practice to echo out anything inside the function’s file. We can now begin using action hooks.
What our action hooks. So a lot can happen throughout WordPress. Typically you may want to use conditional statements to check when a certain action or event happens. However, this isn’t very efficient. What will happen is that you will have a lot of nested code instead. WordPress introduces something called hooks a hook is a way for you to listen to an event and execute code when that event happens. This is what WordPress calls the plugins API and events can be anything. There are literally over 100 different hooks. There is a hook for the footer when an admin form is submitted Ajax submissions and so much more. We won’t be going over all of them because it would just be too overwhelming. If you don’t understand then don’t worry you’ll see how it works in just a moment. We will definitely be going over some of the most commonly used ones though in the resource section of this lecture you’ll find a link to the hooks API. Let’s check this out.
You’ll notice there’s a list for two kinds of hooks action hooks and filter hooks.
We’ll be going over both throughout this course.
Let’s take a look at the list of action hooks available.
Scroll around this page you’ll see all the hooks available to us.
I know we haven’t gone over how to use hooks yet but just from looking at this list do you think you can spot the hook we need in order to add scripts and styles to our theme. Most people would say WP head but this is incorrect. The correct hook is the one above it which is WP and Q scripts click on it and let’s take a look at this hook. This is what WordPress has to say about it.
WP And Q scripts are the proper hook to use when queuing items that are meant to appear on the front end. Despite the name, it is used in queuing both scripts and styles. Just by reading that you know it is indeed the correct hook to use when adding scripts and styles. So let’s get started with using action hooks open the functions file and under the hooks section. Add the following code. Add action WP and queue script. J you underscore and queue the add action function is a function that WordPress automatically defines and loads for you. You don’t need to do anything to make sure it’s available to you. This function has 4 parameters but only the first 2 are required. The first parameter is the name of the hook you want to access. In our case, we want to access the WP and queue scripts hook. Make sure you input this as a string. The second parameter is the name of the function you want to call when this hook is triggered. The other two parameters will be discussed in another lecture. For now, we only need the first two. Currently, we don’t have this function defined so we’ll get an error. Let’s fix that quickly. As I stated before I don’t like to add all my logic and code in one file. So let’s create a folder called includes within this folder create another folder called to front the front folder will contain any code in logic pertaining to the front end of our site within this folder create a file called and cued up HP. Let’s define the function we called from the action hub. Great.
We’re almost done now. We need to include this file so let’s go back to the functions file and under the include section include the Q file. I’m going to use the get theme file path function to make sure we always get the correct path to this file the get theme file path function does a couple of things. First, you don’t provide the absolute path to the current activated theme on the site. Usually, you can just pass in a path without any functions but I have come across situations where p HP and WordPress were unable to find the file. I always recommend providing the full system path. This function will take care of that for you. The function has one parameter which is optional you can provide a file relative to your themes path. That’s what we’re doing here. Just like the add action function you do not need to do anything to make sure this function is available to you it is already loaded and created for you beforehand. WordPress takes care of that for you.
I’ll be using this function wherever we include files. If we did everything correctly then we should be able to refresh the page without any errors. Since we have no errors then that means we did everything correctly. Let’s go over how this works internally when a user makes a request. WordPress will begin loading its files then it’ll connect to the database and start deciding what needs to be loaded. Your theme and plugins are loaded afterward.
Once your theme is loaded WordPress will look for a file named function stop BHP inside your theme folder. Once this file is loaded all code inside will begin execution line by line. We use a function called an action that is supplied by WordPress which tells WordPress Hey I’d like to execute some code if a certain event happens in our case we want to call the function J you underscore and Q If the WP and Q scripts event is fired that’s about it. There’s a lot more going on but I won’t be going over the smaller details in this lecture. The reason being is that it would be too overwhelming at the moment. I have had students in the past asking me to explain hooks more in detail but that’s not necessary at this point. I promise I will go over how the hooks API works more in-depth in a future lecture.
For now.
Just understand that the add action function will tell WordPress that you want to run a function when an event happens. If you don’t fully understand don’t worry this is a function that we use often and I assure you that the more you use it the better you’ll get used to it. This won’t technically work yet because we haven’t told WordPress were to load these files we’ll get to that in the next election. One last thing before I wrap up this lecture. You’ll notice that I named my NQ function J you underscore and Q I prefixed the function with some initials. It’s common practice to prefix your classes and functions with the initials of your theme or name throughout this course.
I’ll be prefixing J you underscore for every function we define the initials are for the name Udemy. We do this because we don’t want to run into any naming conflicts with other plugins.
In the next lecture, we’ll take a look at adding styles to our pages through this hook.
