Old School: Modifying PHP Templates for Custom Post Types and Custom Fields

hi this is david mccann for web tng by default wordpress does not show custom fields on the front end and to do so requires some theming in this series we've looked at a number of tools both plugins and themes for creating the theme templates for custom post types in order to show their custom fields in this video we'll instead look at the old-fashioned way of handling this without a builder by modifying the theme's php templates directly to create the single template for the bulk's custom post type there are several reasons why you might want to go this way including you don't want to use a builder for performance reasons having a builder installed just for one template seems like overkill you have no budget and cannot afford a theme template builder or you want to learn for whatever reason you're moving into the realm of the power user or developer and there's some things you need to make this happen the first and perhaps the most important is curiosity and patience you need to be willing to do a lot of trial and error and not get frustrated i'm working on my local desktop machine where i'm running laragon you're going to need access to the files on your website for this project so a local site is easiest but you can also use a staging site if you have ftp access to edit the files don't try to edit the files from within wordpress because if you make a mistake you may lock yourself out from your site in this example i'm using the free cadence theme cadence is a new popular theme that's page builder friendly and works well with gutenberg because we'll be modifying theme files it's important to use a child theme these days many popular themes have already put together a child theme for you i googled cadence child theme and the first result was a page on the cadence website that showed how to create a child theme along with the download of an already created child theme for cadence i downloaded the example cadence child theme okay before we go any further let's install our child theme i've already downloaded it so i'm going to upload it to the site and then we'll activate it okay so now we have the child theme here's my development site that i'm using for this project you can see i have a number of demo content posts created and i've used cpt ui and advanced custom fields to create a custom post type called books if you're not familiar with how to create a custom post type and add custom fields take a look at the very first video in this series where i walk through how to do that let's take a quick look at the book custom post type you can see i've entered a number of records and here we have a custom taxonomy genres we have the title of the content we have a featured image which is an image from the book cover and then we've got two custom fields the url are linked to the author's website and the author's photo if we take a look at the book custom post type we see that it's not showing the featured image the post meta or the custom fields my first step is i want to get this to look as close as possible to what i want the final result to be so i'm going to leverage one of the features of the cadence theme which is that it allows you to use the theme options for custom post types to use the same options that you do for your blog posts so this is the single book layout i'm going to enable the post meta i'll enable the sidebar i'll turn on the featured image and i'll set the featured image to be below okay so we can see this featured image is huge what i really want is i want to have two columns with a smaller featured image the custom fields on one side and the content on the other okay but i'm going to save this and now the work begins the first step is let's go look at what we have on our directory we have the cadence theme as all of these files and then we have the cadence child theme and you see it has only a few files a pretty much empty functions php are pretty much empty just one kilobyte each style sheet and then a screenshot child theme isn't doing much yet if we go back and look at the cadence theme we know we want to modify and work with some of these files but how do we know where to start which ones do we start with so the place where we start is we go to wordpress.org theme handbook and there's something called the template hierarchy and let's take a look at this chart and what it does is it shows the rules that wordpress uses to pick a theme.php file we're doing the single not the archive and we see that it's going to use single php or singular php but if you have a custom post type you can add a file called single dash and the name of the post type dot php and wordpress will use that file instead just to kind of show you that let's go back to our child theme and let's add single book dot php here's our single page there it is it used it unfortunately we lost all of the theme there we lost the header the footer the content area and everything and so if we want to use this method here we're going to need to recreate everything that the theme already gives us i'd rather leverage all the styles and all the extras that cadence gives us and see if we can find a different way another way to achieve the same thing so i'm going to go back here and i'm going to delete that file but i thought it was important to show you that yes indeed wordpress will pick that file let's refresh okay so we're back now to the default cadence let's go and look on the file system and see what cadence has here's the single php file if i open that in my text editor we see it has a function get header okay it has a function get footer and in between that there's an action or a function cadence single all right so there's where the header is there's where the footer is and here's a lot of stuff in between but this isn't telling us which template to modify it's just calling another function there's a really good and useful helper called show current template this plugin what it does is when we're on the front end it shows you which theme template is being used a single in this case a single php just like the theme hierarchy said but now if we hover over it wow we can see these are all the files the php files that are included to make up this page so if we wanted to replace this we need to handle all this or we might lose some theme functionality however there's something here we can note and that is if we go down here we can see their template parts content single entry content single these things here are template parts here's the single okay and after the single is called then it calls entry content entry header thumbnail single entry single base and then files for the footer if we look on the file system let's see what we have these are some of the base theme files here's some support for tutor lms for the tribe events calendar here's lifterlms here's some translation files here's where there's some include files maybe some php include files support for bbpress and assets these would be your javascript and css files but here's the template parts and many modern themes use some variation of this and what they've done we want to go to content is rather than have just everything in one file in that single php file they've broken it all up so they can reuse this same code in multiple files and they just call it or include it so like here's the entry meta rather than rewrite that for every page they put it into one php file and then can include that every time all right so here's the single and the single entry let's take a look at the single here it's doing a before main content after main content but the main action here is going to be it gets the post and then it includes the template part content the single entry and it passes in the custom post type it calls this function get post type and passes in the custom post type so this looks like the kind of area we want to be right in between the header and footer so now let's look at this single entry file so we see here is this option if the featured image is above remember we saw that in the customizer then here's the main content and then here's some content after the main content that cadence offers like maybe a author box or the footer information or post navigation okay but this is the area then that we're interested in this content so we see it loads the featured image above or below okay it has the title it's getting the content and then the entry footer and then calling the single inner content this is the area that i want to try to modify for our php template these two files single php and single entry php i'm going to grab those and copy them and then notice they're in a folder called template parts content under the cadence so i'm going to go to themes cadence child i'm going to create a folder and then inside this i'm going to create another folder called content and then i'm going to paste these two files now this one i'm going to rename and call it book okay so one thing i wanted to point out to you is the only files we're copying over is this one's going to be a new one and we're going to modify the single okay so the only ones we need to copy over are the new ones and the changed ones and wordpress magic takes care of the rest so we don't need to copy over the whole theme to modify it just the changes that's a cool thing about wordpress child themes it makes it a lot simpler to maintain okay so let's go back to this one all right and now we see that it has a get post type here so it's already calling that what i'm going to do now is i'm going to modify this part here okay and i'm going to put a conditional statement in there i'm going to say if post type equals books get post type see i'm using the function that was already there then load single entry book the new one that we copied over and renamed otherwise just keep doing the same thing okay and this will use the parent theme because it doesn't exist in the child theme now we should be using the single entry file let's save this and let's go back to the front end and refresh nothing changes okay because we haven't made any code changes but it could be that maybe we're working in the wrong place right maybe i'm totally off i'm in the wrong place and i don't see any change here because we're modifying files that don't have anything to do with this so let's check our list of templates and files and ooh here it is single entry book so we can see that our new file is being used let's do one more kind of reality check here let's go to the single entry book file that we copied over and let's just add a little snippet of php code echo means to print out and we'll use this git post type save it let's go refresh this page again and see it printed out the post type okay so we kind of did a reality check we are in the right place to modify this content here so that's good i can take out this bit now so we don't forget and leave some debug code in all right now what i want to do is i want to have a two column layout to do that i'm going to use a simple css grid layout so the grid layout the you have a parent container which will be your grid container and then you have divs for your columns so you notice here for the article element it's printing out some class names i'm just going to add the class name here my initials first okay so it's going to make it easy for me to see which things i've added here we have a div called content wrap so i think what i want to do now is i'll use this div and i'll add a class here and then i'll add a div above that and i'll give this a class all right and so you notice that i'm giving classes oops i'm doing classes because we're going to control the layout with css so i need the to be able to target the elements here we have this show featured image below which is what we've set so i'm going to move this bit up here we'll put it inside of a php call now we'll paste that in because we haven't added any css i think if we go to the front end nothing's going to change okay well it did change a little bit our image is on top because it's in the first div but things haven't changed much now let's go to the customizer and add some css to create our grid oh magic okay so the first part you know the top place where we said book single that's the container it says display grid that's the container here okay so that's the grid then this is column one and this is column two here we say if media query the the minimum width of the screen so if it's 400 pixels or bigger then we want two columns the first one is 20 and the second one is 80 percent for tablet and desktop we're going to look like this but for mobile we'll stack it like that and then here we're just centering the featured image here in the column right so let's publish that and we're getting making good progress but the whole point of this is to add our custom fields so let's go back now and add in our custom fields i want the fields to come in right under the featured image so let's add some code for that and what i'll do is i'll put in here you can see i figured this out before otherwise the video would be you know half hour longer of me typing this stuff in and seeing if it worked anyway so i've created two variables one's called author image and this get field is an advanced custom field function to get the value of the author's photo that's one of the custom fields and author site gets the other custom field then i added another div in the same column with the featured image and so we're getting author image and acf returns that as an array so i'm getting the url out of that the image i gave it a class in case i need to style it and i set its width and then i added a link in href put in the variable of the url to the author's website i know that cadence styles anchor tags when you give a class a button to make it look like a button and then i added another class in case i need to style it okay and wrote visit author's website so let's save that and go see if that made any change great whoops we've got some extra code here and the images aren't centered or aligned well and this isn't centered in the button so let's go back to our place here oh yeah we got a little bit of extra code there so we'll take that out and save it and now let's go back to the customizer and we'll add some css here for centering this stuff i use those classes i targeted the author photo and centered that and then the button and text align center i'm going to publish that and go out and we removed the extra code here so now this looks pretty good i suppose we don't have any we don't have any space on the side there so i suppose here we can add maybe some padding left okay and that gives us a little padding there okay before we finish up totally you know we kind of hacked the cadence theme and there's some things we can do to make that more whole and one of those is let's put our css code into the child theme okay so that's the purpose of the child theme to package all this stuff up so i'm going to copy this and remove it from the customizer okay so we lost our customizer changes okay so we go back to our child theme and you notice that has a style sheet in it so i'm going to open that and then i'm going to paste in our css from the customizer and save it let's go look and nothing changed all right let's check uh the functions php ah here's something commented out and says remove the slashes from the beginning if you want the child theme style sheet to load so let's do that and save let's refresh voila it's working okay now let's go back here you notice that the child theme has a description okay and so i'm going to add to that with a book custom post type single template okay and one more thing we can do is you notice there's a screenshot that shows in wordpress in the theme directory let's modify that and add in a little note here so let's save that okay now let's go back and take a look at the themes here's our note that we added and here is the extra information in the description so if somebody comes along later i mean if this is just our site it doesn't matter but if you're handing it off to a client this tells somebody if someone else comes along and wants to change the theme you're giving them a clue that this has support for the book custom post type and i suppose the last thing we could do is we could zip this up and then copy this off if you use github you can put it on github or maybe you just have a folder or some other place where you keep your backups but that way in the future if you need to you have a copy of it maybe it's accidentally deleted or you want to do something like this again with cadence and you want to remember what you did then you have another copy of that okay so we've accomplished our tasks we made a child theme and we modified it to support the custom post type now let's have a little discussion and some conclusions as you can see creating the single template by modifying the php and adding css is a lot more effort than using a theme builder plugin you need to know some html css and php yep now we know why the template functionality of page builders is so popular it's faster and easier some people are happy to jump in and modify a child theme and after you do it a few times you know the general routine however there's no standardized way of including theme files or theme code beyond some basics required by wordpress before creating this video i checked out several themes and cadence was the easiest i saw to modify in other words you're going to need to do some exploration to choose the theme you understand and find where to modify a theme as they are each different we could have just copied the single php file in the root of the cadence theme directory to a single book php file delete everything out and then added our code there if we took that route we would have had then to take responsibility for the code styles and output the header footer rendering the sidebar everything by making our changes as small as possible we leverage the themes code and styles so that it continued to do the heavy lifting one takeaway i hope you remember is about child themes you saw how we only needed to modify and copy over preserving the folder structure the files we wanted to modify or add that's a pretty cool feature of child themes and it means that the theme author can update the parent theme to add new features and there's little likelihood that our additions would break still it's a good idea to be mindful that your child theme depends on the parent and also depending on the changes you made you may want to keep an eye on new versions of the parent theme in case they impact your child theme now that you've watched this video i don't expect you to drop your page builder and do it by hand in several of the earlier videos in this series i mentioned the old-fashioned way of creating php templates by hand and i felt it was a good idea to provide a feel for what that was like so that wraps up my walkthrough and discussion there's a text version of this video available on the web tng website along with other walkthroughs reviews and resources i hope you found this video interesting thank you for watching

Channel: David McCan

Views: 378

Keywords: wordpress custom post types, advanced custom fields wordpress, wordpress tutorial, webtng, kadence theme, hacking the kadence theme, wordpress php templates, displaying custom post types and custom fields

Id: vkm3ffNb5Fw

Length: 23min 16sec (1396 seconds)

Published: Thu Jul 15 2021