Back Byline Template with airSlate SignNow

Back byline template

[Laughter] [Music] hello and welcome everyone to another episode of advanced wordpress theme development in the previous video we learned about how to create different templates and in this video we are going to learn about what is wordpress the loop so let's take a look so i'm going to go to my repository which is aquila and then let's go on to the wordpress org theme handbook and this is uh the information about the loop so it says that the loop is the default mechanism wordpress uses for outputting posts through themes template files how many posts are retrieved is determined by the number of posts to show per page defined in reading settings so you can read through all of these information that's mentioned over here but to sum it up all i want to say to you that if you want to display your post content so let's say you have your post that you have created into the from the backend and if you want to display them you can actually loop through them and display the title description featured image content excerpt and things like that okay so it it tells you that you can display post title excerpt content etc so you can read all of the information now how do we do that we'll well we the basic the very basic loop is this one which is if half post while half post the post and then this inside of it you get access to the content which will display the content of the post the title which will display the title of the post and so on and so forth okay and this is going to loop through each item in the post for you okay so it explains what does this function do the half post function check if there are any posts that are available in the database and if there are posts then the while loop loops through it as long as the condition in the parenthesis is logically true so as long as the half post continues to be true the loop is going to run okay and uh it says that the loop should be placed inside of index.php on any other template where are used to display the post information because you don't want to duplicate your header over and over again so all this is saying is that do not include in the header.php or fourier.php just include that inside of the index.php in between your get header and get footer so you can read more information about over here i think now is the time will be start using this information okay so let's go ahead and do that so what i'm going to do is i'll go back to my code and i'm going to close all of the files if you remember from the previous video we had set the block page from the wordpress customizer right i'm just reminding you just refreshing your memory we had gone to home page settings we had created a blog page and and we had set the post to the blog page so the post page will be served into the blog page which means that according to the template hierarchy the blog page which is your which is this block page is going to look for the home dot php since it is not there it's just going to use the index.php to serve that which means that we are going to use index.php to set this loop okay so first of all let me clean this up a bit because uh this is all not needed okay so since we are now going to use the loop okay so what we'll do is we'll create a div and give it an id of primary so id hash okay hit tab there you go and then create main with an id of main and then we'll just give it a class of site main and then space so since we are using bootstrap we already have some classes available like we can give margin top of 5 pixels so we just have some spacing and then we're going to use the role main so this is for like accessibility and screen readers okay and this is where we are going to run our loop so we'll say php open and close the php tag and inside of this php tag we'll say if half posts have posts which means as long as the post is available okay and inside of this we are going to again close and open php tag so that we can write html and we will give it a div of container with a class of container so that all of our content is wrapped inside of the container okay and then over here we can go ahead and just open up our php tag again and say while half posts and then colon the post okay and then end while and inside of this we can have anything that we want so so inside of this we will have access to the title so we can say the title the excerpt also we can just get the excerpt of the post etc so let's try this out so you go back to our blog page so where would we find it so i hit on the blog page and there you go you can see that we've got the title beautiful valleys so if you take a look so these are my post beautiful valleys new post and if you edit it this is my content and if you click on this if you go down this is the excerpt so this is the place where you can set your accept which is an optional thing so i can use the except for that if i want to display the entire content i can just use the content so if you want to use the excerpt which is kind of a short summary of the post and then user can click on the uh heading and then it will take him to the single page of the post okay so let's go with the content now so if you use the content and you go back and check on to the front end and click on the blog page and there you go so you can see that you have beautiful valleys which is the heading then another heading this is the content right so all of this information is being fetched if you do an inspect element you'll notice that this is the container we created and this is the title which is being displayed without any heading tag but we will fix that in a moment but yes this is the content that you see paragraph tag all of that stuff block image this is all content that's coming from there okay it's all of this content great now i think we should also wrap this in a container because it's looking quite uh ugly it's it's because your max width of the side is is this much and then header should also be like that so let me just go ahead and do that so go back to my code and i'll go to header.php and inside of this i have nav so let's go to nav so this is my nav so what i'm going to do is just make this small minimize it cut the whole thing and just wrap this in inside of the container container class so now it'll just be easy because this will be wrapped and having the same max width yep this looks good awesome great so now you see that we've got all of the posts being listed over here uh these are all the post content and stuff like that now it doesn't look that good right because first of all it's not wrapped within the the heading is not wrapped within the h1 you know there is no styling or anything like that so how do we fix this so first of all [Music] you