How to Create Custom WordPress Page Templates with Custom Post Types & Custom Fields

in this episode of the web monkey I'm going to teach you how to create your own custom page templates using custom post types and advanced custom fields using the idea you have said as a source of inspiration we're going to create our very own custom post type called games we will create a custom taxonomy called genre attached to the games we're also going to create a set of custom fields that we attach to each game review we'll have custom fields for the release state publisher developer and price of each game that were reviewing we're also going to create a custom page template that I'll display the date each game reviewers published the title as well as the content of the developer custom field for each game review will also display the featured image as well as we accept for each game review and finally we will create a separate page template for each individual game review that will display the full contents including the three custom fields as well as the full contents of each game review so without much further ado let's get cracking alrighty so welcome to a brand new episode of the Webb monkey and as I said in the intro video fine I'm going to show you how to create custom page templates using custom fields and custom post times now just to give you an example of what I'm talking about take a look at this site this is the IGN web site it's basically a website where you can read reviews for different types of video games and here is a review for a game called uncharted 2x fortune now you can see we do have a short description over here but below we have additional fields like the release date the journal our the publisher the prize developer and so on and so forth now if you wanted to create something like this quiz WordPress you could technically use posts all right however it's not going to be the best or the neatest way of doing stuff like this you typically want to create a separate post type what if on your WordPress website you had your regular blog posts but then you also wanted to be able to create reviews for video games it would be ideal to be able to separate your regular posts from your video game reviews and that's why you would need to create a custom post type specifically for your video game reviews now by default WordPress comes with two post times actually three if you count media but the two major ones are pages and posts that's what we call post types and WordPress technology you'll have your posts and then you have your pages and you can see right now we have posts right here we have pages and as I said that's other one is media but what we're going to do right now is we're going to create an additional post type called games that is going to be our custom post type games alright so what I'm going to do right now is to install a plug-in which I can use to create this new post type now you could use code there are manual ways of doing this but I very much prefer using a plug-in so I'm going to come down here to plugins let's add a new one and the plug-in I'm going to install is the custom post type plug-in and it is by web dev studios very fantastic plug-in install let's activate alright awesome now the next thing it will be to create the game's post steps I'm going to come down here to add / edit post types now for the slog very very important I'm going to add game alright that will be the slug game and then for the player label will be games obviously and then a single label will be game take note of the slug by the way very very very important we'll talk about that later now from here what I can simply do is I could scroll all the way down hate-on or - and you can actually change the default text for each one of this section to change the labels so for example you're mending them could be my games add new game stuff like that if you want to but I'm not gonna waste any time doing any of that now down here you could choose additional fields that will support this particular post type you could also choose to add built-in taxonomies like categories and tags that would support this particular post type as well however I prefer to use my own custom taxonomies for my custom post types so instead of categories we're going to have John Ross now just like movies video games have different journals you have the hollow general you have action you have for special shoe that you have adventure and so on and so forth so we are going to create our very own custom taxonomy so I'm not going to take categories or tags either I'm just going to leave that blank let's add the post type and now you can see we have games right over here as you can see so in addition to posts pages and now have games and I can come over here click on add new and I can add a game just like I would add a regular post but let's now create the custom taxonomy specifically for games right so to do that let's come down here to see ptui again let's now add a taxonomy right now in case you wonder exactly is this taxonomy well categories and tags are examples of text column is a taxonomy is basically a way of grouping setting data together so just like categories you can also have your own custom taxonomies so for the slug here it is going to be the genre alright and for the plural label I'm actually not sure if there's a pool for genre it's a genre of the genre I'm just going to leave it as January okay forgive me if I'm wrong I'll just leave that as genre English is not my first language by the way so I'm trying to give give out excuses right so we got journal we have Geneva now over here we can attach this particular taxonomy to a specific post type and it again so right now we have post pages media but then we have games so I'm going to check games and I am going to add my taxonomy all right so now check this out if I go back to games you can see right now we have genre down there just like we post when you hover over post you have categories you have tags with games and now have jaanwar so I can create my own custom genre specifically for my games post times alright so let's even go ahead right now and create a few journals all right let's come over here right now and let's go with action probably the first one let's add that let's add color let's add that one what else do we have we have adventure adventure and let's see what else do we have we have adventure we have holo we have action I'm just gonna go in first person first person alright let's add that cool so now we have four different genres first-person adventure horror action so every time we now add a new game we can also add a specific genre for that particular game that were reviewing alright so the very next step would be to create our custom fields and just like on the IGN web server we have at least eight genre publisher we're going to create the exact same fields for our own games and in order to do this we are going to install a new plugin alright let's go to add new plug-in and the plug-in is going to be called the advanced custom fields in fact ah gosh it's so hard to like type advanced custom fields hi it is by Elliott Condon again a very fantastic plugin so let's install it and let's go ahead and activate the plug-in awesome alright so next thing you want to do right now will be to go to custom fields let's click on custom fields and now we're going to add a new group specifically for the custom fields for the games so let's add new and we're going to name that games alright now let's go ahead now and add a very first field and a very first field we're going to add would be the release date alright this date now as I click on the field name this gets filled up automatically now for the fill type you do have a variety of fields you can choose from all right note that with the provision of the advanced custom fields plug-in he also have additional fields as well but for the purposes of this particular tutorial the free version will do so for the release date ideally we should use a date picker all right I'm going to click that big picker and you can also change the format as well if you want to we do have the default here which would be the year month and day and you can also change the display format as well but I'll just leave it as it is I'm going to go ahead now and close the field and now let's add another field again and this time we are going to add the field for the developer but actually publisher should come first publisher the publisher and fill title the text I think that's fine and I'll just close the field let's add another one again developer click inside here text is fine once again for developer we don't need to change that let's close the field let's add a new field and let's see what else do we have here we have at least a developer publisher price yes how much does the game cost price very very important now for the text in here what I'm going to do is I'm going to switch this up a little bit I am going to use number this time I run okay so let's go with number now I may not have mentioned this previously or actually I didn't but you can also make certain fields required or not required all right so it will depends on you and you can also add your placeholder text and some other things like that but whatever I do I here is to append all that I prepend something to the price because we are going to be displaying the prices in dollars an American dollar so rather than having to constantly put in the dollar sign every single time we're adding a new price we can just prepend the dollar sign to this particular field what I'm going to do right now would be to add the dollar sign over here where we have the appears before the input all right pretend that and again you can add additional values like your maximum value your minimum value step size and so on and so forth all right let's do that so so far so good we have the release date we have the publisher we have the developer we have the price and I think that's fine actually so the last thing we need to do right here would be to show this filled group if this post type is equal to game all right so we're attaching this this group of fields to the game post type so that's game let's go ahead now and publish but um all right awesome now let's go to add a new game all right add new now take a look at this by default WordPress would automatically grant you certain fields that you can use with your custom post types those fields are the title and you still have the white box where you can add your text but then over to the right you also have the featured image that's why I didn't spend any time creating feel specifically for them I didn't create it so for the title for the featured image I don't need to do that right but now take a look at is we have the release dates between you click inside you can now choose a date alright you have your publisher you have a developer and then take a look at that for the price we do have the dollar sign in front of it so these are the four fields that we can now add every time we create a new game now you may have noticed something rather strange and that is the fact that over here to the right but we have Joe Nova despite the fact that we've created different types of journalists such as the adventure action we don't see them listed now ideally whenever you're creating a new post and already have your categories created you will see the list of all those categories over there right but we don't see the ones for our genres so what exactly is happening here well all you got to do to show all the different genres here you've created with be to come back down here to see ptui click on the add/edit economies click on edit economies over here make sure that the custom taxonomy that you want to edit is selected in this case it's genrih and then come all the way down here to where we have settings and then where you have hierarchical change false to true all right this would allow the taxonomy to have parent-child relationships in other words basically you would be able to see all the genres that you've created so let's go ahead now and save a taxonomy let's go back to games add new and now take a look at that over here to the right we now have action we have adventure we have first-person and we have holo the next step right now would be to create some actual game reviews so let's go ahead and create a very first one which would be the review for the Arkham Knight and I do have the page from IGN and if you haven't played the game and you enjoy playing superhero games then I would highly recommend you play this game it is a pretty awesome game now I'm not going to go ahead and use the text from the website itself what I'm going to do would be to use this site called Lewy Bassam net and it's a site where you can grab some sample text which you can use to create sample content basically so we're going to go ahead now and copy this text to the clipboard let me drag that away go back to add a new game and let's go ahead and add the title I'll come night review let me switch this to the text mode let's paste oh I'm sorry I ended up it pacing all the content in the title oh my gosh sorry about that oh come night again review and inside the text area I'm going to paste all that content awesome now I'm going to select action as the genre and I do have a featured image which I got on the internet here it is right here and the size is 1920 by 1080 and the reason why and using images with this particular size is because I am using the WordPress 2017 theme and I'm just show you the front end so you can see right now this is the 2017 theme I'm using I'm not using any other theme and when you click inside as the individual posts pages you will see the full featured image the full size so I think 1920 by 1080 might be a little bit big for most people but for me it's okay so this is typically how you would see posts using the WordPress 17th impulse that have featured images of 1920 by 1080 I think I think this is pretty awesome let's go back so I've sorted my featured image now let's come down here now and fill out the custom field so I am going to use the IGN site as my reference point here release date was June 23rd 2015 so let's do that June 23rd 2015 now the publisher was one of brothers of course when a Bros the developer was Rocksteady a very very awesome Google developers work studios and the price well we actually don't have that from IG and let me see if I can find out anywhere I actually don't see it so I'm just going to go ahead and say $29 all right it's a pretty old game now so $29 should be fine I'll just make that $29.99 $29.99 alright so let's go ahead now and I'm going to go ahead and publish this so we have a very first game review for the Arkham Knight we have the actual review itself we have the title the featured image the journal selected and we have our four custom fields filled in as well so what I'm going to do right now would be to pause the video and I'm going to go ahead now and add three other game we've use one for adventure one for first-person and one for hole alright I'm back and as you can see I have successfully created three additional game reviews of created one for the Uncharted 4 review for the Resident Evil 7 review and for the battlefield 4 review as well so the next step right now would be to start to display these video game reviews and their custom fields I've created all the content of the back end so what I want to do right now would be to create a page and I'm going to put the link to that page on the main menu so that when people click on that link it will take them to a page the whole set to display is the game reviews and their data kind of like all we have right now on the homepage where you have the title of the post the featured image and then the excerpt of the post so I want something that is a lot like this on the game up page so let's go ahead now and create a page they'll be used to display our game reviews so let's go ahead create a new page and I'm just going to go ahead now and name this page reviews all right to publish that page let's come down here to appearance menus and I'm just going to add reviews check that in right here let's save the menu let's go back to our home page now we have reviews but when we click on reviews nothing absolutely happens we're not seeing the game we've used we're not saying the images the data the custom fields not him and the reason why this happen is because we have not told what press how to display our custom post types by default WordPress only knows how to display media files pages and posts we need to tell what press that hey we have created our custom post type called games and we've also created game reviews so we need to tell what cus to that and how we can do this is by creating something known as a custom page template now a page template is one that tells what press the kind of content to display and how to display that content so just about every seem that you use would have its own templates which waters would use to display content and to give you a better idea what I'm talking about I am going to drag my notepad plus plus software over here I have connected to my custom site as you can see and if you have no idea how to connect to your waters website via FTP please check the links in the description box below I do have two awesome tutorials that will teach you how to use notepad plus plus and FileZilla to connect to your site by EV T P so I have connected so now I am going to double click on my wp-content folder and now in here you can see we have the plugins folder the themes folder that's what I'm interested in let's double click in there and now you can see my four themes 2015 2016 2017 and of course the 2017 child theme if you don't know how to create a child theme again check the link in the description box below I have an awesome awesome super awesome tutorial that will teach you everything you need to know about what pres child themes now currently currently on my site I do have the 2017 child theme activated as you can see 2017 child is on it's active but before we go to the 2017 challenges open up the 2017 theme folder so I can show you some templates we have 404 dot PHP we have archive dot PHP comments that PHP for the dot PHP all these are page templates all right now depending on the thing that you use there might be certain template that are uniquely the same but in most cases you have all that templates that are standard like Jo our footer dot PHP this is what WordPress would use to display content in your footer section you have the header dot PHP this is the one that workers would use to display content in your header section so your logo your main menu and stuff like that would be displayed using this particular template I will make a tutorial they'll focus specifically on page templates and template tags so watch out for that one you can click on the notification bill right now for this channel I will upload that video in the coming days so let me just close this to alright and let's jump back now to the 2017 child theme folder alright now I want to create a page template for our reviews post types alright so I'm going to do could be to a click create new file and I'm going to say page oops page - reviews dot PHP alright press Enter so now you can see we have page that reviews the PHP now for the all-important code that will tell what place that hey this is a page template I can open up our PHP syntax PHP and then a new line for slash topcoats I'm going to say template name colon and then reviews alright now this is the all-important line that will tell what press to recognize this particular file as a custom page template so let's close it up we have our aesthetics for slash and then let's close our PHP syntax let's save this now one way how you can tell whether or not you've actually successfully created a custom page template would be to go to any one of your pages and then edit that page so that's good too reviews click on edit and now over here to the right you should see a section called template and then inside of that job done you should see the name of the template that you've created in this case we have reviews alright so let me click on reviews choose that update the page so now we are telling WordPress to use the reviews template to display content for this particular page now take a look at this right now the template is virtually empty there is nothing inside so if I view this page take a look at that there is absolutely nothing showing up because its template is empty I'll take a look at this what if I said check this out man I'm just save this refresh the page and look at that check this out man alright so now you know that indeed WordPress is using this particular template to display content for our reviews page awesome awesome awesome so right now we need to put in the code inside of the page we have used templates that will tell workers to display content specifically for our games all right so what I'm going to do right now would be to jump back to my main theme the 2017 theme and going to steal some code let's go to the page dot PHP and I am going to grab all of this right here let's grab that and then I am going to paste that in here let me delete the closing syntax right there okay awesome now let's just go ahead now and save this all right now you can see we have some code so let me save that let's go back again let's refresh and I'll take a look at that we essentially have the same page that we had even before we had our created the custom page template enough because right now the reviews is using this particular template however take a look at this this particular section over here where you have while have posts the post this is the WordPress loop again the WordPress loop is another topic entirely it's basically the most powerful function in WordPress that tells what press the particular post type to display and how to display content for that particular post type again remember that with WordPress you have pages and posts those are the two inbuilt post types that come with WordPress and of course our media however we want to create a special loop they will display content our custom post type which is the games right so we don't need this template right here that displays content for pages as you can see right so I'm going to delete that let's save this once again let's refresh the page all right fine just in case you're wondering hey how do we have the logo and how do we even have the footer section well that because we have get header and then we have get footer so these two lines of code tell what place to get information for the head and specifically and then for the footer specifically as well so that's why we have the logo and then we have the footer section again I will make a tutorial explaining template files in more detail all right so now we have to put in the code that will tell what press to display content for our games so check this out this is going to be a little bit tricky especially if you don't have any PHP experience but just bear with me I think we can do this together alright get some space okay here it goes now just underneath that we have main class for all that stuff I am going to open up my new PHP syntax once again press Enter let's use the tab now I am going to say args okay equals array open up the bracket let's now say post type now this is going to be equal to we views actually that's double check this okay because what you put in here is going to be very very important and to confirm this let's go back to a back end let's go to the C ptui and it puts x go to edit post types ah okay so take a look at this is actually game okay the post types log is game not review see I'm actually confusing myself over here okay game now we've used game game game alright that's fun in game alright let's close this semicolon all right now I know if you don't have any PHP experience you might be wondering what the hell is going on right now we have just created a loop so we haven't actually finished but we have we are starting to create a loop that will tell what press to display content specifically for our custom post type known as game all right so next up will be to say the query would be equal to new WP on the score query and then inside args alright now again if you have PHP experience then you already have an idea of what's happening if you don't if you are a non techie or someone who doesn't have any programming experience all all that advise you to do is just to understand what's happening and then you can simply copy and paste the code over and over again okay you don't have to understand every single technical detail just know what the code is useful and then know what necessary things you might need to change dependent on your own our website all right so the new query calls new WP query args let's close this alright so now what we're going to do would be to create the actual loop itself we have told what is there hey ok we want this particular template to display the content for the custom post type known as game but now we have to create the actual loop itself all right so what I'm going to do right now will be to copy line of code over here and I'm going to paste that right here this is the code to telling what press that hey if you have content for the game post types and while you have content for the game post type now displays the content for your game post types all right so now we have to tell what press the kinds of information to display whether it's the title of our game review the content the featured images and so on and so forth and this is where template tags are going to come into play template tags are built-in functions that display a very specific kind of information so right now thanks to this particular line of code WordPress is currently looking through all our game reviews so now we're going to say display the titles of the game reviews so let's do this let's open up a new PHP syntax PHP and now let's use the very first template tag which is going to be the tie tool brackets semicolon let's close this let's also close the loop as well very very important so PHP and while semicolon it's always very very important to close every single loop that you open up so that's all we're doing right now because if we don't you're going to crash the website so let's now save this let's go back to our website go back to the views page and presto take a look at that we now have the four titles of our game reviews because once again once again WordPress is currently running through all our game reviews and now we've told what press to display they try to for each one of these reviews and that's how you can now see the titles awesome awesome awesome so let let's begin to customize how we display our information I'm actually going to make this in h2 alright let's make this an h2 make that an h2 let's save this let's go back in here and see how this looks like take a look at that these are now all h2s all so let's now display the featured images so to do that I am going to open up another template tag this time it's going to be the post on the score some nail ikats semicolon let's close this save let's go back let's refresh and there you go now we have the featured images for our we've used showing up as well let's even do one more let's now display the excerpts for each one of our game reviews again we have yet another attempt attack for that V on the score you get it except semicolon let's save this again let's go back let's refresh boom and now we have the reviews whether they accepts showing up as well and of course if you click on continue reading this will now take you all whoever clicks on the link to the full our post page for that particular again review awesome awesome awesome so that we now have our reviews page essentially looking like the home page where we have the post this time around but there are some slight differences let's see what we have okay we have the date showing up just above the title and the title is also clickable as well as you can see so let's try to change those two so first things first let's add the dates that's above the title so I'm going to jump in here and I'm going to add a new template tag PHP now you might be tempted to say oh the dates should work and it will work to a certain extent let's try this let's save that let's refresh let's go to our views page okay so now we have the data right here as you can see July 1st 1 and 17 however we don't have the date for the rest and evil several we don't have the date for uncharted 4 and we do not have the date for Arkham Knight either and the reason why this is happening is because I created all this for posts on the same day now when you use the template tag for the day to this one it will only display the date once if all the posts not publish on that very same day alright so to change this to display the date regardless of when the post war created published are internal changes to the time alright and now inside here i am going to add some code specifically that will format the date in the order of the month the day and the year so that's going to be f j come on and now why alright let's save this let's refresh the page and now you can see we have July 1st 2017 July 1st 2017 July 1st 2017 and of course July 1st 2017 so there you go we have successfully successfully created a reviews page with debate with the title with the featured image and with the excerpt and of course I forgot the links the titles are still not clickable so we have to fix that so let's quickly fix that one as well now to make the type of clickable I don't have to add some extra code in there so what I'm going to do right now would be to say after the h2 I am going to go ahead and say a a to F equals I know this can be confusing if you don't have any PHP experience but please once again just bear with me the permalink okay brackets semi-colon let's close this and let's see what we have over here got to add this one as well okay the title I think this should be good got a close the a tag here as well okay I think this should be good this should be good I'm just going through that once again AHF it calls this PHP the premiere link art yeah I think this should be fine we should be good to go alright awesome so basically what happening what's happening over here is that we have created a clickable link for our titles using the function the permalink the permalink is basically telling what this hey this particular link right here make it clickable so that when people click on that link it will take them to the full high post page for that particular post time all right so let's save this let's refresh the page and now if I click on the link it take them it takes us now to the full post page for our game review as you can see awesome awesome awesome so we have successfully successfully created the full page template for our reviews page however we still haven't displayed any of the custom fields remember that for each one of our games reviews we have four custom fields we have ones for the release date for the publisher for the developer and then the price so in the very next section we are now going to cover how to display the custom fields already so welcome back to what is essentially part two of this tutorial on how to create a custom pick template using custom post types and custom fields in WordPress and in the very first pass we successfully created a custom post type of games we created a custom taxonomy of genre we were also able to create for custom fields for each of our game reviews and we also created a page template a custom page template specifically for the reviews page that will display the title the dates the game reviews published they accept as well as the featured image of each of our four game reviews however we still haven't been able to display any of our custom fields and remember that each game review has four custom fields we have the release date we have the publisher the developer as well as the price so what we're going to do right now would be to display one of these custom fields they're going to display the publisher of each one of the game reviews and to do that we're going to bring in of course a notepad file over here we have the reviews template over here so we have to figure out a way how we can add a code that will display custom field of the developer and let me introduce you to this particular website this is the website for the advanced custom fields plugin very very fantastically upset the lots of documentation I will put the link in the description box below but what we're trying to do right now is to display the custom field of developer and if we go back to our custom fields let's take a look the developer is a text field so if i go to the advanced custom fields website take a look at the documentation let's say we have the field types over here we have text all right I'm going to click on text right here now over here we can see how to display the values of our text fields and this is the code right here so all I'm going to do is to copy this let's copy that let's go back to templates let me drag that over here now let's display the developer just beneath the date or rather just below the title let's display below the title all right so let's do that I'm going to display right here and let's make it an h4 we don't need to make it big just an h4 tag h4 now in here you can see we have text in quotes this should actually be the name of the field all right so let's go back and see how we named this field the field name here is developer so we're going to do right now is to go back to a template let's change text to developer developer let's save this let's go back to our game reviews page and now you can see we have guys as the developer of battlefield 4 we have Capcom for it and Evil 7 we have Naughty Dog software for that fall and of course we have worksite studios for Arkham Knight so we have successfully been able to display a very first custom field of developer for each one of our game reviews awesome awesome awesome now I know that there are certain things you can clean up over here for example there is a lot of space - in the title of the game review and the developer field there's a lot of margin in between these two so that can be cleaned up using some CSS if you wanted to however we can actually go ahead and even customize the way the developer field actually looks like so let me give you an example I can say add some text right here and say developer and then - and then the name of the developer we could even make the developer field itself up here in an italic format so we can say II M and then at the end right here /e m alright so let's see how this is going to look like let's save this let's now go back in here refresh the page and there you go we now have developer and then the name of the developer in italic format you can see how that now look so feel free to customize the way your content appears it's really up to you so awesome now we still haven't done one major thing and that is to create a custom template for our individual game reviews we have the main page for reviews where we have just an accept of each game review but if we click on continue reading all the title of the game review is going to bring us to this page the actual individual page for that game review where you can read the review in full-length the question you might have right now is what template is what press using to display the contents for our individual game reviews well the answer is because we haven't yet created a custom template specifically for our single game reviews what press will automatically use the same template that it uses for displaying our regular blog posts so let's take a look at this I'm going to go to one of our blog posts alright so you can see it's the same format we have the full image of this the full size of the featured image the date it was published the author the title of the post and then the full length of the post and of course a sidebar to the right as well and you can see we also have the comments section and of course the previous and next post links as well let's take a look at this let's go back to our notepad file I'm going to open up 2017 sim folder now the templates you're interested in right here is known as the single dot PHP template that is the template WordPress uses for displaying contents of the individual blog posts so let's open up single dot PHP so let's take a look let's say I type in something like this is a test to see if WordPress is indeed using particular template for our posts let's save this now let's go back let's refresh and now you can see we have this is a test for our blog posts however if I went to my reviews and let's take a look at an individual review you can see we have this is a test appearing there as well let's go back let's try another one let's try the one for Uncharted down here again you can see this is a test so we've successfully proven that indeed WordPress is using single dot PHP to display contents for our individual game reviews but we don't want that we want something else so here's what I'm going to do okay I'm going to delete this this is a test let's save this what I'm going to do right now will be to go back to the 2017 charlton folder let's now create our template and it's going to be single - game remember game is the slog for our custom post type and then dot PHP this is how you would create the files for your individual up single post types you have single and then - and then the name of the slug you used for creating that custom post type and then dot PHP okay let's open it up it's empty so if I now refresh our game reviews now you can see it is empty because WordPress is indeed using this particular template pretty awesome lights so now let's expand this and begin to now add the code which you're going to use to display the full contents of our individual game reviews welcome back from the tutorial and I really hope that you enjoy what you're watching and if you feel like you're actually learning something from what you're watching why not consider enrolling in my WordPress development and customization course this is a course designed to teach you how to become a wordpress developer you will learn how to customize existing WordPress themes you will learn how the wordpress loop truly works behind the scenes you will learn about the wordpress template tags you will learn how to create your own custom sidebars create your own custom page templates and even learn how to write your custom WordPress functions by the end of the course you'll have gained enough skills to become a legitimate wanna find what press developer the course comes with a 30-day back money guarantee be sure to check the links in the description box you can enroll and the course today for just $10 but keep in mind that the coupon code you find is only available to the very first 100 students who sign up using the link so if you're interested in learning more about what press I highly suggest you enroll in the course today when you views for the course have been amazing and it is one of my very best courses that have ever produced so I hope you can stay enrolling in the course today now let's get back to the tutorial all right so welcome back and it is time to get our single - game dot PHP template file roll in so let's bring over a notepad over here and the first I'm going to do right now would be to copy everything that we have inside of the single dot PHP template file for our parent theme I like so I'm just going to dump that inside of our single - game - at the PHP file to paste that let's save and now we should be able to see some content for our individual game reviews and awesome ok so right now pretty much what process is playing the contents for our individual game reviews in pretty much the same way it will display the content for our individual blog posts so now we can begin to modify our custom template we don't need a single dot PHP anymore but before I close this let's just take a quick look at the code that we actually have inside of this template file so first things first we have our HTML right here we have the main loop over here as well but now over here you will see a function called the get template part function this is a very very common function in WordPress themes and what this means is this particular templates the single dot PHP template file is calling the contents of another template file that's what get template part means it's saying OK at this point go and look for the code for another template file and how do we know that template file you will see the directory inside of the brackets we have template parts this means that the very first divert you are looking for the very first folder were looking for is a folder known as template parts keep in mind that this is a single dot PHP for our parent theme so let's come over here to 2017 let's open that so from here we're looking for a folder known as template parts we have template parts over here let's open that inside of template parts were looking for what they're looking for a folder known as host we have post over here and now the very final name you see here which is content would represent the actual file name it's loft so they're looking for a file known as content dot PHP and now we have that over here as well so when I open content of PHP this is all the code that has been called by this functional core of get template part so it's kind of a neat way of presenting your code that's why the function is typically used you could decide not to use this function and just simply paste all this code that you have in here all this code right here are sending from this point right here if you want to so we're not going to use this function we're not going to use that we don't need to use it so let go back to the single best game to the PHP template file let's remove it we don't need this function at all we have the function over here for the comments so they can keep that as well and of course we also have the post navigation function so let's give this to you but now in here if at this block of code inside this empty space you're going to paste all the code enough for displaying the actual contents and custom field contents of our individual game reviews so what I'm going to do is to go back to the page reviews that we created and I am going to copy this entire block right here standing from the time function down to the accept so let's copy all of this let's now go back to single - game dot PHP let's paste that code in here and this is where you might have some trouble if you don't have an experience with PHP is very important that you close your PHP tags properly right now you can see that our h2 and rh4 has this sort of purple color as opposed to the blue color of the opening tag this means that there is something wrong we haven't closed one of our PHP tags properly so let's see let me first of all indent this properly let's close out the empty space in here alright so you can see where the problem is we have an opening PHP tag right here and then immediately down here we all have another opening PHP tag that's the problem so we need to close this one first of all so let's do that let's close that awesome okay with closes properly now you can see the h2 the h4 they are opening and closing tags and now back to blue which means that the code open to this point is good however okay take a look at the comments here this is all in black now so which means we have another problem we need to open up a new PHP template tag so I'm going to do that over here PHP and everything is back to normal I know this can be a bit confusing again especially if you don't have an experienced coding feel free to rewatch the last minute or so as many times as you want you can also try which now to me asked me questions in the comment section if you have any questions about what we just did but basically the most important thing is to remember that whenever you're opening a PHP tag make sure that tag is closed before you open up another PHP tag and you cannot have HTML tags inside of a PHP tag that's not going to work okay just keep those in mind alright so we've modified the code for a single - game - PHP let's save this and I'll go back and let's refresh so we have okay not bad so right now obviously our code is now working we still have our accept which shouldn't be because this is the actual pool our post paid for dividual game reviews so let's change this right here the accept let's change that to a new tag called the content so this is the tag for actually displaying all the content that's supposed to this plane only the accept so let's save this let's go back in here let's refresh and voila we now have the full content of our individual game reviews showing up let's try another one and see let's try uncharted let's see unchartered and awesome however we still have some issues we have the main featured image right here and then we have another featured image should appear in here as well they don't need that and we also need to display the remaining custom fields which we haven't displayed yet so let's first of all remove this featured image that's inside of the content area we don't need that that is going to be of course the post thumbnail okay let's remove that let's save this let's refresh the page once again and awesome so now we no longer have the featured image this plane in here anymore now you might be wondering okay wait a minute where is this main featured image coming from then if we don't have the featured image being displayed anymore inside of our single - game dot PHP template that's a very good question keep in mind that up here we have something called get header this is a function call in the header dot PHP file and inside of that head about PHP file there is a functional value that's actually calling the featured image of the individual blog post or the individual custom post so that's the reason why we now have the full featured image are showing up in here let's go back and let's now begin to add the remaining custom fields which we haven't added yet and the very first we're going to add would be the publisher the publisher field so just below developer let's actually just copy all of this so I'm going to copy this entire line let's copy that jump to the next line let's paste that so we now have developer but we can also say published published by and then inside of the field we have the publisher field let's do that pub lis ship okay and I'm going to copy all of this again jump to the next line let's paste that the next one is going to be the date of release all right date of release what I'm going to do right here would be to go back to the website for the advanced custom fields and let's see how to display content for our dates for our date field so we have the date picker down here let's click in there and let's see how to display the dates okay so it's pretty much the same way as displaying contents for our text field you just simply have the field and then inside you have the name of the actual field itself but you do have an advanced ways of displaying all your dates as well feel free to take a look at the samples of code that we have in here so it's pretty much nothing much to it let's just go back in here let's change the field from publisher to deliver those dates on the score release that's the actual name of the date field that we created okay this looks good let's save this let's go back in here let's refresh the page and voila there you go but take a look at this so we have published by Sony okay but date of the list is not displaying the actual date itself so what's happening in here let's go back to our template file date of release they filled a don't let's call release hang you know what let's make sure that this is the actual name of the custom field let's go back may have goofed on that one custom fields games ha well what do you know it's actually released on the score date not date on the score release oh my gosh this is so embarrassing I apologize for that let's go back change this to release on this go date come on okay let's save this and now let's go back to our reviews peddle feel for and voila so we now have our date of the list displaying 2017 11th which is November and then 12 which is the 12th of November 2017 now obviously this is not a great way of displaying the date so we need to make some modifications let's go back to the documentation and see what else we have in here all right so right now you can see that the return format is basically the year the month and then the day so we need to figure out a way how we can actually modify this output it's not very neat thankfully down here under advanced we do have an example of how we can get the wrong value which is what we currently have and then convert it to a numeric value then modified further so any right now we have a sample of an event start date the custom field of baby is gotten and then it's formatted over here as well so we can simply do right now will be to copy everything in here first of all let's just copy that go back to a single - game dot PHP and now let's remove the date of the list we don't need that now let's create some space let's paste the new code in here let me first of all indent this properly all right so basically for you if you don't have any PHP experience or any programming experience what basically happened here is that we've created a new variable called dates right here which will now contain the actual value of our custom field of the lease on the score date so we need to change this date here to release on the score date okay we change that and now basically this variable has been made an object and now over here it's where it's been formatted to look the way we want it to look like now again I know that this could be a very steep learning curve especially if you don't have any programming experience so I sympathize with you if you don't know I so what PHP is all about or what objects are all variables are but it is best that you maybe watch another video try to understand what variables are and how they work but if you have PE experience that I'm pretty sure this will be a walk in the park for you so let's just change what we need to change let's change the P here to an H for closest one out here as well to an H for and then the event start date let's change that to date of release online let's add the dash in there so we don't need any end dates or this modification to increase the date by one let's remove that date of release and I think we're good to go let's save this now let's go back so again we view refresh and there you go date of the list off of November 2017 let's try another game review we have listing Table seven we have 24th of January 2017 let's try unchartered we have 10th of May 2016 and last but not least we have the Arkham night which is 23rd of June 2015 and with that we have come to the end of this tutorial we have built out our custom page template with all our custom fields however I do know that we still have one more field which is the price we haven't yet displayed the price for each one of the game reviews but guess what you are going to do that all by yourself so let that be the little exercise all the little assignment attached to this tutorial try to figure out a way how to display the price and you can play the price in any location it could be above the title below the publisher custom field wherever you want to displayed now if you go to the documentation there isn't actually any documentation on how to display the values of a number field but I'll give you a hint it's pretty much the same way how you will display are the content of a text field so it's not really complicated that much so that's it thank you so much for watching the video we have successfully built out takusan page templates for the reviews page and also for the individual our game you view our pages as well we have created different custom fields we created the game custom post type as well and we talked about the WordPress loop we talked about template tags and much more so I really hope that you've learned at least one - one or two new things but what press this tutorial be sure to check out the course that I've told you about it's an excellent course if you really want to learn more about WordPress development and become a bonafide WordPress developer I highly recommend that you check out the course the course of course comes with it 30-day bad money guarantee so you have nothing to lose so that's it thank you so much for watching the video hit the like button if you enjoyed this video likes really help this channel subscribe if you haven't subscribed but also be sure to hit that notification bill so that you get notified whenever I publish a new tutorial my name is Alex it's been a pleasure taking you through this course thank you so much and I will see you next time bye bye [Music]

Channel: Web Monkey

Views: 37,227

Keywords: WordPress, how to build a custom wordpress page template, wordpress custom post types, wordpress post type, wordpress custom post type, custom post types, advanced custom fields, custom post type, custom fields, how to create custom post types

Id: Df3nt4lDT8k

Length: 65min 25sec (3925 seconds)

Published: Fri Jul 14 2017