Mastering the WordPress Loop - Complete Tutorial

hey guys welcome back to the channel hope you're doing well today's video is going to be another tutorial on wordpress development and specifically i'm going to be showing you how you can work with the single most important function in all of wordpress which is the almighty wordpress loop if you don't know what it is the wordpress loop is what's responsible for displaying content on your pages your posts your custom post types and so on so working with the wordpress loop i'm going to show you how you can build this custom page here called articles now what exactly are you looking at we have a page that has three posts been displayed each post has its featured image it has a title and an excerpt but then down here we actually have a custom post type of country let me show you real quick i have the custom post ipa called countries we have six of them now these countries also have their own custom taxonomy just like you have categories for posts for our countries we have continents so this is a custom taxonomy we have two of them europe and south america and then each of these countries also have two custom fields which are capital and population so using the wordpress loop we're going to build this page that will display the flag or the featured image for each country the title of each country the accept for each country and then also the two custom fields of capital and population and we're going to do all of this by customizing the wordpress loop so for a start i'll show you how you can use the wordpress loop to display basic content for your posts and then i will show you how you can use the loop to display content from specific categories or specific posts from specific categories and then i'll take it a notch further by showing you how you can display content from your custom post types and i guarantee you that by the end of this tutorial you would have learned enough about the wordpress loop to be able to display any kind of content you want on any page whether it's content for your posts your custom post types your custom fields working with custom taxonomies you will learn everything that you need to know about the wordpress loop today now let me just give you i'll just inform you about something real quick today's tutorial is going to cover the actual uh displaying of the content okay so all we're concerned about in today's video is displaying the actual content for our posts and then our custom post type of country i'm gonna make a separate video which i'll publish either tomorrow or the day after that will focus more on design so we're gonna take this page right now and we're going to make it look more pleasing we will make the titles clickable we'll also make sure that for the countries you have the title being displayed under the featured image the population and the capitals of each country will have their own separate lines we're going to make this page look a lot more presentable than what it currently is so be on the lookout for that video today we're just going to focus on displaying content on this page using the almighty wordpress loop so today's video is going to be perfect for you if you are an aspiring wordpress developer or maybe you are a wordpress developer but you want to learn how to work with the wordpress loop how to customize it to display any kind of content that you want so without wasting any more time let's get started okay so before we begin the tutorial officially there are a few things that you need to put in place first of all you need to have an ftp account and you need to have ftp access to your wordpress theme files if you don't know how to quit yourself or quit for yourself an ftp account i do have a tutorial covering that check the link in the description box below and then since we're going to be working with actual content you do need to have some content in place on your website already in my case i have nine different posts in here you can see the titles and i also have three different categories of asia europe and south america and then each post has some content in it you can use learn ipsum text like i did right here you can see i've got your paragraphs of text i have the category of asia selected and then i have the featured image as well so please go ahead and create yourself these posts you don't have to go with nine posts i think five should be enough five posts should be enough maybe even four but make sure that you have at least two different categories because we're going to be working with the wordpress clip to display posts from different categories so have at least two categories and then since we're gonna be working with custom post types i have created a custom post type of countries as you can see i have six of them you don't need to go with all six three four would be enough but make sure you have at least two continents i've created a custom taxonomy called continents you can see right here under conscious we have continents and i've got two of them europe and south america so just like with your posts make sure you have at least two different continents with some countries in them and then for each country i have also created two custom fields of capital and population so let me show you an example i have spain right here so spin has the title of spain it has the flag and then it has some content again you can use them ipsum and then down here you can see we have the capital madrid and then the population of 46.94 so please these are the things that you need to have in place before you can begin the tutorial and then finally we will be working with the wordpress 2021 theme you could use a different theme but i'll recommend you know just to avoid any confusion just stick with the 2022 it's one theme and then you can also create a page called our articles you can end the page maybe even blog or it doesn't necessarily have to be articles but just just naming articles i think it's best there away so once you have all of this in place then you can begin to take the tutorial again if you don't know how to create an ftp account or you don't know how to create uh custom fields or custom post types i have tutorials covering all of that check the links in the box below for more information so once you have all of this in place then you can begin the tutorial and i'll see you in the tutorial right now all right so the first thing we're going to do is we're going to create our page template that we're going to use to display our content using the wordpress loop now right here i have connected via ftp to my website so what i'm going to do is i'm going to go all the way into the 2021 wordpress theme folder so i'm going to go into public html wp content go to the themes folder and now i'm going to open up 2021 and what i'm going to do right here is i'm going to right click up here where we have the folder and i'm going to say create new file and i'm going to call this one page dash calls okay so i'm naming my templates page articles and i'm going to call this one dot php all right let's go ahead and now click ok alrighty so right here you can see right now we do have our empty file i'm gonna go ahead and open it up and now what we need to do is we need to name the template file itself so i'm gonna open up my code right here php and then i'm going to add our comments so i'm going to say forward slash and then the aesthetics to indicate a comment and i'm going to say template name and then colon and then we can call this one articles okay so that's going to be our template now let me go ahead now and close our comment and i'm going to go ahead now and close the php code let's save this and okay so how do we know if it's actually working i'm going to go ahead now to open up the articles page right here so let's go ahead now and edit and then right here you should see on the template you should now see our articles templated by this i'm going to go ahead now choose articles as a template go ahead now and update and of course if we view the page well we're not going to get anything because it is completely blank right what i'm going to do is i'm going to bring this back in here and let's quickly add some code let's add the header so i'm going to say php get underscore header if you're not familiar with this function it basically pulls in the header.php file which will display contents of our header so things like the logo uh the main menu and so on and then let's also add down here the footer as well php get underscore footer and then let's close that up let's go ahead and now save and check this out if i go back in here and refresh the page now you can see we've pulled in the header which has basically the logo no menu yet but down here you can see we have the futa are being displayed so we are doing pretty well okay now let me introduce you to the almighty loop i'm going to go ahead and grab just some code right here on my order screen let me now come in here and paste that code okay what you're looking at right here is the most basic loop that you will ever find all right i'm gonna take this step by step so we have the opening php code in here and it says if have posts so basically the loop is asking wordpress that hey wordpress do you have posts to display so wordpress naturally is going to say yeah i have posted this play so now the loop is saying okay while you have posts to display i am going to display certain data about those posts that's basically what these the post is let me take that again first of all wordpress checks to see if rather the loop checks to see if we have posts yes we have posts and then while or as long as we continue to have posts we're going to display some content about those posts you can see this the post right here is what we need to say that okay we want to display these contents about each post okay now check this out i'm gonna go in here right now and i'm gonna add some code to display certain kinds of data the first one here is going to be the most popular which is the underscore title and now we'll have a brackets semicolon okay next let's also add the featured image you know our post they all have featured images so the tag to display that is going to be the underscore post underscore thumb nail okay and now semicolon and there it is so to recap the loop right now says hey if we have posts and as long as we continue to have posts display these two bits of information about each post so by now we're going to display the title and then the post thumbnail of our posts i'm going to go ahead now and save this but you will see what will now happen if i go back in here and i refresh this page nothing is happening well something did happen it displayed articles which is actually the title of our page remember we named our page articles but it's not supposed to display the title of our page right it's supposed to display the title of our posts and then also the post thumbnail the featured images why isn't it working here's the thing because this is a custom page template we've created wordpress doesn't really know that hey we want to display this content for our posts we need to tell wordpress explicitly that hey when we run this loop we want you to display this content of our posts now check this out if i open up index.php index.php is a traditional wordpress theme file wordpress knows about index.php this is a standard wordpress file all right in fact you can watch my previous video on wordpress template hierarchy to really understand the importance of index.php whatever i call you display in here wordpress will recognize it instantly now check this out okay i'm going to go ahead now and cut all these off let me just go ahead and paste that in a separate file i'm gonna go back in here i am going to grab this code notice that i didn't grab the template name because we're not changing this to a template okay it's gonna be the same index.php file i'm gonna paste this right now and i'm going to go ahead now and save this note that we still haven't explicitly stated that we want to display this content off posts but because it's now inside of the index.php which wordpress already knows to be a file that's used for displaying our content for our posts check this out i'm gonna go back in here and now if i go to the home page look at that now we have the title and of course we have the featured image we have title featured image we have title featured image still loading these are very very big images as you can see but you can see right now title featured image title featured image and so on and so forth so what i'm trying to show you in here is that because index.php is a file that comes with wordpress themes by default wordpress no we don't we don't have to state that hey we want to display this content for our post wordpress already knows but because in here page articles this article this page template is a custom template that we have created we need to tell wordpress that hey we wanted to display the content for our posts so how do we do that well before i answer that question let me just go back and grab this code right here once again make sure that my index.php file is the same as before let me paste that in there save and just to confirm let me go back in here refresh the page okay good we are back to normal but now how do we tell wordpress to display the featured image as well as the title of our posts on our custom page template file what we need to do is to create something known as an array and inside of that array we're going to say hey we want to work with our posts we want to work with posts that have been published and then we can even indicate the number of posts we want to display in our loop so check this out i'm going to come up here let's create some space and now in here i'm going to create this variable called args args you could use a different name for your variable but augs is very very popular so i'm going to use args and i'm going to say equals and now we're going to open up our array okay let's add brackets let's create some space and now inside of this array think of an array as like a collection of different kinds of parameters and there are values okay so the first parameter in our array right here is going to be known as the post type so this is where we're going to tell what is that hey we're working with posts so i'm going to say equals and then an arrow right there and now the value in quotes again is going to be post if i wanted to work with the custom post type of countries right this is where i would now say country as opposed to post if i wanted to work with my pages i would say page and so on so this is where we indicate that hey we're working with our wordpress posts now i'm going to add a comma at the end in here let's add another parameter in this case right now what kind of posts is it posts that have been published posts that are in draft mode post the pending and so on so the parameter for that one is going to be called the post uh status okay post status and of course the value here is going to be publish so publish okay and then let's add one more parameter in here and that's going to be the number of posts we're going to walk with so in here is going to say posts on the score per page and now the value is going to be let's go with three okay and there it is we've created our way let me add a semicolon in here be very very careful about all your semicolons and so on also please pay attention in here you will notice that at the end of the values of our variables or parameters in here we do have a comma so i have a comma in here a comma in here although right down here at the very end the last parameter in here there is no comma so you don't need to add a comma for your final parameter okay so just take note of that okay so we've created our way right now we've said we're going to walk with our wordpress posts posts that have been published and then we're going to walk with three posts in our loop right but we're not done right now we need to do something i'm going to introduce you to a particular function in here called wp query and right here you can see it says there are two main scenarios you might want to use this function the second right here is during the loop wpquery provides numerous functions for common tasks within the loop to begin with half post which calls wp query half posts is called to see if there are any posts to show so basically right now we've created our way for the posts but now we need to say that hey wordpress loop use this array so how do we do that i'm gonna come in here okay i'm gonna create a new variable and i'll call this one loop you can name this variable anything you can call it first loop post loop and so on but i'm just going to say loop and now this variable i'm going to say equals and now i'm going to say new because it's a new query wp underscore query [Music] and now inside can you guess what we're going to pass in here yes we're going to pass in our args that's basically what we have done right there and of course i am going to add my semicolon right there and there it is so to give you a quick recap we first of all created our array that has three parameters where we said hey we're working with posts that have been published and we're going to be working with three posts in total and now i introduced this function called wp query passed this array of args inside of it but then to make things smoother first and easier for us to work with i then passed everything into another variable called loop now for the final piece of magic i'm going to come in here right now and say when you say where you have the if we're gonna change this one to now the dollar sign and then loop so we're basically replacing the default loop with now our own custom loop so by saying if the loop has posts and while loop has posts loop the post and there it is let me add my dollar sign right here [Music] arrow and there you go that is basically what we have done in here hope you didn't find that confusing i'm going to go ahead now save this and let us see what we have i'm going to remove this let's go ahead and now refresh the page and there you go we have the very first post in here vista the buddhist temple we have the title the featured image and then we have the next post four days in saint petersburg we have the image and then last we have the rainbow mountain with the image so you can see right now it is working and just to prove to you that if it's really working i'm going to come in here change three to five okay let's go ahead now save that okay and i don't know if this okay it's saving right now sometimes when you're working with ftp software it may timeout but i think mine has saved so we've changed that to five i'm going to come back in here to refresh the page okay and let's see what we have so now we have one two three four and five there it is let us make one more change i'm gonna bring this back in here and instead of working with the post type of post how about we change it to the one for country check this out i'm gonna remove this and say country okay i'm gonna go ahead now save this i've changed the post type from post to country save that and now let me come back in here refresh the page and there you go now you can see i've got spain i've got germany i have colombia i have argentina and the russian flag isn't loading just yet but i do apologize it's actually my internet uh speed that's some stuff okay so there you have the russian flag now showing up as well so i apologize for the slow internet people you can see right now that it is working we just came in here and said hey the post i want to walk with right now is going to be country as opposed to post so let me just go back in here and now change country back to post but i'm going to add one more parameter in this case right now we could also stress the category of the post that we want to walk with and not just post from any category but we're going to choose a specific category so to do that i'm going to come in here right now add a comma right because it's no longer the last one i'm going to comment right now and add the parameter for the post category and that's going to be category underscore name okay so now we're stressing the name of the category and i'm gonna go ahead and give the category of asia okay and there it is i'm actually gonna put this in codes as well okay so now we're saying choose post five posts from the category of asia i'm gonna go ahead now to save this and let us see if this would work so i'm going to drag this away and now let's refresh the page and oh oh we got ourselves an arrow oops let me bring this back right here and oh okay you can see what i did i added a semicolon right here at the end of asia oh my gosh after i just said that for the very last parameter you don't need to add a coma ah i'm an idiot let me go back save this again do apologize for that drag this away refresh and there you go all right so we have got the first one from asia and now you can see the second article from asia as well doi ethanol review and then last but not least vistin i visited chiang guai as the third post from asia to prove this to you i'm going to go ahead to the back end right now and just confirm that these three articles are indeed the articles from the category of asia so right here let's go to all posts and let's see what we have and there it is so you can see this in the buddhist temple is asia ethernet review is asian of course i vista chiang rai is asia as well so we've successfully been able to pass a fourth parameter that uses the posts from the category of asia now at this point i want to answer a question that you may have and that is what if we wanted to display articles from more than one category so what if in this case right now instead of just asia i also wanted to display posts from let's say you up as well all you need to do is to come right here where you have asia add your coma and then simply add the name of the next category and there it is if i go ahead now and save this and i go back in here and i refresh my page now you will see i have articles from europe now as well you can see four days in petersburg that's in russia you've got the one in turkey now the one in glasgow scotland and so on so that's basically all you would need to do another question you might have here is what if you want to display a post or posts that belong to more than one category so maybe you wanted to display posts that belong to both asia and europe okay all you need to do is you come right here remove that comma and then simply add the plus sign so this is basically you saying only show posts or show posts that only belong to both the asia and europe category and that's how you'll be able to do that okay we're going to move on now to create our second custom query so you can see right now i've gone back to i've reverted back to the original loop where we display three posts from different categories right but this is for posts now we're going to display content from our custom post type of country so what i'm going to do right now is i'm going to grab everything in here grab all this code let's copy that come right here and now paste it all over again and what we're going to do right now is just to change post right here to country okay and now here let's make a change to the variable of loops i'm going to call this one second underscore loop okay just to give it a different name from the first one that we created in here so i'm going to come in here and call this one second underscore loop and then right here i'll call it second underscore loop as well now check this out i'm going gonna go ahead now and save this all right so we've got two queries right now on our page let me drag this away let's refresh the page and what do we have now okay you can see we've got the very first post from a regular post post post and then down here you can now see that we have our country our custom post type spain germany and russia now right here you might think okay we've done a good job now we're displaying a second query however there is one thing you need to do whenever you have more than one custom query on your page this is good wordpress developer uh coding okay there is a particular function i'm going to introduce you to and that function is the one right here it's called the wp reset query and it says it destroys the previous query and sets up a new query this should be used after query post and before another query post this will remove obscure bugs that are called when previous wpquery object is not destroyed properly before another one is set up so the thing is right here because we already created a custom query where we said okay we're going to display our posts that have been published before you create another query you need to reset the query back to its default back to its default state and then you can introduce a second query you can see right now that the code still works but it is good practice to avoid any possible bugs to use the function so what i'm going to do right now is i'm just going to grab the code come right here you have the end if and then right here i'm going to paste that all important wp on the score we said underscore query code i'm going to go ahead now let me add my semicolon right there i'm going to go ahead and now save this and now let's go back in here let me do a hard refresh of the page just to make sure nothing got broken so we have a first post i can post third post and now we have our three countries right there spain germany and russia okay awesome awesome awesome now i'm gonna bring this back in here and let me ask you a question okay what if just like previously what if we wanted to display our custom post types from a different taxonomy in this case right now i've got country right but then don't forget that i already created a custom taxonomy of continent uh let me show you let me drag the page right here so you can see on the countries we have the custom taxonomy of continents and then inside we have europe and south america so what if going back to our code we only wanted to display countries from the continent of south america how are we going to do that well i'm going to come back down here we're going to add a comma and now let me introduce you to the new parameter called the tax underscore query this is the parameter for pulling content from a particular taxonomy so right now i'm gonna come in here and let's see if this works i'm going to come in here and say encodes south and then dash america again let me just drag this page right here and show you we're using the slugs you can see this log right here it's south dash america so let's see if this would work let me remove that come right here make sure the code works okay now i'm gonna go ahead now and save this okay let's see if this would work i'm gonna come right here i'm going to reverse the page and what do we have we have nope we have nothing i mean we still have our countries but these are from europe these are not from south america so what's going on in here so the thing is because we've created a custom taxonomy of continents we haven't necessarily told wordpress that hey pool south america pull the category of south america from the custom taxonomy of continent so right now wordpress doesn't know where to find south america it's like where is south america is it a car is it under a custom taxonomy okay what is the name of that custom taxonomy wordpress does not know so what we need to do is to create another array and then tell wordpress that hey in this array we have the custom taxonomy of continent and then we have the category or the custom taxonomy category of south america so how do we do that what we're going to do is right here i'm going to remove south america and i'm going to open up an array again all right and now let's open up our brackets for the array let's create a new line and then in here we're going to pass in another array again it's not complicated don't get confused we're simply passing a separate array inside of our first array so now in here this is the array that's now going to hold the actual parameters and the first parameter in here is going to be takso no me okay and now we're going to stress the name of the taxonomy which is continent okay continent let's add a coma next right now is we're going to have to tell what press how to find the actual name or the id of that taxonomy in this case right now the parameter is called field okay and now what field are we trying to target in here it's going to be the field of the slog so i'm gonna come in here right now and say slog because remember right here we're using the slog to identify which particular category we want to display so we're using the cut this log right here so that's why i've said slog and now let's add another comma and then finally this is now where we can tell the name of the category and the parameter for that is going to be terms okay and now simply going to add that one and now here we can now say south dash america let me go ahead now and first of all make sure that all the brackets are closed so we've closed the first one in here but then the second one right here okay second right here has not been closed you can see so we need to add another closing bracket right here and there you go so this one closes this one this one closes this one up here and then this one closes the one up here okay let's go ahead now save this and now let's try to refresh the page and see what we have and there you go now you can see we've got our countries of argentina colombia and brazil been displayed under the custom taxonomy of south america so just to give you a recap again right here we're using the function text query and now we're going to tell wordpress the name of the custom taxonomy and then the category under that custom taxonomy and then also how to identify that category so we did right here was created an array pass another array inside of it and said the taxonomy right here is consonant the field is slog you could also use id as well for the field and then the terms south america right okay now let me ask you another question what if we wanted to display countries from more than one category just like we had with the post where we displayed from both europe and um asia what if we also wanted to display from south america and europe how are we going to do that it's not going to work if you're coming here right now and you say okay i'm just going to add a coma right here and then say europe all right let's try that one let's see i'm going to save this and see if that would work let's bring back this one right here let's refresh the page and you can see it does not work at all in fact nothing shows up any more this is not going to work when you're dealing with a custom taxonomy so what we need to do now would be to simply add an array where we have our terms because now we're dealing with more than one custom taxonomy so right here i'm going to say array and then we can add the brackets and then the closing brackets for the array and then for the actual individual categories we're going to cover them in quotes and there it is so terms array and then in brackets you'll have your categories covered in quotes let me go ahead now save this and make sure that is saved okay i'm gonna go back in here let's refresh the page and actually i forgot to do one thing i'm sorry because we're displaying uh well more countries now we're gonna change the post per page from three and let's go all the way to five okay so let's make it five let's save it and uh let me drag this away come back in here refresh and now you can see now we have our three countries from europe and then two from south america which are argentina and colombia so this is exactly how you will display your custom post types from multiple or custom taxonomies let me now show you how to display the valve that we have in the custom fields i created and just to remind you right here you can see i created two custom fields one called capital the other one called population for each country so let me show you how to display the information in them before we do that let us display the excerpt for our posts and countries so up here where we have the very first loop for our posts i'm just going to go ahead and display the underscore excerpt so this will display the except of our posts and what i want to do right here is to actually grab the thumbnail and display that one first so basically the structure would be the featured image the title and then the excerpt all right i'm gonna do the exact same thing down here as well for the loop for countries i'm going to move the post thumbnail and just paste it just above the title and now let's go ahead and display the excerpt as well okay the excerpt and there it is and now for custom fields all you need to do is just say the underscore field and then in brackets now add the name of the field and the first one here as you can see is capital you can see capital is the name so i'm gonna go ahead now and just type in capital in here capital and then next is going to be the population field and now right here i'm going to say paw poolation and there it is let's go ahead now and save this and let's see how this would look like i'm going to remove this let's refresh our page right here and there it is so now we have the featured image appearing first we have the title and now we have the except for the very first post and then same goes for the second post you have a third post and now right here you can see that we do have the featured image for spain and then we have the title called spain and then we have the excerpt and then down here i know this looks very very rough don't worry we're going to fix it right here you can see the capital of spain is madrid and then you can see the population is 46.94 it's supposed to be million i'll show you how you can add milan in just a second and then you can see for germany as well we have the flag you have the excerpt and then berlin being the capital of germany 83.02 million people and in russia of course uh moscow is the capital 154.4 million and so on okay so we've successfully been able to display all the information that we want for each and every one of our posts now it is time to do some custom cleanup we need to clean up our page because quite frankly this looks uh really really bad right so the first thing i'm gonna do right now is to add or create some sort of container for our posts let me go over to the homepage right here now keep in mind we're working with the 2021 theme so if you're working with a different theme it might be a little bit different the styling but here you can see how it is laid out right you have the title you have the featured image and then you have to accept but you can see that the information our content area seems to be in a particular container that has equal margins from the left and right our current page there are no containers there are no borders there are no margins you can see all the data is stuck right up next to the left border right here and then divide bother there so the first thing i'm going to do is i'm going to borrow a class from the 2021 theme and that class is called the entry dash content like right here let me go back in here if i was to inspect with my browser let me bring this in here right here let me show you the actual class i'm talking about it's the one right here you see where it says div class equals entry dash content right here this is the class that's able to put this content inside of a container so what i'm simply going to do is i'm going to borrow that class and here's exactly what i'm going to do let's bring this back in here and right up here just before the very first loop i'm going to open up our div and i will say class equals and then i'm simply going to say entry dash content okay let's close the div and of course down here at the very bottom we will close the div properly div and there you go i'm going to go ahead now to save this and let's see what we have let's go back to our articles page let's do a hard refresh and okay so even though the featured image is still occupying the full width of its container you can at least see right now that the excerpt area is now centralized so we're starting to improve on the design what i'm going to do right now is to add one more class okay and check this out this class is going to be for a div that's going to occupy each of our posts what am i talking about take a look at this all right right here where it says while loop half post and so on i am going to introduce a div that will hold this information for our posts and also another div that will hold all this information for our countries check this out i'm gonna go back in here and now i am going to close the php code right here because i want to introduce html code so you can see right now i've closed this php code right here that's why now you can see that this remaining php code is now in black meaning that it will not run but what i'm going to do is i am simply going to open up a div html div i'm going to call this one class equals and then give it a class of post dash content okay now i'm going to tap this one and then down here i am going to close the div for html but then we need to open up php code again so that this would work and all these would work as well so right here i'm going to go ahead and open up the php code thp and then after the excerpt we'll go ahead now and close that php code so now we've closed this block of php code and i'm just going to go ahead now and open up new php code again for this remaining our content right here okay let's go ahead now and save this so this class right now post content is going to work wonders for the page and i'm going to show you exactly how let's refresh the page and now you can see our posts the featured image the title the accept are all now being centralized because of this class that we added called post dash content all right i'm gonna do the exact same thing for the countries right now so down here let's do the exact same thing i'm going to close this php code and then open up our div class equals post dash content and then we'll open up the php code php display all of this and then down here we can close the php code we can close our div as well and then finally open up the new php code as well for the remaining of our content of our code i'm gonna go ahead now save this and of course let's go ahead now and refresh our page one more time and okay the posts are still fine and now you can see the countries have also now been centralized at the center you can see we've got spain we've got the capital right there we've got the population and for germany russia argentina colombia and there it is so this still isn't finished i mean obviously you you want to make a few more changes like add some spacing make the link right here the titles clickable and then also for the countries as well you can see you probably want to have spain on its own separate line and then you want to separate the capitals from the population we're supposed to even add million at the end of the numbers for the population as well so all of these things still need to be fixed however please check out part two of this video i'm going to make another video where we'll cover more html more css to make our page look a lot more presentable so you can look out for that particular uh tutorial but so far so good we've actually come to the end of today's tutorial where i have shown you extensively how to work with the wordpress loop i have shown you how you can display your posts a number of posts the status of the posts i've also shown you how you can display using the wordpress loop your custom post types your custom taxonomies and also to use the look to display custom fields as well well there you have it we've come to the end of today's tutorial where i've shown you how to build this custom page using the wordpress loop and i sincerely hope that you've now learned how to customize and work with wordpress loop to display any kind of content that you want on your page regardless of whether you're working with the wordpress post or you're working with wordpress uh custom post types like i said in the intro today's video is just part one of a two-part series in the next video which i'll upload either tomorrow or the day after we're gonna take this existing page right now as it is and we're going to modify it to make it more presentable what am i talking about we're going to make the content area a bit wider we're going to have each post and each country actually be a side by side so we'll have three uh posts on one line and then in the second section we'll have three countries as well and then i'm also going to show you how you can make the titles of each post and each country clickable so that when somebody clicks on the title it will take them to the actual page for that post or country i'm going to show you how you can incorporate html tags like h1 h2 with your php code add some css just to make this page look a lot more presentable as it is i don't want to cover all of that into this tutorial because this tutorial would have become way too long so if you enjoyed today's video please do give it a thumbs up share this video with anyone who feel my benefit and if you're watching my videos and you haven't subscribed please do subscribe hit the bell so that you're notified whenever i upload a new tutorial and if you have any questions about anything we covered today please do let me know in the comment section below i'll do my best to answer them as soon as i can my name is alex it's been a pleasure i will see you in part two of today's video

Channel: Web Monkey

Views: 1,719

Keywords: the wordpress loop, wordpress loop tutorial

Id: -XOBJm2SObQ

Length: 50min 24sec (3024 seconds)

Published: Tue Jul 27 2021