WordPress Development – The Mini WordPress Development Course
Video Title: WordPress Development – The Mini WordPress Development Course
Well hello and welcome to the web monkey show my name is Alex and today I have a very special tutorial for you it’s actually a mini course designed to teach you some real WordPress development skills so if you’re interested in learning how to become a wordpress developer this course is gonna be
Perfect for you because coming up you’re going to learn exactly how what press works behind the scenes you will learn how to build your own custom page templates to write your own custom WordPress functions work with WordPress template tags create custom exercises and so much more so you’re gonna learn
Some really cool WordPress development skills now also as a full disclosure this course used to be available on udemy is the world’s largest online learning platform but I recently took it down for me to me and decided to make it free for you guys here on YouTube so if
You do see the udemy logo at the bottom right hand corner of the videos well now you know why it’s there but I really hope you do find this tutorial useful so wha let’s get started alrighty so the very first thing we’re gonna do right now would be to generate
A custom theme from this website known as the on this course website what exactly is this on the scores well it says hi I am a starter theme called on the score S or on the scores if you like I am a theme meant for hacking so don’t
Use me as a pillion theme instead try turning me into the next most awesome what press theme out there that’s what I’m here for so on the scores is what will fit you as a starter theme it’s a theme that has only the necessary amount of code needed
For WordPress to work it has just the bare-bones amount of code out there there are no fancy functions or fancy scripts that do additional things all you get from underscores is the basic package for a wordpress theme so it’s a very good way to start of developing any
WordPress theme you simply come in here generate the starter theme and then you can begin to enhance and develop that theme into becoming the very next best WordPress seem out there so what we’re gonna do right now is to generate our own custom theme let’s come in here right now where
We have the theme name and for me I am going to name mine starter okay feel free to use a different name you don’t have to use starter you can use any kind of name that you want so 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 otoscope e.com this is the site I’m gonna do walking with for quite some time so let’s go ahead and install the theme let’s go to appearance themes add new upload and from here I’m
Just gonna click and drag started with 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 site right now you can see that there is no formatting 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 name out there so we’ll have to do lots of CSS right lots of wordpress functions and development and so on and so forth but this is a
Good start we have gotten our custom theme generated we have installed it now let’s move on to explain and taking a look at how WordPress template files actually work okay so the very 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 and the very next lecture you will find links to where I will show you how to connect to your site via FTP how to
Create an FTP account and even how to use notepad plus plus which is what I’m actually using to connect to my site so feel free to pause this video go and watch those ones and then come back if you do know how to connect to your site
Via FTP then let’s move on right now I am on my Stata site and the folder I am interested in right here is the wp-content folder this is the folder typically contains the files for your plugins and themes and media associated with your WordPress website so let’s
Double click inside and now you can see we have plugins themes upgrade we are interested in themes right so let’s open up the themes folder and now you can see we have our starter theme 2015 2017 and 2016 folders whenever you install a new theme you will find the themes folder in
Here as well but right now we are interested in the starter theme folders let’s double click inside and now in here we have all the files that make up our starter theme but I want you to pay very close attention to these files right here that end in dot PHP we have
404 dot PHP we have archive dot PHP comments a PHP photo dot 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 of
Content to display and how to display that content and even where to display that content so template files are basically like a guide for WordPress they tell what was that hey display posts on this page display the title displayed the featured image just below the title display the dates this post
Was published things like that what Wes uses these template files to display content and each one of these template files controls a specific part of your website as an example 404 dot PHP right here if I double click on for voted PHP this right here is the template for
Displaying 404 pages pages that are not found this is the template file right here that what page would use to display content for the 404 thought for the 4-foot our page a page that’s not found likewise we have something here called what we have page dot php’ this is the
Template for this plane all pages so whenever you create a new page in WordPress the start of theme is going to use this template right here to display contents for that page okay and so on and so forth we have single dot PHP we have cyber dot PHP all these template
Files control specific parts of any WordPress website so join me in the very next class well we’ll begin to take a look at the whole template files which you’ll find in any WordPress theme welcome back and in the previous video I said that a wordpress template 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 understand that we have different kinds of template files we have the template files that WordPress recognizes automatically based on the name an example being the 404 dot
PHP once you have the four folder PHP template file in your theme folder WordPress automatically knows that yes this is the template file I have to use to display the contents for any 404 page and the reason why what place knows that is because of the name of the file it
Says 404 PHP if I just for for two let’s say four or five or four for X dot PHP WordPress is not going to recognize that template file likewise with archive dot PHP comments that PHP footer dot PHP all these are the template files that WordPress will recognize automatically if I came in
Here right now and create a new file named spider-man dot PHP what press is not gonna know what spider-man dot PHP is useful that becomes a custom template file okay while you’re likely to find many of these default template files and most WordPress themes custom template files
On the other hand tend to be unique to that particular theme so don’t be surprised if you opened up the 2017 template Tim template folder Tim for the matter and you saw certain files that you don’t see in any other WordPress theme out there that could be a custom
Template file that is unique to the 2017 theme and of course I’m gonna show you how to create your very own custom template files as we progress but what I wanna do right now is to show you some examples of these core template files that you’re likely to find and the very
Vast majority of WordPress themes out there and the very first one would be the header taught PHP let’s open this up now this is the header for our theme you can see right now that this is the template file what pres would use to display the contents of the top section
Of 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 usually usually the head of the page we don’t display such content now let’s take a look if I decided to
Type in some text in here you can see right now I’m typing just below the head tag if I said this is our header full stop let me save this now let’s go back to fameless’ refresh now you can say the very top right here it says this is our
Header so right now I have just proven to you that indeed WordPress is using header dot PHP to display the contents of the header section of our site so you can go ahead test this type out some text you can even decide the type of the
Text just below down here at the very bottom just after site content you can type that in here as well just paste that this is our header let’s save that let’s go back in here 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 header dot PHP controls all the content form my blog right head down to where we have this is our header all the template files will now take control and continue to display contents for the post as you can see
Right here and even contents for our sidebar down in here as well so a head above PHP is a very common WordPress template file it is a template file you will find and just about every single kind of what press theme another thing that’s very special about the header
That PHP is that it is a template file that is very often called and just about every single order template file out there that displays some kind of content what do I mean take for example we have the page dot PHP now this is the template for displaying all pages so
Whenever you create a new page whether it’s the about page the contact page and so on and so forth WordPress would use this particular template file to display contents for that page however take a look at this line right here it says get header what this means is that right here
What press is going to call the contents of the header dot PHP there is a reason why whenever you visit any page on any web site you’re more than likely to see the logo on every single page you will see the main menu on every single page
And that is because the header dot PHP is constantly called in every single page and every single post because of this simple line of get header so template 5 like they had about PHP the footer of PHP the footer up a tree right here which is the one that controls
Contents at the bottom of a site these two are very often called and just about every single template file out there keep in mind keep in mind very very important keep in mind that one template file can have other template files inside of it’s a classic example again is the page
Dot php’ this is a template file for this plain content for all pages in here right now we have three additional template files we have the header right here that’s been called okay we have the get sidebar which is actually used to retrieve the contents of our sidebar and
We have the get footer which is used to retrieve the contents of our footer dot PHP so keep in mind that there are certain table files that have all the template files inside of them so going back the head of the PHP photo dot PHP these are the two template files that
You very likely find in just about every single page out there even every single post out there there are other 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 tour PHP which will display
Contents that you have in your site but mostly of course your widgets we have the single dot PHP this is the one for displaying all single posts ok 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 ok let’s save this let’s quickly go back to our back-end right here let’s see if we have any posts ok I do have a post I was created 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 header and that is because right here where you have get underscore header WordPress is
Calling the contents of our header dot PHP and in the header dot PHP we have maybe we have it let’s let’s call all the way down here we have okay actually okay yeah this is this is right here this is our header 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 only have this is a post so these are just some examples of the call template files
And make up any WordPress theme head about PHP photo dot PHP archive dot PHP single dot PHP page dot PHP these are the call template files however before I go I want to talk about the most important WordPress template file of all and that is the index dot PHP this is
The mother of all template files and the reason why this template file is so important is because this is the default template file WordPress would use 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
Template for this plain what content for our pages but we also know that single dot PHP is the template file for displaying contents for our posts difference we have a double file for pages we have one for the posts however if we didn’t have single dot PHP to
Display contents for our posts if we didn’t have page dot PHP to display contents for our pages WordPress automatically will fall back to using the index dot PHP so in excerpt PHP is like the last stand it is the 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 dot PHP as we progress but for now know that we have different kinds of template files we have the core ones but we also have the index dot PHP which is the default
Template file for displaying contents for what purse whenever there isn’t a more specific template file out there thank you for watching I’ll see in the next class let’s not talk about some additional template files which I like to refer to as secondary template files these are template files that are not
Quite as important as the main template files like the header dot PHP or the index dot PHP or the filter PHP and so on and so forth an example here would be the comments dot PHP obviously by the name this is the template 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 dot PHP template file the thing about secondary template files is that they are there to make the coding a bit easier to make the coding a bit more distributed across template
Files so that you don’t have too much code inside of warm single template file that’s the main purpose of secondary our template files they are nice to have they play a role but again they are not quite as important as the core template files let’s take a look at some other
Themes like the 2015 theme and in here we have what we have the author – bio – a PHP again this is a template for displaying author buyers so again it’s not the most important template file out there it does play a role but again it’s
Not like the header dot 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 dot PHP so you will very likely find many of these secondary template files in many WordPress themes you will have the core
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 the 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 they technically are not scented files but they play a very huge role in determining how WordPress will display your contents the very first one 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 of 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
Update functions or PHP they might demand add let’s say 70% of all the functions code inside of the functions of PHP and then they may not 30% they might distribute all those functions in other template files as well so it’s not every time that if functions up a tree
Contains all the functions that we have and what his website so take note of that but you will very likely find the vast majority of your functions contained inside of the function that PHP template file so whenever you have a function for creating a new sidebar or
For creating a new template file or for creating a new kind of custom post type such functions would typically be contained inside of the functions dot PHP now in here as an example you can see right now that we have some functions for adding title tags support
For title tags for adding support for post thumbnails as well you have a function here 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
Template file you will very likely find and just about every single WordPress theme 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 declarations for how your text would look like like how the logo will appear how big would it be you have your margins your patterns your borders your coloring everything your background images all the styling is basically declared inside of the styles
Of CSS template file the reason why I said it is the most important file is because you cannot have a wordpress theme without the style dot CSS templates file in fact style of CSS and the index dot PHP are the two most important files in any WordPress theme
You cannot have a wordpress theme without both of these two template files so that’s it for the function dot PHP and the style dot CSS again throughout this course we’re going to be spending a lot of time on the functions 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 alright 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 of the PHP I want us to take a
Closer look at the actual code itself that makes up a template file and what you can expect to see in other template files as well now right from the very top right here you can see we do have our opening PHP tag in red and we also
Have the closing PHP tag for this section in here as well one of the requirements for this course is that you have at least a 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 notepad plus plus in the text editor you’re using might have a different color for comments or for text so just be aware of that but if you use notepad 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 of the code what you have there do is just maybe a brief description of the next block of code or may 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 header for our theme this is the template that displays all of the head section and everything up until the day of ID content section so that’s why everything in here is in green and just to give you a quick pointer
Whenever you’re inside of a PHP code block in this case whether you can see we have the opening right here and then we have the closing just over here as well so whenever you’re inside of a PHP block of code and you want to write a comment
The typical way would be to have the forward slash and then an aesthetics now for some reason in this case we do have two asterixis as you can see it’s not composite to have two you can go with one right now as you can see and
Everything will still be fine but I have noticed that and many WordPress themes they typically tend to start with two or have two asterixis so it is something that you might want to do as well just to keep up the WordPress tradition so to
Say oh you can just ignore it in the end when it’s fine I’m gonna add the SX back so once you have the forward slash and then return as Texas you can begin to type in your comments you don’t have to have the X Tareq’s at the beginning of
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 end right here we do have the closing aesthetics with the forward slash as well very very important that signals the end of 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 site Brandon we have set navigation we have masthead now these are written in a different way we have the opening bracket and then we have the apostrophe
Sign and then two dashes and then some space and then at the end we have two dashes and then the closing bracket this type of commenting is for HTML it’s not for PHP it’s for HTML so note the difference whenever you’re making comments inside of a PHP block
You start off with default slash and then the aesthetics and then you closes with the aesthetics and then the fourth slash but if you are making a comment inside of HTML you typically want to go with the opening tag ‘ and then the two dashes and then put in your comments and
Then the two dashes and then the closing tag very very important to realize the difference between the two but don’t worry we’re gonna 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 of different classes and ID’s I’m talking about CSS in this case we do
Have the ID for page we have the class for sides we have some other IDs Inlet IDs in here like masthead site header for the class we have another class here site Brandon and so on and so forth so this is something you will find in many template files IDs and classes for
Different template tags and blocks of code but let’s take a closer look again in here where we have the header ID masthead you can see we do have a class two here that says site Brandon and then we have custom logo right here we also have things like the blog info
Description so right now you should be thinking to yourself okay this is the block of code that controls how the logo is displayed it’s also the block of code that determines how our blog info and blog description so site description whether is being displayed as well and
Then down here you can see we also have the nav idea of site navigation we have main navigation we have primary menu we have stuff like that so again you should already 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 in to put the code that you have inside of a template file simply look at the words what the words are you see the navigation is you should be thinking okay that’s the main navigation you see
Logo you should be thinking okay 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 of code is doing so that’s pretty much it for the kinds of
Code that you will find inside of a template file very very important that you have a decent understanding of HTML CSS and of course the basics of PHP so that’s it thank you for watching and I will see you in the next class 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 character itself let’s first of all talk about a few pointers and the very first one here 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 page dot PHP is typically used by WordPress to display contents for a page keep in mind though that it’s not just the pH dot PHP that is only used by WordPress WordPress can
Use all the template files to display contents for our pages keep that in mind and then secondly index dot PHP is the default template for all content so whenever WordPress cannot find a more specific template WordPress will always default to using the index dot PHP index
Dot PHP is the fallback template for all types of content now the template hierarchy itself is a system that WordPress 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 more than
One template can be used to display the same kind of content the template hierarchy is what workers will deploy to determine which template file will first of all be used and then if that template file doesn’t exist it will 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 WordPress 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 URL of the webpage and over here we have an example task appeared calm /blog forward slash category ford slash books merely looking at that URL WordPress already knows that this link this URL is pointing to a category with the name of books and it knows that
Because it has inspected the URL and it says category right there now what rests to determine the kind of temple that is used WordPress will first of all match every query string to a query type to decide the type of page requested we just saw an example
So what purse will first of all determine whether or not this link this URL is pointing to a post if it’s pointing to a page you explain it to a search results page if it springs to a category page and so on and so forth as
The very first thing what press will do once WordPress has been able to determine the kind of page being requested it will then search for the template files with specific names in the film directory and it will then use the first matching file as specified by the
Hierarchy let’s take a look at an example over here we have tasks appear calm for / category forward slash books how will what press determine the template file they’ll be used to display the content of this particular URL first things first WordPress would look for a template that
Matches the slug of the category which in this case is books if you don’t know what’s log is log is just basically the name okay slug can be used interchangeably with name so right now we can see that the category the name of this category
Or the slug of this category is books so first of all what press would look for a template file called books or cat agreed – books okay if category – books what PHP is missing waters will then use the ID let’s just imagine that the ID in
This case is seven waters will then look for a template file named category – seven dot PHP okay so we can now see the hierarchy forming first of all it searches for category – books dot PHP that doesn’t exist okay category – seven dot PHP is next if
Category there are seven of PHP is missing what principle then search for the generic category template which is category dot PHP if category dog pip is missing workers will then check for archive dot PHP and if all kind of which is missing finally what press would
Resolve to using the index dot PHP don’t worry in the very next video we are going to I’m gonna show you a real life example so that you’ll understand this better but I want to show you this image right here to give you an idea of the template hierarchy for all types of
Pages now you can say we have the four four page we have search taxonomy home attachment single page category tag auto date and archive and then you can see the very first type of template file that waters will search for and then the next and then finally look towards the
Right of each line you can see index dot PHP index dot PHP index of Petri integral Petri every single time because index dot PHP is always the default template file WordPress would use if it cannot find a more specific template so going back to the example which we just
Had with the category you can see for category we have category – slug category – ID category dot PHP archived on patreon then finally index dot PHP this is how the hierarchy works this is how WordPress this determines what amplifier that is used to display the
Contents of a specific URL join me in the next class where I will show you a real-life example of how the template hierarchy works in the previous class we talked about the template hierarchy and how what Prez uses it to determine what template file is used to display content
So now let’s take a look at a real-life example of the template hierarchy in action but first of all I’m gonna go ahead and create a category all right I’m gonna come in here to posts let’s add a new category and I’m gonna name the category books okay just like we had
In the example add the new category and we can see it’s called 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 of books
However the question right now is what a bit file is what prez using to display this particular page that we’re looking at right now I am gonna bring over my notepad plus plus and of course in here I do have my theme directory for the starter theme now we don’t see anything
Like category – books we don’t see the category – the ID of 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 template hierarchy than archive dot PHP so my best guess right
Now is that what press is using archive dot PHP to display the contents of this particular page but let’s make sure all right I’m gonna double click on archive dot PHP and just below header I’m going to say this is level 4 let’s save this let’s go back in here let’s refresh and
Now you can see it says this is level 4 so what press is using archive taught PHP right now to display the contents let’s now try creating a new template file first things first is I am going to jump back again to categories and let’s
Get the ID for books right now at the bottom right now you can see that the category equals 2 so 2 is the ID of this particular category so let’s do 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 t3 – 2 dot PHP click OK let’s open it up and I will just say this is level 2 this is literally the only thing we have in the templates let’s save it oops sorry let’s cancel cancel save right let’s go back to books let’s view
And now you can see all we have is this is level 2 because right now what press has found a more specific template which is the category – 2 dot PHP needless to say if I go back in here right now and create a new file named category – books
Dot PHP click OK let’s open it up and then let’s say this is level 1 let’s save that now let’s go back let’s refresh the page and there you go this is level 1 so right now what pres has found the topmost template file in the character which is the category –
Slug or category – name which in this case is category – books it’s all that which is why what press is now using it as the main template file but if I go back again right now and decide to delete category – books let’s delete the
File and now let’s even go ahead and delete category – – dot PHP let’s delete that because we don’t need it anymore delete that but now if I go ahead and create a new file and name that category dot PHP let’s open it up and I’m just
Gonna say this is the generic template for all catechol categories full stop let’s save that it’s not good I can hear refresh and of course you can now see that WordPress is now using category dot PHP because category PHP comes after the category – slug category – ID that’s
When we now have category dot PHP and so on and so forth so this is the wordpress template hierarchy in action you can see how WordPress will first of all check for the topmost template file in the hierarchy if it doesn’t see 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 template file in word press so
That’s it for the template hierarchy in action feel free to play around with the other template files out there you already have the image from the previous slide show you can play around with the page – slug page – categories stuff like that you can just go out go ahead
Experiment and see the template hierarchy in actions thank you for watching I will see you in the next class all right welcome back and so far so good we’ve been talking about what press template files we know that they are used by WordPress to display content
On a page and we know that what press has its default template files that it comes with now what I mean by default is that WordPress will automatically recognize those template files based on the names once we have those template files in our theme directory just so we’re clear every single template file
You see on this picture is a default WordPress template file because if in your theme directory you have a search dot PHP or you have a single dot PHP you have an archive dot PHP you have a page – 4 dot PHP assuming that 4 is the ID of a page
What press automatically would recognize every single one of these template files and would know when and how to use those template files that’s why I say that they are default WordPress template files 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 files in your theme directory WordPress already automatically recognizes them however we could decide to create our own custom page templates now these are templates that WordPress will not automatically recognize when we create them we all have to tell what press that hey this is
A template file and then we want you to use this template file to display this type of content that’s why they are called custom page templates because WordPress doesn’t automatically recognize 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’m going to bring over my notepad plus plus and the very first thing we’re going to do is to create the template file in our theme directory so in here where we have starter which is the name of the theme directory I’m going to right click and
I’m going to create a new file and I’m going to name my file page – full width dot PHP alright now notice I said page – and then the name of the actual template itself you could decide to use a different name in structure you don’t
Have to use page – and then the name of the template file you can use any kind of naming convention that you want you could go with full width dot PHP and I’ll be fine I just like naming my own custom page templates with the page –
And then the actual name of the template I just like that kind of standard that kind of approach towards naming our custom page templates so what I’m gonna do right now would be to double click inside you can see right now that it’s empty it’s empty of course there is
Nothing in it so the very first thing we have to do right now would be the most important which is to give this template file the actual name itself make WordPress recognize that this is indeed a custom page template so we’re gonna go with the forward slash and then our
Aesthetics two of them but before we do that we actually need to open up our PHP tags let’s open up our page attack first of all all right so PHP and now I’m going to say template name and then colon is going to be full width okay so
Now we can close this static slash let’s close that let’s save it so now we have told what press that hey this particular file is a custom page template and the template name is full width okay so now let’s see what this does I am going to go to my back-end let’s go
Ahead and create a new page let’s try adding 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 arrow box 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 template so now we can tell what press to use this templates whenever it wants to split contents for our custom page or page named custom page right here so I can
Publish right now Oh actually I didn’t change this to full with full width let’s update and now let’s view the page and there you go it’s empty because there is absolutely nothing inside of our full width template 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 get header as an example brackets semi-colon let’s close that let’s save let’s see what happens if I hit refresh and there you go we now have a header let’s also do the same for the footer as
Well let’s just paste that in here let’s change header to footer let’s save that and now let’s save let’s refresh and now you can see we now have our footer displayed so this is exactly how you can create your very own custom page template of course we will be creating
More custom page templates as we progress in the course but now right now you have successfully learned how to create your very own custom page template so thank you for watching I will see you in the next class alright so 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 WordPress function okay we’re gonna write a very basic function out put some text on any template file where we choose to call that function and so let’s say for
Example I do have my notepad plus plus over here I open up the headed of PHP and let’s say for example I wanted to output the text that says this is a WordPress website now I could do that in here I could say h1 we’re gonna wrap it
Around h1 tags so that it’s big and bold and say I just say welcome welcome to this website and let me close the h1 tag and I could even add a call and called his class greetings give it a class of greetings and I could even add
A div as well with a class of let’s just say welcome and on a new line let me just indent this actually on a new line I can put out a paragraph and say I hope you enjoy your stay let’s close the paragraph and let’s
Close the div all right okay so let me just save this first of all and make sure it’s outputting correctly refresh the page and but here you go welcome to this website I hope you enjoy your stay now if we wanted to output this text on other template files typically we would
Need to copy this block of code and then 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 code a lot more clean so what I’m gonna do right now would be to show you how
You would write a word press function to display this text whenever we call it so to do that I’m gonna open up the functions dot 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 Starex and now what I’m gonna do is to write the name function first of all function all right and then I can say add on the score
Greet in that would be the name of the function right now blackheads and then my curly bracket opened up I am going to close the PHP tag and let me just cut this off we don’t need that anymore save headed PHP in here right now and paste a block of
Code and now down in here I am simply gonna go ahead now and close the PHP block of code using this closing curly bracket alright so what’s happening over here if you have expense with PHP then you definitely know why I had to use the curly bracket and all that but if you
Don’t know let us quickly explain to you the reason why I have this curly bracket opened up in here is because in programming you can never have HTML code directly inside of an open PHP block of code you can have PHP code inside of an HTML code that’s fine but you cannot
Have HTML inside of a PHP code right now if you scroll all the way up you can see we do have the opening PHP tag over here and it never closes up until the very end here now the reason why I close this because I am now writing out some pure
HTML which is the day of class it calls welcome blah blah blah blah blah all that is HTML so I have to close the PHP tag first of all before I can write out this HTML now the reason why I do have this curly bracket open though is to
Indicate that this HTML code is actually part of this PHP function that is why I have the curly bracket open and of course whenever you have something open you should close it unless of course if it’s the main PHP tag right here typically in WordPress and it functions with PHP most
Developers will open up the PHP code but they will never close it okay so let’s come all the way down here so over here right now I had to close the curly bracket that I opened up over here and that’s why I had to open up the PHP code
Again so that this color bracket will be recognized as a 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 it’s name is out greeting so let’s save this so now what I can do we
To simply come over here right now and instead of writing all that code I can just say PHP and then add on the skull greeting brackets semicolon and then close 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 greeting at the bottom of our post or our page I can just copy this function right now go to footer dot PHP and then over here I can just paste a block 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 wall we were going to write a 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 alrighty welcome back and well when the topic of functions let’s talk about one function that you’re 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 WordPress theme and that is the get on the score template on the score pot function now this is a function that allows a theme to reuse the same kind of code in different template files so rather than having a huge chunk of code in one
Single template file you could break up the code into let’s say two or three different template files and then on the one main template file 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 notepad
Plus plus let’s take a look at our template theme of the directory rather I think the directory and I’m gonna open up index dot PHP alright now let’s take a look over here we do have the function right here get underscore template on the scope part
And then inside we do have inside of the brackets 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 WordPress at this point right now to look for a folder called template parts and then
Inside of that template parts folder look for a file called content dot PHP in the second example of I here it’s very similar look for a file called content – non dot PHP inside of a folder called template – parts so let’s take a look right now
Over here to the right where we have our theme directory we do have template – parts folder just underneath the layouts folder so if I open it up right now you can see that we do have four different template files we have content of PHP content – non content – page content –
Search you will note that there is a difference between the content of PHP and the rest of them the difference being that content dot PHP doesn’t have an extension it doesn’t have an extension like the second one it has none or page or search the second third
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 we are calling over here doesn’t have an extension that’s why you have get underscore post on the score format so this basically simply means that just
Look for a file called content dot PHP but in an instance where the file we’re looking for those have an extension rather than the get on this costa nostra format you’re gonna have the name of the extension writer right over here after the comma so in an instance where we
Wanted to call let’s say content content – search we would look for a template part known as template – parts four slash content and then comma and then search and so on and so forth so that’s basically how the dead underscore temp underscore part function works so rather
Than having all the code for content dot PHP which is you can see right now it’s quite a lot rather than having all of this inside of our 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 underscore template on scope part two calling the contents of our contents dot PHP now I want to show you something over here from the wordpress directory let’s come down here let me give you an example so did you have different
Examples over here as well as you can see but I wanted to show you one in particular and alright so you can see right here we do have an example with the theme subfolders so it simple say is that to use this function with subfolders in your theme directory
Simply prepare the folder name before the slog and so for example if you have a folder called partials in your theme directory and a template part called content – paid page dot PHP this is exactly how you would write the function as you can see so if you want to
Practice this you can go ahead right now and try calling the contents of the page – full width dot PHP put this particular file inside of the templates templates folder or you could even create a separate file completely you can put in some text inside that file
And then try calling that file using the get on a score template underscore path 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 WordPress themes so that’s it thank
You for watching I will see you in the next class let’s now talk about what is the most powerful and the most important function in all of what prayers and that is the wordpress loop this is the function of responsible for the Splane all the content of your posts your pages
Your custom post types and so on and so forth so without this function well your piece website will basically be non-existent so it is very important to understand how dowhat press loop walks and also how you can customize the loop to serve you because it is a very very
Powerful function now I want to first of all show you this standard way of writing this function there are different ways how you can write this function how you can write the loop but the standard way is what we have over here okay we have if in brackets have posts and
Then well have posts the posts now the question right now is what does this mean what exactly is happening over here I’m gonna try and break it down to you in as simple of a manner as I possibly can okay because I know it can be a little bit complicated first and first
Is the function right over here where we have if and then in brackets have underscore posts what’s happening here is what press is checking first of all to see if there are any posts to display that is the very first criteria that needs to be satisfied you can’t display
Contents of a post if you have no post in the first place right so it first of all check to see if we have posts and now over here we have the second criteria are saying while have posts so we’ve checked to see if we have it post
And oh okay we do have a post right now while we do have that post display the contents of the post that’s what the third are sub function over here is doing its simplest thing okay right now since we have posts and as long as we continue to have posts display the
Contents of that post that’s basically what this line of code is saying let’s take a look at some real life examples I’m gonna bring in notepad of course as always yeah and I’m gonna open up indexed or PHP now right over here you can see start the loop we now have
Actually it fed it over here where we have if have posts and then we have 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 indexed or PHP is linked to your WordPress loop the WordPress loop most building to your index to PHP one way or the other you can either have the loop directly inside of the index or PHP or you can have the loop in another template file but make sure that
Template file is called from the index dot PHP very very important all right we’ll talk more about this a bit later of course but you can see right now that in index of PHP we do have the loop bear in mind too that we can have the loop in
Other places as well not just the 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 different template files and also keep in mind that the loop is responsible for displaying
Contents of our pages as well not just posts you use the loop for your posts for your pages and if you also wanted to create custom post types you would also use to WordPress loop as well so join me in the next class we will now take a
Closer look at how WordPress uses the loop to display contents of our posts using something called the template tags well welcome back to the course and so far so good we’re getting a little bit better at understanding how what press walks behind the scenes and in the
Previous class we talked about the word press loop and when concluding I said that what press uses whether the word press Lupi uses something called template tags to display content on our website so what exactly are these template tags well template tags are like inbuilt functions that come with
WordPress and they are used to either retrieve the attributes of a particular piece of content or display that content itself so whenever we’re displaying things like the title of a post the dates a post was published the thumbnail the content and the author of the post information
Like that we are using template tags to display all those kinds of information and let me just give you a very quick example let’s bring in mr. notepad over here and I’m gonna go ahead right now and open up our index dot PHP and let’s see what we
Have over here all right I’m gonna go to template parts content and of course open up the content of PHP file alright now as an example you can see over here we have a tag called the title you can see right there this is what WordPress
Would use to display the title of a wordpress post because we have to tag v on the score title and if you scroll down over here we have what we have the underscore content this is the tag WordPress would use to display the content of a post and so on and so forth
So whenever you see a featured image on your WordPress website the content they accept know that behind-the-scenes WordPress is using template tags to display those information and you should also keep in mind that in general we have two different types of template tags depending on where they are
Positioned we have template tags that must be inside of the WordPress loop the reason why the content and the title is working right now is because they are technically inside of our WordPress loop which were started over here if you came outside of the WordPress loop let’s say
For example just over here right now and over here if you just said something like PHP PHP the underscore title and then you do that nothing is going to happen over here because what pres does not know what you’re trying to do you said okay the title but the title of
What exactly this is not inside of the loop if this tag was inside the loop then WordPress knows that okay you are calling the title of this post or calling the title of this page when you have such attack outside of the WordPress loop WordPress doesn’t know what to do with it
On the other hand there are template tags that you actually use outside of the WordPress loop and if very good example would be the get header get header is a standalone you can call get header anywhere besides inside of course you can call get header inside of the
Loop okay but you can call get header anywhere as long as it’s outside the loop so tags like get on the score header get sidebar get footer all these tags are called outside of our WordPress loop so just to give a good quick recap you can either have tags that run inside
Of a WordPress loop or you have the tags that one outside of the WordPress loop now there is a very fantastic link over here template tags from the WordPress codex I would highly encourage you 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 a typical cold outside of the WordPress loop you have the auto tags but now down here you can see we have
Category tags comment tags we have link tags as well now we have post tags these are tags used for WordPress posts so now you can see things like the next post link next post link you have the category you have the content the excerpt the tags the title you have what
Else do you have here you have the date you have the time and so on and so forth so all these tags here can be used in sign of a wordpress look to display some more content or information about a particular wordpress post so that’s it a very brief introduction to template tags
Join me in the next class we will take a closer look at this template tags a welcome back and we’re still on the topic of WordPress template tags now if you had the chance to take a look at some of all these tags that we have in
Here you might notice that there are tags that appear to be very similar an example being where we have the auto tags have the on the skull author and then we have the next leg which is get on the skull V on the skull author now you
Might be thinking to yourself okay what exactly is the difference between this two and it’s not just the author tag there are other tags around here where you have let’s see we have some other X similarly we have stuff like the permalink the underscore permalink but
Then we also have get on the square permalink and if you’re other examples like that now whenever you see tags like this okay just keep in mind that when you have V and then underscore and then the name of the tag all that tag is doing is simply displaying that
Particular piece of content so the underscore author will display the name of the author the underscore title will display the name of 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 going to go ahead and display the content it’s actually going to retrieve the attributes and the properties of that particular piece of content meaning that you could use such a tag to modify the way that particular content is displayed all right let me take that
Again when you have V on the score and then the name of a tag all that template tag 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 out right 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 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 the tags I have get on the skull are more powerful because they give you more options we also use such tags they get underscore 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 PHP to do
Something spicy with the name of the author or the title of our post we would use get underscore the underscore title or get underscore the underscore awful and so on and so forth so that’s kind of like the two major differences between V on the score and then the name of the
Tag and then we get on this called the underscore name of the tag I’ve been saying lots of underscores I’m getting kind of tired so I’m let me show you some other few things let’s take a look at the co-author let’s just click inside now whenever you’re
Taking a look at the actual description of tags actually this is not a really good example let’s go back let’s look for the underscore category let me click on the underscore category right now now 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 tag we do and if the tag must be used inside of the loop you will also be notified as you can see right here next up you will have the usage how would you use this
Tag all right now in here we do have a classic example the underscore category and then inside guess what we have three different parameters parameters are additional things that you can add to spice up the way that tag will display whatever it is that it’s this plain so
In the case of the underscore category right now you can add a separator and usually this parameters can either be in form of a string which should be text or any form of 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 parameters we have the separator which you can add we also have parents as you can add as well and
Finally you have the post ID which would be the post edit to retrieve categories and if you don’t add any values for some of these separators that are optional in this case all three are optional as you can see what purse will have default value that it would use in such
An instance all right so many a time whenever you’re dealing with the underscore the name of the tag most of the time the parameters that come with it are usually optional you don’t have to add any parameters at all however many times when you use the get
Underscores v on the score number of the tag very often you would have to have at least one parameter that is required for you to fill in so again don’t worry as we progress we’re gonna be dealing with lots of tags we write functions that you get more accustomed to how these things
Actually work but for now I just wanted you to understand the major difference between we get on this called V underscore name of the tag and then the V on the score name of the tags and also understand what our parameters are whenever you’re dealing with template
Tags so as usual if you have any questions about this you want to learn more you’re confused always feel free to reach out to me thank you for watching and as always I will see you in the next class still on tags and before we move on to
Something else I wanted to quickly introduce you to a very special branch of WordPress template text I’m talking about conditional tags now conditional tags are extremely useful because they allow us as a thin developer to first of all check to see if a particular condition or 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 it tagged to check to see if a user is currently on the front page of your site now we have text to check to see if a user is currently viewing a
Particular post you can even check by the post ID or the posts log you can check to see if a particular post is high very cool you can check to see if we’re currently viewing a sticky post you can check to see if comments are
Allowed and so on and so forth lots of different kinds of tags out there you can check to see if a user is currently logged in you can check to see if a person is actually viewing your site on a mobile device or on a desktop so there are so many conditional tags
Out there and they are good very useful for us when we’re building our theme because sometimes as a theme developer you might want to first of all check to see if a particular action has been carried out before you go ahead and display something so always keep 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 are going to use them as we progress and the course thank you for watching I will see you in the
Next class all righty 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 the WordPress loop template tags now it is time for us to put all of that into practice we are going to go ahead now
And build a sample page template and we’re going to walk with a custom 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 now 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 a right here I do have some dummy
Content some dummy text and I got that from this website lorem ipsum don’t pay bank odk you can get some text in 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 create
Three different categories make sure that these three posts belong to one of the categories add featured images as well and I will see you in the next class all righty so hopefully you have gone ahead to create your custom content and what we’re going to do right now
Would be to create a custom page template that will be used to display the contents of our blog posts using a custom wordpress loop so in other words we’re going to create our own version of the blog age where you’d normally find a heart the contents of 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 bumped up to the sides of our screen and it basically looks really relieved off so what we need to do right
Now would be to add some padding to our body tag so to do that let’s bring in notepad let’s go to our style dot CSS template file about our styled obsesses file and I’m gonna add some padding to the body tag right here padding of 10
Pixels and 50 pixels so what this will do would be to add spacing of 10 pixels to the top and bottom and then 50 pixels to the 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 padding 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 caching issues so please clear out your cache from both your web hosts if you are developing on a live site and also your
Web browsers cache as well let’s also open up header and footer dot PHP let’s remove the custom function we wrote the ad underscore greeting function let’s remove that let’s do the same to a head of PHP backspace save go back in here refresh and awesome now we are good to
Go so let’s go ahead and create our custom page template we should be used to put the contents of a blog post let’s right-click create new file and I am going to name this guy page – blog dot PHP let’s open it up and of course we
Have to name this template file so let’s do that template name and I’m going to call this custom log sterics let’s close it save let’s go to the back end of our sides I’m gonna create a new page and our named our page content post content post
Content for the title and a template of course will be custom blog so let’s publish let’s view the page and there you go so obviously it’s empty because we have no code in a custom blog template file but 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 underscore header and of course the footer every website needs a head and a every website needs head and feet head and feet all right get footer save let’s go back in here
Let’s refresh the page and there you go we now have a header and now we have our footer and of course we can now begin to add the contents for our wordpress posts so i’m gonna jump over to where we have the loop and i’m gonna copy this code
Right here the custom about ID what press loop code i’m gonna copy it let’s copy that that’s coming here right now and in between the header and footer 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 PHP and while semicolon and then end if so this is how you would close the
WordPress look if you don’t close your loop you’re going to have you’re basically gonna crash your web page because your page will constantly keep on looping looping looping there will not be an end to it so you’re basically crashing your site and your page alright so we’ve now opened up the loop and
We’ve closed loops so now we can begin to tell what press what content we want to display specifically what I’m going to do would be to output first of all the contents of the title so let’s use the template tag PHP the underscore title so if this works we should see the
Titles of all our three posts right let’s wrap it up in an h1 tag h1 so we can make the titles really big h1 save now let’s go back in here let’s refresh the page and oh all we have here is simply the title of our page where are
The titles of our posts well here’s the thing you never make the mistake of assuming that whenever what press sees this loop right here this is good for the loop never think that what press thinks that all this is for the wordpress posts no because we have this
Loop inside of a custom page template what press things that oh you simply want to display the title of this page and not our blog posts if this was inside of our index dot PHP or our single dot PHP WordPress will automatically automatically recognize that oh you want to display the title of
Your blog posts but because this is inside of a custom page template WordPress doesn’t think that way always remember that because this is inside of a custom page method we need to tell what is that hey this loop right here is meant for our blog posts and not
Up page so to do that we need to create a custom WordPress loop and we can do that using a very powerful function known as the WP underscore query function this is a function with which you can customize how the wordpress loop works you can tell what press to retrieve the
Contents of your pages retrieve the contents of your posts you can tell what case to retrieve contents of posts that belong to a very specific category and so on and so forth there is so much you can do using this very powerful function all right so what we’re gonna do right
Now would be to create our custom loop tell them what place that hey retrieve the contents of our wordpress posts now to do that what’s this just above let me expand this just above what press loop itself I am gonna create a variable called args let’s actually
Open up a PHP tag obey or better still let’s do this I am simply going to remove this closing tag right here alright 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 a new variable called augs
And I’m going to say equals and away now whenever you are customizing your WordPress loop you can add several parameters inside of an array so instead of that way we can say okay we’re retrieving contents for our posts these are the amount of posts we want to
Display we want pagination to be used and so on and so forth don’t worry we’ll explore this a lot more in the future what I’m gonna do right now would be to open up the array and then inside of this array I am going to say that the
Post type that we want to call in this case is our wordpress posts okay post so right now we have created an array saying hey for this loop that’s coming up we want you to retrieve the contents of the post type known as post okay so
Let’s put a semicolon in here and now I am going to say query alright query equals new WP on the score query and then inside I am going to pass the variable of args note that this is pretty much the standard way of creating custom WordPress queries alright don’t worry
Again we’re going to explore this a lot more in the future but for now just take this as L is we have created a custom query specifically for our wordpress posts so now inside here we have the actual loop itself we now have to equate this variable known as query to the half
Posts if half both will have post and the post functions so let me copy this and right in here I’m going to paste and I’m going to equate that to have posts the same in here as well let’s put an arrow and finally in here as well let’s
Do the same so right now this custom query has basically taken the place of the post half posts and then half posts in here as well that’s what we are currently calling right now so let’s go ahead and save this let’s go to post content refresh the page and now you can
See we have our titles of our posts display because again we have created a custom query for our WordPress posts and we are now calling the title of each post using the template tag if this sounds confusing again do not what we were going to explore this a lot more in
The future so you understand better all right so now that we have our title we can also display the featured image and to do that we are going to use another template tag known as the underscore post on the score thumb nail semicolon save let’s go back refresh and now we
Have our featured images let’s go back in here let’s add one more and this one is going to be for the accept the accept save go back in here refresh and now we have the accept of each post showing so congratulations you have created your very first custom
WordPress query we used the args we could created an array we passed in the parameter of post type and equality to post and of course we changed the custom WordPress look right here so that the query the nuclear created is being called we used three different tags the title post terminal and except
To display the contents of our blog 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 understanding what we’ve done right here please reach out to me I’ll be more than happy to answer your questions but for
Now we have successfully created our very first custom or what was query join me in the next class we will write a second custom WordPress query think some unfortunate I will see you then welcome back and in the previous video we successfully created a very first custom WordPress query which resulted in
This particular page we were able to successfully display the title featured image and accepts of our three different posts now what we’re going to do in this video is to further customize this custom query that we have over here and what we have coined right now is just
One parameter inside of our array and the parameter here is simply specifying that we want to display content from our wordpress posts specifically right but we can add other parameters as well we can add parameters 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. notepad plus plus over here and what I’m gonna do is to simply add a comma at the end over here and I am
Going to add the second parameter here same catagory underscore name alright and I am going to choose one of my categories remember I have three different categories I have movies books and I believe slides so right now I am only going to display posts from the category of books no and
I think it’s actually YA books let me make sure it’s capital B let’s go back in here let’s go to the back and post categories and it is capital B all right books right so let’s see what’s going to happen right now I’ve said that I only
Want to display a post from the category of books let’s save this and let’s go back to our page so we have post one now and so that’s it we only have post one showing because post one is the only person I have that belongs to the
Category of books and if I go to the back end go to categories while I go 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 parameter here saying only display post on the category
Of books we now only have post one showing up so here’s another example of how you can further customize how your WordPress query works and there are other ways you can even take this customization a step further you can also say that well display all posts from all categories with the exception
Of these particular category or categories and you can do that by making use of the minus sign here is the example over here so we can use the ID of the category that we want to leave out and then simply add a minus so let’s go back in right now let’s go to
Categories let’s say we want to display posts from all categories with the exception of the books category so let’s get the ID for books at you can see the ID east you down there below ID Heidi Hayes – so I can come over here right now and say well
Category name or other let’s go back to class reference we are going to use hat in this case okay not category name but just cat so let’s go ahead ahead now and say cat and it’s now going to be negative – all right so we’re saying display all put some all categories
Except posts that belong to a category that has an ID of two so let’s save this let’s go back in here go to our post content and there you go so now we have post three and we have post two but we no longer have post one because post one
Belongs to the category category of books which has an ID of two so these is just an example of how you can further customize how the WordPress query works you can also specify other things like tags you can display posts that have very specific tags oppose some specific
Authors and so on and so forth later on in the course we’re going to take a look at tech so many parameters where we can display posts or content from a specific taxonomy we’ll 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 custom WordPress query using additional parameters so feel free to experiment you can add tags to solve your posts and then try this plain pose 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 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 of a function known as the WP
On the score reset on the score post data so right now currently we do have one custom query which will display all posts from all categories except those for the category that has an ID of two now we can decide to write another custom loop just below this one however before
We can write additional custom loops we need to reset our post we need to reset our coin loop rather we need to reset it back to its original state and we can do that by making use of this function known as the WP on those coffee set 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 two posts and slides has two
Posts as well so I would encourage 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 alright let’s do this first I’m gonna do right now would be to write a custom loop that will display
Only posts from the books category all right so let’s do that again let’s come over here category right now I’m going to change this to a category on the school name and that’s going to be books alright let’s let’s first of all save this now let’s go to page and all right
So I have post six and post one these are the two posts that belong to the category of books right now what if I wanted to write a second custom curry doubled only display posts from the category of 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 alright I am going to add a comment and I’m going to say display post from the books category all right now just at the very end of the actual loop it’s over we have
The end if I am going to bring out the function PHP WP underscore reset underscore post data all right there you go so right now this is the very first custom loop that we’ve written so we can now go ahead and write a second one so
I’m gonna do I know we’ll just be to copy this alright let’s jump down over here and paste everything all over again now let me open up my PHP tag right over there all righty so what I’m gonna do right now would just be to change this
To slides let’s go with slides change from books category it never changed I want two slides as well and we are good to go however what I want to do will be to add some HTML so let’s do this just above the h1 title what we have over
Here let’s change this to an h2 actually it’s in that’s way H – H – and now in h1 I’m going to say books category let’s close that h1 and we’ll do something very similar here as well make this on h2 make this an h2 I’m just copy this entire line come back
Down here and of course we’re going to say slides category slides category let’s save and now that’s what’s going to happen refresh the page and there you go we have the books category but the first two posts we have books category in here as well and now down in here we
Have the slides category repeating slides category and we can actually do this a lot better rather than having the category names constantly repeating for each post under the category let’s do this instead all right let’s remove the h1 from outside of the loop so become pasted at just above the actual loop
Itself so we have h1 right there and we have the same thing in here as well let’s remove that one and let’s piss it over here all right so what we’ve done right now is to remove the HTML indicating the name of the category from
Our loop so right now the names of the category should display only one so let’s save go back in here again refresh so now we have books category we have post six with the featured image some text now we have post one same thing with the slights category it’s showing
Only one sweater because we’ve removed the HTML form our loop so I just wanted to give you an example of what happens whenever you place any sort of content inside of a loop it’ll constantly repeat that content for each post inside of that loop let’s go ahead and write one
Last custom loop so what I’m gonna do right now will be to copy everything all over again let’s copy that paste that down here and right now I am going to change slides here too custom category all right custom category and I’m going to say the split
Post from all categories alright now I’m going to remove what we have over here category name of slides I’m going to remove that let’s open up a new line now what I’m gonna say right here would be posts per page this is another parameter posts per underscore page and I am going
To say just three all right let’s go with three okay so what we’re doing right now is we are displaying posts from all categories however we are only going to display three of them all right so let’s save this again and now let’s refresh the page and now let’s go all
The way down here where we have our custom category so we now have post six we have post five and now we have post for each one of these guys are from the three different categories so this is just an example of how you can revise custom loops over and over again you
Just have to make sure that you employ the use of the WP on the scope we set on the scope post data function so this can be very useful if you’re trying to develop a theme that is designed in such a way that maybe on the home page you
Display the first five posts on 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 useful function to be aware of thank you so much for watching as usual if you have any
Questions about this you’re not sure what’s exactly happening again you have to ask ok ask questions I’ll be more than happy to answer them so thank you so much for watching I will see you in the next class alright so the next thing we’re 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 try to click on say post one than will happen again so ideally whenever anyone clicks on the title of
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 with each one of the posts so that whenever anyone
Clicks on those links it will take them to the individual page for that particular post what we’re gonna do in this particular video would be to create hyperlinks from the titles of our posts I’m gonna make use of a function which is the permalink and according to the
Codex it says it is placed URL for the permalink to the post currently been processed in the loop so what I’m gonna do is very simply I’m gonna scroll all the way down here I am going to grab this code on the 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 gonna jump to my notepad plus plus let me just make sure
That the connection is still working so sometimes I do have issues with my notepad plus plus sometimes it will lose connection to my database but anyway what I’m gonna do here is I am going to overwrite this code right here where we have the PHP the title I’m going to
Leave the h2 tags as they are all right so I’m just gonna go ahead and overwrite the title and then paste the new code that we have written so let me 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 good 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 of the article so here we have successfully ated hyperlinks on the titles of our posts now how did we do this the first Knology to understand is that over here from post six three things are happening right here first of all post
Six which is the title of our post is 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 of
That post so three things are happening in here and I’m gonna explain to you how those twins 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 of the post and then the a href tag over here
Is what creates the link for that post and then finally the permalink which is embedded inside of our a tag is what actually makes that link go to the individual page of that post when it is clicked on alright now this final piece of code right here the title attribute
You can ignore this you don’t even need to add this in your piece of code it will still work regardless so that’s how to create a permalink from the titles of your posts and what I want you to do is to go ahead and simply do the same for
The post under this life’s category and finally the post under the custom category so all you have to do is just go back to your file and then just copy and paste the same code just overwrite the page with the title under this last category and then do the same for the
Custom category as well so that’s it thank you so much for watching the video join me in the next class we all show you how to customize the except in a previous video we successfully created a hyperlink from the titles of our posts but now we want to do the same for the
Read more link and in fact we didn’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 one and make sure that we have a read more link over here that whenever
No one clicks on that link it will take them to the individual post for that article so to do this I’m gonna jump over to my functions.php let’s go all the way down here and oh look it’s the very first custom function we 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’s saved awesome let me go back to my page refresh and here you go now I have the read 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 here and explain now we have our
Function first of all called tasco underscore custom underscore except underscore more that is the name of a function and then inside we have the variable more now global post in here what this simply means 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 linked and then we’ve displayed the permalink all right the permalink associated with the post and
Then read more in here is the test this 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 add filter function filters are basically functions used to register other kinds of functions that work because that’s
One way of describing this so you can modify read more to say for example or learn more or 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’m gonna do actually before I do that I’m just
Show you one slight problem there is no space between the last word of the accept and then the read 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 returned after the very first code just simply add space save this and there you go so it’s now 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 word and I’ll read more link one final function I wanna 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 grab this piece of code go back to my notepad and I’m gonna go ahead and paste this right here so this is a very very straightforward function it’s called the tesco underscore customer Dusko except underscore length inside we have the
Length variable and it says return 45 so all this is saying is for the excerpt we turn 45 words that’s how many words you want to display so if you wanted the haunted woods just change for the five to a hundred let’s go ahead and save
This now let’s go back to your page I’m gonna go ahead and refresh this page and voila now you can see the number has reduced for my believable 60 words I believe to now 45 so in this video we have successfully made two changes to accept you’ve created a bit more a link
And we’ve also ensured that only for the five words that is played from our accept you will find this business of code in the resources file so please check there if you want to use the exact same code I have written in here thank you for watching I will see you in the
Next class forgive me for interrupting your learning experience but I really wanted to talk to you about another course that you might find very useful which is the complete WordPress theme development course now if you’ve been enjoying this mini tutorial thus far and you want to learn more I highly
Encourage you to take a look at this particular course because in this course you will learn everything there is to know about what press development so I will provide the links for you in the description box below but I have this course available for you on three different platforms
My own personal platform the red monkey Academy it’s also available on udemy if you are a student and it’s also gonna be available on Skillshare now if you’d like to take this particular course on any one of these platforms that will have them I’ll have the links available
For you in the description box below but I also encourage you to check out web monkey Academy com it is my own personal online trading platform for WordPress you can stop by grab your free wordpress SEO course which is basically a full course teaching you how to
Configure and work with the used SEO plugin so if you’re interested in learning more about WordPress development be sure to check out the course I’ll put the links in the districts below and now let’s get back to the mini course alright so the next challenge here would be to tackle the
Image sizes that we have for our posts and you can see that for post 6 we have this incredibly large image and then if you post one we have something smaller and then post 4 has something even smaller plus 3 it seems to have the same
Size as opposed to 4 and then post 6 has something incredibly large as you can see so what I wanna do here is to create a particular custom image size that would be applied to every single image on our page templates not to do this we’re gonna make use of a function
Called the add image size one thing to keep in mind is that whenever you upload a new image to your media library WordPress by default will create three additional sizes so if I come down here to settings go to media over here we have the thumbnail size we have the
Medium size and then we have the large size these are the three default sizes that what people could eat for every single image that you upload to your media library so what we don’t do here will be to create a different custom image size we’re gonna make use of this
Function add image size and for the parameter as you can see that we have a string which would be the name of that image size and I will have to detect the width and the height of the image size and then finally we can dictate whether
We want to crop that image or not so over here let me go all the way down here you can see some examples oh by the way we have reserved image size names so in your name in your custom image size you can’t use words like thumb thumbnail
Medium/large or post thumbnail these are reserved for WordPress so if you’re gonna create your own custom image size name make sure you don’t have these words in it but over here right now we have an example so you can see right now we have one that says add image size
Custom size is the name of the image size and then we have 224 the width 180 for the height and then that’s all so this is gonna be a soft crop the next one here we have true-true here simply means that you want you hard clop 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 cropping it then they are simply going to scale the image down to the width and Heights that you have indicated so it’s important to understand the difference
Between copying and not clapping of an image so what I’m gonna do here very simply let’s just go ahead and copy this just copy what this what we have over here let’s copy this go to our notepad and let me establish my connection to my server alright what I’m gonna do is down
Here I’m just gonna paste that and let me add some text to indicate what this is this is going to be the custom image size all right then for the image itself what I’m gonna do is I’m gonna change this to let’s say post size post size
Would be the name and then from 220 let’s make this let’s go with 450 and then for the height let’s make that 300 just as an example okay I’m a little bit as it is let me save this okay that’s saved now it’s one thing to create the new image size it’s another
To actually use this image size to use this will have to go to our page blog and anywhere we have the post thumbnail in here inside these codes inside this Becca’s we’re going to add the name of 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 size the parameters that we’ve indicated in the new post size custom image size that we’ve just created so I’m gonna do the same for the other categories as well post thumbnail
Let’s add a coats in here and then we have post size let’s go back up here as well but we have the post thumbnail let’s add post – sighs all right let’s go ahead and save this and let’s see what will happen so we’ve saved that let’s now go to a
Page my blog go to a custom page or that post content let’s refresh and well there you go right 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 for watching the video I will see you in the next class okay so in the previous video we successfully added our image size and we cropped 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 width but they don’t have the same height now if you inspect the very first image here for example you will see it’s 450 by 300 however the second image here
Is 450 by 270 if you scroll all the way down the next one is 450 by 281 next one is 450 by 300 next 150 by 275 so oh not all the images have the exact same heights they all had to sing with which is good but they don’t have the
Same height now these can be a problem further down the road when you begin to apply CSS in a situation where you want your posts to appear side by side so maybe you have two posts on one line and then the next thing you have an hour to
Post stuff like that that can be a bit of an issue and this is why sometimes it is better for you to add crop your images what we did in the previous video was a soft cloth because all we did was to add 450 by 300 and that’s it when you
Do this what press will automatically automatically decide the size of the featured image based on the parameters you’ve provided however when you add a hard crop you are telling what is the look I don’t care how you do this make sure you display the image 450 in width
300 pixels in height and to do that what we’re gonna do is to jump over here and you can see the examples alright so if you say true this is gonna hard crop the image using two 20-foot with 180 for the height but you can also determine how
You want waterís to crop that image by adding an array and then saying left top so in this case right then in this example right now WordPress will crop your image from the left and from the top but what we’re gonna do is to simply say true meaning we want waterís to crop
The image to the exact size of 450 by 300 so let’s do that let’s add a comma let’s make this true let’s save this and it’s saved alright so now let’s go back to our page let’s refresh the page and alright so let’s take a closer inspection of what we have
Now the first one is 250 by 300 the next one is still 450 by 270 450 by 280 150 by 300 so you can see right now that the change hasn’t actually occurred even though we have coming here we’ve said look make this true we want every
Single image not to be 450 by 300 WordPress has refused to do that what’s happened here is that WordPress cannot automatically implement changes to a custom image size just like that all right it cannot do that what we have to do is to do something called regeneration of thumbnails so basically
Regeneration means better what is the look we have made a change to our custom image science we now want you to hard crop the images 250 by 300 by regeneration I tell you what does to create a new version of every image that will be specifically I’ll be 450 by 300
So that’s what is called regeneration we’re gonna make use of a plug-in to do this so German next video where I’ll show you how to make use of this plugin so in a previous video I talked about are needed to regenerate thumbnails and we’re gonna make use of this plug-in
Which is regenerate thumbnails by Alex Mills aka Viper double-oh-seven bond he must be a James Bond fan but you can see right now the description says this is your source of 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 existing from those size for example via settings media or you switch to a new WordPress theme that uses featured images of a different size so these are the scenarios where this plugin would be useful and I want potatoes never would be welcome fall
Into both scenarios one and two this two ones right here so I have already installed and I’ve activated the plug-in please go ahead and do the same if you’re having the same issue so here it is right here with your thumbnails now to you walk with the plug-in I’m gonna
Go to tools I’m gonna click on regenerate thumbnails and just like that I’m gonna go ahead right now and just say regenerate thumbnails for all 6 attachments let’s do that regenerate way to generate okay all done in six seconds okay okay fingers crossed let’s go back
To our page let’s do it hard refresh and okay it looks like it’s already working good let’s take a closer inspection inspect and are you have it the first image is 50 by 300 second is 450 by 300 third is 450 by 300 fourth is 50 by
350.50 by 306 is 450 by 300 as you can see awesome awesome awesome so that is exactly how to ensure that every single featured image you have on your WordPress website is of a specific size if at the very first time we had done this true clapping we might not have
Needed to use the original thumbnails but because we added a new custom image size and then we came back to say look we don’t want the copy to be false once you want it to be true we had to tell WordPress to create new versions of that
Thumbnail and that’s why we had to make use of the regenerate thumbnails plug-in so that’s a thank you for watching the video and I will see you in the next class I wanted to do something very very quickly which would be to have one single loop on our custom page template
Right now we have three separate loops the very first loop displaying posts from the books category the second ones playing from the slides category and then the final one is playing three different posts from different categories so the next few videos will walk in with template tags and we’ll put
In some CSS as well so it’s gonna be a lot easier for us to work with one single loop rather than working with three different loops so what I’m gonna do is I will stick with the very last 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 code above it let’s go all the way to the top and stop just where we have a PHP cat the header let’s delete all that I’m gonna go ahead and remove this next
PHP tag right here let’s remove that and then finally I’m gonna go ahead and remove the post data in here’s what we don’t need that anymore let’s remove all this empty space now let’s go ahead and also remove the custom category the h1 in here we don’t need this let’s remove that
Let’s change three to six so it can display six different posts let’s go ahead and save this okay and then from here I’m going to go back to our page let’s refresh it to make sure everything is still displaying all right cool so it looks like everything is as it should
Push for push three push to pushed one we click on post five it takes us to the individual page awesome alright so we have successfully we’d use the number of loops from three all the way down to one so join me in the next class we will now
Begin to insert template tags into our page template thank you for watching alright so let’s go ahead now and begin to insert some template tags into our post template and I mentioned earlier in the course that template tags are primarily used to display information so you could use tags to display the author
Of a post the date the post was published a category display the tags things like that so what 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 going to do is we’re gonna make use of the following tags let me scroll all the way down here and I’m gonna show you the tags we’re going to use we’re going to use the author tag right here to display
The author of this tag we’re going to also use the category tag to this put the cat agree of the post and finally the date I don’t think we have that over here I don’t see it anyway I don’t know here it is here it is here it is the
Underscored date it’s right here so those are the three things we’re gonna use to display different kinds of information 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 PHP V on the skull author alright so let’s see how this would actually look like I’m just go ahead and close this tag let’s save this alright now let’s go back to the post let’s refresh the page and voila you can see it’s like hey it’s Stata is the person
Who wrote this article this is starter as well starter but this looks really really bad right so let’s make some changes to the template the very first I’m gonna do would be to make sure this is in h3 so that this is gonna be on its
Own separate line h3 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 then go ahead and close that here as well all right let’s see what how does it look like let’s
Save this okay 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 line right now written by starter written by starter and so on cool alright let’s go ahead and insert the very next tag which
In this case would be the date so I’m just gonna make sure it’s in h3 as well so we have PHP is the underscore dates and then let’s close the h3 tag and let’s just go ahead and also display the category as well let’s just do that so
I’ll say h3 once again and then I will say cat category – let’s open up our PHP tag and then the tag itself which is gonna be the underscore category but I can’t semicolon let’s close the tag let’s close the h3 tag as well okie dokie let’s save this okay let’s
Now go back to our post once again let’s refresh the page and let’s see what we have okay so there you go written by start August 12 2018 this is the category now this is something that’s a little bit annoying sometimes you will notice that the category all have
Bullets they have the Li tag the HTML Li tag and if you inspect this on your browser you will see that it’s in an a tag we have the Li and it’s making it go to a second line so sometimes several kinds of themes will add their own
Custom CSS to certain kinds of elements like your category your list items so this is very very annoying and we’ll have to use a CSS to fix this we’ll do that later but for now we have successfully added three different template tags to display the author of
The post the data put was delayed the post was published and then finally the category now which the post belongs to so there you have it thank you so much for watching the video and German the next class we will begin to walk with CSS okey dokey what we’re gonna do in
The next few videos would be to walk with CSS to make this page look a little bit better than it is correctly because right now it looks well it doesn’t look all that presentable right so what we’re gonna 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 those HTML text to design the page so the very first thing I’m gonna do right here would be to add over here at the very
Very top I’m gonna add a div give it an ID and I’m going to name this the custom posts page all right and then what I’m gonna do would be to add this as a tab and then I’m gonna close the div down here that’s the very first thing we’re
Gonna do so right now we can use this ID this HTML ready to specifically target this page by using the ID custom posts page now the next I’m gonna do would be to add another div after the loop itself and I’m gonna name this div class equals to custom – post all right
Let’s also make all this into it that’s and all of this into a tab let’s tab that make this look neat and presentable let’s close this div as well all right so right now we can begin to to get every single individual post by simply using the class custom post now in here
But I’m gonna do we would be to add some classes to the tags so they written by let’s give this a class of post – author alright and then the date we can also give them in a class of post – dates and then finally last but not least h3 class
Equals post – oh not on the scope – category okay I think we’re pretty much done let’s add a class for the title as well just in case h2 class equals the post title okay so what we have successfully done here is to lay the groundwork for some future CSS we’ve
Added our ID so we can specifically target this page we’ve added the class of custom posts so we can take it each individual post and then for the tags the title the author the date and category added except the classes for them so we can tag it each one of these
Individual tags the post thumbnail they’re just gonna leave 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 during the next class we’ll begin to
Walk with some CSS and I’m just go ahead and save this before I forget and voila okay so that’s saved so I will see you in the next class all righty welcome to you 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 and what I want to do in this video is to create a layout where we’re gonna have basically a sort of a 2×3 setup where we’re gonna have three rows and then we’ll have two columns so in the very first row we’ll have two
Posts the next row will have to post and then the final row will have the last two posts so to do this let’s go ahead and inspect my element and I’m gonna jump to the very top the main div which is hell I’m just do this again inspect
Element okay here we are Dave ID custom posts page let’s go ahead and add some code in here so first I’m gonna do is to give a set width of 11 50 pixels and then I will give a margin of 0 and then auto so as to try and center the text
Okay it looks already a little bit better good next we’re not be to tag it to 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 a width we’ll be 49% and then to display let’s
Go and say inline-block there you go alright so we’ve achieved the 2 by 3 setup 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 first one so that’s kind of like disturb the alignment but don’t
Worry this will be fixed as we progress the next thing I want to do is to create some space at the bottom right here you can see that our text is a bit too close to the footer so let’s add some padding to the main div itself so let’s go back
To I will you have it the custom post page and then in here I’m gonna say padding and then bottom and let’s go with 40 pixels 40 pixels okay this looks already a lot better nice and then finally let’s change the font family and the font style for our paragraph tags
Inside of our post class so let’s do this custom post class custom – post and they were going to tag it DP tags inside of them so we’re gonna say font family font family is going to be Montserrat I have decided to go with mom sad because
I like Montserrat and then the font weight we’re gonna give it a weight of 300 make it a little bit lighter and there you have it okay okay and as you can see right now the element has been fixed as a result of the fact that we’ve
Changed the font family and the font weight of our text it’s funny how the simplest of changes justices can make such huge differences alright awesome so I’m gonna go ahead now and go to my style the CSS file this is we’re gonna be making the changes oops
I’m just try to save that again establish connection to my web server okay so connection has been established now in here on line 6 1 7 just above where we have the at media screen’ and men with of 10.5 a.m. this is for the responsive design
So at the very end in here I’m just gonna add some text and say no this is this isn’t correct let’s start from the end here let’s say custom CSS let’s close our comments alright I’m gonna go ahead now and paste what I have so let’s make sure that is correct
Custom post piedmont seven three hundred forty nine percent and this looks good let’s save this and now let’s go back to firefox 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 cache and 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 caching any of your data you will have difficulty seeing your changes take effect so make sure if you have any
Caching plugins make sure you disable them if you have any sort of caching system for me from your web hosts make sure it’s disabled and also make sure to clear your cache is your web your web browsers are cache as well if you want to see your changes take effect immediately
Alright so that’s it for the very first class here with CSS thank you for watching I will see you in the next one alright welcome to part two where we’re going to target h2 tags as well as the h3 tags underneath the featured image and then finally our lists under the
Categories so without wasting time let’s jump straight to our h2 tag right here which is the post title so I’m gonna go ahead and let’s change the font family here found family we’re gonna go with Tahoma Tahoma just to differentiate it from monserrate and then for the front
Weight let’s go with 500 I have 500 here okay that looks better already next up let’s target the h3 tags underneath the featured image so we have h3 the post author h3 post date and h3 the post category so let’s go ahead and take it every one of them and
To do this I’m going to say let’s go with dark custom post custom – post and then h3 let me remove the post category class we don’t need that okay so custom post h3 for the front family we’re gonna go with Montserrat’s as well what’s great monserrate and the front
Wait we’re gonna make this a little bit darker than 300 so we’re gonna go with a 400 okay and now let me just check my notepad to make sure I have everything all right so margin yeah but we’re gonna reduce the margin as well there’s a bit
Too much margin in between them so let’s go ahead and remove I’ll set the margins to zero so we have less space in between them okay that’s better all right so we have that for custom post h3 and now finally let us get our categories on the same line we don’t
Like this list style so to do this we’re going to go to our post categories and so first things first we’re going to say display we’re gonna make that an inline block okay that’s an inline block and then there’s lots of margins and patterns as well so let’s remove any
Sort of margin that we have margin will be set to zero and then we still have some padding as you can see there’s some padding right there to the left so I’m going to say padding left set that to zero okay that’s good but finally we need to remove this bottom which I
Really don’t like so let’s just go to the li button li element rather the li element we’re going to say what do we have that we have the Dodge 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 alright let’s come back to page refresh the page and there you go okie dokie now I know this isn’t the greatest of 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 to Center your text you can do that if you want to add some animation go ahead and freestyle do
Whatever you want to do with your CSS so that’s it we’ve pretty much come to the end of this course we’ve been able to learn about what was looping we’ve written somewhat those functions we’ve worked with template tags we’ve created that one 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 for watching and I will see you in the next class well there you have it we’ve come to the end of this mini course and I really hope you found it useful I hope
You’ve learned some really cool WordPress development skills and if you do like the video please give it a like share the video with your friends whom you feel might benefit for it subscribe hit the bell so that you notified whenever I upload a new tutorial here on
Youtube you can also follow me on Facebook I do have a Facebook page where I post updates and well thank you so much and if you have any questions as always feel free to put them down in the comments section below I will do my best to answer them as soon
As I can my name is Alex it’s been a pleasure teaching you what press development and I will see you next time bye bye
-
Sale!
Wireless WIFI Repeater Extender Amplifier Booster 300Mbps
$29.99$14.99 Add to cartWireless WIFI Repeater Extender Amplifier Booster 300Mbps
Categories: Electronics, Wi-Fi Router, Wireless Wi-Fi Extender Tags: 300Mbps, 802.11N, Amplifier, Booster, Extender, mobile wi-fi booster, Remote, WIFI, Wireless, Wireless WIFI, Wireless WIFI Repeater, Wireless WIFI Repeater Extender, Wireless WIFI Repeater Extender Amplifier, Wireless WIFI Repeater Extender Amplifier Booster, Wireless WIFI Repeater Extender Amplifier Booster 300Mbps$29.99$14.99 -
Sale!
Full RGB Light Design Gaming Headset Headphones with Mic
$24.99$14.99 Add to cartFull RGB Light Design Gaming Headset Headphones with Mic
Categories: Electronics, Gaming, Gaming Headsets Tags: Design, Full, Full RGB Light Design Gaming Headset, Full RGB Light Design Gaming Headset Headphones, Full RGB Light Design Gaming Headset Headphones with Mic, Gamer, Gaming, Gaming Headset Headphones, gaming headset wireless, Headphone, Headphones, Headset, Light, Mic, Package, RGB$24.99$14.99 -
Sale!
Wireless BlueTooth Multi-Device Keyboard Mouse Combo
$39.99$19.99 Add to cartWireless BlueTooth Multi-Device Keyboard Mouse Combo
Categories: Electronics, Gaming, Gaming Keyboards, Keyboard Mouse Combos Tags: Combo, Keyboard, keyboard mouse combos, Mouse, MultiDevice, Set, WireKeyboard Mouse Combo, Wireless, Wireless BlueTooth Keyboard Mouse Combo, Wireless BlueTooth Keyboard Mouse Combos, Wireless BlueTooth Multi-Device Keyboard Mouse Combo, Wireless BlueTooth Multi-Device Keyboard Mouse Combos$39.99$19.99 -
Sale!
High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar
$199.99$139.99 Add to cartHigh Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar
Categories: Gaming, Gaming Chairs Tags: Adjustable, Chair, computer chairs, Desk, Executive, Gaming, Girl, Headrest, High, High Back Leather Executive Adjustable Swivel Gaming Chair, High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest, High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar, High Back Leather Executive Adjustable Swivel Gaming Chairs, Leather, Lumbar, Office, Racing, Swivel$199.99$139.99 -
Sale!
Professional LED Light Wired Gaming Headphones with Noise Cancelling Microphone
$29.99$19.99 Select optionsProfessional LED Light Wired Gaming Headphones with Noise Cancelling Microphone
SKU: N/A Categories: Electronics, Gaming, Gaming Headsets Tags: Cancelling, Gaming, Gaming Headphones with Noise Cancelling Microphone, gaming headset, Headphones, Headset, LED, Light, Mic, Microphone, Noise, Professional, Professional LED Light Wired Gaming Headphones, Professional LED Light Wired Gaming Headphones with Noise Cancelling Microphone, Wired, Wired Gaming Headphones, Wired Gaming Headphones with Noise Cancelling Microphone$29.99$19.99 -
Sale!
Gaming Desk with LED Lights USB Power Outlets and Charging Ports
$349.99$249.99 Select optionsGaming Desk with LED Lights USB Power Outlets and Charging Ports
SKU: N/A Categories: Computer Desk, Gaming, Gaming Desk Tags: and Charging Ports, Charging, Desk, Desks, Gaming, gaming desk with led lights, Gaming Desks with LED Lights, Home, LED, Lights, Monitor, Office, Outlets, Port, Power, Room, Stand, USB, USB Power Outlets, White, Workstation$349.99$249.99 -
Sale!
Wired Mixed Backlit Anti-Ghosting Gaming Keyboard
$99.99$79.99 Add to cartWired Mixed Backlit Anti-Ghosting Gaming Keyboard
Categories: Electronics, Gaming, Gaming Keyboards Tags: Antighosting, Backlit, Blue, brown, Gaming, Gaming Keyboard, gaming keyboards, gaming keyboards and mouse, Keyboard, Laptop, Switch, Wired, Wired Mixed Backlit Anti-Ghosting Gaming Keyboard, Wired Mixed Backlit Anti-Ghosting Gaming Keyboards, Wired Mixed Backlit Gaming Keyboard$99.99$79.99 -
Sale!
Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset
$119.99$59.99 Add to cartWireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset
Categories: Electronics, Gaming, Gaming Headsets Tags: 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset, ANC, Audio, Bluetooth, Cancellation, Ear, Earphone, gaming headset, Headphones, Headset, Hi-Res Over the Ear Headphones Headset, HiRes, Noise, Wireless, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Headphones, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headsets$119.99$59.99 -
Sale!
Wired Sports Gaming Headset Earbuds with Microphone
$19.99$9.99 Select optionsWired Sports Gaming Headset Earbuds with Microphone
SKU: N/A Categories: Gaming, Gaming Headsets Tags: Accessories, Earbud, Earphone, Earphones, Gaming, gaming headset with microphone, Headphones, Headset, IOS, Microphone, Sports, Wired, Wired Sports Gaming Headset Earbuds, Wired Sports Gaming Headset Earbuds with Microphone, Wired Sports Headset Earbuds$19.99$9.99 -
Sale!
150W Universal Multi USB Fast Charger 16 Port MAX Charging Station
$49.99$29.99 Add to cart150W Universal Multi USB Fast Charger 16 Port MAX Charging Station
Categories: Charging Stations, Electronics Tags: 150W, 150W Charging Station, 150W Universal Multi USB Charging Station, 150W Universal Multi USB Fast Charger 16 Port MAX Charging Station, 150W Universal Multi USB Fast Charger 16 Port MAX Charging Stations, 150W Universal Multi USB MAX Charging Station, 16 Port MAX Charging Station, 3.5A, Charger, Charging, Fast, laptop charging stations, Max, Multi, Port, Stand, Station, Universal, USB$49.99$29.99
Man this is a good content, thank you.
Big thanks for releasing this tutorial video. I have used to mainly running my oen blog very easily but so far with also just few simple modifications. 😎 With the tut I aim for higher and as dev, always fun to learn new stuff.
Nice course
https://www.youtube.com/playlist?list=PL2PqcJZxNc4F_vGa9WdgrcRnMJFNSdZjN
Hey Alex
I need some help. I'm learning WordPress development and currently developing a theme (just for learning process). But I got stuck at the styling part. I made a custom style.css file and linked it through wp_enqueue_style function. But Chrome's user agent stylesheet is messing with it. It's been 3 days. I'm looking for sources but couldn't find a solution. Please help.
Sir your tutorials are good. Can you please create an ecommerce store with WooCommerce and elementor like your previous WordPress tutorial.
Very useful video. I have been frustrated with the level of global style control with Elementor and themes like Astra. While they give you SOME control over fonts and sized for general text and headings … they do not give you options to globally set much else. This makes it extremely painful to go through and change things throughout a website.
There is one plugin I've found … AnalogWP … that goes further and gives you control over setting default and different named settings for column spacing and named settings for text settings … but still no control over colors for text except for the generic text setting.
What I'm looking for is some guidance on how to setup a Customizer function for the custom theme so that I can set global settings for things like the default color for text on different parts of the page and defining the styling for things like a default button or a default list item etc.
Can you provide any help with setting up that customizer?
Are you hero ? 👌
Thanks for this!
Just use Elementor!!!