PHP & JavaScript Basics for WordPress Users

1. Promo: A Well, hello, Dan. Welcome to my very special course, Learn PHP for Watpress. And this is a course designed specifically for students who are Wtpress users, but want to become Wat Press developers. Now, it is essential to learn PHP because PHP was actually used to build Watpress. As such, if you're going to become a Watpress developer, developing your own themes, plugins and functions, it is essential that you learn at least the basics of PHP, and that's exactly what this course is going to offer you. So in this course we're going to take a look at PHP what exactly PHP is and how it's different from other programming languages. I'll show you how you can write PHP code properly and also how you can combine HTML code with PHP. And we'll move on to the main section of the course where I'll show you how you can begin to write your own functions, your own WordPress functions using PHP. I'll show you how to work with conditional statements such as the EL statement. I'll introduce you to hooks, actions, and filters which are WordPress functions. We'll also talk about variables and arrays. And finally, I'll talk to you about the single most important function in all of WordPress, which is the WordPress loop. By the end of this course, you'll have gained the basic fundamentals of PHP and how you could use PHP to become a WordPress developer. So if you feel that this course is going to be ideal for you, I'll encourage you to sign up for the course today, and I hope to see you on the inside, has. 2. First things: Before we get officially started with the course, there are a few things I need to mention and clarify. First of all, this is purely a basic introductory course to PHP. It is not going to be an intermediate level or an advanced level or anything like that. This is purely for beginners. So if you're new to PHP, this course is going to be perfect for you. Second, for WordPress, ideally, you should be an intermediate level user of WordPress. You can't be a complete beginner. You need to have an intermediate level knowledge of Wtpress, you should be comfortable working with Watpress in order to take this course. Now, there are two main websites we will be using. One is phb.net, which is the main official website for PHP. Second would be the Watpress Codex, which is the main repository for all functions and anything pertaining to Watpress development. So you can bookmark these two pages. Now, if you're working locally on your computer or on your Mac, you don't need FTP access, you're fine. However, if you're trying to work on a website that's live on the Internet, you're going to need FTP access because we're going to be working with our theme files. We will be using the WordPress 2021 theme, but the official 2021 theme. So in order to access the theme files on the sofa, you're going to need FTP access. If you don't know how to create an FTP account or how to get FTP access, I do have a full tutorial here on YouTube showing you how you can do that. Now, I'm also going to be using Notepad plus plus as my text editor. I'm going to make changes to our files and then play them back. So I will be using Notepad plus plus for that. Again, I do have a full tutorial here on YouTube, showing you how you can work with Notepad plus plus. But if you have another text editor you're working with maybe like sublime for example, you don't have to use Notepad plus plus. It is not compulsory at all. And then last but not least, I do have a full course about what press theme development it's available on webmonkcadem.com. It's also available on Demi. In fact, my main purpose of making this short free course is to introduce you to Whatpress Development. And then in the hopes that if you're convinced that, hey, I really want to become a Watpress theme developer, you can then sign up for the more advanced course that goes a lot deeper into Watpress theme development. So you can check it out if you're interested. And then there is one thing I forgot to mention as I was making the course, and that's because I took it for granted, and I don't want to take anything for granted, okay? PHP files, you end them with dot PHP. For example, right here, you can see all these files right now, four food dot PHP, archive dot pHP, foot dot PHP, and so on these are PHP files. So you end your files, your pH files dot PHP. And then finally, you open up a PHB code with the less than symbol, question mark, and then PHP. So right now, this would be the opening of any PHB statement. And then down here where you have the question mark and then the greater than symbol, that's when you're closing the PHP code. So you have to open up your PHP code and then close it to avoid any thin breaking. So I forgot to mention this during the course, and it was only when I was going through the videos, I realized that, I forgot to mention this very, very simple fact, but it's important that I need to mention it because it's something people can take for granted. So that's it. I hope you enjoy the course. Let's now get started officially with the learned PHP forward Press course. 3. What is PhP?: Okay, so let's start by talking about what PHP actually is and what it does. And PHP stands for the hypertext preprocessor, and what it does is that it actually retrieves data from a database. So basically, it is a server side scripting language. And that's what separates PHP from other languages like say, Javascript. Most other languages will do their job on your computer or on your browser, but PHP does its job on the server side. So if you're trying to access data from a server, maybe it's a web server or a database server, you would use PHP. If you're trying to send information or data to a server, PHP will also be involved. Now, I would highly encourage you to bookmark this particular website. It's called php.net, and it's the main website for everything related to PHP, you can take a look at the documentation and a lot more information there about PHP. So how does PHP actually interact with Wat press? What's the relationship? I don't know if you've noticed this before, but whenever you install Watpress, typically, you would also create a database as well. It depends on how you install What press or what hosting panel you use. But in my case, I use side ground and when I try installing What press from the back end, I always have the opportunity to name the database table and do things like that. So when you install What press, you're also creating a database as well. Now, it is in your database where most of your files are stored in your pages, your posts, your user data, passwords, all those kind of information is stored in your database. Now I'm going to give you a live example in here. I do have one of my demo websites, the movie characters.com. It's just a sample blog with some sample post and things like that. I'm over here on Side ground, the back end for Side ground. You can see I do have the website movie characters.com. Now, I've accessed the database, and this is the database right here. The name is Area 618 on the score, WP 329. Okay, I'm going to expand the database, and right now you can see I have access to different kinds of tables. And even from the name, you can kind of tell what they're about. Down here as an example, you can see I have the all the way down here. Okay. Oh, I'm sorry. I was right up here. Okay, WPDEUnderscore, Posts, right? You see the table right there. I'm going to open it, and I'm going to show you some stuff. If I go over to my website right here, you can see I have posts related to movies and games Titanfall review. You can see I have kangaroo box that hits the web. Legion Makes 900. I have tags like action or terminator two. I do have a post about Terminator two as an example. If I was to go to my database right now, can you see the post titles in here? You have box office numbers rising, terminator two review, acquire place review. There's another one here, Terminator two on its own. And so on so right now, you can begin to see the titles of the posts that I have. You can see the post date, the actual post content itself. And then if I scroll over here to the right, you can see other information like the published status, whether it's published or in draft mode, the comment status, whether comments are allowed or not. If the post has a password that you need to use in order to access the post, the post name, and so on and so forth post modified and a lot more information. So right now you can see that all this information is on the database. If I go back to my database and I opened up another table, just to give you another example, down here, users, WPDE underscore users. That should tell you that this table contains the user information, people who have accounts on the website. Right now, you can see I do have to log in IDs, movie and developer. You can see the emails and you can also see some other information about the particular user account. So the whole point here is that whenever I try to do something on my website or anybody tries to do something on my website. Say for example, they clicked on Bruce Willis Words for the fifth time. In order for workplace to be able to display this post, display the featured image, the title, the content, and so on, it has to go to my database and pull the information from there using PHP. Now, how What press knows what content belongs to What post is through the ID. All your posts have IDs. I'm not sure the post ID for this particular post, but check this out. And actually find out if I was to go back to the post table and I searched for Bruce Willis Words for the ninth time, let me scroll down here and see. Okay, it's down here. You can see the ID is actually 59. So when I click on the link for that post, Wordpress knows that, Oh, the ID for this post is 59. Let me go to the database using PHP and search for the content for the post with the ID of 59. That's basically the relationship between PHP and WordPress. So once again, PHP is used primarily to pull information or send information to a server. It's server side, scripting language. It does its job on the server side. And that's what separates it from other languages like JavaScript. Most other languages will do their job on your browser. PHB does its job on the server side. So in the very next video, I'm going to show you a lot more about the relationship between PHP and Wordpress and how PHP is actually used to create different kinds of functions in WordPress. 4. Php in wordpress: Now let's talk a little bit more about how PHP is used in WordPress. Now, I've switched things up a little bit. I do have another website in here, another sample website. And right here, let me just quickly show you I do have one post, and it's titled PHP for What Press. And it's a typical What Press post with a title, featured image and some content. Okay? And then down here, you can see we have the category of Def tutorial and some other information. Let's go back to the back end. I also have a page called recipes. Let's view the page, and that's the page right there. Okay, I am using the default Wat press 2021 theme, by the way. Now, I'm going to go over to my text editor in here, not PAD plus plus, but I'm connected via FTP to my 2021 theme, and you can see we've got the files right here. And the first file I have opened in here is the functions dot pHPFle. This is basically where the vast majority of the functions used in your theme are located. Now, if you scroll down in here, you'll begin to see different kinds of things like array. You'll see names or functions. You will see if being used a lot. I while, all these are PHP, okay you can sit down here array, array, array. In here, we have another function. Is customized preview, do something. Right here, you do have the function for creating and registering a side bar. You can see right here, it says register side bar, and then the array basically has different kinds of information about that sidebar, like the name, the ID, the description, and so on. Okay, let's move on. You now have the index dot phP and this is easily quite possibly the single most important file in any Watpress website or any What press theme. The reason being that this is typically the main template file that Watpress uses to display content on a page. Now, What press will use this particular file if there is no if there isn't any other file that is higher in the template hierarchy, what I'm trying to say here is that how does what press know how to display contents of a page and then how to display contents for a post? You know, those are two different post types, right? Well, here's the thing. You do have a file or a template file here called page dot pHP. This is typically used for displaying pages, okay? Now, to prove it to you, I'm going to do something right here, right here at the very top. I'm going to say this is a page. And I'm going to save this change. Note, I'm saving it in the page dot PHP file. Now if I was to go back to my website, this right here is a post. Remember page Wordpress is a post. If I refresh this post, you can see right now we don't see this is a page statement, right? But if I was to go to my back end and I viewed the recipe's page, let's view the page. Right here, you can see right now it says this is a page. That's because What press using the template hierarchy knows that, Okay, this is a page. I checks to see is there a file called page dot pHP? Oh, there is a file called page dot PHP. Let me now use that template to display the contents of the page. And because I went to my file right here and I added this as a page, Workplace outputs, this is a page. Okay? So, going back to the whole template hierarchy thing, if page dot pHB did not exist in my theme, what press would use index dot PHB? It's kind of like the fallback option. It's always the fallback option, whether you're displaying posts, pages or even content from other custom post types. Index dot pgB is always the last option if there isn't any more specific file. Now, you've seen page dot pHB displaying content for pages, right? Let me remove this comment right here real quick. Let's cut that out. Let me remove my space. Let me save this. Now, the file that is being used to display contents for my posts is the contents single dot PHP Template file. Now, right here, I'm going to do the exact same thing. I am going to paste the same content, and now say this as a post. Let's save this and as you can imagine, I'm going to go back to the back end right here. Now I'm going to refresh my page. You can see nothing is showing up. But if I was to go to my post right here and I refresh the page or the post rather, you will see that that did not display, let me go back and see what happened. This is a post. Okay. Let me just make a quick change once again. Not quite sure what happened there. Okay, so it definitely saved right now. So if I was to go back and I refresh, I think it should be down here actually. It should be around here. Oh, this isn't the main I'm sorry. I'm an idiot. This is the homepage. This isn't actually the actual post page itself. This is the home page for the website. So if I now go to page four, press the actual page itself, now you can see it says this is a post. I'm sorry, I did lose my train of hob and I'm recording. It's not easy. Okay, so that you can see it says this is a post specifically for this post right here. Okay. Wow, that was close. I'm going to go back and I'm going to remove this, okay? And once again, Wtpress is, of course, using PHP to pull in all this information. Now, there is something else that you should be aware of when it comes to PHP and Wtpress. There's this thing called template tags. Template tags are kind of like prebuilt PHP functions that are used to display certain kinds of information. One of the best examples I can give you is right here in this template file, the content single dot PHP. So here's the thing. What press is displaying let me just rephrase this page. What press is displaying the title of my post, right? It's displaying the featured image. It is displaying the content. And then down here, it's even displaying the published date, the author, and even the category of the post. How does What press know how to do this? That's because of something known as the template tags. The template tags are prebuilt functions that display certain kinds of content dynamically. I'm going to prove it to you. If I was to go back to the template file right here for our posts, do you see this thing right here called the title PHP, the underscore Title? This right here is a template tag used specifically for displaying the title of our posts. That's why we have the title showing up. If I was to go right here right now and I remove this, let's just cut it out and I save. If I was to go back to my post and I refresh, you can see right now the title is no longer there. It's gone. That's because we removed the template tag. Let me go back and I'll undo what I did. Let's add another template tag right here. We're going to display the category of the post just beneath the title. And how can I do that? I can make use of another tag known as the category. It really is that straightforward. So if I was to go out here and I changed the title to the category and I saved Okay, I'm going to go back to the post file right here, refresh the page. And right now you can see we have the category Dev Tutorial. That's basically what template tags are. There are many, many, many template tags, and in fact, I should have opened up a page to show you what the different Wat Press template tags are. And I've opened them up, and I didn't want to do it live because my Internet here is pretty, pretty bad, so I had to pause the video, open up the page, and here it is. So if you go to codex or wtpres.org, forward slash template called Tags, right here, you can see so many of them. You have the general tags. Get header, G Futa. Let me show you those by the way. If I was to go back right here and I go to page dot pHP actually, let's go to index dot pHP. This is the main template file right here. I'm sorry, not index or pHPPage dot page B. Let's take the page dot p HB. You can see right here it says, G header. Get header. And then down here, it also says get FUTA. These are functions that pull in the header of the website and also the footer of the website. Now, if you look over here to the right, in my theme folder, I do have the file called header dot pHP. It's a file right there used specifically for displaying contents in the header, which will typically be your logo as well as your main menu. Now, if I was to go up here and I did the same thing and I said, This is the header. And I saved this file. As you can imagine, if I was to go back to my page, now, because the header is global, the header is on every page on every post. If I refresh this page right now, you can see right up there, it says, This is the header. If I was to go to my post and I refresh, it also says this is the header and so on. Now, likewise, you also have the exact same thing for the Puta dot pHP as well. So these are functions that will pull in pages hea dot php, fred dot phB. You come across them a lot more as we progress. Okay, let's go back to the template tags in here. So you have other ones like, get the sidebar, the login form, archives, author information, category information, comment tags, and so on and so forth. You're more than welcome to spend time going through all these tags if you wanted to. But that's basically it for WordPress and PHP. Again, as you progress in this course, you'll begin to understand more of the relationship between PHP and Board press. Hope you enjoyed the video. I'll see you in the next one. 5. Writing php code properly: Let's now talk about how to write PHP code properly. In other words, we're talking about PHP coding standards. And I do have quite a list in front of me, so let's get started. The first thing we're going to talk about would be how to name your functions and your variables. And in here, we have a classic example. We have the function 2021 or widgets on the score in it. The job of this function is to register a side bar, but notice that the actual name of the function is widgets on the score in it. But they start off first by saying function. So we have function, and then you want to add a prefix before the name. The prefix in this case is 2021. And the reason why you want to add prefixes to your function names is because there could be another plugin somewhere on the website that uses the same function. And if both your theme and your plug in are using the exact same name for the function, you could end up having a conflict. So to avoid that, it's best to just use your own unique prefix. It could be the name of your theme. It could be your own name, it could be anything. Just have a prefix before the actual function name. Next would be the use of dashes and underscores. When do you use them? Typically, you would use your underscores whenever you're naming your functions or your variables. In this case, right now, but the prefix, we have 20 underscore 20 underscore one underscore Widgets underscore in it. So you would use underscores to separate words whenever you're naming your variables or your functions. You would use dashes when you're trying to add a CSS class. In this case, right now, down here, you can see it says H two class it calls widget. Dash title. So when you're adding classes or IDs, you would use the dash. You would also use the dash whenever you're naming your files. In here in the content folder, you can see we have files called content dash Except content dann content page, content dash single. That's when you would use your dashes. Don't worry, as you work more with PHP, you'll get used to when to use the underscore and when to use the dash. Alright, next, it would be the use of single quotes and double quotes. Now, right here, I have the example. We're basically echoing a statement, I am sorry this is the header of the page. Now, one way I could rewrite this would be to simply say, I am sorry. This is the header of the page, okay? However, in most cases, you would typically use the single quote. Single quotes are used a lot more often than double quotes. Now, this is the ideal where you would write this kind of code, echo, single coat and then the tamal code, I am sorry, this is the head of the page. But what if you wanted to use the short form of IM. So right now, I say, I without the A. You can't have a single code inside of another single coat. It will break the entire code. So what you could do in this case right now would be to wrap the single coat inside of double ads. So right now you can see, Oh, sorry about that. Right now, you can see I am using the double coats wrap the single code inside of it. Now the code would work. You can't have a single code inside of another single code, and you can't have a double quote inside of another double quote. In most cases, the double quotes are actually inside of the single code. The reason why is the reverse here where you have the single code inside of double code is because this is English. When you write, I'm sorry, you don't use double quotes. You typically would use the single code. However, if I was to go back to my function dot ph p right here, Notice, when we're adding the title, the H two class equals Wizara title, the name of the title is in double quotes while the actual HML code is wrapped in single quotes. So once again, you can't have single quotes instead of single des you can't have double quotes instead of double quotes. And in most cases, the double quotes would be inside of the single quote. You would only use a single quote inside of a double quote when you're trying to write sentences like this in English. I'm sorry, I didn't like that. Okay, next would be the closing PHP tag. Now, in most cases, when you open up your PHP tag, you should close it, right. However, don't be surprised that you may see some files where all you see is the opening pageB tag, but you never see a closing pagB tag. Here, for example, in the page of PHB, we have the opening page B tag, but there is no closing pageB tag right there. That's because there is no need to do so. In fact, pagB is one language where you can open it up, add code, add code, add code, and you never have to close the PHP tag. You could only close the PHP tag if within that block of code, you want to add code from another language, maybe like HTML or JavaScript. In this case, right now, everything in here is pure PHP code. There is no HTML, there is no Javascript. In fact, if you go to your function at PHP file, at the very end, maybe some themes might not do this, but the vast majority of themes, the functions of PTR file, you will never see the closing pageB tag. Nah, it's just going to be right there, empty. Now, this was the opening pageB tag right up here, and you can see right now that we've had several functions. There's a function right here. There's another function right there. All another function, another function all the way down until we wanted to add a JavaScript code. That's why we closed that opening PHP tag right there. We added our JavaScript code. Once that was closed, we then opened up the PHP tag again until down here once again. So, in most cases, it's safer to just open and close your PHB tags, okay. But don't be surprised if you do see files where there is no closing or PHB tag. Okay, the last two would be identation and commons. So if you've worked with HTML code before your CSS code, you're already familiar with this concept, make sure your code is well indented so that it's very, very easy to read. As an example right now, you can see this function to register the side bar. You can see how it's all indented. I know that this right here, this is a block of code for registering a sidebar. And then right here, for example, you can see how you have the main array up here, and then inside of the array, you have the child arrays with all the properties and values. You can see how everything is laid out properly. So keep that in mind. And then let's talk about the comments. How do you add comments in PHP? Comments are a great way to add commentary to describe what a function is doing. So the ideal way would be to have the forward slash and then your asterics and then you have your comments, and then to close the comment, you would have your asterics and then the forward slash. Again, like in here as an example, okay? That's how typically you would write your comments. You don't need to use the single asterics symbol before the actual comment. It's not necessary, but a lot of what pace users prefer to do it that way. So if you want to stick to the original standards, by all means, you can do that. So that's pretty much it. There are still a few other coding standards that you will come across, but these are the most important ones that I've covered so far. So hope you enjoyed the video, and I will see you in the next one. 6. Combining html and PHP: Now before we begin writing proper PHP code, I want to quickly cover one very, very important topic, and that is how to combine HTML and PHP in the exact same file. Now I'm going to use the title template tag as an example. Let's say we want to display the title of our post, but using the H one tags from HTML. The easiest way will just be to open up the H one tag, first of all, and now open up PHP and say the underscore title. Close it up and now close the H one tag. All right, I'm going to go ahead, save this and let me come back in here, refresh my page. And there it is, PHP forward press, very, very straightforward. Let me walk you through what I did. So the whole point here is that we want to display the title in the H one format. So we opened up HTML, first of all, with the H one tag. Now we opened up PHP, add a date, the template tag, the title, then closed it, then we closed the H one tag, and that's exactly what we got. This, by far is the easiest, most straightforward way of combining HTML and PHP. Whenever possible, make sure you have your PHB code inside of your HTML code. It's very, very straightforward, and it's the easiest form of syntax to work with. We could do the reverse, where you have the HML code inside of the PHP code, but then you would use echo or points which are functions on the PHP. But in all honesty, I didn't even want to cover that because it gets a little bit tricky and it can be very, very messy. However, there are certain situations where you can't avoid having ETMO code inside of PHP code. Now, I've actually created a function in here to show you what I'm talking about, and I'm going to walk you through what is going on in here. All right? Let me just first of all, indente this properly. Okay, so the whole point here is that we want to display the text, you're you're very welcome. But using the P tags, actually, you know what? Let me change this to H one, just so we have some consistency, right? So we want to display. You're very welcome, but in an H one format, but it's going to be with the use of a function. So, right here, let me just go ahead and save this first of all, just to confirm that it actually works. So let me go back in here, refresh the page, and there it is. You are very welcome. Okay, let's go back to the code right now. What's going on in here? I've created a function called print greeting. It's PHP, so I have my opened PHP tag function, and then the name of the function now because we intend to introduce HML code, we have to indicate that, hey, HTML code is coming up next. That's where this opening collbace comes in. It's the signal that coming up next is going to be HML code. However, because we need to close the PHP tag before we can introduce the HML code, that's why we had to close it right here. You can say we've closed the PHP tag, but because of this collbace the function knows that, hey, coming up next is going to be HTML code. That is the HML code right there. And now because we have the opening curly brace, we need to close it. And because we've already ended PHB because we had to introduce our HTML tag, we have to open up PHB again. Now close the curly brace. We have the closing C brace, and now finally close the function. And then down here, we simply called the function. Don't worry. World cover functions more later on in the course. Don't worry about that, but that's basically one scenario where you will have HML code inside of your PHB code, and you have to use the CE brace and the closing braces to include HTML within PHB. There are so many other situations where you will have HTML and PHB being combined, but these two are the usual are the two most common. So that's it, thank you for watching, and I'll see you in the next class. 7. Working with conditional tags: Alright, so let's first of all, take a look at the conditional statements with PHP. And as a WordPress developer, you will come across conditional statements every time. They're very, very, very common, and I thought that it would be best before we talk about functions to actually talk about the L if and conditional statements. So right here in PHP, I do have the documentation pulled up and and so right now, it's very, very simple, very easy to understand. Conditional statements basically just check to see if one condition has been met, and then if that condition has been met, do something. Otherwise, if the condition was not met, then you can do something else. In this case, right now, you can see a very, very simple example. You have two variables A and B, and we've said the very first condition. If A is greater than B, if the value of A is greater than B, then echo, S A is bigger than B. Now we're saying se if, which means we're now providing a second condition. If A, the value of A is equal to the value of B, then echo A is equal to B, and then the third condition, L if this first two are not met, which means that if the value of A is not greater than the value of B, and if the value of A is not equal to the value of B, then obviously, the value of B should be greater than the value of A. So echo A is smaller than B. Very, very, very simple to understand. And let me just stress right now that you don't need to have an s if statement. You can just run one single condition. If this is this, then do this. You don't have to set the alternative for, Okay, but what if the first condition was not met? What should PHB? What should What press do? If you don't set that, then What press will simply not do anything. So I'm going to give you some examples in here directly now from What press. We do have something called the conditional tags. These are tags that have been created by What press already that help to check if certain conditions have been met. So let me just give you a few of them. Light now, you can see it checks to see if it's the homepage, if we're on the front page, you scroll down, you check to see if it's an admin. Let's scroll down a bit more. It checks to see if a post is sticky, if comments are active, and so you can check for so many different kinds of conditions. If a particular page is in the category with the ID number nine and so on, like, I'll encourage you to take a look at the page because you have so many conditions. However, I want to give you an example, and the conditional tag we're going to work with is the H post thumbnail. This checks to see if a post has a featured image attached to it. Now, over here, for my post, I do have an image right here. You can see the PHP featured image. Now, what I'm going to do is I'm going to create a conditional function that I will check to see if my post has a featured image. And if it does, we're going to change the size with which the image is actually displayed. Now, if I go to my Notepad file in here and I go to content shingle dot pHP with the 2021 theme, we do have this function in here called the 2021 post thumbnail. This is the function currently displaying my featured image and my post. However, we're going to change it. I'm going to go ahead now to remove this function. Now, if I save this, if we go back to the post and I refresh right here, you can see right now the featured image is no longer shown because I have removed the function. Cool. Let me now go ahead and grab this function I wrote earlier. Let me copy that. Let's now go back to my note part file and right here, right here, I'm going to go ahead now and paste this. And what do we have here? Alright, check this out. I have created my conditional statement or my conditional function in here that says I. And now the actual conditional tag has post thumbnail. So first of all, I'm checking to see if my post has a thumbnail. Then display the thumbnail. Condition tag this template tag write the underscore post underscore thumbnail is what is used to display the featured image of your post, just like the underscore title is used to display the title, the underscore except is used to display the accept. The underscore post underscore thumbnail is the template tag prebuilt in Wt press that will display your featured image. Now, the post underscore thumbnail, template tag can accept the size of the image that we want to use. In this case, right now, I have set the size to medium. So now I'm telling Wat press that, hey, if my post has a featured image, display the featured image but the size medium. I'm going to go ahead now to save this. And if you go back to my website refresh the page, now you can see we have the image now being displayed in the medium size. Now, please keep in mind that by the size, we're not necessarily talking about how large the image is going to be. The reason why is because with the 2021 theme, it has been designed in such a way that the featured image is going to occupy a setting width and height. As such, the size with which we're displaying the image will determine how clear or how blurred the image is going to be. Now, because we're displaying the image with the medium size of 300 pixels by 300 pixels, which is the default with WordPress, WordPress is now going to stretch the image to occupy the initial width and height that has been set by the theme that's why it's looking very, very blurred, but guess what? If I go back in here and I change medium to an even smaller size, which is thumb nail, which I believe is 150 by 150. That's usually the default. I think I misspelled thumbnail, thumbnail, not thumbnail. Let me say that again. Now if I go back, check this out. Okay, I'm going to refresh the page. And now, can you see it's even a lot more blod it's even a lot taller right now because I've basically forced WordPress to stretch the image. That's why it's looking all very, very blurred right now, but that's not the whole point of this video. The point here is just to show you that we're actually able to change the size of the image. Now, if I go back in here and I change this now from thumbnail to large, Okay? Now the image is going to be a lot clearer because we're displaying it using the large size that very fresh. Now you can see that the image is now very, very clear because we're no longer stretching it with the use of the medium size or the thumbnail size. So that's basically a conditional statement right there. You will come across them in so many situations. And going back to my file right here, like, even in the headatPHP, actually, you don't have any conditional statements in there. If I come down here to my single my con single dot ph file, right now you can see one conditional statement in here that says if and then is not singular. Notice you have this sign right there. Okay? This right here is the not naught value. So basically, I'm saying right now that if this page is not a singular page, then do something, okay? So this is another symbol that you come across a lot with conditional statements. Now, let me also mention one thing real quick because it's important. You may have noticed that with this if statement, there is the end if condition right here. So basically, we're ending the conditional function. You don't always have to use the end if if you're running the If statement, okay? It's not always necessary. However, for good practice, I would recommend that you always close your I statement. So in this case, right now, up here, I will simply come back in here and say PHP and then end if and there it is, had the semicolon and then close the PHP tag. It's good practice, but let me just mention that not always going to find developers who would always close every single one of their if statements. In my case, right now, the reason why I did not close this initially was because within this block right now, I'm not running any other conditional statements. Like, this is the only if statement in this block. However, if I was going to run another conditional statement within this block, I would have ended the first one. But like I said, it's often good practice to just end all your if statements and to avoid any potential issues with your code. So that's a thank you for watching, and I'll see you next class. 8. Wordpress functions: Okay, so let's start talking about functions and how you can write your very own functions using PHP in WordPress. Now, previously, we saw this particular function that I created called print greeting, and the whole job of this function was just to display the text. You are very welcome, and it's very, very straightforward. You have the function and then you have the name of the function. You will have your brackets, and then you'll have the open Colibrs to introduce HTML, you close it up, and then right here, this is where the function gets called. Okay, let me show you something else right here. If I go to phb.net and then take a look at the function reference, right here, you will see all the pre built functions available with PHP. Now, this can be used to do so many things like, you know, check the date today's date, it can check whether a user is logged in and so on. And then down here, if you scroll through, you begin to see the different kinds of extensions. Right here, you have the date and time related extension. So if you want to do something with the time, this is where you will have the available functions. Now, one of them is the date function. Very, very, very straightforward. It simply displays the date. Now there are different ways how you could choose to display the date. So as an example, down here, you have access to the different examples. So if you said echo date and then in brackets, you have L, this would simply print something like Monday, Tuesday, Wednesday. If you wanted something different, like, let's say, Monday, eighth of August 2005 and then the time, you would use something like this and so on. Okay, I'm going to go over to my Notepad file in here. Let me grab this real quick. Go right here to my header dot pHP. And I'm going to go ahead now and open this up. Let me paste the code right there. So what I'm doing right now is I'm simply echoing today's date in my header. I'm going to go ahead now and save this let's go back to the browser, go back in here refers the page, and there you go. Monday, 31st of May 2021. Now notice that I didn't have to create a function or anything like that. All I simply need to do was just to use the actual PHP function directly date. So this is from Pat directly, and I simply used Echo to print out the date in this particular format. So that's one way how you can create your own functions. Or I use functions directly from PHP, but what if you wanted to use your own functions, right? Here's the thing. With Wtpress, we already have access to a very wide variety of PHP functions. Now, if you go to developer do wbpress.org, and then you search for them functions, right there, you will have a bit more explanation about functions of PHP file and things like that. Now, the whole job of functions are like plugins. Plugins are used to perform certain kinds of actions on our website. You could have a plugin that does something very, very simple, and of course, you could choose to install that plugin. But guess what? You could even write a function, your own function that does exactly what that plugin is supposed to do. So in other words, if you're capable of writing your own functions, you will not need certain kinds of plugins. So as an example, take a look at this, I'm going to open this up. Right here, you have your functional reference under Watpress. Now, just like with PHP that has several prebuilt functions, WATpress also has its own set of prebuilt functions that you can use to either create your own new set of functions or you can simply customize them. So right here under the functional reference, you have access to plenty of functions. You have those under posts or custom post types pages. So anything related to a page or a post and so on, you will have all the functions right here, and then the categories and tags, you have them right here as well. Let's cool down. You can see so many. And then anything related to the user, email address, user password, things like that, you will have them in here. You have your feed functions, and then you have anything related to comments, pin back, track back functions, and so on. You scroll all the way down here. You have themult functions and so on and so forth. Okay, With that being said, let's create a very, very simple function. That will check to see whether a user is logged in or logged out. Now, right here, we actually have such a function which is called I user logged in. All this does is that it checks to see if a user is locked in or locked out, and then you can then do anything you want the function to do. So let me go over here to my file, and I'm going to grab this code real quick. Let's go back to our Notepad file right here. I'm going to remove this. Let me paste this out here and let me explain to you exactly what is going on in here. So what we have here is a very simple PHP code that checks to see if a user is logged in. And then if the user is logged in, we're going to echo welcome registered user. Else, if the user isn't logged in, just say welcome visitor. So this is what we refer to as a conditional statement or a conditional function if you prefer. Basically, we're offering two alternatives. It's either the user is logged in and if the user is locked in, then just say welcome registered user. But if the user is not locked in, then just say welcome visitor. I'm going to go ahead now to save this and let's see what it's going to do. I'm going to go to my Firefox browser in here. Now, as you can see right now, I'm locked out. I'm not logged in. So let me refresh, and you can see it says welcome visitor because I'm not locked in. However, if I go to my Chrome browser, right, you can see I'm actually logged in right now as the admin. If I refresh, now it will say welcome registered user. So you can see right now that the function actually works properly. Now, going back to WordPress right here, there are so many functions in here that will allow you to do so many things. You can check to see if the user is using a mobile device or not. You can print out the title of a post. You can check to see if a post has a featured image and so on. So what we've done in this particular video is just very, very, very simple functions to do certain things. Joining VNex video where we now take a look at more advanced functions. 9. Actions and filters: Let's now take a look at some more advanced functions and specifically hooks actions and filters. What exactly are these? A hook is a very generic term that is used to describe a location or a spot where one piece of code can interact with another piece of code. Now, don't worry, you will see what I'm talking about in just a moment. Now, when it comes to hooks, there are generally two types. You have actions, and then you have filters. An action literally it does something. So let's say, for example, you wanted to create a scenario where once you've published a new post on your website, you want Watpress to send out a tweet to all your subscribers. The action of sending out that tweet is an action, right? So basically, that's what actions are. And right here, if you go to the Watpress Codex and you search for the action reference, in here, you will see a whole list of different actions that have already been created by Watpress which will do something for you at a particular point. So say, for example, you wanted to do something before the theme is loaded. This would of course be advanced stuff. But right here, you have the action called setup Underscore theme. When you run this action, you would be able to do something before the theme is loaded. You can use this action, register side bar to basically create side bars and so on. But what about a filter? A filter is used to modify data before it is used or displayed on your browser. That's basically what filters are. So filters, they change things. They change stuff. In fact, a very easy way to describe actions would be they do stuff while filters change stuff. One other major difference between actions and filters is that an action would not provide you with any data to work with. Actions just act. They do their job and then they get out. Filters, on the other hand, will give you something, they'll give you a piece of data to work with before they now run the function. A classic example would be the typical except that you have for wordpress. By default, I think it's about 50 words. Of 55 words that wordpress would use for your excerpt, if you wanted to change the number of words in your post excerpt, you will need to use a filter because you need to get your hands on the except first and then modify the number of words, and then you will now pass your modification back to the filter, which will then run. Let's take a look at some examples in here of an action and a filter. And right now, I've already written out a function, so let me just quickly grab that right here. And of course, we're going to go to our functions PHP, because this is where we typically would add our actions and filters. So what is going on in here? By the way, I'm not sure if I've mentioned this, but another way of adding comments in your pit paper I would just be to add the forward slash two times, and then you can add your text or your comments. So what I'm trying to do here is that I am trying to add a statement that will appear on the front page. But then if it's not on the front page, don't do anything. So this is right here. The function is called add promo text. That is the name of my function. And you can see right now, I've added the comment that says, If we're not on the homepage, don't do anything. Otherwise, if it is not the front page, then I want you to return or print out Hot promo is back again. So to take this a little bit further, I'm using Echo to print out the statement. Hot promo is back again. But then we're also using the H two tags to wrap it up to make it a little bit bigger. So once again, check this out. I am saying that my function is called ad promo text, right? In fact, let me expand this just a little bit so you can see it a bit clearer. So once again, the name of the function is Ad promo text, okay? And the job of this function is to echo Hot promo is back again only on the homepage because right now it says, if we're not on the homepage, don't do anything. Otherwise, if we are on the homepage, then echo this out. That is the function. However, we now need to add it as an action, and that is the statement right here. In fact, you can actually even have this add action at the bottom. Okay. So sometimes you might see some developers adding the action first and then the function. In other cases, you'll have the function first and then the action. So we have this actual action or function itself called add action. And for add action, it requires two parameters. The first one is basically going to be the name of the action. In this case, right now, it is after header and then the name of the function, which in this case is add promo text. Fine, we've written out the function. We've added the action. But now, how do we actually execute this action? Keep in mind that just creating a function on its own doesn't necessarily mean that it will run. You need to call the function. You need to run the function yourself. So how are we going to run this? Well, let me go ahead and save this first of all. Okay? And then let me just quickly grab the code right here real quick. Do action. I'm going to go over to my header dot PHP, and right here this is where we want to print out the statement. So I'm going to say PHP. I'm going to paste the code. Add my semicolon and then I'll close the PHB code. This function right here, do action. This is now the function used to call out an action that we've already created. And in this case, right now, the name of the action, going back to function dot PHB is what? After header. That is the name of the action. So right here, we are now telling what press to do the action called After underscore header. I'm going to go ahead now to save this, and let's see what the results are. Let's go back to What press to my site. I'm going to refresh the page. And, okay, so right now, okay, we are on the homepage, so it says Hot promo is back again. However, if I was to go to the post for Pat P for press, you can see right now there is no hot promo is back again. Let's go to the archive page, for example, you can see it doesn't show up until we go back to the homepage, and then it says Hot promo is back again. So to give you a quick recap, this right here is the action that we've created called after header. And whenever you're adding an action, you need to, first of all, name the action, which is after header, and then you need to provide the function which you want the action to actually run. That function is add promo text, and this right here is the actual function. And then going to the header dot page this is where we want to call that action that we've created. And we need to do so we need to use the function called do action, and then the name of the action. This right here is what you might call a hook because now we are hooking our header dot phP to our functions dot pHB via the action called After Underscore header. That's basically an action at work. Okay. Now, let's go back. And let's talk about filters, right? Now, just like with actions, filters basically I'm sorry, no one actions, filters modify data. They change data before it's actually used or displayed on the browser. And just like with actions, you have access to a wide variety of different kinds of filters. And right here, you can see many of them have filters for pages, posts, image sizes, and so on. Let me give you a very, very quick example. Let's say we wanted to change the number of words in our excerpt. Right now, the default, I believe is 55 characters. But let's say we wanted to make the except only four characters. How are we going to do that? I want you to realize, first of all, that there is a function called the excerpt. This right here will display the post excerpt on its own, right? Keep that in mind. Now, what I'm going to do is I'm going to introduce you to a filter called excerpt Length. This filter right here has been created by What pre specifically for us to be able to use to modify the excerpt length. You can see right now, I filters the maximum number of words in a post excerpt. Check this out. I'm going to go ahead and grab my code right here. Okay, let's go to our functions dot PHP. And then down here, I'm going to paste that. What is going on in here? I have my function called My Custom except Length. And check this out. I am returning 30 characters, 30 words. Now, just like with add action, I am adding my filter, and just like when you use the add action, you first of all need to provide the name of the filter we are working with, which is what except length. This is the filter from what press that we are using called except length. And then just like we do action, you now need to provide the name of the function that you're using to modify the except, which is my custom, except length. However, unlike the action where we had to say do action and then provide the name of the action because we already have a function called the excerpt. We don't need to do anything like that. All we need to do is just to call the excerpt. We've written out the function to modify the except, so all we need to do right now is just to call the excerpt. And how do we do that? Let's go to our content that's singled out PHP and right here, just below the title. I'm going to say PHP, the underscore Except Pip jo semi colon and close. Let's go ahead now, save the file. And let's go back to our browser. Let's go to the page right here. Let's go now to the single page page right here. And there it is. That is our except right there in 30 words. Let's actually confirm that it's true. I'm going to go back change 324. Okay, just to make sure that it's actually accurate. Let's save that. Four is a lot easier to count than 30, so let's refresh. And there you go, one, two, three, four. That is a filter in action. We use the filter again because we needed to get our hands on the except first, and then we then modify the number, and then we sent it back. One other thing I want to mention is that when it comes to using actions or filters, we do actions, right? You do an action. This is the function. It's called do action. But for filters, we apply filters. When you're going through your Watpress files, you will see apply filters in some locations. While you will see actions, you will see do action. You don't do filters or apply actions. You do actions and apply filters. There's a lot more to actions and filters, but at this point, you have a basic understanding of how they work and what they are. Thank you for watching and I'll see you in the next class. 10. Variables and arrays: Now let's talk about PHP variables and arrays and how they are used in WordPress. Now, think of a variable as a container that can store the value of something. That something could be a function. It could be text, it could be a number, it could be anything. Now, according to the documentation in here, variables are typically represented by the dollar sign. Now, I've always found that rather interesting like, why? Did they chooe dollar symbol as the sign for a variable? It's not important. That's a whole topic for another day. But usually, you will have a variable that will start with the dollar sign, and then you will have the actual name of the variable. So that's how you can identify a variable. And there are different types of variables used in PHP. You have integers. Integers would be your numbers, zero, one, two, three, you have string string would be your text. You also have your bullion variables, which would be true or false, and so on. Now, scrolling down here, you can see examples. First example in here, you have variable, VAR equaling bob so the value of the variable VAR is Bob. And then notice the second one in here that has the value of Jo. This variable here has the capital V. So please note that variable names are case sensitive. If one is small letter, the other one is a capituletor, those are two different variables entirely. So when you try to echo out these variables, you're going to have Bob and Joe. And in fact, let me give you a live example in here. I've already written out the code. So let me go over to my notepad. Let's just jump down in here, open up my PHP, dump the code, and then close the PHB. So what you have here right now is that I have created a variable called text. You can see the dollar sign right there, text equals PHP for life. So this is a string variable, and I'm now echoing out the text. So instead of me writing echo, PHP for life, I'm just simply echoing text because text variable has the value of PHP for life. And of course, if I save this, go back to my website right here and I refresh the page up there, you're going to see PHP for life, very, very straightforward. You can also assign functions to variables. I have another example in here. I've written out. This is a function that we've taken a look at earlier, the one with the date. So let me just go ahead, open up my PHP tags again, dump the code, close it out there. Again, we've assigned a variable date to be equal to the function of the PHP function date, and then in brackets, we have L, which means that it will represent the day of today, basically. Going to go ahead now to save this. And then if I go back to my website right there and I refresh the page, you can see that today is Thursday. So page B for Life and today is Thursday. So that's basically how variables function. Going back to the manual in here, they have so much more examples on how variables are used. But let's move on now to array because this is actually the more interesting. So in here, according to documentation, it says that array in PHP is actually an ordered map. A map is a type that associates values to keys. As an example, right now, you have your array right here. You have the key, and then the key will have its value. You have the second key that will have its own value and so on. Basically, think of an array as a particular a function or a variable that has a set of attributes or characteristics. You can think of your regular text in your website, right? A text can have an array, and that array could be things like, Okay, we want to have a specific color for this text. So that color right now would be a key, and then the color will have a value. Is it red? Is it blue? Is it green? You can have the font size. That font size could be the key. So the value could be 26 pixels, 30 pixels. It could have a font family, which would be Monstera Totaoma and so that's basically what an array is. You will find arrays a lot in WordPress, and I do have several examples in there to show you if I go to my functions dot PHP, right here, this is the function to register a side bar, right? So it's called 2021 widgets, and then this is the actual prebuilt function register side bar. But now know that we have the Ay. And in the A, we now have several keys, which would be the name. For example, what is the name of the side bar? Oh, the value is, it's called the footer. What is the ID? The ID is sidebar one. What is the before title? We're going to wrap an H two class before the title and then wrap the closing H two tag after the title and so on. So right there, you have the array with the keys and then the values of those keys. I'm going to give you another example up here, and this one is actually very, very, very interesting. Right here. So you have this function called add theme support. This is a prebuild function with Wordpres that allows you to add our customization options to your theme. Now, in this case, right now, we're adding the support for a custom background. I'm going to show you something very, very good because I want you to see how this actually works. If I go to customize, this is for the 20 and 21 theme just to remind you, if I go to customize right here, and we go to my apologies, my Internet is acting all weird again today. Okay, so if we go over to colors in dark mode, right here, do you see background color. We have the ability to customize the background color because of this function right here. At support four custom background color. Now, look at this. We have the red default color is set to d1e4 DD, which is kind of like a light shade of green. If I go back to my website right here, do you see the background color? This is the default. And when I click in there, what's the value de14 DD. It is right here. But notice that down here, we have other colours that we can quickly choose. You have the black color. You have another shade of black. You have like pink and so on. All these values are right here. Do you see them? This is the black variable that has this value, dark gray has that value, orange has that value, and so on. So the thing is, as you begin to work with WordPress, you will come across variables and always are very, very common. Open up your function dot HB of any theme, and you will see them everywhere way away, way, you will see the keys, and then you see the values of those keys. So that's a very brief introduction to the world of variables and Rays. Thank you for watching. I will see you in the next. 11. The wordpress loop: No cost about What press and PHP would be complete without talking about arguably the single most powerful function in all of What press, which is the WordPress loop. What exactly is this? I've got some books in here with me, and don't worry. I'm not trying to sell them to you. I have three books in here, right, and each of these books has its own title. They have their own author, their own number of pages, their own classification, and so on. Let's imagine that you were a librarian and it was your responsibility to record all this information about each and every one of these books. You could do it manually. But what if you could actually create a function or a program that could scan these books and then automatically put out the information that you want. That would be awesome, right? Now, think of these books as your What Press posts. Think of that program that can scan these posts and display the information as the What press loop. So the job of the loop is basically to go into your posts and then start picking out the information, the title of the post, the author of the post, the date of the post, and then we'll display it on your website. That's basically what the loop does. Now, I do have other article in here, what the loop can display? It can display the next post link, the previous post link, the category of the post, the author, the content they accept, the ID, the short link tag, title time. It also works with conditional tags as well. If this is the homepage, then display this. If this is not the homepage, do that and so on. Now, let me open up my notepad file in here and right here, if you open up your index dot pHB, in fact, any WordPress theme, I don't care how sophisticated the theme is, you're going to have a loop in your index dot PHP. And right here, this is the loop while half posted, it starts from I half post. Basically we saying, if the website has posts, and as long as it continues to have posts, then do this. Now, you said this function called get template pot. This is basically a function that links 11 file to another file. So we're linking the index dot p right now to the content dot PHP file, which is inside what you have here, your content that single dot PHP file. So we're linking the index of PG file in here to this particular file right here. So once the loop has started in the index of PHP, this is where we now begin to output the information. So we have the title. You have the thumbnail. You have the content and so on. Now, of course, you can customize the Wat press loop to display certain kinds of information. You can tell the loop that, hey, instead of displaying all the posts, display posts only from this particular category. Instead of displaying posts, why not display my custom post type of movies. In fact, I've written an example in here just to show you real quick how it might look like. So let me just dump that right here, real quick. So right now, you can see we've done what we've created a variable called gs. This I could also call this loop, custom loop and so on, but for the purposes of this video, I've named my variable gs, and this variable now has an array. We talked about RAs previously, and look at the keys. The first one right here is the post type. So now I'm telling the loop that, Hey, pick the information from the post type of movies. Now, we're not dealing with the regular good old Wat press post, we're dealing with movies. And then for the category name, pick movies that are from the specific category of action action movies only, right? And then post per page that is in this loop, only display three movies. This would be how you can customize the What press loop. So again, the job of the loop is to go into your posts or whatever custom post that you've set it to focus on and then begins to pick out the information that you want, the number of posts, the category of the posts, and so on. And then using our template tags like the title, the ex serve the content, we can then dictate what information the loop should display. That's basically how the loop works. There is, of course, so much more to the WordPress loop. I will go into, of course, in my main WordPress theme development course. But for now, I think I've been able to give you a brief introduction to the WordPress loop and what it does and how it actually works. Thank you for watching, and I'll see you in the next class. 12. What is javascript: JavaScript is basically one of the most popular programming languages in the world today. It's everywhere. You would find JavaScript in your web browsers, websites, web applications, third party applications, and so on. Now, whenever you think of code or a function that adds a little bit of dynamism or excitement to a website, it's most likely going to be JavaScript working behind the scenes. If you look at e commerce websites where they make use of things like coupons, most likely going to be JavaScript, interactive calculators. Whenever you see things like galleries, sliders or situations where a user clicks on a button and the button expands or shrinks, those kinds of animations are typically run by JavaScript. Let me give you an example in here. This is one of my websites, Lab Cyber, and you can see, I've got this gallery in here. And when I hover on an image, you can see that it kind of expands, and then you have a bit of text that pops out. That's basically JavaScript. JavaScript is also used in situations that we call event based. Basically, these are situations where maybe the user resizes the size of the window or maybe they use their mouse to click on a button. To demonstrate this, let me bring you another website in here. This is W three Schools. And right here, take a look at what happens when I click on the Tread yourself button in here. I click in there, and now you have the browser saying 11. That's basically Gyroscript working behind the scenes. So whenever you think of code that adds a little bit of some excitement, animation, dynamism, some robust functionality, that's typically going to be Gyroscript working behind the scenes. 13. Javascript frameworks and libraries: Now let's talk about JavaScript frameworks and libraries because this is something that you will hear a lot about. JavaScript frameworks and libraries are basically snippets of prewritten code that you can reuse on your site as much as you want, but there is a significant difference between a library and a framework. Let me give you an analogy. Let's say, for example, you wanted to prepare pasta, spaghetti, right? What you would need basically would be a pot of boiling water, maybe some oil, some salt, and your actual pasta, right? That would be a library. A library basically gives you access to code that achieves a particular kind of functionality. To give you a web based analogy, maybe you wanted to create an animation on your site, that when the user clicks on an image, maybe it expands or it fades out, or it fades in, that is a very, very specific kind of functionality. You would find such kinds of code for such functionality. In a library like Jquery, JQuery is one of the most popular examples of JavaScript libraries. But a framework, going back to the analogy of the pastor, instead of you having access to your pasta, the pot, the water, the salt oil, right, all things you need to make the pasta. Let's not, image that you have access to an entire kitchen. You have the grill right there. You have other pots and sauces and you have ketchup, eggs, whatever. You've got, like, fully stocked kitchen. That's basically what a framework would be. A framework allows you to develop a complete website from the ground up. So that's a significant difference between a framework and a library. Framework gives you access to a very wide variety of functions which you may not even eventually use, but the library we'll give you access to very specific code that you can use and to achieve a particular kind of functionality. Now in terms of frameworks, you would hear frameworks like angular JS, and so on. For the libraries, there are two very, very popular ones. You have JQuery, and you have Jason. JSN is typically used for developing third party applications. Jaqery would be more for your, like, animations on your site. But there's also another one called the JavaScript React. These are very, very popular JavaScript libraries. 14. Difference between javascript and PHP: Now let's talk about the difference between PHP and JavaScript. In the grand scheme of things, as far as Watpress is concerned, PHP would be the more important of the two languages. That's because Watpress itself is developed in PHP, but JavaScript still plays a very, very significant role. One major difference between PHP and JavaScript, though, is the fact that while PHP is server based, JavaScript is going to be client based. What this simply means is that when PHP is involved, a request has to be sent from your website to your web server in order for that request to be granted or denied. But in the case of JavaScript, your server is not going to be involved at all. It's basically the browser of the user accessing your site. Let me give an example in here, okay? I'm on my blog right here. I'm on the homepage. If I was to click on How decide the Wordpress blog, I click on this link right now, you can see the page refresh, and now we have access to a new page. That's basically PHP working because when I clicked on the link right here, the request to access this post was sent to my web server. My web server granted the request, and now I have access to the contents of the post. This is PHP. But in cases where JavaScript is concerned, such requests will never get to the server. It's basically going to be the browser that will interpret the code. So another way to look at it is that PHP code is interpreted by web servers, while JavaScript code is interpreted by browsers. And as a result, JavaScript code is typically executed much faster than PHB code because the request doesn't have to go to my web server somewhere in the world out there. No, the request is going to be handled directly on the web browser when JavaScript is concerned. Now you may think that, okay, if JavaScript code is faster than PHP, then that means JavaScript is always better, right? Well, the answer is no. Jaroscript actually has some very, very significant issues. One is the fact that remember I said that it is the browser of the user accessing your site that will interpret the JavaScript code. Well, what if Jaascript is not enabled on the user's browser? Your Jaroscript code will not work, and there is a reason why a lot of people tend to not want to activate Jaroscript on their browsers because there are very popular attacks, one in particular known as the cross site scripting attack. This is a very, very powerful web based cyber attack on websites that exploit the use of malicious Jaroscript code. Basically, the hacker would be able to insert malicious code into the browser of the victim. So when the victim visits the site, the browser executes the malicious code. There is a reason why these attacks are very, very, very popular and as such, many users tend to want to disable Gyroscript on their browser. So Gyroscript is heavily dependent on whether or not the browser of the user accessing your site has actually activated Gyroscript or not. So please keep that in mind. Gyroscript may be faster than PHP, but it's not always better. 15. How javascript is used in wordpress: Okay, so now let's talk about how Jaroscript is used within Wordpress itself. You would find JavaScript in so many themes and plugins, right? Any kind of plugin that involves things like animation, galleries, sliders, video player, audio player, things like that. Typically, you will find JavaScript code in such plugins. JavaScript is also used in the back end of wordpress.com websites. This is actually the page right here, the new wordpress.com. The back end is called Calipso. Everything you would find in the back end in here is actually powered by JavaScript. Again, keep in mind that this is specifically for wordpress.com websites. But what about actual wordpress.org website? Well, whenever you go to the customized theme options, like what you see right here, whenever you configure things like the site identity, maybe you change the menus. Depending on the kind of theme you're using, you will see other options like, you know, change the theme, color, the size of your text, things like that. Everything you basically see in here is run by JavaScript. It's only when I make the changes in here and then I hit Publish, that's when PHP comes into play because now I am sending the request to my web server to publish these changes I have made on my site via JavaScript. That's when page three comes in. But all the changes in here directly on the site where I'm changing the menu, switching to homepage settings, adding code to the head uph things like that. Everything in here is powered by JavaScript. We also have the Wordpress Rest API, the application programming interface. The concept itself is way beyond the scope of this tutorial, but let me just give you an idea of what it is. The Wordpress REST API is basically an interface that would allow developers to access the back end of a Wordpress website without actually having to log into the back end directly. So the idea here is to be able to allow developers to integrate third party applications from other sites like maybe YouTube or Google or Facebook or whatever, allow them to integrate applications from such sites into the Wordpress back end, but without actually having to physically log into the back end directly of that site. That's basically the Wordpress Rest API. This is a very very simplified version or meaning of what it actually is. But just keep in mind that whenever you hear Wordpress Rest API, just know that JavaScript is working behind the scenes. 16. Javascript sample code 1: Let me now introduce to you two very simple JavaScript code examples just to give you an idea of what the syntax is and how it works up behind the scenes. Now, the very first code you see in here, I want you to take a guess as to what we're actually trying to do. You can take a hint from the document dot right animal dot color. When you see that, what comes to your mind? If you're thinking, well, we're trying to display or write the color of the animal, you would be correct. That's exactly what this code is meant to do. But let me break it down further for you. See, we have, first of all, the variable animal, variable represented by VAR and then animal. What is a variable, right? A variable would be something or an element or an object that we're trying to perform an action on. In this case, right now, we're trying to display the color of our variable, which is animal. But then we have something called the method. Methods are the actual actions that we're trying to perform. In this case, what is the method? The method is right. We are trying to print out or display the color of the animal. So now you know what the variable is, you know what a method is. But then take a look. We have this curly brackets in here, and then inside, we have type equals dog, color equals black, breed equals Labrador. What exactly are these? Well, type color breed are what we call properties. Properties of our object, which is the animal, and these properties have their values. The value of the property type is equal to dog. The value of the property color equals black, and the value of the property breed equals aprado, and they are all in an array. You can always tell an array by the collar brackets and then when you have property value property value, that's basically what we call an array. So now, you know what a variable is, you know what objects are. You know what arrays, properties, values, and methods are. Everything in here right now, the whole thing is what you can refer to as a function. Our function right here is we want to display the color of our object, which is that of animal. 17. Javascript sample code 2 : Let's now take a look at the second example which is slightly more advanced, but it's the same concept, right? We have our variables in here which are constant numbers now. So we have constant number one, NUM equals five. So basically, the value of our force variable, which is num one, which is a constant is five, and then the value of the second variable num two, which is also a constant is three. We have stated that already. We have assigned values to our variables. Okay. I've added a comment in here to say that, hey, we want to add these two numbers. So now we're saying, Okay, our variable sum is equal to num one plus num two. Basically, what we're saying right now is that we have a new variable which is called sum, and the value of sum is equal to the addition of variable one and variable two. It's as simple as that. And now we want to display the sum on our screen. So console dot log is another method. Remember, the first example was document dot right, console dot log is basically another way of displaying the value of a variable. So console dot log right now is our method. And now in brackets, we're doing something here called concatenation. This is where we try to display some text. But then within that text, we actually have values of a variable that we want to display as well. Take a very, very close look. The first piece of text here is the sum of. You can see we have added codes by day. This is a direct text. This has nothing to do with the code we've written before. This is just pure simple text directly on the screen. The sum of and now we have added plus. The plus right now is we're trying to now Uh, add the text that we've just displayed, plus the value of the variable num one, which is five, right? And then another plus to add a new text, which is and another plus to now add the value of the variable num two, and then another plus to add another text is then finally, we're displaying the value of the variable sum, which is five plus three, which is eight. So if I was to ask you what will now be the output of this code right here, it's basically going to be the sum of five and three is eight. That's basically what the code is. Obviously, there are far more far, far, far, far more advanced examples of Javascript. But these are two very simple examples just to give you an idea of what the syntaxes and how Javascript works behind the sin. 18. How javascript is added to wordpres: Before I round up the video, I wanted to walk you through the different ways how you can add JavaScript to your Whatpress website. There's basically two ways you can either use a plugin or you can do so manually. Let me walk you through the plugin phase, first of all, and there are many plugins, of course, for adding JavaScript to your Whatpress website. But the best in my humble opinion would be the WP code. Insert headers and foot as plugin by WP Code, very, very, very popular. Over 1 million active installations. When you've activated the plugin on your site, you will see the code snippets link right here. You can simply go to the header and Puta link, and then right here, you can paste whatever code that you want to your header, body or Puta. As an example, let me go ahead now and paste a very, very, very simple code here in the header. It's just a script to print out. I'm an inline script tag added to the header. I'm going to go ahead now to save my changes. And if I was to view my site, you can now see we have the text right there. I'm an online script tag added to the header. This is a very, very, very simple way of adding JavaScript code to your Wtpress website. But what if we didn't want to use a plugin, and we wanted to do so manually? Well, I could just grab this code again, I'm just cut it off completely. Save changes. Go back to the site, refresh the page, make sure it's not displayed. Alright. If I wanted to add that code manually, I could simply do so via FTP. I'm on my Notepad plus plus software in here. I'm connected to the site. I could go straight to my header dot pHP file for the 2021 theme which I'm using. And then right here, I could just simply go ahead now and paste the code. You can see the code right here, script document dot right. I'm an inline script tag, added to the header. Okay. I'm going to go ahead now and save the file. And if I was to go back to my site and refresh the page, there you go. I have the Gyroscript code printing out the text. But the truth is, this isn't the cleanest and most efficient way of actually adding JavaScript code. Typically, you don't want to add these kinds of scripts directly to your header or your Puta. In some cases, you could get away with it, but the best way would be for you to actually go to your functions PHP file and write the code there properly. So what I'm going to do is this, okay, let me go ahead and remove the script code from my header, save my changes. And what I'm going to do right now is I'm going to open up the functions dot PHP file for my 2021 theme. By the way, let me just add that if you're going to do this on Av website, it's always best to do so with a child theme. So if you want to make such changes to your child theme, functions dot PHP file and not the actual main theme that you're using, so just keep that in mind. Alright, I'm on my functions of Petri file in here. I'm going to go ahead now and paste the much improved code. Right now, you can see I've added the text that says inland script, printed out in the header. I've done the ad action. Now because we're adding this tag to the header, we're going to make use of this Wordpress tag here, WP head. I do have the custom name for my function which I've called test Adscript and then WPEd and now this is where I'm actually creating the function to print out the text. It says function and then again, the same name test at script WP head, and now I have the actual script right here. And, of course, I've enclosed everything in PHP tags. I'm going to go ahead now and save the file, and then let me go back in here, refresh the page. And now you can see I now have the jaa script code printing out the text again in the header. Again, you could get away with just adding your script tags directly to your header, but a cleaner way will be for you to actually go to your function at Patri file and write out the proper code, create a function to work with your Gyro script code. 19. How to enqueue javascript: The last method of working with Gyroscript files on your Wpress website is actually the most recommended and the most proper way of working with Gyroscript and as to make use of this function, which is the WP and Q script function. The reason why this is the most recommended method is because Watpress typically has a very structured and defined way of loading scripts on your Wtpres website. And the reason why Whatpress does this is because imagine you trying to load, let's say, four scripts on your header, maybe you have a script for Google for your SEA purposes. Maybe you have another script that tracks which links your vistors click on your homepage, things like that. Imagine you have four or five scripts loading up in your header. There is always the potential that there could be a conflict where you have one script clashing with another. But when you enqueue your scripts, when you use this function to enqueue your scripts, you're basically saying, Hey, what press? This is a gyro script file that I want to work with. You're giving it to What press. What press will take it, and then we'll decide when best to load that particular script so that it doesn't conflict with another script. This is, again, the most efficient, the purest, cleanest way of loading up your script files on your Whats website. Let me bring back Notepad plus pus in here and show you this in action. See? I'm okay with the 21 theme right here and look over here on the right inside of this folder that says assets. If I opened it, right now, you will see I have another folder here called JS. These are the gyroscopt files that comes with the 2021 theme by default. I opened this up, and right now you will see all the files in here, customized dot JS, customized pv dot JS, and so on. Look at this one right here, primary navigation dot JS. This is the Gyroscript file that controls the main menu navigation on our website. And when I open it right here, can see all the JavaScript code, very, very, very, quite complex. You know, I could call it quite a complex code, but there it is right here. So you have got all these files in here. How does Wordpress now actually encube these files? If I go back to my functions that PHP file again for the 2021 theme, right now, this is where you'll begin to see the scripts being loaded right here. Do you see main navigation script? It says, Okay, I has enough menu. What it is basically saying is that if the user, if the Wordpress user has created a primary menu for the website, now que the script. You can see right now we are including the script right here, primary Navigation dot JS. That's the file right here. This is the code. In a function that PTR file that actually loads up the Gyroscript file right here, and you see other ones in here as well. You have the NQ script for the responsive embed Js. This is the file right here, responsive dash embedoJs and so on and so forth. So whatever theme you're using, I would encourage you to take a look at the theme files, try to locate the Gyroscript folder containing all the Jaroscrip files for that particular theme, and then go to the functions of PT file and try to see where those files are actually being loaded. But once again, when it comes to loading script files on your office website, this is by far the most efficient method of 20. Conclusion: Well, so that's it. We've come to the end of this course, learn PHP for WordPress. And from the bottom of my heart, I sincerely hope that you enjoyed and found the course useful. If you did, please do consider leaving a review for the course. It really would help me a lot. And if you're interested, like I've mentioned in the previous video, I do have a full course that'll teach you how to become a WordPress developer. So if you're interested, be sure to check out the course. Thank you so much. If you have any questions about anything that covered in this course, be sure to let me know and I'll do my best to answer them as soon as I can. My name is Alex. It's been a pleasure taking yourself, and I'll talk to you next time. Jess.