The Mini WordPress Theme Development Course for Beginners

1. Mini Theme Development Promo: Are you interested in learning how to customise watercress and maybe even develop your very own WordPress theme? If the answer is yes, then you've come to divide place. Hi, my name is Alex, and I would like to welcome you to the mini war press development course in this cause. I'm gonna teach you the foundations off. What President Development. I'm gonna teach you exactly how What? Chris walks behind the scenes to generate content on your WordPress website. In this course, you're gonna learn some very important concepts such as the war press loop. You're gonna learn about page templates. You're gonna learn about template tags, conditional tags. You're gonna learn how to white costume, what functions and even custom war press loops. So, basically, by the end off this mini course, your have gained real practical skills that you can apply to either develop what presses a raise or begin to build your very own WordPress themes. This course is loaded with lots of practical exercises. So you kind of students who enjoys applying what you've learned you're gonna love this course. Well, who are my well? I am a citizen. What purse developer? I have been building website WordPress for almost nine years now and have also been created all and courses for almost four years. So I definitely have both the experience and knows required to teach you this course. I cannot wait to teach you how to begin to customize WordPress. So if you've ever been looking for a great introductory course to what press thin development, this is the perfect course for you. I hope in all in the course today and I hope the city inside, but by 2. Requirments for the Course: all right, Thank you, friend will in. But before we get started, I need to introduce or talk to you about the requirements needed to properly take this course. This is not a beginner's course. It's actually quite advanced. So ideally, you should have somewhat Chris experience. You should have built a least one website with what it was before. You should be familiar with what press plug, ins and themes even familiar with any of these. Then you probably might want to take a beginner's course And what press first before you enroll in this course. Also, HTML and CSS knowledge would be crucial enough for you to take this course because we're gonna be building page templates functions, and we're gonna be using HTML and CSS, you know, to achieve this and in third. PHP, while not required, is very helpful. What press as a platform was built using PHP. So all of the templates and a lot of the quotable walking with will be in PHP format. However, if you don't have any PHP experience, don't worry, it is not required. I'm gonna take it very, very slow with you. So if we don't have any PHP experience. Don't worry. You can still take this course. But if you do have patri knowledge, then that will tremendously help you when taking this course. Then you're also going to need a text editor. Whether it's no pad, plus plus or sublime, you're gonna need at least one text a little that you can use to edit files and then upload them using FTP file transfer protocols. You're gonna need an FTP account. If you're not family out with FTP or how to get an FTP account. Don't you worry. I'm gonna show you exactly how you can get your very own FTP account. So those are basically the five Well, basically the four requirements and one helpful our skill that you need in order to take this course. If you have any questions about this, do let me know. Thank you so much for enrolling in the course. And remember, I am here to assist you and help you in any way that I can. So if you have any questions along the way, maybe something isn't clear. This is a technical course and his Veber practical as well. Be sure to provide me with the questions and I will do my very best to answer them as soon as I can. So welcome once again and now let's get started. 3. Creating an FTP Account: as I mentioned in the previous video, one of the tools you need to take this course would be an FTP account. So I'm gonna do here is I'm gonna show you how to create an FTP account for your or perceptive right now, if you already haven't ftp account. And by all means, you can skip this video and move on to the very next one. If you don't, then let's let me show you how to quit in FTP account. Now I'm going to assume that you do have a Web hosting company I host with side ground. So if you're hosting with side ground or you're hosting with go Daddy or Blue host or whatever hosting company you have, there should be a C panel where you can have access to sets in tools like the ability to create and have to be account. So I'm with side ground, and what I'm gonna do here is I've logged into my C panel. I'm going to school all the way down here where I have files and I'm gonna click on FTP accounts now again, if you are hosting with a different company where you would quit an FTP account might be on the a different section. What you can do is to simply contact your Web hosting company and let them help you. All right, so I am just gonna go ahead and create the account is very simple for my log in and just as an example, say Webber Casca peter dot com. Now, the reason why you see tesco dot com filled out here, that is because tasca peter dot com is a domain I own. And it is the primary domain associated with my side ground account. So I'm gonna go ahead and simply add my password and make sure your password is very strong one, because your FTP account is gonna be very powerful. Now, over here, where we have the directory, I'm gonna go ahead and delete Weber, and I'll just leave it at the public html. And that's because I want this ftp if to be account to have access to all my domains and old files and folders in those domains. So I was gonna go ahead now and click on Create FTP account And there you go. That's how to create your FTP account. Very, very straightforward. Never school all the way down here on the list off FTP accounts I will sue ever. At As kapita dot com, you can click on configurable FTP Client, and in here is where I have my credentials. I have the user name server and then deport number. So Germany for an exhibit area, I'll show you how to connect your FTP account with a very powerful texted it'll known as No pad plus plus. 4. How to Connect Notepad with FTP Account: all right is 11. I'll show you how you can install, note, pad, plus plus, and also connect your FTP account with no pad plus plus. So over here I am on the no pad plus plus the AWG for slash download page, where you can download a different visions off. No pet plus plus. Now, as of today, August 20th $2018 vision is 7.5 point eight. So I want to do here is make sure you download the appropriate version you got fitted to bit. You've got 64 bit minds a 64 bit. So I'm gonna go ahead and click on the note pad plus person stole a 64 bit x 64. I'm gonna click on that one, and I'm going to download it. So it's 4.4 megabytes. They shouldn't take too long, and it's done. So I'm just gonna click in there and click. Yes, click English Click next click. I agree. Click next click. Next we conclude a shot According the next up click install And while lots and I'm gonna click on finish. All right, so what we've got over here right now is the interface for note pad plus plus. However, if you jump over hit where you have plug ins, you're not going to see the FTP plugging available. Now, let me clarify one thing I've noticed from some other students that they got the FTP plug in essence installed the software. So I'm not exactly sure why some people have the ftp plugging automatically while some don't. If you do have to, you have to be plugging. You will see something like npp FTP That means you're OK. That means just said that means you don't have to take the next few steps. However, if you don't see PP ftp, the night means you will have to install or that you have to download it and install the plugging manually. So now let me show you how you can do this. Now I'm over here on this site on get Haab dot com and this is where you can download the FTP plug in specifically for no pad plus Plus. What I will do is I will attach the downloads for both the X 64 X 86. Find them in. The resource is you will have access to this too. So just make sure you pick the one that is appropriate for you. What I'm gonna do here is I'm gonna download first of all, the one for X 64 because I do have a 64 bit system. All right? And then once this is done, I'm gonna go ahead and extracts the files and documents inside this folder. Keep in mind that this is a zip folder. Once you've extracted the files in your zip folder, you will see the NPP FTP x 64 folder and our insider. For the you will see two of the Fuller's, you'll see the BIN folder that has your NPP, ftp door dll plugging file. And then in the other folder you will have your doc, which is your documentation for this particular plug in. So we have to do right now is to insert these two folders into the note pad plus plus our folder in our system. So to do this, I'm gonna jump over here to my other folders. I'm gonna come over here to my my computer, this PC. I'm gonna go to a PSA. I'm gonna go over to my program files and an instrument for going fast. For that, you will see the no pad plus plus folder. This is the solution folder for the software. So in here, right now, we have to add those two folders. And here's what I'm gonna do, right? I'm gonna go back in here. What I'm gonna do is I'm going to go into Ben. I'm going to caught the MPP ftp dll Let me cut that, and then I'm gonna go back to my note pad, plus plus and then in here, you have plug ins. I am going to paste to deal in them away. Provide admin access. Right. So make sure the NPP FTP toe dll file is inside your plug ins folder. Now, I'm going to go back to the original folder. So Ben is empty. We don't need to be in any more now for the doc folder. What I'm gonna do is I'm going to lenders. Could this doc folder I'm gonna caught it again? Or cut a dark folder. I'll go back to the notepaper possibles folder and then in here I'm going to go into the plug ins folder and where you have config, I'm gonna double click inside, and I'm going to paste that dog folder in here. Provide admin permission once again, and there you have it. So make sure the MPP after Peter DeLeo file is inside your plug in sub folder and then for the doc folder, put it inside the config folder from here. Right now, I'm gonna go back to buy no pet plus. Plus, I'm gonna close it, and then I'm gonna go back, and I'm going to run my note pad Passports again. Note pad plus plus, Let's open that once again. And now I'm gonna go to plug ins. And now voila. You should see the NPP ftp plugging available. So to now, connect no pet possibles without have to be account. I'm gonna click on show NPP FTP window. Let me just expand this a little bit. All right? So now, to add our ftp credentials, I'm gonna click on the gear booking right here. Click on profile settings saying I'm gonna click on add new. All right. And if the Newport felon was going to say this is gonna be Weber All right, click. Okay. And now for the credentials. Previously from the people's video FTP. That's test score. Pd a dot com was our host name use. The name was Weber, that Tesco pd a dot com password. And then I'm gonna click on close and not to connect. Simply click on the connect button right here. Click on the Web and you should be good to go. And there you go, pick up off successfully conduct that you my ftp account via note pad plus plus so that you have. It's please. If you have any questions regarding this, do let me know. It is extremely important that you're able to connect your note pad plus plus softer with your FTP account. No topless bosses for Windows. If you're on using a Mac, for example, you can use sublime tech sublime. Tex is a very, very powerful editing tool for Mac users, and you have other text editors out there as well. So they have a thing for watching, and I'll see the next class 5. Creating a Demo Theme: already. So the very first thing we're gonna do right now would be to generate a custom theme from this upside known as the underscores website. What exactly is this on the scores? Well, it says hi, I am a starter theme called on the school s or on the scores if you like. I am, if in mental hacking. So don't use me as a pill and theme. Instead, try turning me into the next most awesome WordPress theme out there. That's what I'm here for. So on the scores is what we refer to as a starter theme. It's a theme that has only the necessary amount off court needed for WordPress to work. It has just the bare bones amount of court out there. There are no fancy functions or fancy scripts. They're do additional things. All you get from underscores is the basic package for a war press thin. So it's a very good way to set off developing any WordPress theme. You simply coming here generated stuff off him, and then you can begin to enhance and develop that payment to becoming the very next best WordPress theme out there. So we're gonna do right now is to generate our own custom theme. Let's come in here right now where we have the same name and for me, I am going to name mine Starter. OK, feel free to use a different name. You don't have to use starter. You can use any kind of name that you want. Let's go ahead and generate the theme and you can see right now this is the ZIP file right there. So I'm gonna jump over to my website started or Tesco Paedo Comb. This is the side I'm going to walk in with for quite some time. So let's go ahead and install the theme. Let's go to appearance Fame's at new upload and from him was gonna click and drag started a zip right in here and let's install the theme. Let's activate the theme And there you go. We have successfully created our custom theme, and if you go to your side right now, you can see that there is no format in everything looks out of place, and this is how it is supposed to be. We are supposed to develop this theme into becoming the next best thing out there, so we'll have to do lots off, CIA says. Read lots of what was functions and development and so on and so forth. But this is a good start. We have gotten our custom theme generated. We've installed it. Now let's move on to explain and taking a look at how WordPress template files actually work. 6. Introduction to Template Files: Okay, so the next thing we have to do right now would be to connect to our site via FTP. If you don't know how to do so, I do have tutorials that will teach you and show you how to do so. Check the links in the very next video. In the next lecture, you will find links to where I will show you how to connect your side by FTP, how to quit on FTP account and even how to use no pad plus plus, which is what I'm actually using to connect to my site. So feel free to pause this video, go in which those ones and then come back. If you do know how it's going to aside by FTP, then let's move on. Right now I am on my stutter site and the folder I am interested in right here is the WP content folder. This is the folder that typically contains the files for your PLA gains and themes and media associated with your WordPress website. Let's double click inside and then you can see we have plug ins, themes of grade. We are interested in themes, right? So let's open up the things fold up and now you can see we have our start a theme. 2015 2017 and 2016 folders. Whenever you install a new theme, you will find the Times folder in here as well. But right now we are interested in the stutter theme folders Little clique inside. And now in here we have all the files that make up our starter theme. But I wanted to pay very close attention to these files right here that end in dot PHP. We have full for the PHP. We have archived PHP comments appear to be full of the PHP and so on and so forth. All these are what we refer to as template files. So what exactly is a template file? Well, a template file is one that tells what press what kind off content to display and how to display their content and even where to display that content. So template files are basically like a guide for what press they tell. What does that hey, display posts on this page? Display the title display the featured image just below the title display the dates This post has published things like that war press uses these template files to display content . And each one of this template files controls a specific parts off your website as an example full for the Petri. Right here. If I double click on four for the PHP. This right here is the template for this plane for four pages. Pages that are not found. This is the temple file, right in the whoppers would use to display content 44 4 for the four foot our page. A piece that's not found. Likewise, we have something here called what we have page dot PHP. This is the template for displaying all pages. So whenever you create a new page and what press they start off him is going to use this tempered right here to display contents for that page. Okay. And so on and so forth. We have single dot PHP. We have signed Butel ph b. All these template files control specific parts off any wordpress website. So join me in the very next class. Bell will begin to take a look at the call tempered fouls which will find in any what Chris theme 7. The Core Template Files: welcome back. And in a previous video I said that A What Preston would file is one that tells what press , what content to display, how to display that content and where to display that content. Now it is very important to to understand that we have different kinds off template files. We have the template files that what press recognizes automatically based on the name, an example being the 44 dot PHP. Once you have the four for the Patriot tempted fell in your thin folder. War purse automatically knows that. Yes, this is the Temple Fire I have to use to display the contents for any for four page. And the reason why. What Chris knows that is because off the name off the file, it say's for fourth or PHP. If I choose for 40 let's say for five or 44 extra PHP. War press is not going to recognize that temple file. Likewise, with archive that PHP comments that PHP footer PHP. All these are the Temple files and what press would recognise automatically if I came in here right now, including a new file named Spider Man. The PHP. What press is not going to know what? Spider Man. The PHP is useful. That becomes a cost. Um, template file. Okay. Now, while you're likely to find many off this default template files and most WordPress themes costume template files, on the other hand, tend to be unique to death. Particular theme. So don't be surprised if you opened up the 2017 template Tim simplest folder. I think for the mother and you saw certain files that you don't see in any other war twist him out there. That could be a costume template file that is unique to the 2017 team. And of course, I'm gonna show you how to create your very own cost some template files as we progress. But what one of the right now is to show you some examples off these core template files that you're likely to find and the very vast majority of WordPress themes out. And the very 1st 1 would be the header. PHP. Let's open this up Now. This is the head of for our theme. You can see right now that this is the template file what place would use to display the contents off the top section off our website. So typically things like the logo the main menu. If you have any social media icons on the top right hand corner, it is usual. Usually the head of the PHP, they'll display such content. Now let's take a look. If I decided to type in Psalm text in here, you can see right now I'm typing just below the head tag. If I said this is Ah Hedda, Full stop. Let me say this now Let's go back, Teoh Seamless refresh. Now you can see the very top writer. It says this is our Hedda. So right now I have just proven to you that indeed War press is using head about PHP to display the contents off the head of section off our site so you can go ahead, test this, type out some text you can even to say the type of it takes just below down here at the very bottom, just after site content. You can type that in here as well. Just peace that this is ah, header. Let's save that. Let's go back, Inhale. Let's refresh the page. And where is it now? You can see that it shows up right here. This is our header. So we now know that the head of the Petri controls all the content from my blood. Write it down to where we have. This is Ah, header. All the template files would now take control and continues to display contents for the post. As you can see right here and even contents for our sidebar down in here as well. So ahead of PHP is a very common WordPress template file. It is a Telefile you will find, and just about every single kind off. What person theme. And another thing that's very special about the head of the PHP is that it is attempted file that is very often called in. Just about every single or that temple file out there that it's plays some kind of content . What do I mean? Take for example, we have the page dot PHP. Now, this is a template for displaying all pages. So whenever you quit a new page, but it's the about page to contact page and so on and so forth. Watercress would use this particular template file to this play contents for that page. However, take a look at this line right here, it's easy to get head up. What this means is that right here what press is going to call the contents off the header dot PHP? There is a reason why whenever you visit any page on anywhere, besides, you're more than likely to see the logo on every single page. You'll to the main menu on every single pitch. And that is because the head of the PHP is constantly called in every single page in every single post. Because off this simple line off get Hedda. So Temple five like the head of the PHP the footer PHP the foot of the patriot right here, which is the one that controls contents at the bottom off a site. These two are very often called in just about every single temple file out there. Keep in mind, keeping my very, very important keep in mind, that warm template file can have other template files inside off it. Classic example again is the page dot PHP. This is a temple file for this plane, content for all pages in here. Right now we have three additional tempered files. We have the head of I T f. That's been cold Okay, we have the get sidebar, which is actually used to retrieve the contents off our sidebar. And we have the get foot tall, which is used to drive the contents off our footer dot PHP. So keep in mind that there are certain double files that have all the template files inside off them. So glam back the head of the PHP foot of the PHP. These are the two temples files that you will very likely find. And just about every single page out there, even every single post out there there are or the major core WordPress template files such as the archive dot PHP. This is, of course, the template file for displaying contents of your archives. We have also the sidebar PHP ritual display content that you have in your side. But mostly, of course, your budgets we have the single dot PHP. This is the one for this plane. All single posts. Okay, So just to give you a very, very quick example, if I came in here right now and I typed in, let's say this is a post. Okay, let's save this. Let's quickly go back to are back invited. Let's if we have any posts? Okay, I do have a post. I was quoted by default. Let's view the post now. You can see right here. It says this is a post, because what press right now is using the single dot PHP to display contents for this particular post. And we typed in here. This is a post but also notice that we have This is our Hedda. And that is because right here where you have get on the score header War press is calling the contents off our header dot PHP. And in the head of the PHP we have, maybe we have it. That's school all the way down here we have. Oh, but actually Okay, Yeah. This is a decision right here. This is our hitter. This is where it's calling that line of text. So if I now deleted this, let's save. Let's go back in here and refresh the page. Now you can see we no longer have. This is our head. I really have. This is a post. So these are just some examples off the core template files and make up any WordPress theme . Head of the PHP for the PHP archived appeared to be singled out. PHP page PHP These are the core tempted files. However, before I go, I want to talk about the most important WordPress template files off all and that is the index dot PHP. This is the mother off all tempted files. And there is no why this temple file is so important is because this is the default temple file Water purse would used to display content whenever there isn't a more specific template out there. What am I talking about? We know that page dot PHP is the company for this plane. What content for our pages. But we also know that single dot PHP is the temple fell for displaying contents for our posts. Difference? We have a tablet fire four pages. We have one for the posts. However, if we didn't have single dot PHP to display contents for posts If we didn't have peaches Ph . Peters to display contents for our pages, what purse automatically will fall back to using the index dot PHP. So inexact. Petri is like the last stand it it is the last option. It is the backup option, just in case there isn't a more specific template file out there for displaying content. So we'll talk a lot about the index of Petri as we progress before now. Know that we have different kinds of template files. We have the core ones, but we also have the index PHP, which is the default temple fell for this plane. Contents For what? Pressman? Never. There isn't a more specific template file out there. Think of fortune all seeing the next class. 8. Secondary Template Files: Let's not talk about some additional tempted files, which I like to refer to as secondary tempted files. These are template files that are not quite as important as the main template. Files like the head of the PHP or the index dot PHP, a different PHP, and so on and so forth. An example here would be the comments dot PHP, obviously by the name. This is the type of file for displaying comments. It's not the most important template file out there. You could actually even control how comments are displayed directly from the single dog PHP template file. The thing about single second Temple fouls is that they are there to make the cold and a bit easier to make the court in a bit more distributed across template files so that you don't have too much code inside off warm single temple file. That's the main poppers off secondary our template files. They are nice to have. They play a role, but again they are not quite as important as the court tended files. Let's take a look at some other themes, like the 2015 theme, and in here we have what we have, the awful dash byo dot PHP Again, this is a template for this plane offer buyers. So again, it's not the most important of all file out there. It does play a role, but again, it's not like the head of the PHP or the index dot PHP. Let's take a look at another theme like the 2017 theme, which has has one here called the search form are dot PHP, so you will very likely find many of the secondary template files in many WordPress themes . You will have the call ones out there. You will have the secondary ones, and then you will quite possibly also have the custom template files as well. We'll take a look at all these template files a bit later as well. But before I round up this video, let's talk about two very important files that you will find in any WordPress theme. The technically are not tempted files, but they play a very huge role in determining how what press will display your contents. The very 1st 1 would be the functions dot PHP and boy, this is a template file. We are going to spend a lot of time on This is basically the template file that contains every single function. Well, not every single function, but the majority off functions that we have in our Wordpress website. The reason why I'm saying majority and not all, is because many themes out there also tend to break up the functions of PHP. They don't add that, say, 70% off all the functions called instead of the functions of PHP and then the minute 30%. They might distribute all those functions in other template files as well. So it's not every time that it functions with Patrik contents all the functions that we have in our waters website. So take note off that, but you will very likely find the vast majority off your functions contained inside off the functions of PHP template file. So whenever you have a function for creating a new sidebar off for creating a new template , file off for creating a new kind of custom post type, such functions would typically be contained inside off the functions dot PHP. Now in here is an example. If you consider that we have some functions for Adan title tags, support for title tags are for added support for post thumbnails as well. You have a functioning that allows people to create menus and so on and so forth. So you will. We will create lots of our own custom functions as we progress in the course. But again, functions of PHP is a temple file you will very likely find, and just about every single white person seem out there. And let's talk about one more file, which is, of course, the style dot CSS. Now, this is the most important file ever. And what's actually strange is that all this file does is control how the content is actually displayed. This is where you will have the dick lotions for how your text would look like how the logo will appear. How big would it be? You have your margins, your patterns, your borders, your column in everything you're Baghlan images. All the styling is basically declared inside of the styled with CSS temples file The reason why I said it is the most important files because you cannot have a WordPress theme without the style dot CSS temples fire. In fact, styled assesses and the index dot PHP all the two most important finals in any WordPress theme, you cannot have a what press them without are both of these two tempted files. So that's it for the functions. PHP and the style dot CSS again. Throughout this course, we're gonna be spending a lot of time on the function of PHP and the style dot CSS template files. But that's it. Thank you so much for watching. I will see you in the next class. 9. Inspecting a Sample Template File: All right. So before moving on, I wanted us to spend a little bit of time to take a look at a sample template file in this case, the head ago. PHP. I want us to take a closer look at the actual code itself that mix up a template file and what you can expect to see in other template files as well their life from the very top right here. You can see we do have our opening PHP tag and red, and we also have the closing PHP attack for this section in here as well. One of the requirements for this course is that you have at least a bit basic basic understanding of how PHP actually works. It's very, very important in here. You can see we have some text in green whenever you see such text. Now, let me put out a small disclaimer here. This is not pad plus plus the text Editori you're using might have a different call. Oh, for comments or for text. So just beware off that. But if you use no pet plus plus, it's very often in green. So whenever you see anything in green that simply means a comment. It's not actually part off the code. What you have there do is just maybe a brief description off the next block off code, or maybe a description of what that actual file is all about. And in this case right now, you can see all the text saying this is the head of for our theme. This is the temple that this place all off the head section and everything up until the day of I d content section. So that's why everything in here is in green. And just to give you a quick point up whenever you're inside off a PHP code block, in this case where they can see we have the open right here and then we have the closing just over here as well. So whenever you're inside off a PhD block of code and you want to write a comment, the typical way would be to have the four slash and then and hysterics. Now, for some reason in this case, we do have to ask Texas. As you can see, it's not composite to have to. You can go with one right now, as you can see and everything will still be fine. But I have noticed that in many WordPress themes that typically tend to start with to or have to s Terex is so it is something that you might want to do as well. Just keep up the art. What press tradition. So to say. Oh, you can just ignore it in the own thing. It's fine. I'm gonna add the SX back. So once you have the fourth slash and then return, Asterix is you can begin to tap in your comments. You don't have to have the X Terex A to begin off each new line. You don't have to. You can just type in your text and you'll be good to go. And at the very and right here we do have the closeness, Terex with the Ford Slash as well, very, very important. That signals the end off the comments section. So that's just to give you a quick pointer. Now, you may have noticed that down in here we do have some other comments as well. We have side, Brandon. We have set navigation. We have masthead. Now these are written in a different where we have the open bracket and then we have the apostrophe sign and then two dashes and then some space. And then at the end we have to death, she's and then the clothes and buckets. This type off comments in East four HTML It's not for PHP, it's for HTML. So note the difference. Whenever you're making comments in side of the pitch, people like you start off with the Ford Slash and then the hysterics, and then you causes with the stakes and then the fourth slash. But if you are making a comment inside of HTML, you to become gonna go with the open, intact apostrophe and then the two dashes and then put in your comments and then the two dashes and then closing tag very, very important to realize the difference between the two. But don't worry. We're going to do lots of this as we progress in the course. But let's take a look at the actual code itself. I want you to. For now, just forget about what we have at the top in here. This is just some HTML stuff which we don't need to worry ourselves about, but coming down here right now, you can see that we do have lots off different classes and I ds, I'm talking about CSS. In this case, we do have the i d for page. We have the classical sides. We have some other ideas and let eighties in here like masthead site head out for the class . We have another classy aside, Brandon, and so on and so forth. So this is something you will find in many template files i e ds and classes for defense, tempted tags and blocks of code. But let's take a closer look again in here where we have the Hedda I d masthead. You can see we do have a class to hear that. Say side Brandon. And then we have custom logo right here. We also happens like the block in full description. So right now, you should be thinking to yourself. Okay, this is the block off court that controls how the logo is displayed. It's also the block off court that determines how our block in four and block description outside description of other has been displayed as well. And then down here, you can see we also have the knave idea off site navigation. We have main navigation we have primary menu. We have stuff like that. So again, you should always be thinking to yourself. Okay, this would probably be the block of code that controls how our main navigation is displayed . This are one of the ways how you can interpret the code that you have inside of a template file. Simple. Look at the words. What the words are you see navigation. You should be thinking, OK, that's the main navigation. You see, logo should be thinking, OK, this is the part that controls the main logo and so on and so forth. So this is one way how you can quickly recognize what a particular block off code is doing . So that's pretty much it for the kinds off code that you will find inside off a template file. Very, very important that you have a decent understand the fixed NLCS says. And of course, the basics off P H P. So that's it. Thank you for watching, and I will see you in the next class 10. The WordPress Template Hierarchy: Let's talk about a very crucial topic that is necessary in order to be able to build a WordPress theme. And that is the WordPress template hierarchy. Very, very important. But before we delve into the Haruko itself, let's festival talk about a few pointers, and the very 1st 1 have been that more than one template can be used to display the same content. Now as an example, the page dot PHP we know that paid the PHP is typically used by workers to display contents for a page. Keep in mind, though, that it's not just the ph dot PHP that is only used by what purse, what was can use or the attempted files to display contents for our pages. Keep that in mind and then secondly, index dot PHP is the default templates for all content. So whenever what Chris cannot find a more specific template. What purse will always default to using the index dot PHP index dot PHP is the fallback template for all types off content. Now the tempered have a key. Itself is a system that what Chris would use to determine what template is used to display a specific type of content. So going back to the very first point where I said mortem on tempered can be used to this. But the same kind of content the temple have a key is what walk Chris will deploy to determine which template foul Foster will be used, and any of that temple file doesn't exist. It would then jump onto the next template file and so on and so forth until it gets to the index dot PHP. That's what this template hierarchy is all about. Let's move on. Let's move on. What press uses a query string to identify the template that is used? What is this query string? Well, the query string is information that is contained in the U. R L off the page and over there we have an example Has competed, don't come forth slash blawg forward slash category ford slash books Maley Looking at that , you are l. What Purse already knows that this link this Yeovil is pointing to a category with the name off books and it knows that because it has inspected, you are well and it sees category right there. Now what press to determine the kind of temper that is used water personal first of all, match every query string to a query type to decide the type off. Paid requested. We just saw an example. So what possible? First of all the time in whether or not this link this yarbles pointing to a post if it's pointing to a page if it's pointed to a search results page. If it's pointed to a category page and so on and so forth as the very first in what Press will do wants what press has been able to determine the kind off page being requested. It will don't search for the template files with specific names in the theme directory, and it will then use the first mention file as specified by the hierarchy. Let's take a look at an example. Over here we have tasca peter dot com ford slash category four slash books. How will workers determine the temple file will be used to display the content off. This particular you are ill first is fished. Walkers would look for a temple of money that matches the slug off the category, which in this case, is books. If you don't know what slogan slug is just basically the name. Okay. Slug can be used interchangeably with name. So right now we can see that it category The name of this category or the slug of this category is books. So first of all, war press would look for a template file called books or category Dash books. Okay, if category dash books that pitch is missing, Waters will then use the i. D. Let's just imagine that the Eid in this case it's seven waters will then look for a temple file name, category dash seven dot p h p. Okay, so we can now see the hair icky forming. First of all, it's such as four category dash books dot PHP That doesn't exist. OK category Dash seven Puppetry is next if category there seven or PHP is missing war personal. Don't search for the generic category. Temple pretties category dot PHP if category that pitch is missing, workers will then check for archive dot PHP And if archival pitches missing Finally, what purse will resolve to use in the index dot PHP? Don't worry. In the very next video we're going to I'm going to show you a real life example so that you will understand this better. But I wanna show you this image right here to give you an idea off the Temple Cherokee for all types Off pages. Now you can see we have the four full page. We have searched taxonomy, home attachments, single page category tag, awful date and archive. And then you consider very first type off tempered father. Workers will search for and then the next, and then finally look towards the lights off each line. He can see index dot PHP index dot PHP index of Patriot inexact Petri every single time because index dot PHP is always the default temple file. But press would use if it cannot find a more specific templates. So going back to the example, which we just had that the category can see for category, have category dash slug Category Dish i d category dot PHP Archival patriot and finally index dot PHP. This is how the hierarchy works. This is how war press This determines water profile that is used to display the contents off. A specific you are will join me in the next class where I will show you a real life example off how the template, Harrick it works 11. The Template Hierarchy in Action: and the previous close. We took the boat, the temple tie rakhi and how What puts uses it to determine what template file is used to display content. So now let's take a look at a real life example off the template Have a key in action. But first of all, I'm gonna go ahead and create a category. All right. Got me in here to posts. Let's add a new category and I'm gonna name that category books, Okay, Just like we had in the example. Add the new category and we can see it's cold books. Now, if I click on view right now, you can see that nothing pretty much is happening. We have nothing found because, of course, we don't have any posts that have the category off books. However, the question right now is what about filed is what was using to display this particular page that we're looking at right now. I am gonna bring over my note pad plus plus and of course, in here I do have my thin Demetri for the start of theme. Now we don't see anything like category dash books. We don't see category dash the I. D off books. But what we see, though, is archived at PHP. We actually don't even see category dot PHP, which is more specific or which is higher in the temple. Have a key, then archived a PHP. So my best guess right now is that what Chris is using archive dot PHP to display the contents off this particular page? Let's make sure, right, I'm going to double click on archive dot PHP and just below head. I'm going to say This is level full. Let's save this. Let's go back in here. Let's refresh And now you can see it says this is level four. Sarwar Press is using archive toward PHP right now to display the contents. Let's now try creating a new template file. First things first is on. I'm going to jump back again two categories and let's get the I. D full books right now at the bottom. Right now, you can see that the category it calls to so too is the i D off this particular category. So let's still this. I'm gonna go ahead now, and I'm going to create a new file and I'm going to name that file cat. See gree dash to duck PHP click. OK, let's open it up and I will just say this is level to This is literally the only thing we have at the templates. Let's save it apps site Cancel, cancel safe. All right, let's go back. Two books, That's view. And now you can see over 1/2 ISS. This is level two because right now, war press has found a more specific tempered, which is the category dash to dot PHP. Needless to say, if I go back in here right now and create a new file named Category dash books dot PHP click OK, let's open it up And then let's say this is level one. Let's save that now Let's go back. Let's refresh the page And there you go. This is level one. So right now what process found the top most template file inherited, which is the category dash slug or category? Dash name, which in this case is Kattegat Dish books. It saw that Which is why what Persons now using it as the main template file. But if I go back again right now and decided to delete category dish books, let's let the file And now let's even go ahead and deletes category dash to the PHP. Let's delete that because we don't need it anymore. Let's let that. But if I go ahead and create a new file and named that cati goalie dot PHP, let's open it up. And I'm just gonna say, this is the generic template for all catty go categories. Full stop. Let's save that. It's not goodbye came here fresh. And of course you can now see that WordPress is now using category dot PHP because category Petri comes after the category dash slug Kaluga Dish I d. That's when we now have category dot PHP and so on and so forth. So this is the WordPress template Halik e in action. You can see how what, Chris Well, first of all, check for the top most template file in the hierarchy. If it doesn't say it, it jumps to the next one in the order and so on and so forth until finally again until finally it gets to index dot PHP. So this kind of gives you an idea of just why index dot PHP is arguably the most important tempted file in ward place. So That's it for the tempered hierarchy in action. Phil. Free to play around with the other till it fails out there. You already have. The image from the previews are slight. Show you can play around with the page dash slog, Paige Dash categories, stuff that you can just go. Go ahead, experiment and see the tempered hierarchy in actions. Thank you for watching. I will see you in the next class. 12. Creating a Custom Page Template: Oh, I welcome back. And so far, so good. We've been talking about what? Press tempted files. We know that they are used by what press to display content on a page. And we know that what press has its default tempted files that it comes with Now what I mean by default is that ward purse will automatically recognize those tampered files based on the names. Once we have this template files in our thin directory. Just so we're clear, every single temple file you see on this picture is a default WordPress template file. Because if in your thin directory you have a search dot PHP or you have a single dot PHP, you have an archive dot PHP. You have a page dash four dot PHP as zooming. That four is the I d off page water. It's automatically would recognize every single one of this Temple files and will know when and how to use those tempted files. That's why I say that they are default. What press tempted finds it doesn't mean that you're gonna find them in every single theme directory. No, all I'm saying is when you have these template fouls in your thin the veteran. What person already automatically recognizes them? However, we could decide to create our own custom page templates. Now, these are tempted A what? Chris will not automatically recognize when we create them. We would have to tell what president? Hey, this is a tempered file, and then we want you to use this template file to display this type off content. That's why they are called costume page tempers, because what press doesn't automatically recognised them. So what we're gonna do in this video is I'm going to show you how to create your very own custom page template. Now, to do this, I am going to bring over my note pad plus plus. And the very first thing we're gonna do is to create the template file in our theme. Directorates are in here where we have starter, which is the name of the theme directory. I'm going to like, Click, and I'm going to create a new file and I am going to name my file page dash full with don't P h p. All right, notice I said Paige Dash and then the name off the actual template itself. You could decide to use a different name in structure. You don't have to use Paige Dash and then the name off the template file. You can use any kind of naming convention that you want. You could go with full with dot PHP and I'll be fine. I just like them in my own custom page templates with the page dash and in the actual name off the template. I just like that can off our standard, that kind of approach towards naming our custom page templates. So what I'm gonna do it now would be to double click inside. You can see right now that it's empty. It's empty. Of course, there's nothing in it. So the very first we have to do right now would be are the most important, which is to give this template file the actual the name itself. Make walkers recognized that this is indeed a costume page template, so we're going to go with the Ford Slash and then ost MX two of them. But before we do that, we actually need to open up our PHP tags. Let's open a puppy to attack First of all right, so PHP. And now I'm going to say templates name and in Colon is going to be full with Okay, so now we can close this aesthetics foot slash That's close. That let's save it. So now we have told what press that Hey, this particular file is a custom page tempered and the template name is full with OK, so now let's see what this does. I am going to go to my back and let's go ahead and create a new page just right at in a new page and I'm just gonna go ahead and say Custom page. Now take a look over here to the right where we have templates. When I click on the Drop down L books, we now have something called the Fool with template available for us to use. This is how you know that indeed, you have successfully created a custom page tempered. So now we can tell what press to use this template whenever it was displayed. Contents for our cost on page or a page named Custom Page right here so I can publish right now. Oh, actually, I didn't changes to fool with full with That's updates and olives view the page and there you go. It's empty because there is absolutely nothing inside off are full with tempered. Besides, of course, the template name. So right now we can begin to add some additional code. So let's just say PHP and then I can say gets head as an example. Brackets something colon. Let's close that. Let's save, Let's see what happens over heavy fresh And there you go. We now have head up. Let's also do the same for the footer as well. Let's just paste that in here. Let's change head out. Teoh Footer! That's safe. That and now let's save refresh. And now you can see we now have our foot display. So this is exactly how you can create your very own costume page template. Of course we will, because 18 more cost on page templates as we progress in the course. But now But now you have successfully learned how to create your very own cost on page templates. Thank you for watching. I will see you next. Last 13. Writing a Custom WordPress Function: although it is in the previous video, we talked about how to create a custom page template. But now I want to show you how you would write your very own custom. What press function. Okay, we're gonna light a very basic function that would output some text on any tempered file where we choose to call that function in. So let's say, for example, I do have my note pad possibles. Over here I opened up the head of the PHP. Let's have example, I wanted to output the text that say's This is a wordpress website. I could do that in here. I could say h one. We're gonna wrap it around h one tags so that it's big and bold and say, Let's just say welcome. Welcome to this website. Let me close the H one tag and I could even add a class and called his class Ah, gree teens giving a class of greed. Teens and I could even add a div as well with a class off. Let's just say welcome and ah, on a new line. Let me just indented this actually on a new line. I can put out the paragraph and say, I hope you enjoy your stay. It's closed paragraph and let's close to death. All right, Okay. So let's just save this first of all and make show its upper and correctly refresh the page . And what? Here you go. Welcome to this website. I hope you enjoy your state. Now, if we wanted to output this text on other template files, typically we would need to copy this block of cold and paste it wherever we want to display it in. However, by writing a function, we can make this job a lot easier and make the cold a lot more clean. So what I'm gonna do right now would be to show you how you would write a what, Chris function to display this text whenever we call it. So to do that, I'm going to open up the functions PHP file. Keep in mind that typically usually functions of PHP is where you would find the functions that make up a wordpress theme. Let's come down in here and what I'm gonna do would be to add my comments first of all and say custom function, one aesthetics. And now what I'm gonna do is to light the name function. First of all function right? And I can say add on the school greet in. That would be the name of the function right now. Black hats. And then my curly bracket opened up. I am going to close the PHP tag and let me just caught this off. We don't need that anymore. Save head of the PHP. Come back in here right now and paste a block off code and out down in here. I am simply going to go ahead now and closed the phe block of code use in this closing curly bracket. All right, so what's happening over here? If you have expense with PHP, then you definitely know why I had to use the college bracket and all that. But if you don't know Linda's quickly explain to you there is not. Why I have this color bracket opened up in here is because in programming you can never have html code directly inside off an open PHP block off code. You can have it recalled inside of an XML code. That's fine, but you cannot have html inside off a PHP code right now. If you school all the way up. You can see we do have the opening PHP tag over here and it never close this up until the very end here. Now, the reason why I closed it is because I am now writing out some pure HTML, which is the day of classical where com blah blah, blah. But above all that is HTML. So I have to close the PHP attack first of all before I can make out this extreme ill. Now, the reason why I do have this cola bracket opened, though, is to indicate that this HTML code is actually part off this PHP function. That is why I have the college break it open. And of course, whenever you have something open, you should close it on us. Of course, if it's the main PHP are tag right here typical in WordPress and it functions that PHP Most developers will open up the PHP code, but they will never close it. McCabe cell. Let's come all the way down here. So over here right now, I had to close the college bracket that I opened up over here. And that's why I had to open up. The PHP called again so that this color back it will be recognized as PHP code. I hope you got that. Feel free to reach out to me if you don't understand what I did there. But we've now added a function. Its name is our cretin. Let's save this. So now what I can do will be to simply come over here right now. And instead of writing all that cold, I can just say PHP and then add on the school greets in brackets, semi colon and enclosed that. So now we have a function right here. Let's save. Let's go back in here. Let's refresh the page. And there you go. We have a text. So if I wanted to display this great in at the bottom of our post or page, I could just copy this function right now. Go, Teoh foot of the PHP. And then over here I can just paste up, look of code as well Save refresh the page. And now down here, you can see we have the same function calling out the text that we've created. So congratulations. You've just created your very first custom WordPress function. I know it's very basic. Don't worry we're gonna write. Ah, lot more advanced functions as we progress. But that's it for now. Thank you for watching. I will see you in the next class. 14. The get template function: alrighty. Welcome back. And while when the topic or functions, let's talk about one function that you are very likely going to find in many what press themes. And it's also a function you might want to use when you're building your very own what purse theme and that is the get on the score template on the score part function. Now this is a function that allows a theme to reuse the same kind of cold, indifferent template files. So rather than having a huge chunk of code in one single tempted file, you could pick up the cold into, let's say, two or three different template files and then on one main temple for you can call in all these code from all the other template files. And what am I talking about? Let's take a look at the note pad plus Plus, let's take a look at our template theme directory rather active directory, and I'm gonna open up index dot PHP. All right, now, let's take a look over here. We do have the function right here. Get on the score template on the school part, and then inside, we do have instead of the buckets we do have some text, and we also have something very similar down here as well. So what's happening? What this means is we are telling the world press at this point right now to look for a folder called Template Parts and then inside off the Template Parts folder, look for a file called content dot PHP. In the second example of I hear it's very similar. Look for a file called Content Dash non dot PHP inside of a folder called Template Dash Parts. So let's take a look right now over here to the right, where we have off into victory. We do have template dash parts fold up just on the North Philly Outs folder, so even open it up right now, you can see that we do have four different attempted fans. We have content of PHP content, national controversy page content, Tash search. You will know that there is a difference between the content of PHP and the rest of them. The difference being that contents told PHP doesn't have an extension. It doesn't have an extension like the 2nd 1 it has known, or page or search. The 2nd 3rd and fourth files all have extensions, non page search. So the reason why this particular format over here is different from this one is because the file they are calling over here doesn't have an extension. That's why you have get on the score post on the school formats. So this basically simply means that just look for a file called content dot PHP. But in an instance, we had the file well, looking for doors have an extension laver than to get on the score Postal score format. You're gonna have the name of the extension right over here after the coma. So in an instance where we wanted to call, let's say, content content, ash search, we would look for a temple part known as template dash parts for slash content and Dan comma and then search, and so on and so forth. That's basically how the get on the score template on the score part function walks. So rather than having all the cold for our content, PHP, which is a conservative now, it's quite a lot better than having all of this inside of index dot PHP. We can simply pick up the code, put it in connected PHP and then in our index dot PHP we can simply use the function, get on the score, tempted in school part to call in the contents off our content dot PHP. Now I want to show you something over here from the what personal victory. Let's come down here. Let me give you an example. So they do have different examples over here as well as you can see. But I wanted to show you one in particular and all right, so you can see right here. We do have an example with the theme. So folders So it simply say, is that to use this function with some folders in your symptom victory are simply prepared to fold in a before this log. And so, for example, if you have a folder called Partials in your thin the Victory and a temple part called Content that paid paged a Ph. B. This is exactly how you Dwight the function as you can see. So if you want to practice this, you can go ahead right now and try calling the contents off the page, dash full with the PHP. Put this particular file inside off the templates till the parts folder or you could even create a separate file completely are you can put in some text inside out file and then try calling that file using the get on the score, tempted on the scope at function if you want to. But of course, later on, we will be taking a closer look at this function as we begin to build our what person themes. So that's it. Thank you for watching. I will see you in the next class. 15. The WordPress Loop: let's not talk about what is the most powerful and the most important function in all of what place and that is the warp twist you up. This is the function of responsible for this plane all the content off your posts, your pages, your custom post types and so on and so forth. So without this function, well, the old pistol upside will basically be known existence. So it is very important to understand how do what press loop walks and also how you can customize loop to serve you because it is a very, very powerful function. Now I want a festival show you the standard way off, Right? In this function, there are different ways how you can write this function, how you can write the look. But the standard way is what we have over here. Okay, we have if in brackets have posts and then while have posts the post Now the question right now is what does this mean? What exactly is happening over here? I'm gonna try and book you down to you in as simple of off a manner as I possibly can, OK, because I know it can be a little bit complicated. For instance, first is the function right over here where we have if and then in pockets have on the school posts. What's happened here is what presses check in, first of all to see if there are any posts to display. That is the very first correct hairier that needs to be satisfied. You can't display contents of opposed if you have no post in the first place. Right? So it first of all checks to see if we have posts. And now over here we have the second criteria saying while half posts. So we've checked to see if we have a post, and okay, we do have a post light. Now, while we do have that post display the contents off the post, that's what the third are. Some function of my hair is doing its implicit. Okay, right now says we have posts. And as long as we continue to have posts, display the content off that pose, that's basically what this line off coat is sane. Let's take a look at some real life examples. I'm gonna bring in no pad, Of course, as always, And I'm gonna open up index dot PHP now. Right over here. You can see. Start the loop. We now have. Actually, it's settled over here where we have ive half posts. And then we had some text. And now down over here, we do have while half posts the post. This is a loop walking over here and let me just say something right now. It is very, very important that your index dot PHP is linked to your WordPress loop the world press Look, most building to your extra PHP one way or the other, you can either have the loop directly inside off the index dot PHP or you can have the loop in another template file, but make sure that template file is called form the index dot PHP very, very important. All right, we'll talk more about this a bit later off course, but I can say right now that in index up a tree, we do have to loop berry mind to that, we can have the loop in other places as well, not just index dot PHP. Come over here to page dot PHP in here again. You can see we have the loop over here as well, so we can have the loop in. Several are different template files. And also keep in mind that the loop is responsible for this plane contents off our pages as well, not just posts. You used to look for your posts for your pages. And if you also want to create custom post types, you would also use to what press loop as well. So join me in the next class available when I'll take a closer look at how War Press uses the loop to display contents off our posts using something called the Template tags. 16. Introduction to WordPress Template Tags: welcome back to the course, and so far, so good. We're get in l a bit better at understanding how what press works behind the scenes and in the previous class, but talked about the WordPress loop. And when concluding I said that what press uses or whether the weapons will be uses something called template tags to display content on our website. So what exactly all these template Todd's well template talks are like inbuilt functions that come with war press. And they are used to either retrieve the attributes off a particle, a piece of content, all display that content itself. So whenever we're displaying things like the title off a post the dates a Post was published the thumbnail, the content, the author of the Post Information like that, we are using template tags to display all those kinds off information. And let me just give you a very quick example. Let's bring in Mr Note pad over here, and I am going to go ahead right now and open up. Hi, index dot PHP. And let's see what we have over here. All right, I'm gonna go to tempered parts content and, of course, open up the content of PHP file. Now, as an example, you can see over here we have a tag called the title. You can see like that This is what what person would used to display the Titou off a WordPress post? Because we have a tag the on the score title. And if you scroll down over here, we have what we have the on this core content. This is the tag what Chris would use to display the content off a post and so on and so forth. So whenever you see a featured image on the world press rep side that content they accept know that behind the sense war press is using tempered tax to display those information. And you should also keep in mind that in general we have two different types off template tax. Depending on where the opposition, we have template tags that must be inside off the water s loop. The reason why the content and the title is walking right now is because they are technically inside off our what crystal beautiful started over here. If you came outside off the WordPress loop. Let's if example I just over here right now. and over here if you just said something like PHP Ph. B the on the school title and they do that nothing is gonna happen over here. Because what press does not know what you're trying to do? You're saying OK, the title. But the title off. What, exactly? This is not inside off the loop. If this tag was inside the loop than what person knows that, okay, you are calling the title off this post or you're calling the title off this page when you have such attack outside off the WordPress loop Waters doesn't know what to do with it. On the other hand, there are temple attacks that you actually use outside off the WordPress lip. And a very good example would be the get head up. Get Heather is a stand alone. You can call get header anywhere besides inside. Of course, you can call get header inside of the look, OK, but you can call get header anywhere as long as it's outside the loop. So tag like get on the score header Get sidebar. Get foot. Are all these tags are called outside off our press clips soap, just to give it a quick recap. You can either have tags there on inside of a wordpress loop or you have the tax that want outside off the WordPress. Look, now, there is a very fantastic link over here. The temple attacks from the workplace. Codex out highly encouraged to spend maybe five minutes just to go through this. And you can learn a little bit more about template tags. You scroll all the way down here right now, and you can see we do have the general tags that are called simply called outside off the WordPress loop. You have the author tags, but now it down here. You can see we have category tags. Comment tags. We have linked taxes. Well, now we have posed talks. These attacks useful. WordPress post. So now you can see things like the next post link. Next posts link. You have three category. You have the content. The except the tags. The title you have, you have you. You have the dates. You have the time and so on and so forth. So all these tax here can be used in signed off the what personal to display So more content or information about a particle out what Press post? So that it a very brief introduction to template tags. Germany, The next class, We'll we'll take a closer look at this template tags. 17. Inside Template Tags: welcome back and we're still on the topic off WordPress template tags. Now, if you had the chance to take a look at some of oldest tax that we have in here, you might notice that there are talks that appear to be very similar. An example. Being where we have the author attacks, we have the on the school also. And then we have the next act, which is get on the school of the on the school author. Now, you might be thinking to yourself, OK, what exactly is the difference between this too? And it's not just the author attack. There are other tags around here where you have, Let's see, we have some other similar examples. We have stuff like the Perma link, the underscore paneling. But then we also have get on the score Perma link. And if you're the examples like that now, whenever you see tags like this, Okay, just keep in mind that when you have the and then on the school and then the name of the tag, all of that tag is doing a simply displaying that particular piece of content. So the underscore author will display the name off the author. The on the score title will display the name off the title and so on and so forth. However, when you have gets underscore what that tag is doing, it's not just displaying the content. It's not just gonna go ahead and display the content. It's actually going to retrieve the attributes and properties off that particular piece off content, meaning that you could use such a tag to modify the way that particular content is displayed. No, I let me take that again when you have the on to score and then the name of a tag. All that temple that is doing is displaying. It just wants to display display display, that's all. When you have get on the score, it's not going to display the piece of content outright. Rather, it's going to retrieve the content for you to modify. You can then go ahead and modify and say, Okay, well, I'm going to display the title of this way. I would like to add some stuff in here, make some stuff right there before we eventually display the title. So, in a way, if the tax I have get on the school are more powerful because they give you more options. We also use such tax. They get on the score tags. We use them whenever we're writing functions as well. So if we wanted to write a very special function in our functions that appear to be to do something spicy with the name of the author or the title of our post, we would use get on the score, the owner Scott title, or get underscore the on the school awful and so on and so forth. So that's kind of like the two major differences between V on the school and in the name of the tag and then we get on is called the on the School name of the tag I have been saying lots of underscores on getting kind of tired. All right, all right. So let me show you some of the few things. Let's take a look at the only school awful. Let's just click inside now whenever you're taking a look at the actual description off tags. Actually, this is not a really good example. Let's go back. Let's look for the on the school can agree. Let me click on the other school category right now, Not many times. Whenever you're trying to read up on a particular tag, you will have the description. First of all, telling you exactly what the attack would do. End if the tag must be used instead of the loopy will also be notified. As you can see right here next up, you will have the usage. How will you use this tack right now in here? We do have a classic example. The only school category and then inside. Guess what? We have three different parameters. Perimeters are additional things that you can add to spice up the way that our tag will display whatever it is that it's this plane. So in the case off the underscore category right now you can add a separate. It'll and usually this parameters can either be in from off a string which would be text or any form off an integer which would be a number. All right, don't worry. We will write lots of functions as we go on. So you will get a better idea of how this is actually what you can see right now. We do have three permit as we have the separator which you can add. We also have appearance, as you can add as well. And finally you have the post I d. Would you be deposed? Added to retrieve categories. And if you don't add any of Elvis force on this separatist that are optional in this case, all three optional. As you can see, what place will have a default value that it would use in such an instance. All right, so many a time whenever you're dealing with the on the school, the name of the tag most of the time they parameters that come with it are usually optional . You don't have to add any permits at all. However, many times when you use the get on the score the on the school name of the tag very often you would have to have at least one permitted that is required for you to fill in. So again, no worry. As we progress, we're gonna be dealing with lots of tags who had functions that you'll get more constant toe how this tense actually work. But for now, I just wanted you to understand the major difference between the get on this going beyond the scope of the tag and then the the on the school name off the tags and also understand what are permitted are whenever you're dealing with template tax. So as usual, if you have any questions about this, you want to learn more. You confused. I always feel free to reach out to me. Thank you for watching. And as always, I will see you in the next class. 18. Introduction to Conditional Tags: still on tags. And before we move on to something else, I wanted to quickly introduce you to a very special branch off what first EMP attacks. I'm talking about conditional tags now. Conditional tags are extremely useful because they allow us as a fin develop art. You. First of all, check to see if a particular condition all requirement has been satisfied before we go ahead and do something. So we do have lots of different kinds of conditional tags. You can have attacked to check to see if a user is currently on the front page. Off your site are we have tax to check to see if a user is currently viewing a particular post. You can even check by the Post I D or the posts log. I can check to see if a particular post is Harry. Cool. You can check to see if you're currently viewing a sticky post. You can check to see if comments are allowed and so on. And so, for lots of different kinds of tax out there, you can check to see if a user is kind of looked in. You can check to see if a person is actually viewing your site on a mobile device on a deck stop. So there are so many conditional tax out there and they are going to be very useful for us when we're building often because sometimes as a theme, develop our you might want to. First of all, check to see if a particular action is being carried out before you go ahead and display something. So always give this in mind conditional tags we have them available to use whenever we want to make sure that a particular requirement or condition has been satisfied before we do something. So we're going to use them as we progress and the course. Thank you for watching. I will see you in the next class. 19. Exercise Dummy Content: already. So far, so good. We have learned quite a lot already. We've taken a look at the template hierarchy. We've taken a look at page templates. Other what? Purse looped template tags. Now it is time for us to put all of that into practice. We're going to go ahead now and build a simple page template, and we're going to walk with a costume WordPress loop as well. But before we do all of this, I want you to go ahead and create some content which we can practice with. No, you can see. Right now I have created three posts post one post to post three. I also have three different categories books, slides and videos. Each one of these categories must have one post at least. Okay, So you can also go ahead now and create your own custom posts. Take a look at what I have over here. I do have some dummy content, some dummy text, and I got that from this upside. Lower him. Ipsum dont pay bangle DK. You can get some texting here if you want to. I also have featured images for each one of the three posts as well So go ahead now. Create three different posts, give them titles, quit three different categories. Make sure that these three polls belonged to one of the categories. Ad featured images as well, and I will see you in the next class. 20. Writing a Custom Loop with WP Query: all righty. So hopefully you have gone ahead to create your custom content. And what we're gonna do right now would be to create a custom page template will be used to display the contents off our block posts using a custom. What Press loop. So, in other words, we're gonna create our own vision off the block page where you normally find are the contents off your WordPress posts? So first of all, before we do that, we need to make some slight adjustments to our current site some slight adjustments to the design. Now you can see that all our content is bombed up to the sides off our screen, and it basically looks really believe off. So what? We need to do it. And it would be to add some pet into our body tag. So to do that, let's begin. Ital pad! Let's go to our style that says this template vile about our style that says his file. And I'm gonna add some padding to the body tag bite here pattern of 10 pixels and 50 pixels . So what this will do would be to add space and of 10 pixels to the top and bottom and then 50 pick sources left and right. So let's save it. Let's go back in here and let's do it hard. Refresh. And now you can see we now have some pattern at the top left, right and, of course, at the bottom as well. Now, if you refreshed and you didn't see any change, that means you have a cash in issues. So please clarify your cash from both your Web hosts. If you're developing in a life site and also your Web browser's cache as well, let's also open up Hedda. And for the PHP, let's remove the custom functional revolt, the add on the score, grit and function. Let's remove that. Students came to a head of PHP backspace safe. Go back in here with fresh and awesome. Now we're good to go, so let's go ahead and create our custom page templates. We should be used to output the contents off a block post. Let's like, click quickly file and I am going to name this guy Paige dash blawg dot PHP. Let's open it up. And of course we have to name this tempted file. So let's do that Templates name, and I'm going to call this custom log hysterics. Let's close it. Save Let's go to the back end off our sides. I'm gonna quit a new page and all name that page content, post content pulls content for the title and attempted, of course, will be custom block. So that's published. Let's view the page and there you go. So obviously it's empty because we have no code in a costume Blawg template file Both we have successfully created our page templates, so now we can begin to add some code and let's go ahead. And, of course, add First of all, the header and footer get on the school, Hedda and of course, the footer. Every website needs a head and everyone's in its head and feet, head and feet like get foods up safe. Let's go back in here. Let's refresh the page. And there you go. We now have ah header. And now we have our Fouda. And of course, we can now begin to add the contents for our what press posts. So I'm going to jump over to where we have the loop and I'm gonna copy this code right here . The custom about that day What? Press loop cold. I'm going to copy it. Let's copy that. Let's come in here right now. And in between the head and Fouda, I am going to paste the loop. Now remember that whenever you're dealing with loops, you have to close them. When you open up a loop, you have to close the loop as well. So we need to close the while function. And also the if functions as well. So to do that, I'm open up a new PHP tag Ph B end, while so my colon and an end. If so, this is how you would close the what press. Look, if you don't close your loop, you're going to have your basically gonna crash your web page because you're paid will constantly keep on Lupin! Lupin! Lupin! There will not be an end to so you're basically crashing your site and your page. All right, so we have now opened up the loop and with closed loops. And now they can begin to tell what press what content we want to display. Specifically, What I'm gonna do would be to output first of all the contents off the title. So let's use the template tag PHP the underscore title. So if this works, we should see the titles off all our three posts. Right? Let's wrap it up in an H one tag each one so we can make the titles really big. H one safe. Let's go back in here. Let's refresh the page. And oh, all we have here is simply the title off our page where the titles of our posts. Well, here's the thing. Never make the mistake of assuming that whenever what? Percy's this loop right here. This code for the loop Never think that What press things that Oh, this is for the WordPress posts. No, because we have this loop inside off a costume page. Templates. What press things that Oh, you simply want to display the title off this page and not our block posts. If this was inside of our index dot PHP or are single dot PHP ward personal automatically automatically recognize that Oh, you want to display the title off your blawg posts. But because this is inside off a custom page tempted Walker doesn't think that way. Always remember that because this is inside of a custom personal. We need to tell. What is that? Hey, this loop right here is meant for our block posts and not up page. So to do that, we need to create a costume. What? Press loop? We can do that using a very powerful function known as the WP on the score Queary function . This is a function with which you can customize How the what? Press Luke walks. You can tell what purse To retrieve the contents of your pages. Which of the contents off your posts. You can tell workers to retrieve contents off post that belonged to a very specific category and so on. And so far, there is so much you can do using this very powerful function. Right? So what we're gonna do it now would be to create our cost of loop. Tell him what president? Hey, retrieved the contents off our WordPress posts now to do that. What's this? Just above? Let me expand this just above our what personal itself. I am going to create variable called Auxerre. Let's actually open up PHP tag. Or better still, let's do this. I am simply going to remove this closing tag right here. What? I'll just bring it down so we can still add PHP code inside, right? We don't have to open up new PHP tags I'm gonna create in new variable called Auxerre and I'm going to say equals and away Now we're never you are customizing. What? Purse loop. You can add several parameters inside off an away. So instead of the every we can say OK, we're retrieving contents for our posts. These are the amounts off post we want to display. We want pagination too be used and so on. And so far no, What? We will exploded a lot more in the future. What I'm gonna do it? That would be to open up the array and then inside of this away. I am going to say that the post type that we want to call in this case is our press posts. Okay, Post. So right now we have created an away saying Hey for this loop that's coming up. We wanted to retrieve the contents of the post type known ass post. Okay, so let's put a semicolon in here. And now I am going to say query. All right. Query equals new WP on the score Quay V and Then inside, I am going to pass the variable off dogs. Note that this is pretty much the standard way off creating custom war press queries. All right, don't worry again. We're going to explore this a lot more inevitable for now. Just take this as a is. We have created a costume query specifically for our what press posts. So now inside here we have the actual loop itself. We now have to equate thes variable known as quicky to the half posts. If half pulls will have posed in the post functions. So let me copy of this and right in here I'm going to paste, and I'm going to equate that to have posts the seeming here as well. That's what I though, and finally in here as well just do the same. So right now, these custom query has basically taken the place off the post half posts and then ah, half post in here as well. That's what we are currently calling right now. So let's go ahead and save this. Let's go Teoh post content for festive page. And now you can see we have our titles off our posts displaying because again we have created a costume query for our WordPress posts, and we're now calling the title off each post using the template tag. If this sounds confusing again, you know what we were going to explode. It's a lot more individuals you'll understand better. All right, So now that we have our title, we can also display the featured image and do that. We're going to use another template tag known as the Underscore Post on the school. Some nail. So my colon safe, let's go back, refresh. And now we have featured images. Let's go back in here. Let's add one more and this one is going to be for the except the except safe. Go back in here with fresh. And now we have the except off each post showing. So congratulations, you have created your very first custom. What press query we used the Augsburg created in a way, we passed in the perimeter off post type and equity to post. And, of course, we change the custom or personal right here so that the query the nuclear created is being called. We used three different tags the title post Tom Neal and accept to display the contents off our block posts. So again, I understand that this might be a bit confusing, especially especially if you don't have any PHP experience. If you're having any trouble on the state of war with Don't wait here, please reach out to me are more than happy to answer your questions. But for now, we have successfully created our very first custom. What? We're square e German. The next glass wearable. Right? A second costume. What per square? Thanks so much Fortunate. I will see you then. 21. Writing a Second Custom Loop: welcome back. And in the previous video, we successfully created our very first costume. What quests query which resulted in this particular page. We were able to successfully display the tie to featured image and accept off our three different posts. Now, what we're gonna do in this video is to further customize this custom query that we have over here and what we have coin right now is just one parameter inside off our away. And the perimeter here is simply specifying that we want to display content from our what purse posts specifically like. But we can add all the permit is as well we can add permit us for the categories. All right, so in this case, right now, we can say, Well, we only want to display content from posts that belong to this specific category. So let's try doing that. I am gonna bring back Mr Noah pad plus plus over here, and what I'm gonna do is to simply add a comma at the end of our here. And I am going to add a second perimeter here saying category E on the school name, all right? And I am going to choose one off my categories. Remember, I have three different categories. I have movies, books and I believe slights. So right now I am only going to display posts from the category off books? No, and I think it's actually yet books. Let me make sure its Capital B Let's go back in here. Let's go to the back and post categories and it is capital be like books. So let's see what's going to happen right now. I've said that I only want to display opposed from the category off books. Let's save this and then let's go back Teoh Page. So we have post one now, and so that's that really have post one showing because Post one is the only impose that they have that belongs to the category off books. And if I go to the back end, go to categories a while ago to posts, you can see that Post one is the poster belongs to books. The other two belong to videos and slides. But because I have added the new perimeter here saying Onley, display post on the category off books, we now only have post one showing up. So here's another example of how you can father customize how your WordPress query works and they were. All the ways you can even take this customization is step for them. You can also say that well, display all posts from all categories, with exception off these particular category or categories. And you can do that by making use off the minus sign. Here is the example over here so we can use the I D off the character that we want to leave out and then simply add a minus. So let's go back in here right now. Let's go to categories. Let's say we want to display post from all categories with the exception off the books category. So let's get the idea for books and you can see the i d east to down there below the idea. Right? Hes too. So don't come over here right now and say, Well, category name or other, let's go back, Teoh. Close reference. We're going to use cat in this case. I cannot category name, but just cat. So let's go ahead now and say cats, and it's not going to be negative, too. All right, so we're saying display all possible categories except post the belong to category that has an i d off to Let's save this. Let's go back in here, go to a post content and there you go. So now we have post three and we have post to, but we no longer have post worn because Post one belongs to the category category of books , which has an I d off to. So these is just an example of how you can further customize how the what porous query works. You can also specify other things like tags. You can display posts that have very specific tags, opposed him, specific authors and so on and so forth. Later on in the course, we're going to take a look at Texas permit as where we can display posts are content from a specific taxonomy, will take a look at that a bit later. But for now, I just wanted to give you an example of how you can further customize your costume WordPress query using additional parameters. So fill future experiments. You can add tax to solve your posts and then try this plane opposed that match a specific tag and see how that works for you. So thank you so much for watching. I will see you in the next class 22. Writing Multiple Custom Loops: one final custom query I wanted to show you before we move on is how you can write multiple loops inside of your page template file. And we can do so by making use off a function known as the WP on the score we set on the score Post data. So right now, currently, we do have one costume query ritual display all posts from all categories except those from the category that has an idea Off to. Now we can decide to write another costume group just below this one. However, before we can write additional custom apps, we need to reset our post a minute to reset our coin loop. Brother, we need to reset it back to its original state, and we can do that by making use off this function known as the WP on those, Kobe said on the score Post data. So let's see how this is going to work now. For purposes of this particular example, I have gone ahead to create three additional posts, and I've added each one of them to one category. So Books now has two posts, videos has to post, and Slides has two posts as well so I would encourage you to go ahead and do the same. Make sure they have a title, some dummy content and a featured image and a category as well. All right, let's do this. First I'm going to do right now would be to light a costume loop that will display Onley posts from the books category now. So let's do that again. Let's come over here category right now. I'm going to change this to category on the school name, and that's going to be books. No, I Let's Ah, let's festival save this. Let's go, Teoh Page and all right, so I have post six and Post worn. These are the two posts that belong to the category off books right now. What if I wanted to write a second custom curry that would only display posts form the category off slides? Let's do that. Gonna bring this guy back in here, and what I'm gonna do is actually over here at the very top. All right, I'm going to add a comment, and I'm going to say this Play posts from the books. Catty goalie. All right, Now, just at the very end off the actual loop. It's over. We have the end If I am going to bring out the function PHP WP on the school we set on the score Post data All right, There you go. So right now this is the very first costume Looked up with Britain so we cannot go ahead and write a 2nd 1 So I'm going to do and it would just be to copy this. All right, let's jump down over here and paste everything all over again. Let me open up my PHP tag right over there. All varieties What I'm gonna do. What? No, Just to change this to slides, let's go with slides. Change from books. Cata Great. Now changed onto slides as well and we all good to go. However, what I want to do will be to add some HTML. So let's do this just above the h one title. What we have over here, let's changes to an each to Actually, it's tender to in age too. H two and now in h one, I'm going to say books category. Let's close that each one and we'll do something very similar here as well. Make this on h two. Make this in H two numbers copy of this entire line. Come back down here. And of course, we're going to say slides, category, slights, category. Save. Now that's what's going to happen. Refresh the page And there you go. We have the books category, but the 1st 2 posts. We have books category in here as well, and I'll down in here. We have the slights category repeating slights category, and we can actually do this a lot better. Rather than having the category names constantly repeating for each post under that category. Let's do this instead. All right, let's remove the H one from outside of the loop so we can paste that just above the actual loop itself. So we have 81 right there, and we have the same thing in here as well. Let's remove that one, and that's pitted over here. All right, so what we don't right now is to be moved, the html indicating the name of the category from our loop. So right now the names off the category should display on Lee wants Let's save Go back in here again. Refresh. So now we have books category. We have post six with the official image. Some texts. Now we have post one same thing with the slights category. It's showing only one sweater because we have removed the HTML from our loop. So I just wanted to give you an example of what happens whenever you place instead of content inside off a loop to constantly repeated content for each post inside off that look , let's go ahead and write one last custom loop. So what I'm gonna do it now will be to copy everything all over again. Let's copy that. Pace that down here. And right now, I am going to change slides here, too. Costs home category. What custom category. And I'm going to see this play post from ah categories. All right, now I'm going to remove what we have over here. Category Name off slides. I'm going to remove that. Let's open up a new line. What? I'm gonna say what here would be posts per page. This is another perimeter posts per on the score page, and I am going to say just V no, and let's go with three. Okay, so what we're doing right now is we are displaying post from all categories however, we're all eager to display we off them. No, I So let's save this again. And now let's were first the page And now let's go old way down here where we have our custom category. So we now have post six. We have post five and now we have post full. Each one of these guys are from the three different categories. So this is just an example of how you can be right Custom loops over and over again. You just have to make sure that you employ the use off, the WP on the Scobie said on the score post data function. So this kind of various full. If you're trying to develop a theme that is designed in such a way that may be on the home page, you display the 1st 5 posts of a specific category, and then in the next section you display the next five post from another category and so on and so forth. So it is a very sore function to be aware off. Thanks so much for watching. As usual, if you have any questions about this, you're not. She'll what's exactly happening again? You have to ask Okay, Ask questions. I'm more than happy to answer them. So thank you so much for watching. I will see you in the next class. 23. Creating Hyperlinks from Post Titles: all right. So the next time I'm gonna try and do here would be to create a hyperlink from the titles of our posts. So right now, if anyone tries to click on Post six as an example, nothing's gonna happen. If they tried to click on, say, post one, nothing will happen again. So, ideally, whenever anyone clicks on the title off our post, it should take them to the individual page for that particular post. And even right now with the excerpt over here, all we have are three buttons and you can't even click on them. So we need to create links associated which each one off a post so that whenever anyone clicks on those links, it will take them to the individual page for that particular post we're going to do in this particular video would be to create hyperlinks from the titles off our posts. I'm gonna make use off a function which is the Perma link, And I couldn't to the Codex it say's it displaced your bill for the paneling to the post currently being processed in the loop. So what I'm gonna do is very simply, I'm gonna school the way down here. I am going to grab this code on the ah use as link with title tag. So this is the code you can use to create a hyperlink from the title of your posts. So I'm gonna go ahead right now, and I'm going to grab this. Let's copy that, and I'm going to jump to my note pad. Plus plus, Lindows, make sure that the connection is still working. So sometimes I do have issues with my note pad plus plus, sometimes it you'll lose connection to my database. But anyway, what I'm gonna do here is I am going to overwrite this cord right here where we have the PHP. That title. I'm going to live the H two tags as they are. No, I'd so I'm just gonna go ahead and overwrite the title and then paste the new code that we have written. So then just create some space over here so you can see what's really happening. All right, so we have that. I'm gonna go ahead right now and save this. Hopefully the connection has been restored and Ah, good. It looks like it's uploaded. Awesome. Let's go back to my page refresh and voila! Now, if I click on Post six, guess what it's gonna take me now to the individual page for Post six. We can read the full contents off the article. So here we have successfully created hyperlinks from the titles of our posts. Now, how did we do this? The first known Did you understand? Is that over here from post 63 things are happening right here. First of all, post six, which is the title of our post, has been displayed. That's one. Number two is the fact that post six is now a link. And then number three is the fact that when you click on post six when you click on the link, it will take you to the individual page off that post. So three things are happening in here and I'm gonna explain to you how those things those three things are working in here. First of all, we have the title. This is what's displays post six. This is what displays the title off the post, and then the a draft tag over here is what creates the link for that post. And finally the Perma link, which is embedded in side of a tag is what actually makes that link go toothy individual page off that post when it is clicked on my Now this final piece of copyrighted the title attributes. You can ignore this. You don't even need to add this in your piece of code. It will still walk all the godless. So that's how to create a permanent link from the titles off your posts. And what I want you to do is to go ahead and simply do the same. Four. The Post under the slights category and finally the post under the custom category. So all you have to do, just go back to your file and then just copy and paste the same cold just overrides Patriot a title under this last category and then do the same for the custom category as well. So that, I think, is much for watching the video German. The next class we'll show you how to customize the except 24. Customizing the Excerpt: in a previous video with successfully created a hyperlink from the titles of a Posts. But now we want to do the same for the read More Link. And in fact, we don't even have a link yet. Right now, if anyone clicks on the three dots over here, nothing happens. So we want to change this. Want to make sure that we have a read more link of a header. Whenever anyone clicks on that link, it will take them to the individual post for that article. So to do this, I'm gonna jump about to my functions. PHP Let's call all the way down here and Oh, look, it's the very first crossing functionary wrote back if you a few videos ago. So what I'm gonna do is I'm just gonna write all this. We don't need this anymore. And I'm gonna paste some piece of code in here, which I'll show you in just a second What this means. Let me go ahead and save this. That saved Awesome. Let me go back to my page with fresh. And there you go. Now I have the weed more link, and if I click on it, it's gonna take me to the individual page for that post. Awesome! Awesome. Awesome. So what's happening in hell and explain Now we have our function first of all called Tasco on this core customer underscore except underscore more that is the name of a function and an inside. We have the variable more No global post in here. What this implements is apply this function to every single post that we have on our website. That's what we have seen this and then return. What is it simply doing is it's now displaying whatever we have in here. So now we've displayed the more link we have a class which is more link. And then we've displayed the Perma link All right, the Perma link associated with the post and then read more in here is the test is the text that would actually be displayed whenever anyone tries to click on the link. So that's what's happening in here. And finally we have the ad filter function. Filters are basically functions used to register other kinds of functions. And what presents one way off the square Been this so you can modify, read more to say, for example, are learn Mawr, Whatever. You can change the text in here to whatever you want to display. So that's exactly what's happening in here. Now, the next I want to do. Actually, before I do that, I'm just show you one slight problem. There is no space between the last word off the accept and then the weed more link. As you can see same thing in here as well as you can see. So one very simple way to fix this. You could do this with CSS. But a very simple way to fix this would be to go back to our function and ever you have return after the very first cold to just simply ad space. Save this. And there you go. So it's no safe. So let me go back in here. Let's see what we have. Let me refresh the page. And there you go. Now we have a space between the last ward and always more link. One final function I want to show you is one that will dictate how many words are actually displayed in our except to do this. I'm gonna grab this piece of code right here. I'm just quickly grabbed this piece of code. Go back to my note pad and I'm gonna go ahead and paste this right here. So this is a very, very straightforward function. It's called the Tasco On the Score Customers core acceptance, Colin things every Hedlund variable and it says return 45. So all this is sane is for the except to return 45 words. That's how many words you want to display. Save one of the 100 words. Just change for the 5 to 100. Let's go ahead and save this. Let's go back, Teoh Page, I'm gonna go ahead and new first this page and voila! Now you can see the number has reduced from I believe it was 60 words I believe to now 45. So in this video we have successfully made two changes to accept of quitted the read More a link And we've also ensured that only for the five words are displayed from our Except you will find this piece of code in the resources file. So please check there If you want to use the exact same could have written in here. Thank you, Fortune. I will see you in the next class 25. Creating a Custom Image Size: all right. So the next challenge here would be to tackle the image says, is that we have for our posts and you can see the proposed six. We have this incredibly lodge image, and in a foot post one, we have something smaller, and then post four has something even smaller. Post three. It seems to have the same size that's supposed to four and six has something incredibly large, as you can see. So we're going to do here is to create eight a particular custom image size that would be applied to every single image on page templates. Not to do this, we're gonna make use of a function called the ad image size. One thing to keep in mind is that whenever you upload a new image to your media library Ah , what press by default will create three additional sizes. So I come down here to settings, go to media. Over here we have the funnel science. We have the medium size, and then we have the large size. These are the three D full size. Is that what possible could eight for every single image that you upload to your media library? So I wouldn't do. Hereby, decree ate a different custom image science. We're gonna make use of dysfunction, ad image, science and for the permit. As you can see, that we have a string which would be the name off that image. Science and I will have to take the with and the height off the image size and and finally , beacon dictates whether we want to crop that image or not. So if I hear them school all the way down here, you can see some examples. Oh, by the way, are we have reserved image size names. So you're naming your custom image size. You can't use words like thumb thumbnail, medium, large or post thumbnail. These are reserved for WordPress, so we're going to create your own custom image size name. Make sure you don't have these words in it. Over here right now we have an example. She gets it right now we have one that says academic science custom sizes the name off the image size and then we have 2 20 foot with 1 80 for the height. And then that's also this is gonna be a soft club, the next one here we have true true his implements that you want you hard coop that image. So usually when you're cropping an image, that means you're gonna cut off part of the image. But if you're not coping it, then they're simply going to skill the image down to the with and heights that you have indicated. So it's important to understand the difference between copying and not Coppin off an image . So what I'm gonna do here very simply, Let's just go ahead and copy this. There's copy. What is what we have over here? Skopje This Go to a note pad and let me we establish my connection to my server. All right, when I'm gonna do is done here. I'm just gonna pace that and let me add some texts to indicate what this is. This is going to be the custom. Ah, image sighs. All right, then, for the image itself. But I'm gonna do is I'm gonna change this to, let's say, post size post size will be the name. And then from 2 20 let's make this. Let's go with our for 50 and then for the heights. Let's make that 300 just as an example. Okay? I'm gonna live it as it is. Let me say this. Okay, that saved. Now it's one thing to create the new image size. It's another to actually use this image size two. So to use this will have to go to our page blawg. And where we have the post thumbnail in here inside his courts. Is that his backers? As we're gonna add the name off the custom image size. So I'm gonna go ahead and say post size So essentially, what we're telling what press here is that whenever you display the post thumbnail, make sure you display it using the post sized the primitives that we've indicated in the new post size Costa mimics says that we've just created. So I'm gonna do the same for the other categories as well. A post thumbnail that's and coats in here. And then we have post sighs. Let's go back up here as well, But we have the post UNMIL. Let's add post dash size. All right, let's go ahead and save this and let's see what will happen. So it was safe that lets now go Teoh page, my blawg goto a custom page or that post content Let's refresh and well, there you go. Now you can see that every single image has now changed to the size that we have just created. That's exactly what we have done. So that's how to create a custom image size for your images for your featured post thumbnails. So thank you so much fortune to video. I will see you in the next class. 26. Hard Cropping Images: Okay, So in a previous video, we successfully added image size and we crop down all the featured posts for images. However, there is a bit of an issue and it might be difficult to notice this, but all the images don't have the exact same height. They have the same with, but they don't have the same height. Never inspected the very first image here, for example, you see, it's for 50 by 300. However, the second image here is for 50 by 2 70 year. If your school all the way down the next one is for 50 by 2 81 next one is prohibited by 300 extends for 50 to 75. So not old images have the exact same heights. They all have the same with, which is good, but they don't have the same height. Now, these can be a problem for the down to vote when you begin to apply, see, assess in a situation where you want your posts to appear are side by side. So maybe you have two posts on one line, and then the next thing you have to post stuff like that, that can be a bit of an issue. And this is why sometimes it is better for you to had crop your images. What we did in the previous video was a soft court, because already it was to add for 50 by 300. And that's it. When you do this, what personal ultimate automatically decide the size off The featured image based on the parameters were provided. However, where you add a hard Klopp, you are telling what is the look? I don't care how you do this. Make sure you display the image for 50 in with 300 pixels in height. And to do that but we're gonna do is to jump over here and you can see the examples. All right, so if you say true, this is gonna Heart Corp the image use into 24th with 1 80 for the height. But you can also determine how you want waters to crop that image by adding an away and then saying left top. So this goes right there in this example right now, what person will crop your image for the left and from the top? But what we're gonna do is to simply say true meaning We want Waters to crop the image to the exact size off for 50 by 300. So let's do that. That's an a coma. Let's make this true. Let's save this and it saved. All right, so now let's go back. Teoh Page, Let's refresh the page and all right, so let's take a closer inspection of what we have now. The 1st 1 is still for her to buy 300. The next one is still 4 50 by 2 70 for 50 by 2 81 for 50 by 300. So you can see right now that the change hasn't actually occurred. Even though we've come in here, we've said Look, make this true. We want every single image not to before 50 by 300. War press has refused to do that. What's happened here is that war press cannot automatically implement changes to our custom image size just like that. All right, it cannot do that. What we have to do is to do something called regeneration off thumbnails. So basically, Ridge initial means we're telling, What does that look? We have made a change to our custom image size. We now want you to hard core but images, too, for 50 by 300 by regeneration telling workers to create a new version off every image that will be specifically before 50 by 300. So that's what is called regeneration. We're gonna make use of a plug in to do this. So, Jimmy, next video, I'll show you how to make use off this plug in. 27. Regenerating Thumbnails: in a previous video I took the about are needed to originally thumbnails, and we're gonna make use of this plug in, which is very generate. Thumbnails by Alex Mills, a k a. Viper Double 07 Bond. He must be a James Bond fan, but you can see right now the description say's This is just also situations such as a new thumbnail Size has been added, and you want past uploads to have a thumbnail. In that size, you've changed the dimensions of an existence thumbnail size, for example, by Satan's media. Or you've switched to a new what press theme that uses featured images off eight different size. So these are the scenarios where this book, it would be useful and I want particulars never would be both can fall into balls Scenarios one and two this to ones right here. So I have already installed and activated the plug in. Please go ahead and do the same for having the same issue. So here it is, right here. Region and thumbnails. Now to you walk with the plug in, I'm gonna go to tools. I'm gonna click on regional thumbnails. And just like that, I'm going to go ahead right now and just say originally, thumbnails for all six attachments was Do that which in the weighed where it wouldn't wait . Okay, All don't in six seconds. Okay, Okay. Fingers crossed. Let's go back to our page. Let's wait hard. Refresh and OK, it looks like it's already would can. Good. Let's take a closer inspection. Inspect. And there you have it. The first images forfeited by 300 seconds for 50. Break 334. 50 back 343 by 350. 50 About 364. 50 by 300. As you again See Awesome. Awesome. Awesome. So that is exactly how to ensure that every single featured image you have on your WordPress website is off a specific size. If at the very first time we had done this true coop in where might not have needed to use the original thumbnails but because we added our new custom image size and then we came back to say, Look, we don't want the equipment to be false, want it wanted to be true. We had to tell what press to create new versions of the thumbnail and That's why we had to make use off the regional with thumbnails. Plug in. So that's it. Thank you for watching the video and I will see you in the next class. 28. Creating a Single Loop: I wanted to do something very, very quickly, which would be to have one single loop on cost on page template. Right now we have three separate loops. The very first look displaying post from the books category, the 2nd 1 displaying from the slights category and then the final one displaying, ah, three different posts from different categories. So the next few videos, but working with template tags and but in some CSS as well. So it's gonna be a lot easier for us to walk with one single loop rather than what can be three different looks. So what I'm gonna do is I will stick with the very last if we have over here, which displays posts from all categories. So what I'm gonna do very simply right here, would be to remove all the court above it. Let's go all the way to the top and stuff just very have PHP get the head. Uh, let's a little that I'm gonna go ahead and remove this next PHP tag right here. Let's remove that. And finally, I'm gonna go ahead and remove the post today sitting here as well. We don't need that anymore. Let's move all this empty space. Let's go ahead and also remove the custom category. The H one n here. We don't need this. Let's remove that. Let's change 3 to 6. It could display six different posts. Let's go ahead and save this. Okay? And from here, I'm gonna go back. Teoh. Ah, Page. Let's refresh it. Make sure everything is still displaying. All right, court. So it looks like everything is as it should. Post four post three post to post one. The click on post five Texas to the individual page. Awesome. So we have successfully reduce the number of loops from three. All the way down to warn. So join me in the next class. Wearable. Now begin to insert template tags into our page template. Thank you for watching. 29. Inserting Template Tags: All right. So let's go ahead now and begin to insert some temp attacks into ah, post template And I mentioned early in the course that template tags are primarily used to display information so you could use tax to display the author of a Post the data post was published. A cat agree, display the tags, things like that. So we're gonna do right now would be to display three different kinds of information for each post will display The author of the Post will display the category of the post and then finally will display the date the Post was published. So we're gonna do is we're gonna make use off the fulling tags, lemon school all the way down here, and I'm gonna show you the text we're going to use. We're going to use the author tag righted to display the author of this tag. We're going to also use the category tag to this pretty category of the post and finally the dates. I don't think we have that over here. I don't see it. Ah, Anyway, I don't go Here it is. Here it is Here it is the only school date. It's right here. So those are the three things we're gonna use to display depictions of your permission for our post. So let's go to our template. First things first just after the thumbnail. Let's go ahead and get some space. We're going to display the very first tag, which is gonna be her PHP the on the school author. All right, so let's see how this would actually look like I'm just go ahead and close this tag. Let's save this. All right now let's go back to the post. Let's for first a page and voila! You can see it's right here. It's Starter is the person who wrote this article. This is starters well, starter, but this looks really, really bad, right? So let's make some changes to the template the very first time grand it would be too. Make sure this is an H three so that this is gonna be on its own separate line h three, and then we can also do something like this. We can say written by and then we can also encapsulate this with the E M tags to make it in italics and go ahead and closed out here as well All right, let's see what? How does it look like? Let's save this, Kate. Let's go back in here and let's see what we've done. Okay, now this looks a lot better. Written by is on its own separate language, not written by Starter written but starter and so on. Cool. All right, let's go ahead. And instead the very next tag, which in this case would be the dates. So I'm just gonna make sure it's in HD as well. So we have PHP the underscore dates and then let's close the H three tag. Let's just go ahead and also display the category as well. Let's just do that. So I'll say H three once again And then I will say, Cat catty, gory dash. Let's open up a PHP tag and then the tag itself, which is gonna be the under school category. But I can't send my co along. Let's call it a tag. Let's close the H three tag as well, kiddo Key. Let's say this, Okay, let's not go back to a post. Once again. Let's were first page and let's see what we have. Okay, so there you go. Written by starter August 12 28 Seen This is the category now. This is something that's a little bit and loin. Sometimes you will notice that the category all have bullets. They have the ally tag the stimuli tag, and if you inspect this on your browser, you will see that it's in on a tag. We have the ally, and it's making it go to a second line. So sometimes several kinds of themes will add their own custom CSS to setting kinds of elements like you'll category your list items, so this is very, very annoying, and we'll have to use CSS to fix. This will do that later. But for now we have successfully added three different template tax to display the author of the Post, The Data Port They Post was published. And then finally, the category which the Post belongs to so that you haven't think is much fortunate. Video and Germany Next Class Real will begin to walk with CSS 30. Inserting CSS Classes and IDs: Okay, Dokey. What we're gonna do in the next few videos to be to walk with CSS to make this page look a little bit better than it is currently. Because right now it looks Ah, well, it doesn't look older presentable, right? So we're going to do in this particular video would be to lay the grand walk for some future CSS. And what I mean by this is we're gonna add some HTML tags instead of a template, and we're gonna use those tags in HTML text to design the page. So the very first thing I'm gonna do it here would be to add over here at the very, very top. I'm gonna add a div. Give it an I D. And I'm going to name this the cost. Um, posts. Uh, Paige, all right. And then what I'm gonna do would be to at this as a tab. And then I'm gonna close the Dev don't here. That's the very first I'm gonna do. So right now we can use this. I d this html 80 to specifically target this page by using the i d custom posts page. Now, the next I'm going to do would be to add another div after the look itself. And I'm gonna name this DIV class it calls to custom dash Post. All right, that's also make holders into its Listen all of this into a tab. Let's tap that. Make this look needs and presentable. Let's close this, Davis. Well, all right, so right now we can begin to take it. Every single individual post by simply isn't a class custom post now in here. But I'm going to do we will beat you. Add some classes to the tags. So the written by Let's give this a class off, uh, post dash author. All right. And then the dates We can also give them in the class off post dash dates and then finally , last but not least, h three class equals post dash underscore potash category. Okay, I think we're pretty much done. Let's add a class for the title as well. Just in case H two class, uh, equals the post title. Okay, So well, we have successfully don't. Here is to lay the groundwork for some future CSS. We've added our i d. So we can specifically take this page. We've ended the class of custom posts so we can take it each individual posts and in for the tags. The title. The author did it in category added separate classes for them. So you can take it each one of this individual tags, the post thumbnail. They're just gonna live that as it is for now, if in the future we need to customize it, then we can add a class. But for now, I think we're pretty much set. So German, the next class will begin to walk with some CSS and numbers. Great. And save this before I forget. And voila. Okay, so that's saved. So I will see you in the next class. 31. Working with CSS Part 1: All right. Welcome to what is technically a brand new section where we're going to walk with some CSS to make a content look a little bit more presentable. I want I want to do in this video is to create a layout. We were gonna have basically a sort of a two by three set up. We're gonna have three rows and then we'll have two columns on. The very first rule will have two posts. The next one will have to pose on the final will have the last two posts. So to do this, let's go ahead and inspect my elements. And I'm gonna jump to the very top the main div, which is Alan. Just do this again. Spect elem ent o k. Here we have Dave. I d custom posts Page. Let's go ahead and add some code in here. So first I'm gonna do is to give a set with off 11 50 pixels. And then I would give a margin of zero and then auto so as to try and center the text. Okay? It looks already lived better. Good. Next we not be to tag it. The post classes themselves, so I'm gonna come over here where we have the custom post class and what I'm gonna do is to simply say, Oh, with will be 49% and then to display Let's go and say in line block, There you go all light. So we've achieved the two by three set up. As you can see right now, however, we do have a bit of an issue because the very second post is a little higher than the 1st 1 So that's kind of like this. Stop the alignment. But don't worry. This will be fixed as we progress. The next and I want to do is to create some space at the bottom. Right here. You can see that our text is to be too close to the future. So let's add some pattern to the main div itself. So let's go back to what would you have it? The custom posts page and then in him gonna say Padden and then bottom and, ah, let's go with Ah, 40 pixels, 40 pixels. Okay, this looks every day A lot better. Nice and and finally, let's change the front family and the phone style for a paragraph. Tags inside off post class. So let's do this custom post class custom post and they were gonna take it the P tags inside of them. So I'm gonna say fund family from family is going to be Monserrat. I have this article with months said because I like Monserrat and then the front weights. We're going to give it a weight of 300. Make it a little bit lighter and there you have it. Ah, OK, ok. And as you can see right now, the element has been fixed as a result of the fact that we've changed the phone family and deformed weight off our Texas. Funny how the simplest of changes justices can make such huge differences. Alright, awesome. So I'm going to go ahead now and go to my style. Our diseases file. This is my baby making the changes ups. I'm just try to save that again. Established connections in my Web server. Okay, so connection has been established now in here online 617 just above where we have the at media screen and men with after the some 6170.5 p. M. This is for the responsive design. So it very ending here I'm just gonna add some text and say, No, this is This is incorrect. Let's start from the end here. Let's say custom CSS. Let's close our comments. All right, I'm gonna go ahead now and paste what I have, so let's make sure that is correct. Custom Post Piedmont 7 349% And this looks good. Let's save this. And now let's go back 25 fucks. Let's refresh the page and make sure that the changes have taken effect. And there you go. The changes have taken effect. Now make sure that you have all sorts of Kachin disabled. All right. One of the biggest problems with working with CSS is that if you have a Web browser or if your Web server is cash in any off your data, you will have difficulty. Senior changes take effect, so make sure if you have any cash and plug ins, make sure you disable them. If you have any sort off Kachin system from your Web host, make sure it's disabled, and also make sure to clear cache. Is your Web your Web browser's cache as well. If you want to see your changes take effect, immediately. All right, so that's it for the very first class here with CIA Says thank you for watching. I will see you in the next one. 32. Working with CSS Part 2: all right. Welcome to pots to where we're going to target our H two tags as well as the H three tags underneath the future. The image and finally are least so under the categories. So, without wasting time, let's jump straight to our H two tag right here, which is the post title. So I'm gonna go ahead and let's change the forms. Family here, fund family. We're gonna go with Tahoma Homa just to differentiate it from Monserrat. And then for the front waits. Let's go with 500. I have 500 here. I'm Kate. That looks better already. Next up, let's target the H three tags on a nifty featured image. So we have aged three The Post author It three posts, dates and then h to be the ah post category. So let's go ahead and take it, Everyone off them. And to do this, I'm going to say, Let's go with ah dot custom uh, post custom dash post and then h three. Let me remove the post category class. We don't need that. Okay, So, custom post H three for the front family, we're going to go with Montserrat's as well was going on Syria and the front weights. We're going to make this a little bit darker than three. Hundreds were going to go with 400. Okay. And l m just check my note pad to make sure I have everything. All right? So margin yet. But we're going to reduce the margin as well. There is a bit too much margin in between them. So let's go ahead and remove onset of margins to zero. So we have less space in between them. Okay, that's better. All right. So we have that for custom Post H three and are finally letters get, ah categories on the same line. We don't like this least style. So to do this, but going to go to our post categories. And so first things first, we're going to say this play. We're gonna make that an in line block. Okay, That's an in line block. And then there's lots of imagines and pendants as well. So that's to move any sort of margin that we have. Margin will be set zero, and then we still have some Pettiness. You can see this competitive idea to the left, so I'm going to say pad in left said that zero. Okay, that's good. But finally, we need to remove this bottom, which I really don't like. Solutions go to the airline button Ally element of either the airline elements were going to say, What do we have that we have? The dots, post categories. And then I'm gonna say l I and there's gonna be list style is set to none, and well, there you go. Okay. Let me go ahead now and paste all of this in here. Let's save that. All right, let's come back. Teoh Page, refresh the page. And there you go. Okey dokey. Now, I know this isn't the greatest off designs, but this still looks a lot better than what we had initially. Initially, it was it looked really, really bad. But this is a bit more presentable And feel free to play around with your CSS. If you want, you are center your text. You can do that. If you wanna add some animation, go ahead. And first I'll do whatever you want to do with your CSS. So that's it. We've pretty much come to the end off this course. We've been able to learn about what Chris Lupin. We've written somewhat dysfunctions. We've talked with template tags. We've created our own custom image sizes. And then we've also worked with some CSS to create this particular page all from scratch. So thank you so much fortune. And I will see you in the next class. 33. Conclusion: Well, that's it. You've officially come to the end off this course here on skill share, and I really hope that found it informative, educational, and that you also injured yourself a while taking this course now just to remind you, you can ask a question. If there's anything that you found maybe a bit confusing, simply go down to the committee section and you can post a comment, ask a question, or just simply thank me for creating this course So you can also follow me here on skill share. I do applaud tutorials on what press and cybersecurity on a weekly basis. So I would recommend that you follow me. You're gonna keep track off the new classes that I upload here on skill ship. You can also send me a request on LinkedIn. If you are into that stuff in, just make sure to indicate that you are a student of mine from school share, and I'll be more than happy to accept your invitation to connect on a lengthen. So once again, my name is Alex, and it's been a palatial teaching you discourse. Phil Fritz, you brush through the rest of my courses hair on skill share. And I hope you will enroll in a few more off them. Thank you so much once again and good luck that we showed the very best in whatever it is that you decide to do. And I'll see you next time. But by