WordPress 101 - Part 19: How to create Custom Post Type - Part 2

hey what's up guys Alex here thank you for checking this video and welcome to the 19th part of the series of tutorial WordPress 101 for beginner developers have you ever heard about monster eyed monster ID is basically WordPress on steroids with this product you can build easily everything from a single blog page to a gigantic ecommerce to sell your product online if you don't want to waste time and you're looking for a product that it works out of the box and is really solid I suggest you to try and monstro it click on this video to learn more and access a 10% discount for Mon stride or whatever other theme you decide to purchase from the template monster repository welcome again in this tutorial we're going to take a look at the second part of the custom post type argument if you remember if you follow the tutorial basically during the first part we just configured the entire back hand functionality of the custom post type so we created our own custom post type called portfolio we set up all these amazing attributes to create a proper custom post type and we registered the post type with a custom hook an action during the initialization of the theme if you have no idea of what I'm talking about please go back of just one tutorial the lesson 18 and take a look at the first part of the custom post type because it's absolutely necessary to complete this important argument of WordPress but let's stop blabbing about nonsense and let's jump straight into our administration panel so here if we go inside the actual custom post type the portfolio that we just generated you will notice that I created three items tree portfolio items just to populate a little bit so I suggest you to pause this video and populate your own portfolio or whatever custom post type you decided to create with a bunch of fake or real as you wish items so we have a little bit of content to start our portfolio page in my case I created this fake item with the only goal to have a proper future in image so because we're gonna style the page with with a nice tiled gallery with thumbnails and previews I need a nice future image so be sure to insert this federal image and we're gonna be good to go the other thing that I want to do is to avoid issues with WordPress and the permalink structure is to delete the portfolio page that I manually created in the previous lesson and it's better to do that because portfolio has the same slug of the custom post type that is portfolio so we're gonna have the exact same permalink for a static page and a custom post type and it's better always better to avoid this like let's not create confusion let's not like destroy WordPress n another suggestion when you delete a page if absolutely you don't need it at all always go inside the trash or the pages section and delete it permanently because in this way we're not gonna have any issue with our permalinks and we'd our custom post type structure I can refresh my front-end and you will know this year we don't have anymore the portfolio but we can add it back with our actual portfolio so right now if we go inside a portfolio section and if we go in whatever custom item custom portfolio we created and we go and try to view the item we're gonna most likely have a 404 page error so WordPress cannot find this at wordpress.com slash portfolio that is the slug that I use plus the title of my item because we don't have any type of file that can handle automatically a custom post type this is kind of a huge limitation of WordPress if you dynamically create the custom post type WordPress cannot handle that custom post type because it's outside his own scope of predefined custom post types so what we have to do we have to create a specific file to handle our custom post type so let's access our code editor in the file tree we wanna first of all we wanna view the single post type so to do that we have to just do one single thing so if WordPress cannot handle a custom post type I dramatically doesn't matter because gives us the ability with a super simple and intuitive functionality to create specific file for a specific post type in my case because I want to visualize the single page I have to duplicate this file and I can call this file single because it's the type of file - and I have to insert just the slug of the custom post type that I created so in my case portfolio and that's it I just have to do this and this is amazing because WordPress is going to recognize automatically they were accessing the portfolio single page so he's gonna take a look in our theme structure and he's gonna check for a single - slug name in my case portfolio and we can we can pretty much keep the structure like that the only thing that I want to do I want to remove the common because I don't wanna any type of comment in my portfolio section we can save this so now if we go back in our front-end and we click view item we open in another tab we go there and see we have our custom post type with the same structure of a single and if we take a look at the URL we have our custom URL portfolio slash developers life that is the title of my custom post type item so now if I want to access the list of portfolios like it was the single blog page or if it was just this page if I want to access the custom post type as an archive page what I have to do as usual WordPress really smart so the only thing that I have to do is I have to duplicate the archive page and put it on - at the end with the slug name of my custom both sides so let's duplicate this duplicate copy remove archive - portfolio and that's it that's access here let's take a look everything looks good I don't care it's fine now we're gonna edit this later let's save it let's take a look in our front-end so now what can I do I can pretty much just to check type portfolio and access and there you go we have the archive of portfolio we just my custom post type items that I created developers life no continuity and create a new logo if we take a look in the items we have the same exact ordering developers life nor continuity and create a new logo and we have a nice structure I'm going to change the structure in CSS but we're gonna do it later could happen unfortunately that if you try to hit this page or if you try to hit a single portfolio item you could have a 404 page so WordPress cannot find these pages even if you created this specific PHP file this happens because the permalink structure needs to be refreshed so to do that be sure about this procedure because it's really important and it's going to save you a lot of headaches don't worry if you see a 404 page these can be fixed so to fix this let's access the administration panel let's go inside the settings permalinks and here we can we have to put back the permalinks to default save the settings go back in our front-end we go back in the home page and hit refresh a couple of times maybe navigate website and check if the permalink actually changed now we have a question mark page ID 45 so it means that the permalink change and let's put back our the permalink that we need so the post name in my case and let's save the changes and let's go back in your own page refresh and let's go take a look again if we go pour folio it and it works so this fix this updates so roll back to the default settings of your permalinks and then back to the post name after you refresh your website should completely fix your issues if you visualize a 404 page be sure also another really important thing be sure to check inside the main structure of your WordPress installation view and show invisible file that your HT access if you're on a local machine your HT access has to be writable by everyone and by writable I mean that WordPress needs the access to open the file and rewrite a file by default if we access the information of the file by default the normal structure is this one the C mod is to 644 that means that every user can read and write and by user I mean you as an administrator and the current user that is using this computer groups can only read and the word it means everyone else so everyone that is trying to access this file that is not you as a user can only read this file so if we have our settings of the HT access in this way WordPress cannot access and cannot rewrite the file with the correct structure for the permalink so be sure to have this file on group and word on write so with the octal 666 and apply the changes this fix is not valid if you're on a server if you're on an actual website and you're editing a live server do not change the options of the htaccess Levy's has a default wordpress can access that file if it's an online server and can edit the file WordPress cannot do that only if the file it's locally in your machine so no worries about that but if you're on a local environment like myself be sure to check this the thing that I want to do I want to create a nice link here so let's go back in our water administration panel and let's go in the appearance menu and menus section and if you notice here because we created a custom post type WordPress will add automatically the custom post type portfolio that is the one that I created inside the list of links that I can use in my menu structure this is great because WordPress recognized as a legit post type and gives you the ability to do pretty much whatever you want you're leading that you cannot do you cannot like grab the portfolio link and put it inside here it doesn't exist we have to insert that manually unfortunately this is another limitation of the custom post type we cannot dynamically just write portfolio here this is not going to work for a custom link WordPress needs the entire URL of the page so we have to grab the entire URL and a manually input it inside here this is a kind of a huge limitation because it means every time our theme or our website changes location and this URL is not valid anymore we have to manually update this we can create a function in the backend to automatically add menu item inside the worker nav class when we generate the menu but also that one it's quite complicated and not always easy to maintain but for now we're going to stick with that and we can add the menu here let's put it back here save menu let's go back here go back in the home page we have the portfolio click on the portfolio and we have your kyv portfolio so right now we are pretty much in a sweet spot we created our archive page for our custom post type we create a single page for our single items so we can style this pages as much as we want the problem is though that sometimes we don't want to create actually custom pages we don't want to create if I go back inside the theme we don't want to create an archive - portfolio we don't want to create a single - portfolio especially if we have multiple custom post type we can end up with our theme cluttered with tons of tons of pages at tons of tons of files for each custom post type so the other super cool thing that we can do is create a specific page to print dynamically every custom post type we want so let's take a look on how to do this let's open our administration panel let's go inside the pages section and let's create a new page called work I don't want to call to this page portfolio because as I said I don't want to create like confusion to WordPress with the same slug here so let's create a page work and publish it save it let's go in appearance editor menu let's add this new page to my menu and let's remove this I don't want to anymore this page so save let's go in the front and let's refresh again we have work if we access the work page of course we don't have any sorts of page we don't have any content in a web page so the page is going to print just WordPress is going to grab the index it's going to print that one but we can change that of course what we can do we can create a specific template that we can integrate every time we create a custom post type for a specific page so I want to create a new file called page - portfolio - template dot PHP and in here we can paste a standard template information without center core because I don't need this or like we can live this because we're gonna need it and let's name this a specific template so because I named this page - portfolio - template it's pretty unusual that we're going to have a page called portfolio template in our administration panel so this page template is not I get used automatically by WordPress but we can specify this portfolio template save it and inside here now we can print the loop of our custom post type to do that we have to edit as we did in some previous lesson the WP query with our custom information so let's keep the post loop here but before grabbing half posts we have to change the actual loop so let's define a bunch of arguments args let's create our beloved variable and inside here we can put an array and inside the array we need pretty much a couple of arguments the first argument is the most important is the post type and the post type has to look for the exact saying slug that we use to define our custom post type so in my case is portfolio and then we can specify another parameter let's post per page and I want to say that I wanna just 3 because I have just 3 so I don't need to specify anymore but of course you can change it and of course because we are editing in the WP query I suggest you to check the codex of WordPress to check every arguments that you can use inside here for now I'm just gonna use the post I just to show you how can I dynamically grab the specific post type that are created now let's create a new variable called Loup and inside here we can call the class new WP underscore query and inside this class I want to pass my variable the arguments variable and now because inside the loop it's stored the new in the entire class with my entire loop here I can push this class inside the half post function and inside the post function and inside here I want to use the same structure that I had in the archive page because I like that kind of like ordered list of information so let's access the archive portfolio and let's go there and I used to call the get template part the content archive template so let's copy these let's paste it here save it let's go back in our administration panel and let's access again our page we just created the work page and now we can change the template instead of the default we can grab the dynamic template that we generated a portfolio template grab this update let's go back in our front-end refresh the page go in the work page and tada we have our beautiful order list of custom post type of course it's this entire page is pretty ugly looking like it's not style at all and also the single page is not really well started it doesn't look good but I think I'm gonna leave this one for the next live development session yes the next video you heard me right is going to be another life development session so be sure to follow me to catch the actual date and prepare all the questions at UF because while I'm going to style these pages my custom post type archive and single page you can ask me whatever question you want about WordPress another coding issue that you could have so also for today's lesson is pretty much everything thank you for checking again this video if you liked it please give it a thumbs up or subscribe to my channel and share this video if you want because of course the more you share the more views I get and I'm super happy so that's it from me and until the next video happy coding

Channel: Alessandro Castellani

Views: 57,632

Keywords: wordpress, tutorial, web developer, php, coding, help, how to

Id: vVgr1YTQiLY

Length: 20min 21sec (1221 seconds)

Published: Sat Sep 05 2015