How to Create a Custom WordPress Theme - Full Course

hi i'm andrew from the youtube channel follow andrew so if you like this content you want to see more design html css web development type of stuff come on over to my channel and uh join me there there'll be a link down in the description where you can check out join me over my channel now in this series we're going to be covering building a custom wordpress theme from an existing html template again the link for the template is down in the description so you can follow exactly along with the same steps i'm doing but this step in process should be able to be applied to any existing html template so you can convert your own to your own existing wordpress theme so i've been developing on the web for i don't know over 20 years i think i first started using wordpress back in 2005 or 2006. i've kind of been playing around and using that ever since so i hope you learned something don't forget to share this content and uh let's get started all right in this tutorial we're going to be converting this design here into a custom wordpress theme now this design is a fully responsive design and it is based off of bootstrap and i'll just kind of show you how the design here looks so you can see that it is responsive maybe when i break down to a mobile point we get the mobile media query we have the sidebar on the left navigation we also have a few pages that are particularly important to blog style websites for example we have a home page that has a little featured slider here and a few things like that we have a post page this would be what an individual blog post would look like notice how on the bottom here there is also a comment section with nested comments and replies as well and then we have what is known as a blog page so this would just be like a static page like an about or a contact page or something like that we have our blog archive page which would list all of our blog posts in some sort of archive fashion with our next links as well and then we have a contact us page just to kind of simulate a simple web form you can also enter so again all the pages on here are fully responsive in this uh layout and we're going to be converting this entire template into a custom wordpress theme now wordpress themes are really nothing more than a hierarchy of template parts and what i mean by that is in this theme right here i'm just going to divide this into a couple little sections here so this area here at the top right this area we would typically call like the page heading or the title and this area over here this entire sidebar area we could call that a sidebar we call it a heading this area right in here is called a navigation this area over here we would call our content area and then if we get clear down to the bottom here of our page almost scroll down a little bit right here this section right here right we could call the comments section and then at the very very end down below we would call our footer area right here uh our footer right so this gray bar at the bottom so in other words all websites have kind of some sections to them and really all a wordpress template or custom theme does is it takes all those various sections and splits them apart into individual files so it's sort of like creating components from your template so instead of having just one big long html file i have many many separate pieces one with the header one with the content one with the footer one with the sidebar one with the menu and then wordpress sort of puts all those back together into a single long file as needed so when we're creating our wordpress theme here to start we're going to be doing a fairly basic theme but it will have all the features of a custom wordpress theme and we're going to start out with the required files that you need in order to set up a wordpress theme so again this tutorial assumes there's some prerequisites here of course we're not going to be designing this from scratch i've done that in a previous video this particular layout and this assumes that you've already got wordpress set up and installed on your local server or on a live web server somewhere as you will need to have wordpress installed and running in order to create the custom theme so assuming those two things are already complete let's go ahead and and complete this process now i will make this particular theme available in the description so that if you want to follow on exactly with my same template you can but the process here really applies to any sort of template that you're going to be creating so let's get started with the first required template files okay now i want to first show you the structure of a wordpress theme and where those files need to be uploaded now here in this sidebar here i've got my main wordpress directory so this has all the wordpress files that are installed when you unpack and download the zip file there's a folder in there called wp content and inside of the wp content there is a folder called themes and this is the folder in this area where you will put your specific theme so what you would do here is you would create a folder so i'm just going to create a new folder here and i'm just going to call my theme follow andrew and once we have our folder in place i've got this little directory here that's called my theme template so i'm going to drop that in this as well as we're going to be referencing those html and css files quite often so to make it easier i'm just going to drop that template which has my just basic html and css files that i just barely demonstrated for the actual template we'll be converting here inside of this template folder okay so once you have that in place you can go ahead and open up your follow andrew theme or your folder inside of your code editor so i'm going to switch over to vs code that's the code editor that i'm going to be using here to set up my to do all the development here in php so the first thing we need to do is create all of the folders and files that are required for a wordpress template so i'm just going to go ahead and add those here in my follow andrew theme folder so the first one we're going to be adding is called the assets folder and the assets folder is going to have several subfolders as well so i'll come inside of my assets and i will add the first one which is going to be css and then i will add the next one which is going to be our fonts and then i will add the next one which is going to be the images and one more which is going to be the javascript okay so assets has all of those inside of them of course we're going to be placing our css files and things like that in there in a minute the next folder we're going to create here in our main directory is going to be our classes so we'll just create that now this folder is going to be used to create any php classes that we'll be using for various functions to override wordpress functionality we're going to create another one here called inc so whoops i created that one in the wrong spot this uh needs to be outside there so inc stands for includes and that's going to be any sort of include files that we want to also include and we'll go ahead and create one more here and this one is going to be called template dash parts so this is a common folder you'll see in many wordpress themes it just allows us to split little individual parts of our template up even further and again this is all sort of uh common but you can really split up your template and theme however you want there's no really set rules here and then we're going to create one more whoops i did the same thing here i need to create this as a not as a subfolder here and another one called templates so these are the required folders that we have assets with all these subfolders and then classes inc template parts templates and and then this is our master template so again these aren't i shouldn't say required but this is how we're going to build our theme now the next thing we're going to do is set up several files so these files there's actually only two files that are required for a wordpress theme the css file and the index.php file those are the only two that are required everything above and beyond that is sort of how you want to customize and do your wordpress theme so we'll go ahead and start off here and we're just going to create all the blank files we're not going to be adding any content whatsoever at this point so the first one here is going to be um our 404.php this is the file that will be served when we get a 404 server error the next one is going to be a file called archive.php this file will be responsible for delivering an archive so a good example of this is like a blog post the index of all the blog posts in a hierarchical format that would be an archive page the next one here is going to be the comments.php so this template file will be responsible for displaying and serving up comments in our theme the next one here is going to be one called footer.php and this is going to be responsible for the footer section right the very bottom of your website the next one here is going to be our functions.p and this file has special meaning in wordpress because in your functions.php file is where you can override and initiate different features of your theme inside of wordpress so your functions.php file is going to be raw php code typically to override and change the way wordpress works fundamentally uh next we're going to go ahead and add one called header.php so this is going to be the the file responsible for the top head section that would be anything in the head really whatever we determine we want to put in there the header uh the next file is going to be our index.php so here is the first required file so you have to have one called index.php it serves as the fallback so if wordpress can't locate a specific template file in the template hierarchy that it needs it will always fall back to index.php that's why it's required the next one here is going to be called page.php this template file will be responsible for displaying static pages so things that aren't blog posts or aren't blog archives like an about page would be a static page so that's the template file that will do that the next one here is going to be called we'll just add a readme dot text and this is just going to be a text file where we can put like copyright notices and things like that if someone else were to download our template we can put some information in there in a readme file and then the next one here is going to be called search.php so this is the template file that will display search results so when somebody comes over to your wordpress site right and they hit this search button up here what's going to show up there the next file here is going to be our single dot php and this file will be responsible for responsible for displaying single blog posts so when you click on an individual blog post that's how that template file or who will display and then the last file that we need is going to be our style dot css so again this is the second required file you have to have a file called style.css this is the master style sheet for your website so over here on the right hand side you can see that i've got a wordpress site running locally this is just the default 2020 wordpress theme that i have installed so i'm just going to kind of show you here so when i come over here and do a search so i'll just search for hello and do a search you can see that i've got some results that came back right the results that are being returned are going to be using this search.php template so how this page looks will be determined by the code in that template if we come over here to a blog archive so if i click on like post from march 2020 it's going to give me all the posts for march 2020 that would be using the archive.php template if i click into an individual post like here's my hello world post so i'm going to go ahead and click on that post you can see i'm now looking at this individual blog post this one's going to be using the single dot php template file of course my comments down here at the bottom are going to be using my comments.php template file etc etc right you kind of get the idea there so these are all the required files that we'll be using in this example but again there's really only two that are required from wordpress so uh the last little thing i'm going to add here to our theme folder is a screenshot so a screenshot is typically just a little screenshot of what the theme looks like if you were to put this on the wordpress store it would show up you know when you're searching for themes as a little thumbnail of what that theme would look like so i'll go ahead and add that next okay so i've gone ahead and just taken a quick screenshot here so if i click on screenshot you can see this is the screenshot that i've added into the site and that's how it looks so let's go ahead and now look at one more thing here and this is called the template hierarchy now we've just sort of determined to build our hierarchy in a sort of similar common fashion i would say for wordpress themes but i want to show you kind of a detailed look at what's known as the template hierarchy so you can see here over here on the right hand side it's a little easier to read this from right to left i think but the index.php file in wordpress is the fallback template file then there's one you can create called singular so if your single blog posts and your pages look the exact same you can just create one called singular that essentially will act for both and there's one in here called archive you can see and archive will catch is the catch-all for all archive pages but if you want to get more specific you can create one called category so each one of your blog post categories can have a different look and feel or maybe you can sort them by date you can see you just move from right to left through this screen you can see there's a million different uh ways you can sort of create and customize your wordpress themes based on all of these different types of files so the last file that we haven't added yet that we will add is this one right here called front page so often times the main landing page of a website looks different from all the other pages of a website so if you want to do that you can do it two ways you can create one called home.php which will work for both the blog posts and index pages and also the static front page you can see if you want to get more specific you can create one called front dash page dot php to use instead so that's the last file we'll create here but again that you can kind of reference this dialog to see all the various types of template files you can create for your wordpress theme so i'll jump back here to my code and we will create one final file in here called front dash page dot php and add that one in there okay so now let's make it so that we can actually use this wordpress theme so we're gonna come over here to our style.css file and add just a couple of elements in here to the head section so wordpress files have a style css and at the very very top they have a comment section so it's just like you would do a normal css comment like this and then you're going to add various things inside of here and wordpress will use that to display when you go to install it you'll see what i mean here in a minute but the first one we're going to add is one called theme name and i'm just going to call this uh my follow android theme but again this is whatever you want to call your theme and the next thing here is going to be our text domain and i'm just going to call this follow andrew as well the next thing in here is going to be your version so i'm just going to call this version 1.01 and then you can add a description of your theme so i'll just say a fancy wordpress we'll call this a fancy left sidebar theme and then you can also add some tags so i can call this uh left dash sidebar responsive fancy and then i'm gonna go ahead and create the author that's andrew wilson and then you can do what's known as an author a you author uri so this would be the url right if you have your own website or something i'll just do http colon slash youtube.com follow andrew again you can place any sort of url there i suppose we need http s and there's a few other ones in here as well for example you can add the license type you can add some other additional things again on the wordpress codecs you can see all the available things you can add inside of this comment but it's always the very first thing in your css sheet it needs to start on line one so we add that in there and that's pretty much all we need so i'm going to go ahead and save that file and now that i have that uh file with all these required sort of metadata if you will in your style sheet i'm going to log in here to my wordpress site in the backend so i'll come down in here and i'll say login and i've just got this set up with a little username and password for my andrew andrew and this is the wordpress backend so now when i come over here to my appearance and over to my themes you'll notice that there is a new theme here i'm going to pull this over just a little bit so you can see there's my new theme so i've got the default theme installed which is the 2020 theme that comes with wordpress and now i've got my follow andrew theme so if i click on theme details you can see all these details over here in the right hand sidebar that should that should make sense now right so there's my theme name there's the version there's the author if i click on this it'll take me to the link there is my description here are all of my tags that i added so all that information is pulled directly from your stylesheet okay and then of course here is the screenshot.png file so that's coming from right here my screenshot.png file and they might have a specific size i didn't even double check that on requirements here i just sort of snapped one and uploaded it but double check the codecs they might have a requirement on the size for this particular image but it works as long as you have one called screenshot.png in your theme folder and that's pretty much it so once you have those required files you should see your theme here up here now i'm going to go ahead and activate this theme so all you have to do is click activate and this will essentially make my new theme become the active theme so now i'm going to switch back to the main front end and you'll see that there's really nothing here it's completely blank i don't see any posts and that's because all of my template files are completely blank right there's nothing to them so now we're going to start to actually flesh out these wordpress template files so the one we're going to start with is the home page remember that is what we set up on the one called front dash page so what i'm going to do is i'm going to come into this template site file remember this is the theme rather the template that we're converting into a custom wordpress theme this template is available in the description for download if you want to follow along with the exact code i'm using but of course these tips and tricks can be used for any template so what i'm going to do is i'm going to come into the index.html page and this page houses of course all of the html for this particular file so i'm just going to literally copy and paste everything here i'm going to highlight everything command a command c and then come over here to my frontpage.php file and paste and i'm just simply going to save so i'm going to say command s and save now you'll notice that over here in the right in the preview i did have some things appear so what i'm seeing now is some of the content and i'm actually seeing my bootstrap css and html files being loaded but i'm not seeing my custom css file being loaded and that is because if we look up here in our heads section notice that we are linking to bootstrap let me just wrap these lines here so we can see that a bit better whoops we are linking to bootstrap via the content delivery network so this is a hot link right we're linking to fontasam via the cdn as well but we're linking to our own css sheet just with this relative file path so this file path is incorrect because we know that our style sheet is now down here called style.css and of course it's not in a css folder anyway this path is all incorrect now what we could do is we could actually come in here and hard code the path i could say path to file and code that all in it would actually work it would load up my file properly in fact i'm just going to show you that just to prove the point here so i can say dash wp content uh dash um let's see what i named this theme follow andrew slash style.css now let's see if this is correct here and oops i forgot to add the themes directory there there we go so you can see if i hard code in the path to this css sheet right here it does work right i get my css sheet and everything over here is working as expected i'm going to zoom out a click or two just so we can see the full sidebar and it's all working however it's not a good idea to hard code in your css and javascript paths like this and the reason is is that if other plugins that i install inside of wordpress depend on some of these files that i have linked wordpress doesn't know which order to load them in and you will see that problem when we do this in a minute so it's a better idea to do what's called in queue the wordpress css or your own theme css and javascript files that way wordpress itself can determine which one to load first and which one to load second or if plugins require specific javascript or css files or vice versa so that's what we're going to do next we're going to enqueue all these files so what i'm going to do is i'm just going to simply we'll do this kind of in a one by one fashion here so we're going to come over to our functions.php file here and this we're going to add our first piece of code so we're going to start off here with just opening and closing some php tags and then we're going to create a function in here and the function name really doesn't matter um but i like to always kind of prefix my functions with a name like follow andrew that way my own functions names don't clash with built-in function names of wordpress by chance so that's kind of a good practice there and we're going to call this one the register styles because that's what this function is going to do is register our styles okay so the first we're going to do is there's a function in wordpress called wp-e-n-q-u-e-u-e-n-q style and this takes a few parameters here so the first parameter is the name i'm just going to call this the follow dash andrew we'll call it whoops i'm not going to do a hyphen there i'll call it follow andrew i can type that correct dash bootstrap so the first parameter is just a name it's just whatever you want to name your style sheet internally the second parameter here is the actual url to the style sheet remember that is where i showed you before where we could hard code right this is the url however this part right here wordpress can figure out for us so if we come back here so i'm going to say comma here and there is a an option here called get template directory uri so this is a function that returns the path up to your current themes directory so that's what we're going to use and then we're going to concatenate here with period and then we're just going to add the slash style.css okay i'm going to pull this over just a little bit here okay so that's the second parameter is basically the path to your stylesheet now the third parameter here i'm going to do just as an empty array for now and the fourth parameter here is a version so i'm just going to say 1.0 now i'm hard coding the version in right here right now but in a minute i'm going to make that dynamic so that it will automatically go and look inside of my style sheet and pull that version number we set up earlier to make that dynamic and then the last parameter here is optional but this is which style sheet this is going to be for so whether it's a print a projection all right the different types of style sheets so i'm just going to leave that as all for now okay so that looks okay so that's what i'm going to put inside of that function and now i need to make this function hook into wordpress's system so that's where we're going to say add action and we're going to hook into the uh the hook called the wp and cue scripts command and you simply just copy and paste whoops i spelled that kind of funny so i'm going to fix that register style you just copy and paste your function name right there so what this line is doing it says when wordpress runs this hook also execute my function so in other words my function will execute at that same time so that's all we need to do there now let's go ahead and save and it looks like you can see i've got an error here looks like on functions line seven so i don't have my line numbers turned on um but it's probably because i'm missing a semicolon after this yes i am missing a semicolon okay so we save and that looks like that's now working properly so now we need to test it out so in order to test it we're going to come back to the front page and we're going to delete this hard-coded style sheet and we're going to replace it with a php command here called wp underscore whoops wp underscore head which stands for wordpress head and what this means is wordpress is going to then inject all these files by itself so we've kind of replaced that now let's actually see if it worked so we're going to refresh i am still seeing my style sheet so it looks like it's working but just to double check we can right click and say view page source and now you can see that there's actually quite a few extra things in here that did not used to be in my head section for example this style this inline style tag there's this manifest edit uri generator all this stuff wordpress injected into my head because it was coming from the wp head command and then most importantly we need to make sure that we can actually see our style sheet that we just barely loaded and that one is let's just do a little search for it here um there it is right there so i called this the bootstrap css but i actually linked to my own css it wasn't me thinking but there it is you can see that it definitely is injecting that style sheet we just barely loaded so now what we're going to do is we're essentially going to do the same thing for these other two style sheets the font awesome and the bootstrap style sheets so i'm going to come over here back let's kind of close this source code down yeah we just want to double check to make sure the files that you think are being loaded dynamically are in fact being loaded dynamically so let's come back here to our functions file and now we're going to essentially copy this and we're going to paste it two more times and then we'll just paste all these in one by one so the first thing we need to do is change the name so i'll say bootstrap then we'll say actually this one's going to be my custom style so i'll call this the follow-under style the next one will be bootstrap and the next one will be font awesome okay and then we need to replace them with the paths now i'm not using local versions of font awesome or bootstrap of course i'm using the cdn versions so i'm going to grab those urls so come over here to the front page we'll start here with the bootstrap one so i'm going to copy this entire url for the bootstrap jump back to my functions and that's going to be the second parameter here so i'll delete all that and just paste in that hard coded path to the bootstrap version and then we can do the same thing excuse me for phantasm so we'll grab fontasam we'll come back here to our functions and we will replace that second parameter with fontasam and save now we can come over here to our front page and i can now delete all of this code because it's now being dynamically loaded via this command here now here's that problem i mentioned earlier so you can see that i refresh but i actually got a different color here for my main navigation and that is because the order of my style sheets is loaded incorrectly so if i come over here and say view page source one more time let's pull this open you can see that first i'm loading my custom style sheet and notice that right there on the end it says and ver equals 1.0 that's where that version is coming from then i'm loading bootstrap then i'm loading fantasm the problem is my style sheet is dependent on bootstrap so bootstrap has to load first then my style sheet has to be loaded second because my stylesheet is overriding bootstrap's css variables so i have to have that source order correct and that is where that second parameter that we left as an empty array comes into play so let's come back here to our functions and remember this empty array right here what this empty array is i'm going to line wrap here whoops i keep hitting the wrong command for a line wrap whoops there we go it is an array of dependencies so for example i'm just going to put one parameter in other words my follow andrew style is dependent on this bootstrap css file so i'm going to copy the id or the name and just paste it right in there to that first parameter and save and now you can see it turns back purple so that's now correct so let's again just go ahead and view the page source here and now you can see that it is loading bootstrap first then my css second and then the font awesome because we've added that dependency parameter okay back to our functions now i mentioned we're going to do one more thing with that version because right now our version is hard-coded right we've just hard coded 1.0 um so for the bootstrap it's version 4.4.1 so maybe i'll just copy this and paste that in there and then for font awesome it's 5 13 0 so i can paste that one in there but for my version i want this to be dynamic so what i can do is i can create a variable called version and i can set that equal to wp there's a command in here called wp theme i'm checking my notes here i don't have all this memorized um and then we say get and then in here we can say version okay so basically this wp theme get lets us get any of those parameters we set up in our style sheet so this should assign our current version which is declared in our style sheet right here as our property as this variable so now i'm going to take this variable and we're going to replace this 1.0 with that variable and save okay so now let's just double check and make sure that worked so we can view the page source so we can come over here and look at our style sheet right here and it does say version 1.0 so now as i update my theme or my style sheet i can just simply come over to that style sheet so we'll come in here i'm going to change this to like 1.5 and save and then we're going to come over here and we will refresh and then just double check this let's pull this over and now you can see sure enough it says version 1.5 and that's because we've made that parameter dynamic so that's how you can kind of work with that again the version parameter is completely optional you don't even have to have that but it it kind of makes sense especially if you're doing lots and lots of updates to prevent browser cache issues when you have that uh version get parameter appended to the end of the the style sheet link okay so that's pretty much it for our style so we have all those styles registered and they're now running and adding properly now we need to do the exact same thing for the scripts that are down in the footer so for any javascript files so to make this simple i'm basically just going to copy this entire function come down here a little bit and paste now instead of saying register styles i will change this one to register scripts and i will change this one down here to register scripts and then we'll delete all this in here and then rinse and repeat so if we go back to our front page we can see that down in the footer area we have a bunch of javascript files so i've got bootstraps javascript files and then i've got my own javascript file in here as well so we're going to replace all these just like we did before so let's come over here to our uh keep getting lost have too many tabs open enter the functions file and we will do the scripts next okay so we're going to say wp and q and it's very similar but instead of style it's just called script for this one and all the parameters are basically the same so let's follow andrew and we'll just start off with i don't know bootstrap or something okay then for the second parameter um we are hard coding these so we're going to go get not hard coding but we're linking to the cdn version again for bootstrap so i'll just grab it looks like first we have jquery slim so i'll copy that and we'll come back here and paste that in and we're just going to leave an empty array because it's not dependent on anything and our theme version we really don't need for this particular one i mean we could add it right if we wanted to so we could say 3.4.1 just like we did on the other ones okay so let's save that now we're going to come over here to our footer and just like we did with the header area in our front page uh we need to i've got to get rid of some of these tabs here in our front page we're going to replace down here we're going to add that php command just like we did in the header but this one's going to be called wp underscore foot um like so i actually think it's footer yeah on the head it's wp head and then down here it's wp footer okay so and then we can delete now this javascript a jquery code save and let's see if it works so now we're going to view the page source and we're going to come down here and look at our footer and see if it actually inserted that jquery code so it doesn't look like it's there i'm not seeing the jquery so i must have typed something wrong so let's go double check and make sure we have that code correctly in our functions file tag is being dynamically loaded but it's being loaded in the header section where i actually want it down here in my footer section so to fix that that's actually the last property i left out here on this wp and skew in q script command so the last parameter is either false or true and the default is false if you set it to true that means it's going to place it in the footer so i'm going to save that there and then let's go ahead and refresh here and we should see yep there it is so now that file you can see is appearing down in my footer perfect okay so now all we need to do is let's just copy and paste this two three four times i think we need four more files so the next one we need is popper so this is a javascript um file that is required so we're gonna put this one right inside of here actually let's do these in order i'm going to do bootstrap uh oh this is actually popular this is what bootstrap requires so popper is a library for bootstrap so we'll pop this one in here i have no pun intended and call it popper we'll just keep replacing these version numbers over here and then we're going to grab the bootstrap javascript file next it's going to go right here and we'll just call this one bootstrap and then the last one is our own javascript file called main.js so this is where we need to grab this function again here so we can come grab our get template directory let's delete this default one so get template directory dot and then our javascript files remember are in our assets folder and inside here we're going to have a javascript folder so they're going to be inside of slash assets slash js main.js and we're just going to call this version 1.0 now i can do the same thing here is i can prefix these as well i can get the version number for my theme but i'm just going to leave it hard-coded i kind of explained that up there and we'll save and refresh let's make sure all those are loading okay and it looks like they are so now the last thing we need to do is you will notice that um my file here whoops we need to go delete all these out of here now so we can delete all these so they're not hard coded anymore and save and refresh and now we can see sure enough there is jquery popper bootstrap and lastly my file which you can see is not showing up and that is because that file doesn't exist in the directory i claimed so we need to go place it there so we need to go to my uh template so i've got this inside of my blog site template open up my javascript file i'm going to copy this file so copy and then i'll come into my assets folder and come into my javascript folder here and we will paste okay so we want that to be inside of the javascript which i don't think it is here let me fix that i can't believe i didn't realize this before when i was creating all these files but you can see i've got assets and css inside assets fonts is inside of css images and inside of fonts so i've actually messed up these directory structures so i need to move them all back out i don't know if you can drag and drop um let's see if it'll let me yeah that's actually working so i've got to drag all these back to the main assets folder there we go and then drag this javascript file inside of the js folder which it's now there okay so now that's in the proper place there that's looking fine and let's save and refresh and see if we're now getting our own javascript file to load here and i'm still not seeing that so we've still got a path issue let's just double check so we have assets then javascript and main.js let's come over here to our functions file so we're coming into our template directory assets js main.js loading in the footer oh whoops we have a name conflict i haven't updated this one so this one is just uh we'll call this one main that may be why it wasn't uh loading and there we go so there's my file there's the js file you can see it's loading properly yep so of course you can't use the same name twice or you'll get conflicts so i hadn't updated that so there is all of my scripts that are inside of the footer so now we've successfully enqueued all of the style tags we've enqueued all of the scripts tags loaded those in the footer and now my site is essentially working properly where wordpress is now managing the loading of those files so that's step one is in queue the files now the next step we need to do is actually set up our literal header and footer files so right now inside of our uh our front page right we just have we have wp head but then we have all this extra stuff that's just hard coded inside of our template and we want to further remove that into a separate header.php file and footer.php file so this is kind of up to you on how you want to end up determining what content goes in your head and what time content goes in your foot but what i'm going to determine is that everything including the navigation up to the main content here in the page title will be in my head and then everything down here will be in my footer but you can split this up again however you really want so for me i'm just going to double check and look at the code here so i want all of this stuff all the way down until i get to this main title here which is all the way down to right there my closing header html tag all this stuff i'm going to cut so i'm actually not going to actually i'm going to cut right here because i'm in my php file so command x to cut and let's come over to the header.php file and paste so i'm going to save that all there now let's come back and do the same thing for the footer so essentially i'm going to come down and where this closing footer ends i want uh let's see what i want in my footer probably everything main wrap includes that copyright notice so basically for my footer i'm just going to cut out this right here and we will cut that we'll leave this main wrap that houses everything alone and we'll place all of that stuff inside of my footer okay so we'll save that and that looks fine there i'm just going to tidy that up while i'm here okay now since we've cut those two pieces out we need to dynamically load them back and wordpress has a function for that so i'm going to open up my php tags here and it is called get underscore header so you can see as soon as i type that in and save sure enough my header comes back into place let me comment that out so you can see that notice that without the header i'm just getting my content so if i view page source there's right there's nothing above and below it so that looks fine there and it looks like i actually have an issue with my html i'll have to correct that later i'm missing a opening or closing div somewhere uh but so what we can do is we can replace that with get header and that will bring in my header and then down at the bottom i can open and close some php here and same thing i'm going to say git footer so this is very simply this is very similar to just native php where you say include right all it's doing is just including that file and including that file but in the wordpress way of doing that so now when i refresh you can see sure enough i've got my header i've got my footer everything's getting put back together here on this main page and that looks fine so the next issue we need to fix is we have our header and our footer loaded dynamically we've enqueued all of our scripts and all of our css files now we need to change some things that are dynamic like our page title for example if we come into our header notice that the title tag is hard coded that's going to be a problem of course i want this to be dynamic based on whatever page i'm currently on inside of wordpress so that's what we're going to fix next is we're going to fix this little title tag two ways you can do title tags you can manage them yourself meaning you hard code the title into the actual head section and then you replace this with a little command that's called like get the title which is a wordpress specific feature so that's method one method two is you just completely remove the title tag all together from your head section and you let wordpress dynamically add that title by itself that's the method i'm going to opt for for this video so to do that we need to come to our functions.php file and i'm going to add here above here just up here on line one there's a command or a function rather that's called add theme support so add theme support and then title tag like so so what this is basically saying i'll just do this in a comment here but this adds dynamic title tag support so in other words wordpress is going to then manage the title tags itself and it does that automatically as long as we have in our header.php file this wp head command so that's another one of those reasons why we have this so now when i come over here and refresh whoops and let's go ahead and look at the page source you will see up here that in the head section right now if we scroll down here and look so i'm going to search for that title notice there is no title tag at all right now on this page and that's because wordpress hasn't yet figured this out so the reason wordpress hasn't figured out to add this title tag dynamically is because i forgot to wrap this in a function so i'm going to call this the function follow andrew we'll just call this theme support so this is going to be a function i'll go ahead and cut this and paste it in here and then i need to add this into a hook as well so the hook name here i'm just checking my notes is we're going to do another add action and it's going to be after theme setup is when this one will be called and we'll just copy and paste this into there okay the issue i've just discovered is i actually spelled title tag right typed it in correctly it's not title underscore tag it's titled dash tag that's the one you want to add in add theme support so let's save that and refresh and there we go now you can see my title appears right here it says blog site just another wordpress site and that's automatically being added into my page via wordpress so that's how we're going to leave that managed now this title and description is course is coming currently from the settings inside of wordpress so if you come into your settings general there's my title and there's my tagline so that's where those are getting injected from but we can let that be managed by wordpress automatically and it will inject in the proper titles according to whether it's a post or a page and whatnot we'll look at that a little bit later okay so back here into our code we will continue along so now we have our theme support for our title tag we're dynamically adding that we've got our things enqueued and the next thing we're going to do is add a few more options here inside of our theme to add some extra support so for example for our specific site here when we're on a post page i'm way zoomed out here so you can see this so i'm going to zoom back in but we're on like an individual post whoops i can't come to a post yet but i have a specific width here i'm just going to measure this quickly here so you can see the width of my page is roughly i don't know 800 or 900 pixels so when i upload images that i want to feature inside of my posts or pages i really don't want them wider than that dimension because they're never going to be shown larger than that so i can add what's known as custom thumbnail sizes so that anytime i'm inside of wordpress i'll switch over here to the backend of wordpress when you go to the media gallery and you say add new file and you drag and drop files in here wordpress automatically resizes those and it uses the sizes that are set up inside of your settings so if you come to settings and then go to media you'll notice that it has a thumbnail size a medium size and a large size so if you want to customize sizes beyond these three of course you can just change them here you need to do that inside of your theme with your with the function in the ad sizes now a thumbnail medium and large is fine for my needs so i'm just going to make sure this large value is roughly that width and that actually works out fine 10 24 but just be aware if you want to add extra sizes that's when you need to go into your theme and add support for custom thumbnail sizes okay so we've got our header we have our footer we have our functions.php file which is making that title dynamic and that's about as far as we're going to get for this little section i just want to mention what we're going to be creating here in the next video so in our frontpage.php file we still have all of our content right all this stuff right here in the middle is hard coded we did with div tags and content right we don't want that we want all of the content to be managed by the wordpress blog that's the entire point of of creating a cms system is that you can manage the content within wordpress so what we're going to do is we're going to end up deleting all of the content out of this page we'll change our theme a little bit to maybe put this header and some of these footer tags down here inside of our header and footer and then we're going to talk about the wordpress loop which is how we can tell wordpress to query the database pull out all of the content for the specific page and insert it dynamically into our loop or our section of content so we're going to be starting here with the front page and then we'll move and do all of these separate template files one by one by one so you can see how that works and we need to take all of this hard-coded content that we added into our front page and put that inside of wordpress so what i'm going to do here is i'm just going to go into wordpress here so i'm going to log into the back end of wordpress go to my pages section and say add new and i'm just going to call this page my home suite home and i'll just type in something for now so eventually i'll fix this up i'm just going to go ahead and publish that so it is now published now i can come into my settings and reading and i want my home page to display a static page and that page is my home suite home so we need to first create the page and then we can tell wordpress to use that page as my as my website's homepage or front page and then we're gonna hit save changes okay so now we can come over here and we can go ahead and refresh this page inside of our blog and you'll see that right nothing's changing at this point we still have all of the hard-coded content so what i'm going to do next is i'm going to delete all this hard-coded content so i'm going to delete everything let's see everything in this container i'm just going to remove so that container goes down to right there and so now we just have the article and then we have our footer and our header so that's looking pretty good now the other thing i'm going to do is for each specific page i just want to have basically this article tag so i'm actually going to take this content right here and cut that out and put that in my header.php file so that's going to go right below here and then i will take let's go back here to the front page i'll take all this footer stuff down to that closing div tag save and i'm going to put that in my footer.php file right down there actually i'm going to have this go right above the wp footer command right there okay perfect so now inside of my template file essentially my header has everything except the article the main content which is the way i want it so let's just type something here and hit save and you can see sure enough that appears but i want the content that i saved in that page to appear here and this is where we're going to finally talk about what's known as the wordpress loop so wordpress a loop is basically an iterator right which iterates over several things so when we save a page or a post or really anything inside a wordpress when we save something inside of our posts or pages that gets saved as a role in our mysql database in my case so what wordpress does is it dynamically queries the database finds which row corresponds to the page you're on pulls that information and displays it in that section and that's known as the loop so when i come over here we need to create the loop code so this is a little bit weird the way they do this but wordpress uses a while loop so what you can say is um if we have posts okay so if posts exist basically then we're going to execute this code in here so the next section is going to be while and then we're going to say have posts while we have posts we come down here and we say the post okay so let's save that just far so if we have posts and this is the iterator this is the for loop or the while loop in this case while there's posts whoops this needs to be a function while we have posts so this in other words the post is going to execute every single time as long as there's posts so we can save that and it looks like oh yeah so that hadn't updated yet so let's refresh that over here looks like my web server actually may have crashed you can see it's trying and trying to reload this page uh but i think it crashed so i may need to restart my web server i'm going to pause really quick and restart the server okay so i've restarted my web server and we're back live here so what we can do is we can call the post and that essentially makes wordpress query the database and fetch out a single post once we've called the post we can then call a bunch of other wordpress functions so i'm just going to show you one here called the content and this is one that actually grabs the content and then starts it so you can see as soon as i save that sure enough my page now says something so this content of course is coming from my page here let me go down to my pages it's coming from this page right here right where it says something so instead of saying something i want this to actually show right i guess whatever is on my home page it really doesn't matter at this point but i'm just going to call this home page content and we'll go ahead and say update come back here and refresh and you can see sure enough that's coming in now i want this heading here to show me the title of the current page now because that is back here in my header dot php file there's a command in here that's called uh i'll actually have to look this one up really quick it's called i think get the title okay so the command is just called the title so i'm gonna come in here to this heading and i'll just replace this and say the title like so and then close off the php and save and now you can see it shows the current page title or post title whatever it would be up there in that section right there and then my content is right down there so that's looking great so that's really all we need right now for our front page to be mostly complete so we have this little loop we're pulling out the post and the content and there's a there's several other things you can pull out you can pull out the author the date the time the tags the post excerpt the post thumbnail post images right all those things are available inside of wordpress commands and that's going to really depend on how your theme set up where you want to display certain things but we'll get a little bit more into that as we do these other template files for our page in post sections so we're going to save that and now let's move on to another page so one of the problems that we have is our menu items right here inside of our sidebar are also hard coded so right this is this is not going anywhere so i need to make this section dynamic and in order to do that i have to add another thing to my functions.php file which enables uh menus wordpress menus so let's go ahead and do that next so we'll come in here to our functions let me pull this down and we will add our menu options inside of our functions.php file we're going to create a new function here and this is just going to be called the follow andrew and we're just going to call the menus okay now there is a in order to set up your menus in wordpress you can set up as many what are known as menu locations so for example in my website i've got a menu location over here on the left perhaps i want another one on this footer maybe i want a different menu location for the mobile right so you can set up different menu locations but for us we're just going to set up two to show you how this works so let's come over here and i'll pull this over again so we're gonna create an array so i'm just gonna call this one the locations and i'll set that equal to an empty array for now and then inside of this array it's basically key values so the key is the menu location name and the value is like the title and a few things like that so the first thing i'm going to do is just call this one my primary menu and the primary menu is going to be we can just call this the desktop primary left sidebar right this is kind of a description of your menu really whatever you want to call that and then i'll add one more and i'll call this one my footer menu and then i'll just say the footer menu items however you want to call that okay so once you have your your option declared your function we of course need to add in another hook so we're going to say add actually sorry i'm getting ahead of myself there's one other command we need to do inside of here and that's called register nav menus and we need to pass in this variable so this is an array of all of our nav menu names and descriptions okay so all that code is inside of our function then we need to add in to the action so we're going to add add action this one's going to be inside of the init hook so we'll copy and paste in our function name like we've done several times before so this function is going to hook into the initialize function which happens fairly early on in the in the hook process and we'll go ahead and save okay now that we have those active if i come back and log into wordpress here and now go into my appearance and notice that before i didn't have an option for menus menus actually was not even in this menu but now because i've added that in my theme i can click on the menus and i now have menus available to me so what we're going to do is we're going to create our first menu so i'm just going to call this menu name the main menu and we'll say create and now notice right here i have these two locations i have my desktop primary and my footer so now i can select where i want this menu to appear inside of my theme so let's go ahead and i'm just going to add a couple of options here so for right now i'm just going to create a few new pages so i'll come into my pages and hit add new i'll call this one my about page the only reason i'm doing this is just so i have something in my menu in order to show right now so we'll publish this let's add we will add one more and we'll call it contact us and we'll say contact and we'll publish that page as well okay so now when i come back in here to my appearance menus i have a few things over here i can add so i'm going to add all of these three the default sample and then those two and i'm going to say add to menu and you can see that they get added right here to my main menu in wordpress you can drag these as sub menus and they'll appear as drop down menus if your theme supports that or just as main items like this and now i want to say i want this menu to appear in my desktop primary left sidebar so i'll go ahead and click on my save menu okay so now this menu is created in wordpress it's set to be displayed where that menu location is but i of course haven't actually added the code for that menu to appear so that's where we'll jump back into our code editor and we're now going to go set up what's known as the primary menu so that is done if we recall back in our theme we come into our header our header has that entire menu it's a little bit tricky here i'm going to line wrap this but this is all the code for that menu that's hard coded so essentially i want to remove all that hard coded menu and replace it with a wordpress function that's going to automatically dynamically display the menu so let's do that next now you can see here from my code my menu is inside of this unordered list so i have a div called navigation and uh this is these classes collapse navbar collapse flex column these are wordpress sorry not wordpress these are bootstrap classes that automatically enables the mobile menu and automatically does a few things like that but the actual menu itself is all inside of the unordered list each menu item right in my list here is a simple unordered list with a list item with a whole bunch of classes and things that kind of make it styled correctly so essentially what i want to do is i'm going to add some of my own code right inside of this section now eventually i'll delete all of this hard-coded stuff but i'm going to leave it right now because i'm going to need to reference it as i build this menu via wordpress so the command you need is called um wp nav menu and with this function it takes several parameters so we i'm going to open up the function here i'm going to do these parameters on one line so it takes an array and i'm going to put each of these parameters in the array like this okay so this function takes an array and the array is a set of all the different parameters so the first one we're going to do is just called menu and this is the name of the menu you're trying to output in my case the primary menu menu remember how we registered primary and footer so i'm going to output the primary one right here okay so that's the first thing the second thing is just i'm going to say container and i'm going to leave this as empty for now i'm just listing it here so you can see a few of the option and then i'm going to say theme location is primary as well okay so this means right when the user selected that theme location i'm saying this is the primary location right here and the uh name should be fine right there okay so now you can see if i if i open this back up i'm getting two menus right so now i'm getting my contact my about and my sample page so let's go ahead and inspect these in our code over here and you can see that it's a little bit messy here i'll try to pull this out but wordpress is injecting all sorts of classes into this menu so you can see that wordpress added an unordered list it gave that guy an id it gave it a class of menu each of the menu items has a class of menu item then the post type and then the object page item 14 item 15 item 16. so there's all sorts of stuff that wordpress injects into the menu and you can customize all this as needed but it gets a little bit tricky if you want to do advanced customization because you have to include what's known as a walker class to be able to iterate over the menu to customize everything so we're not going to get that advanced but we will learn a few of the tools to where we can customize some of these some of these classes so the next item we're going to be adding here is one that's called items wrap and this declares it's sort of the template that is for the unordered list this is what the items wrap means so what you have to do here is you have to this is a little bit goofy because you have to say ul so i'm just going to open the ul and close the ul so in other words i'm going to wrap this with an unordered list and then i have to put parameters inside of here where wordpress will individually add my classes so one thing is going to be id the other thing is going to be a class and then inside of the unordered list i have to put the uh ampersand three dollar sign s and then when i save and refresh here whoops looks like i missed a semicolon or something oh yeah i wasn't supposed to add a semicolon right there let's go ahead and save that so now if i pull this menu back i'm going to go down one more time here i'm trying to get this mobile menu whoops to disappear there we go let's get that text back up here and we'll inspect the element again and you can see here that now my unordered list has an empty id and an empty class whereas before it had all that wordpress injected stuff so now i can specify whatever id and whatever class i want so my own unordered list in my menu doesn't have an id but i do have all these classes so i'll just copy those and paste that right into there and save and then let's go ahead and see what that looks like now perfect so you can see now it's got the class and it has all those different classes in there so that takes care of the items wrapper the unordered list but as i mentioned there's not an option in here to also affect the classes on the list item with this wp nav menu in order to do that we have to create this big long custom walker and it's quite complex so what we have to do in order to get our classes on our list items is we actually have to do that back inside of wordpress admin so let's come back in here and you can see that if i open up one of these options here for all of these different items so here i have my contact us there's a few options in here that i can toggle so what we need to do is we need to turn on an option here screen options i believe there we go so here it says show advanced menu properties we need to turn on the css classes okay and the link target let's just turn let's well actually we don't need that one that should be fine okay now you can see that i can provide a css class for the specific option so again the class name i need for me is the nav item right there so i'm going to copy nav item and we'll come over here and we'll click paste and now let's go ahead and save that so we're just going to do this on one for now but you can see that my contact has the nav item on it so let's go back here and refresh and see if we can now see that appear here so that is the first one right here and sure enough you can see that it still has all the wordpress classes over here but it does have now the class of nav item which is the one i was after okay so that's looking good um for now and we can go ahead and add that to the rest of these so we'll go ahead and add that to this one and we'll add it to this one and go ahead and save so now all of those have that and refresh okay so that's looking better now you can also see that in our menu our anchor tags themselves have the class of nav link and there's no way for me to customize the anchor tag with css classes so even if i come in here to wordpress and i you know toggle these guys this class is applied to the unordered list not the actual anchor tag and i'm unaware of a way where you can do that so you actually have to use a custom walker to make that happen we're not going to get that far in this tutorial but just be aware there's several other tutorials out there on doing some advanced things with walkers but we'll just leave this with our nav item now notice we also have a inside of our anchor tag we have this icon so i'm going to copy the icon here and i'll just copy this and let's actually do this one for the we'll do the blog post one just to show you i'm not going to do this to them all but i'll copy this icon this is coming over from font awesome so what i could do if i wanted the icon let's say on this i don't know we'll just pick the about page here i could paste that directly that html directly into the navigation label and save and now when i come over here and refresh uh you can see that let me zoom in here i've got my icon right so there's the little icon appearing so that's how you have to do your bootstrap icons again it's a little bit clunky doing it this way and that's because we have a really specific markup that's required because of bootstrap a much easier way would be to change your own css and match wordpress's outputted css classes that they give you um but of course if you can't do that then really you have to jump to that advanced method with the custom walkers in uh inside a wordpress perhaps i'll do a video on that in the future but for right now we'll just leave it alone like this okay so we've got these little items just so you can see the only thing really this nav link is doing for us if i inspect the element here and i just manually add one so i'll come in here to this code and we'll say we'll give it a class equals nav dash link just so you can see all it's doing is just changing the size and the color of that so perhaps what i can do to to get that to work is instead of calling these things nav link remember wordpress um gives these guys hey what does wordpress do i actually don't know um looks like they're actually not giving the anchor tags any markup at all so i'd have to go into my own css and edit that class and maybe perhaps move it up to the nav item so i could do something like let's come over to my css so we'll search for the nav dash item and you can see that the nav item has a little rule here that's for the nav link so instead of calling this nav link i'm just going to call it anchor because that's really what it is it's an anchor tag and i'll call this one here anchor and save and now they're basically you know having that same same thing happening to them oh here's another one over here i guess i should just replace all these nav links let's do a quick search here looks like i have five of them so this one will be anchor this one will be anchor there's another one we're going to have as anchor well they're all over the place and all these so i'll replace that one with anchor this one with anchor oops that's oh that's nav link pre that's a different one oh that's a different one too so that'll be anchor now let's see if that's working so that's a little bit better right so now we're getting close there to our previous menu down here it looks like we have some issue with this spacing which i'm not sure where it's coming from looks like we have one more nav link nope that's the previous so i don't know there's a margin somewhere in here i missed but we'll just kind of ignore that but you can see how that's going to work so now that i've got those in there and hard coded i can come into my header and i can finally then take this old menu and delete it out because now that's been replaced by this menu so that was perhaps the most complex thing we've done thus far and that's the way the menus typically tends to be because there's just lots of nesting and classes all over to kind of build those menus so now we have our menu working there's our three little pages we have inside of there and they're showing up just fine on both the desktop and the mobile view as they should okay so that's how you build menus now the next thing we need to do now that we have our menu out of the way is create or our menus at least dynamic is create uh the rest of our template pages so we can leave all these hard-coded all the social links would just be hard-coded likely anyway and that's looking fine now for our header the one thing i'm noticing right here we might as well fix while we're here is that you can see my shortcut icon has the incorrect path so i want to just update this so i'm just going to hard code this one wp content slash themes slash follow andrew slash assets images logo.png i think that's where that is so if we come into our images that's where it will be so i'll come in here and drop it in so i'm going to come over here to my template uh i can't really see where i'm looking at here oh there he is blog site template images there's my logo png i'll drop that into my images folder that's the little logo that's also going to appear right up there right okay so that would be like the favicon is basically what this guy is the shortcut icon okay so that's looking fine there and now let's go ahead and move along so we need to now finish our removing all the stuff that's hard coded so for example we have our site name that's hard coded right here into our site name we have our logo that logo is hard coded in here as well so we need to start to uh remove all that stuff so we're going to start here with our uh site name and logo so we're going to show you how you can add a custom logo meaning the user can go into the wordpress admin upload a logo and it'll automatically then appear in your theme so let's go ahead and do that so in my navigation area is where i have that logo stored so the first thing we need to do is come to our functions and just like we've done many times before we need to add the theme support uh for this function so remember we have this function up here where we're gonna be adding all of our theme support so we're gonna say add theme support and this one is going to just be called custom dash logo okay so we do that now what that allows if we jump over here now to our back end and we come over here to our themes and we choose the customize action on the installed theme so you can see i can come in here to the site identity and there's a new option in here called logo so i can click on select logo and you can just come in here and browse to the logo i'll just select this logo that i've got and say open and this of course uploads it you can give an alt text i'll just call this my logo and say select of course you can come in here and do some cropping options i'm just going to say skip cropping and there is the logo so now that i have a logo i'm going to go ahead and click the publish here and come back and now that the logo is in place i can actually output it so let's come back here and i'm going to come back to the code here i'm going to jump back over here to my header.php file come down to where i have this logo hard coded and then i can actually output it right here so the code you need to output the logo is i forget it i've got to look up my note it is we can do this one in an if function so we can say if function exists so this is just checking to make sure that the the custom logo whoops function exists because if we're on an older version of wordpress or something this may not work so if that function exists then we say the custom logo and we just output it like so so now let's go ahead and refresh this whoops i wrote all that and i forgot to do my php tags make sure you actually write that inside of php tags and save and now you can see sure enough there is my logo and it's automatically output now you can see that the issue here is that the logo gets output but wordpress is adding again all of these extra classes and all these things and they don't follow with what i need which if we come back here to our header file is scroll down here whoops where'd it be there we go so i need these classes right because those are the classes that i'm using on my logo so what i need to do instead of saying the custom logo i need to output a little bit more so what we're going to do is we're going to say instead we're going to say custom logo id and this code i'm getting is just from the the codex so i'm going to say get theme modification custom logo okay so i'm getting this variable and then i'm going to say the logo is equal to and then we say wp underscore get attachment image this is a little bit weird here source and then we pass in this custom logo id right here so whoops we need to make that a variable so we pass in that variable and that should do it whoops i think i forgot a semicolon yes i did so semicolon okay so now you can see that oh i still have an error in there somewhere um call to undefined function wp get attachment source so i must have spelled this wrong wp get attachment image source yep i forgot an e there we go whoops see attach mint there we go okay that's correct now okay so now if we just now this logo basically has all the information about the the image source so now what i can do is i can just manually output my image so right here where it says source i'll just delete that and i'll replace that with the source which comes from our variable right here so i copy that replace that inside of there and save and refresh and that still didn't output i think i have short tags on but i'll just do this the old way php echo and let's i'm still not seeing the logo so let's just really quick do a quick print r on this to see what's inside of this variable make sure it has the information i'm looking for so you can see it does have it so there is the actual image source oh it's the first it is a multi-dimensional array and there's the width and the height um so what we need to do is we need to get the uh first parameter so we can say logo sub zero here we go and there my logo now shows up okay so let's close that down and save so that was kind of a little bit of a work but now you can see i can output the custom logo there and uh including my custom classes so there's kind of two ways you can do that right if you want to do it the easy way you just you know output that simple function right there the custom logo if you need to have it customized and just need the path you can grab the path using this code right there and then add that path directly into your image tag as needed okay so that is now i think mostly done so let's close this down and just double check so everything now should be dynamic so our oh we have to do that one last thing so our logos dynamic our menus dynamic the page content is dynamic the page heading here is dynamic our page title is dynamic so everything is now being pulled from wordpress with the exception of a couple of things and that's our site name of course we have this hard-coded we're going to end up doing that in widgets in the future tutorials so you can add widgets in our footer to be able to customize those text boxes but let's go ahead and grab the site name and add that to that area right here so to do that we'll just delete this right here and we'll replace that with a php call and it's going to be called get blog info and then this is going to be the name whatever the name attribute is of the blog will output that for the site title so uh that should be it and we need to echo that there we go and now it says blog site right so that's basically whatever is the name of the site so that's customizable as well back in here right this this right here so i can call it uh andrew's site or we'll call it follow andrew follow andrew if i can type that correctly and just go ahead and save and publish that and now if we jump back here and refresh right now that's dynamic as well so we have our site name being pulled we have our logo being pulled dynamically with custom logo uploadability all of our menu is dynamic and that is now pretty much there so what we're going to do is start off by adding some posts into our wordpress theme so you recall we added these three pages but we need to add now a whole bunch of posts so we can mock up our post page and our post archive page so let's go ahead and do that next the wordpress backend i'm over here on the post tab and i'm just going to say add new here for all these posts so i'll just call this sample title 1 and we're going to be doing i don't know 10 or 15 of these so i'll just do one or two and then i'll pause the video do the rest and you can go ahead and do that on your own so with the paragraph of text what we're going to do here is we're going to do two things we're going to have a paragraph of text and then go ahead and add in a couple of tags so i'll just say sample tag another cool so we're adding in a few tags and i'm also going to add in this to my uncategorized category i'm going to add in an excerpt so this is the post excerpt an excerpt of course is optional it's just sort of like a short description of what this post is about and then what we're going to do is go ahead and say publish and say publish okay so you can see it's giving me this sample link here for my post but the one extra thing we need to add in here is what are known as post thumbnails so if i come over here to my posts page and you see my sample post if i go ahead and edit this notice over here in the sidebar in my document there isn't any way for me to add an image so a featured image to this post and we want to be able to add that to our theme because our mock-up calls for those little featured images so we need to go add that in our functions file to add support for post thumbnails so let's move back over here to our code in vs code and we're going to move over to our functions file and come up here to our section where we're adding all of our theme support and we're going to be adding the last one right here so let's go ahead and add another one here we're going to say add theme support and this one is just post dash thumbnails like so and we'll go ahead and save that and now when we jump back over to the back end and refresh here you'll see that there's a new section right over here called featured image so what that allows me to do is now i can come in here and set a featured image so i can choose from any existing image that's already uploaded into the system or i can click my upload files and just go ahead and upload a new one so i'm just going to upload a new file here and we'll come over here because i've got all these thumbnails already in place so i'll just choose this and hit ok so i'll open this you can see it uploads that i can give it an alt text a sample image etc etc and then say set featured image you'll notice down here it sets that as the featured image now the featured image size or the width and height of that you can customize in your functions.php file but remember by default that is set i'm going to update this post really quick before i move off of this page you can update that in the settings reading section just kidding settings media section and it's right here the thumbnail size width and height so mine are going to be resizing to 150x150 so now we can go back to that post and if we view the post you can see that it takes us to a blank page and that's because on our template file we don't have anything yet set up for a post so that's where we're going to start off with our next template is an individual post page so let's go ahead and jump back here to visual studio code and we're going to move over and start that process so let's come in here to or i'm going to open up my sidebar again and we will open up this time we're going to come over here to our front page we're just going to copy everything so command a command c because most of our template files will be very similar and we'll move over here to the one called single dot php so the single dot php is responsible for single posts and i'm going to go ahead and just paste and save and now let's go ahead and navigate back to that post i actually can't remember the post id um so let's go ahead and look here so i can get over in the other document um it is i guess i need to go back here i'm just going to click on uh edit here so i can see what the permalink is preview there we go so it is post 22. i guess i have to switch out of full screen mode to see the bar here okay so it is p22 so i'll just copy that let's move back over here to vs code i'm just doing this because i don't have a way to link to it quite yet we haven't built that functionality yet okay so this should give me that post there we go so you can see now i'm on the sample title one there's my paragraph and my text and that's pretty much it that's all we technically need to do is just simply have a the exact same content in the single dot php so what we can do however is we can then split up our posts our single dot php posts into different types so for example i may have a post that's a gallery just pure images or i may have a post that is a full entire article or i may have a post that is a video so there's different types of posts inside of wordpress and we can split those different template parts up into know into what are known as template parts and that's why we created a long time ago we created this folder called template dash parts so that's how we're going to be make this single dot php template file behave is it's going to search for a specific template part that matches the post type let's say so let's go ahead and set that up so instead of just saying output the content of the post this is the spot we're gonna try to customize so we're gonna cut that out and instead we're gonna replace that with a wordpress function called get template i think it's just part yeah get template part and then we're going to look inside of the this is the url so our folder is called template parts slash and then whatever the content so we'll just say content right here just like so so the way this function works is the first parameter is the file path the second parameter if i have comma and then i have another name in here this is the type so something like that now i'll show you the way this works so now what i'm going to do is i'm going to come i'm going to save this and notice that my content disappears because i'm no longer outputting the content i'm going to open up my template parts folder and i'm going to create a new file in here and it's going to be content dash article dot php and then in here i'm just going to simply output just like i cut out the content and save and now you can see it pops back so the way this little function works in our single is it looks for the file name that you have right here if you don't by the way if you don't provide the second parameter it just simply pulls up this file but if you do provide the second parameter it looks for the hyphenated version so content dash article and that's the way this works so what this allows me to do is then i can have another template part called content dash gallery if i have a file that's going to be a gallery or something like that so it allows you to kind of split up and modularize all your wordpress template files in another way we're not going to be creating tons of these i just wanted to demonstrate sort of how this process works for uh for this specific post so uh that looks fine for this one uh let's now go in and we're gonna customize this article template so if we come into here you can see we're grabbing the content and that's fine but we also set up some tags we have a featured image we set up a category maybe i want the post date the post author so there's a bunch of information that's typically called metadata or information about the post that i may want to display alongside just the content so that's what we're going to do next so let's go ahead and set up all that metadata you can recall what the post page looks like i've pulled up here my template file so this is what a single post would look like notice that we have the published we have a few tags with some little icons we have a link right here that jumps us down to the comments section we have comments with nested comments and then of course we have a little animation that happens in our sticky header and we have a featured image right here and then everything in here is going to be this is all the post content right so all of this stuff is coming from the post content so we need to mock up all this extra stuff so that's kind of how this page looks like so let's jump back here to our code and i'm going to open up that specific uh template file here so that is our post page our single post one that we have mocked up here and we're gonna grab some of this html so we can paste it over into our php template so let's cruise down a little bit into this section right here okay so uh what we need is we need this little published three months ago we need that we need the container i guess we need a lot of stuff in here so let's grab the container first so we're going to grab this we're going to grab this looks like that's mostly all we need so we'll copy that and we'll jump over here to our content article and we'll paste that up there and then of course we have this div right here we need to close because we need to close the div for the container let's kind of indent this back a little bit so we can kind of see how that's going to look okay so that should be okay so let's save that and see what that's looking like so that's much better so now we have our published we have those tags and the comments showing up perfect so now we need to replace these so they're not just hard-coded i'll pull this over a little bit and let's line wrap again here oops i always hit the wrong button there one more time okay so uh we need to replace these so instead of saying published three months ago of course this has to be the actual date so here's we're going to pull out information from the metadata of our wordpress theme so let's remove this published three months ago and we'll replace this with some php tags and we're going to say replace it with the function called the underscore date and now we'll save and refresh and you can see that now shows me the current date that this post was published now if you pass in parameters into this function there's all sorts of um you can format the date exactly how you want using the php date string formatters so you know we can pass in all sorts of things in here and format that date exactly so i'm not really going to worry about that right now you can look up on the wordpress codex there's codex excuse me there's a lot of different ways you can format the date just exactly how you want so i could literally have it say posted three months ago or posted today or or however you want that to be all right now next we're gonna mess with these tags these post tags so they're inside of this span classes tag and then we have an icon and then we have the actual tag so to make this a little bit easier to read i'm just going to hit return here on a single tag so we can kind of see that and i'll move these comments down as well so they're each on their own line there we go and i'm gonna actually just reformat this a little bit so it's easier to read okay so we have this div and then inside of this div we have these three sections right we have the date we have all of our tags and then we have a link to the comments so the next one we have to work on is the tags so we're gonna we're gonna leave that there so i can reference the code and we're gonna add a little bit of php code here just tap this over and this is going to be for the tags okay so to add the tags in here it's just simply called the tags and you can see as i save that and refresh i get my little tags output and they automatically are anchor tags that link to the tags and then i can pass in a few parameters into this function to customize it so the first parameter is before the set of tags the second parameter is what's in between each individual tag and the third parameter is what comes after the entire set of tags so it's a little bit weird but basically you can see here that for us all of this comes before the tag this comes after the tag so what we're going to do here is we're going to copy all of this code in fact i need to fix these quotes really quick so they match double quotes so all of this stuff is going to come in that first parameter the second parameter is what comes again in the middle or in between each tag so in between each tag i need to close the span and then also add all of this again because each individual tag is wrapped by a span tag so i'll paste all that right there and then the last parameter simply has to close out the list again so whoops make sure that's a closing span okay so now if we save there we go so you can see now each one of my individual tags is wrapped properly and showing up with my markup okay so now i can delete this hard-coded tag and save so that's looking fine now the next thing i need to do is add a link here to the comments so we're going to do that little section next what we're going to do is delete our hard-coded number that says three comments and we're going to replace that with a little php or rather a wordpress function that's called comments count and what this does um actually it's not comments count it's comments number we'll save that oops i forgot to close my php right there and you can see right now it says no comments right so we're going to come over here to our comments.php file which is currently empty this is our template file and paste all the code for our comments so all of that is in our template file blog site template and we can come down here to our post we've been working on and we'll come down here to our comments section and you can see there's quite a bit here but it starts right here there's this thing called comments wrapper so i need to start right there and basically copy all of the code all the way down to where that wrapper ends right there and come over here to my comments.php file so i'll close this down and we'll close this down and we'll come back to our comments website and open it comments.php and paste all right now there is a lot of code in here that we're going to end up deleting because wordpress is going to provide all this dynamically essentially all this code so what we can do now is start replacing all of this so let's get rid of my sidebar here and we're gonna just going to start piece by piece so again this is one of those sections that if you can find an existing theme that you like the comments on i really recommend like the 2020 thing just copying their comments file pasting it right into yours and be done but just for the sake of this video i will go over this really quick here inside of this header two we're going to be writing a little bit of logic this is the comment reply title so i'm going to open my php and close it here so here i can say if and then here's where i'm going to do a little logic here so i can say if we don't have this is a php command that's called have comments in other words if this post does not have comments do what else do something else in other words i can change my title based on if there's comments or not so if i don't have comments i can simply just echo out something like leave a comment okay we'll just do that otherwise if i do have comments i can echo out the number so i can say get whoops i can say we'll just echo something like i don't know we'll say get i think it's get comments count to get comments count and then concatenate that with comments okay something like that so let's save and refresh here and before we get any further we need to add that comments into our template so that our template here can display those comments as well so we'll come back in here to our content article and after our content section we need to include the comments template so we're going to add in the it's called the comments it's literally called comments template template like so and save and refresh and you can see sure enough now i'm getting all of my comments right here to appear so that is looking fine so basically what this does is this comments template just pulls in that common stop php file and it just outputs it here directly now we can also do some extra code here i'm not going to do this but we could do some checks in php to say if we're allowing comments then output the comments template or if there's no comments if it's a single page if it's an archive page don't show comments right we can do all sorts of logic to determine when and when we do not want to show the comments template but for simplicity's sake i'll just leave it turned on always on this article page article template so now that we have the comments being output we can come back here to our comments and then actually start to fix these guys up so um let's see here now the next thing i need to do is i need to do an echo i forgot that because i'm not seeing my title there we go so it says leave a comment and then i can say echo get the comments count okay so if i have comments it's gonna output the number and then say comments and if i don't have a comment it'll say leave a comment and of course there is no comments on this page even though i'm showing some that's because they're hard coded okay so we have that now let's go ahead and output each individual comment one by one and that's going to be done inside of this comments intersection so all of this code all of the divs that belong to each individual comment and their associated replies wordpress is going to manage completely so i can come in here and delete that entire section of code all the way down to well looks like i have an error in my some of my code because it's not showing me the there's comment one so we can delete that comment three we can delete that and there we go okay so we just have this little comments wrapper then we're going to add a command in here that is going to output each individual comment and that one is called wp underscore list underscore comments and this is very similar to the wordpress menus that we did in the last tutorial where we can pass in a set of key values in this array to determine how those comments are output so there's all sorts of things here that you can pass into this i'm just going to quickly show you a list of available options the wordpress codex and you can see that this function here the wordpress list comments takes a whole bunch of arguments and here's all the arguments so you can do a custom walker the maximum depth so how many levels deep of replies you want to show your style so it defaults to unordered lists a callback function you can do the type of comments so all pings comments pingbacks how many comments per page the size of the little avatar image anyway you can kind of see there's lots of different options there so we're not going to be doing that specific of in our page just so you can see there's several options we're going to customize this back in our code with just two parameters here we're gonna do the avatar size one so the avatar size we're gonna set to 120 pixels and we're also going to set the style to output as divs instead of the default unordered list and we'll save that and make sure we looks like we have an error there unexpected oh this has to be an empty array sorry so i need to create an array and then these properties go inside of my array okay there we go so of course there is no comments right now lastly we're going to set up the reply section so we can actually add a comment and then test all this out so that's down right here you can see that i've got this little div that says respond and there's the little lever reply so basically we're going to delete this and then replace that with the comment form so we'll just take this entire div delete all that and we're going to replace that with the comment form now we are going to put this inside of a conditional so we're going to say if comments open and this is a function that checks to see if this current page or post is allowing comments so if the comments are open or we're allowing those then we're going to output our form and so it's just a function called comment form and just like the other stuff we've been looking at it accepts an array of parameters so you can specify all sorts of parameters on how your form displays the classes and things like that so we're going to just add a couple of these for us we're going to say the class for the form is going to be set to ours as section um actually we don't even we don't actually need to specify this so we're just going to leave that blank for now oops i got an error oh i always do that we don't need a semicolon right there there we go so that's looking correct now so the class form um we'll go ahead and add one more so this one's going to be the title underscore reply before so this is the title reply before text and we're gonna do that as a header two and it's gonna have the id uh whoops header two height equals again you don't need any of this this is just a sample here reply dash tile and it's going to have the class of comment dash reply dash title okay so that is before and then the title reply after is going to be just closing that header two out h2 if i can type correctly close that out and then save oops i have another error in here what did i do this time oh forgot a comma right there okay so there we go now i'm going to back this up and i'm going to zoom back out so we can kind of whoops wrong zoom let's zoom back out our page here back to a normal default level so now you can kind of see it says leave a reply that's coming from you know our header two over there inside of that header two there's the comment form we have our name email website all this stuff and then i can actually click the post comment so it should work correctly now so let's go ahead and give it a test here so i'll say this is a test comment name is follow andrew email follow well guess we'll just do hi hi website http clone slash follow andrew.dev um we don't need to save a cookie and then i'll just say post comment and we get an error okay so this is good to know because we couldn't actually test this function until we had a comment in there but it's saying hey there's an uncut air undefined function get comments count on line 15. so i think my comment actually posted correctly but uh i have the wrong code on the comments count so let's scroll up and it's right here online this line right here where it says get comments count it's telling me that that function does not exist so i've got to double check my note here and see if that's spelled correctly and sure enough it is not uh this is the exact same mistake i made earlier it's not comments count it's get comments number so if we save that there we go now it's actually outputting correctly and sure enough there is my comment so it's a waiting approval because it hasn't been approved yet but if you scroll up to the top here we go it says zero comments because it's not approved so let's just move over and approve this so we can see this working now so let's jump here to the back end i'll go to my comments see how that test to comment did appear there's my name and everything i'm just gonna go ahead and click approve of course you can set your wordpress settings to auto approve comments so you don't have to manually approve them on your own but let's jump back here to the front end and refresh and it's working so now it updated automatically to one comment it says one comments down here there's the comment i can of course click the reply button and add a reply so this is going to be a nested reply test at test.com test.test.com oops i guess the name is just test and we'll post that comment let's go back here and approve it so let's refresh here and approve this comment jump back to our code and refresh perfect so there's the initial comment there is the nested comment and of course everything is now working properly now in the sample page you'll see that i actually think i closed it down but my comments are slightly formatted differently in the sample template and that's because the default wordpress code that's being output is not matching 100 to my style sheet that i have in my comments and the reason for that i'll just explain that i'm not going to fix it the reason for that is because i copied again all of my comments code from the wordpress 2020 theme so most of my css was copied right from there um and so all this comments belongs to that now in the wordpress 2020 theme when they output their comments in the comments.php file so when they're down here on this little comment form um sorry not the comment form but in the actual comment list right here in the wordpress list comments they are using a custom walker and so they're specifying additional classes and things like that for every single element to be displayed and i'm not doing the custom walker here i'm just doing the default so that's why my comments don't exactly match my css just wanted to quickly point that out okay so now we have everything working properly we have our comments we have replies nested comments everything's fine of course if we had avatar images set up via gravatar they would show up here as the actual avatar images and that's working fine now okay so that's pretty much it for the post page let's move on now to our archive page so the post archive so this is a single post now we're going to do another content for the post archives so if we open up our sidebar here we have a file called archive.php so we can come into that file now the archive php is going to be very similar to the single dot php so i'll just copy all that and come over here and paste and then we'll remove the stuff we don't need um so what we're going to do is change the template part so it's going to be template parts instead of content article i'm going to call this one content archive or something like this okay and then we'll save and then we'll come over here and create a new template part so we'll say template parts we'll duplicate this file right here i'm just going to i guess i'll do it this way so we'll call this one the content dash archive.php we'll come into the article highlight everything and come into the archive and paste everything okay so now let's just remove stuff we don't need so for example we don't want comments at all on our blog our archive page we don't need any of this um header information so we don't need tags we don't need all that stuff so we can delete all that so basically all we're going to have is just the content individual posts and pages that we'll be creating here so we'll save that and let's go ahead and now pull up an archive page now we don't have a way to get to an archive page in our menu so now's a good time to add that now there's a lot of different ways you could do this in wordpress but what i'm going to do is i'm just going to add a new custom item here to my menu called blog when you click on that it will take you to the archive page so let's jump over here to our back end in wordpress we're going to go to our posts sorry not our posts we're going to go to our appearance menus and we're going to come down in here and add a new link here to our menu and this one is going to be a custom link and sorry not a custom link but rather a custom page and we need to go create the page first i'm getting ahead of myself so we'll go up here to pages and we'll add a new page i'm just going to simply call this one blog i don't actually need to do any content here i'm just going to say publish and publish okay now down under settings and we can go back here to our reading so we can have our posts page be displayed on this blog page okay so all this is basically the archive page and then i can hit save changes there we go now we can go over to our appearance and menus and then we can go into our menu and we can come in here to our pages and we'll say view all we'll grab this blog one and say add to menu stick it right there now remember we do need to give this guy our classes so i'm going to give this guy the nav item class i could optionally give it a you know icon as well and we'll say save okay so that's how you can add in a blog so now if i refresh here you can see i've got a new page called blog when i click that it's going to open up the archive template and right now you can see it just says test so let's come over here now and set up my archive.php template now because we have our setting reading section set up to show that our home page displays the static page set to this one and our post page is set to our blog page our archive.php template is not going to show the blog post archives the archive.php template only shows things like category archives template archives tag archives custom post type archives date based post archives things like that so our index.php file is actually going to be the file that's used for our blog posts archives so what we can do is we can just come in here and copy this exact archive because essentially all of our archive pages are going to be very similar so i'll just copy this come over here to the index.php page and now we'll go ahead and paste and save okay now you can see that this is showing up as we expect so it's showing me right some things happening here and that's all great and wonderful now if we come into our template part here for our content dash archive i don't want to output the content on my blog archive page in other words i don't want the full blog post to appear on the archive page i only want the excerpt so i can say the excerpt and save and then i'm only going to get the post excerpts for those individual posts so here's where i need to jump back to wordpress and now i need to create a whole bunch of posts so go ahead and if you don't have this pause the video create i don't know 10 or 12 posts probably at least 10 because i think the default is 10 per page so create 12 posts i'll go ahead and do that make sure to give each post a featured image if you can and then go ahead and start the video back up okay so i have here you can see a bunch of different posts now they're all displaying the excerpt because that's how i'm currently displaying here and now we need to go back to our posts page from our template so our not our post page our archive page and see how we have this mocked up so down here in this section you can see that we have our content then we have our container and then we have our post so this little post right here is repeated over and over and over so there's one two three right for every single post archive and excerpt that's where that's repeated so i'm going to copy this code and we're going to jump back over here to our content dash archive and we are simply going to paste that into here okay so now we can begin to let me just back that up flesh this out so the section right here this is the actual where this div class is content that's my excerpt so i'll delete all the lorem ipsum let me wrap lines here again and we'll replace that with the excerpt okay then we'll save that there we go so that's the post excerpt coming in here now this section up here this header three is the post title so i'll delete that and i'll replace this with the post title which is whoops the title like so and save that okay perfect now i get all of my post titles in there and that looks great uh the date right here is the the date just like we did on the other one and we'll save that so there's the date and then we have this thing that says a five minute read now there's currently no way we're going to be able to implement that there are some plugins actually that will calculate the length of the text in your post and then automatically give a suggested reading time based on average reading words so we're just going to kind of leave that blank for now we actually could set this up with a custom field so perhaps we could do that in a future tutorial where we do a little bit more advanced things but we'll just leave it for right now we're actually probably just going to leave it off so i'll come into this time here and we'll just delete the time we're not going to worry about that and then we have the comments uh how many comments so this was the i forgot this one already we just probably did it uh it's not comments count it's comments number i always say count and save that so you can see no comments no comments and down here on one of our posts there's the one that has two comments so that one we added our comments on there's three comments on that one okay so that is looking just fine like so and i think that's about all we need for this right now so the last thing is we need this little read more link this should link into the actual post so we need to make it so that our read more actually goes into the post so all we need to do is replace this url here that's hard-coded with uh what's known as the permalink and then the permalink is a term that references the actual permanent url for the page you're requesting so we just simply type the permalink and we save now watch over here as i hover over the read more link down here at the bottom you'll be able to see right here this one's going to page 45 this one's going to post rather 43 this is going to post 41. so now if i click on these this will take me into that individual post and this one will take me into that individual post and this one will take me into that individual post okay perfect so now we have the permalinks we have the excerpts and the only thing we're missing now is our featured thumbnail image and we'll do that with uh getting the post thumbnail we'll do that up here in our image tag now just to kind of show you there's two ways you can do this the first the easy way is just calling the post thumbnail like this and saving um [Music] oops i forgot an l right there and you can see it outputs a thumbnail now if i inspect this element the problem with this is that again wordpress creates all these classes on it by itself and i don't really want that i have my own image with my own set of classes so really all i need is the url i want the source so we can replace this with the thumb url whoops and save and refresh and you can see that will just return me with the absolute path to that thumbnail image which is what i want so now we can just grab this and replace that here in our source so we'll delete the source php replace that and save and now we can delete this little code up here and we should be getting that source to appear there so let's double check so image sure enough there is the image so that should work fine now on my tablet view i actually have those hidden so i need to actually resize this up and there we go so on desktop they're appearing on tablet i have those disappearing right at that breakpoint and then we get down to our mobile view um they're gonna they're gonna reappear so or they're also hidden on mobile so you're only make sure you resize and get up to your desktop view to be able to see those thumbnails now one important thing to note here is that if you just use the post thumbnail by default it actually pulls back the url for the full size image which is a problem so for example if you look right here and i refresh this page here so on this last one here if i say view image notice it's pulling in a very very large image it's just scaling it down teeny tiny which we definitely do not want for our archives page so with this function here the post thumbnail url you can pass in a string as the parameter in here to specify which size so in my case i want to specify the thumbnail size now remember those sizes are coming here from your settings media so there's my thumbnail medium and large so i want the width 150 by 150 so now when i update that and save here now let's come in here and refresh this whoops notice now when i click on this and say view image it's giving me the proper thumbnail image so definitely double check that a little got you there whenever you're working with pulling in thumbnails okay so that's pretty much it for our archive page so we have all of our posts now on our blog so if we click on blog we get our blog archive page we get all of these uh fancy titles here and that's pretty much pretty much it so uh what we need to do next is we need to add in our pagination links so down here at the bottom we have some links where if we can go to page two page three etc etc so we'll just add in the pagination links down below now one important thing we need to do first is we need to come over to your back end and go to your settings and reading and i'm just going to set my blog shows at most four posts this way you can actually see the pagination links because by default there's 10 per page so set that to 4 set that to 4 hit save changes then when we come back here and refresh we'll actually only be able to see four posts then we'll be able to see the next links when we update those so in order to do this all we have to do is come into our index.php file right after our loop here and we're going to add in these uh pagination links so uh the code here we'll just open and close some php tags and it is called the uh posts pagination and then we save there and that's pretty much it so this will automatically output your previous next link so i can click on page one i can click on page two and you get the previous and next links in the current page depending on where you're currently at so that's pretty much all there is to that there um are a few arguments you can pass into this post-pagination link but we're not going to cover those you can go ahead and look at the codecs to see all the available arguments so that should pretty much do it for the pagination so let's kind of see where we're at right now we have our blog archive page that works fine we have our pagination that's letting us go from page to page you can of course clean this tile up and break things around as you want in your css sheet we have our single pages we don't have our single pages we have our single blog posts done oh whoops we need to make that a link so uh we need to make this title be a link just like we have the read more link it'd be nice if we could also click on the title to take us into the blog post so let's go ahead and make that little change really quick so we'll come in here to our content archive and we're just going to basically copy here this permalink code right there and we'll introduce that into the title so we'll create an anchor tag and we will say href equals paste that in there and then close the anchor tag afterwards whoops close the anchor tag okay now we should be able to click the post title perfect and that works as well as clicking the read more so either one of those will take us into the actual page or post okay now the next step we're going to do is be building out our page so we have our posts but we don't have the template here for the page so this will be fairly simple as it's pretty much the same as the other ones so we're going to come in here to the one called content article let's copy all the code right here let's create a new template part so we're going to say new file and we will call this one content content if i can spell this right page.php let's just go ahead and do a quick paste right here and now this one is not going to have comments so i don't have comments on pages so i can delete the comments template from this one i'm not going to have tags so i can delete the tags i'm not going to have the date basically i'm not going to have anything inside of the header so i'm just going to delete the entire header all we really have is just the content for this guy okay so now we can come down to our page.php and just like we have in here our single.php we can copy all of this from single.php and paste it into page.php remember page.php is the template file responsible for single pages so let's copy that we'll replace this instead of article this is going to be what we call that page template part page save and that should be it so now we have our individual pages so there's our sap page there's the about page there's the contact page and they're all working exactly as they should so again pages are very similar to articles and the blog single ones are a little bit different because they help us extra information up there as well as comments down below so that pretty much does it for the pages so the last thing we need to do before this entire tutorial is completely finalized is add just a couple of extra things with widgets so for example if i wanted to have this area over here be user customizable so they can drag and drop their own things in here and we need to set up what are known as widgets same thing with the footer maybe i want them to be able to customize the footer so we're going to add several different widget areas that the user is then able to drag and drop content from the wordpress admin widget interface so let's go ahead and do that those are done in the let's see if we can cruise up here to the top here and minimize some of these things so that's going to be done inside of our templates.pa hernander templates our functions.php file where we're going to be adding some more features here and the feature we're going to be looking at is what is known as register sidebars so we're going to allow various sidebars which are basically little minute widget areas little mini widget areas in order to add stuff so let's do that right now i'll just move down here to the bottom in order to add these guys in so we're going to create a new function here and this is just going to be called the follow andrew and we'll call this widget areas and inside of this function we're going to call a command that's called register sidebar whoops register sidebar and inside of here this function takes an array just like we've seen with many of the other functions an array of arguments and whoops just kind of format this a little prettier and the array is a bunch of the defaults on how this sidebar is set up so the first thing we're going to do is there's an option in here called before title so before title and right now i'm just going to leave that blank for now i'll show you what this does in a minute when we actually set them up in our actual theme here there's one called after title and i'll leave that one blank there's one called before widget so this is before widget and i'll leave that blank and then there's another one called after widget and i'll leave that one blank and then there is um so all of these are options that are in the first parameter for the register sidebar so this is parameter one as an array of these options okay comma and then parameter two is another array and this is another set of options here so in the second parameter you have things like the name of the widget so i'm only going to create two widget areas one's going to be in my sidebar one's going to be in my footer whoops so this one here will be called my sidebar area for lack of a better name and the next one will give this guy an id and i'll just call this sidebar dash one that's the css id it will become and then we can optionally give this guy a description so i'll just call this the sidebar a widget area okay so that's pretty much everything we need for the second uh parameter so let's now go ahead and come down here before we get too much code let's make sure we can get this guy to load so we're going to hook this guy into another action just like we've done many times we're going to say add action and it's going to be on the widgets init action and we'll copy and paste our function name so when the widgets are initialized our custom function will be executed causing us to register this new sidebar so we'll save that oops i missed the semicolon there looks like i have another issue here parse air unexpected oh right here whoops these are all supposed to be commas comma comma comma comma because those are array arguments okay there we go so i don't get any errors so now let's jump back to the back end of wordpress and let's go over here to our appearance and we're going to come over here down to widgets and there we go so you can see i had now have a new thing in here called sidebar one and i can drop let's just for example let's drop in tags so there should be a tag cloud here so i'm gonna grab tags i'm gonna drop it in and notice i can give this guy a title so i'll just call this tag cloud and this title here tag cloud is what this before title and after title are used for so for example i could wrap this with a header 2 tag and basically wordpress will put that title inside of a header to tag or whatever you want to do so i'll just leave that and save to show this as an example now right now i'm not seeing that in my sidebar at all because all i've done is register the sidebar i'm not actually outputting the sidebar in my sidebar yet so what we need to do next is we need to then come into our template files and output that in our theme now our sidebar is in our section we called header so i'll come over here to my header.php file and we will come down to the sort of right here's that header tag and everything inside of that header tag is what's displayed in this area so we'll come clear down here at the bottom so one quick example is i could have all of these social icons be inside of a widget so people can then customize them from the back end so we'll probably do that here in a second but after this i'll see what's this div tag for that's the navigation so after this nav tag i'll actually do it inside here so right after this div so here's where we're going to output uh that sidebar so we open some php tags we close some php tags and then we're going to do the command is called dynamic dynamic if i can spell that correctly sidebar and you pass as a parameter to this the id of your sidebar so in my case this would be back in my functions this is the id right here so i'm going to say sidebar dash one so we'll come back in here to my header and we'll pass in that sidebar one and save and sure enough you can see now there's all of these tags in the tag cloud now it's a little bit goofy here because i'm outputting this inside of my header area which is a little bit weird right inside of my navigation tag oh have somehow crashed oh it crashed let's reopen this see if we can get it back open alive for us vs code crash dummy so i could move this maybe outside of my nav but still inside of my header but of course you're going to get some my template wasn't built initially to have this in place so i'm going to have some issues here of course but that's how that works so you can add in your little templates areas as you need so uh let's now instead of having this guy just be a random tag cloud i'm gonna make this guy be this unordered list here so i'll cut this and i'll paste this right here and remember this guy has it's an unordered list and it has these classes on it so what i could do is i could come back here to my functions file and before widget and after widget i can add in that code so i'm going to copy and paste that got too many files open here again i gotta start closing some of these so i can just easily go back and forth here just close all these down really quick this will just take me a second all right so i'm going to copy this unordered list basically all of that and that's going to go in my before widget and then after the widget i'm just going to close the unordered list and then i don't really want anything output for the title before and after the title and we'll save that and refresh here whoops i need to go take my tag cloud out so we'll go back to the back end so having that tag cloud really doesn't make sense so i'm going to delete the tag cloud and just replace it instead with an arbitrary text field i'm not going to have a title but what this allows me to do is then i can come in here and in my text area i can just copy and paste all of the code for that in my whoops in my header file right here so all of the code that belongs basically to all of those little unordered lists so i'm going to copy all that unordered list cut it out rather and i'll paste it inside of the dynamic sidebar instead so i can come in here and just paste all that hit save and then when i come over here and refresh we should still see all those links but now they're editable from the user's front end so they can come in here right to the backend and if they don't have twitter or don't have github so let's just take one of these a little hard to kind of see where they start and begin let's just take this github one and delete to right there and then save and now of course github disappears right so they can edit that from the wordpress admin and really you can put anything inside of widget areas there's all sorts any of these things you can drag inside of a widget area so that's kind of how they work so i've got that one little sidebar one let's just add one more to the footer so we'll come over here and we'll come back to our functions and i'm just going to copy all of this register sidebar code right here and just paste it because we're going to register one more this one's going to be called the footer area and we'll call it footer dash one we'll call this the footer widget area save come back to our back end to make sure that's being registered properly so if we refresh we should see our sidebar too and there it is over there so now we have our second sidebar uh registered and that is going to be um actually i'm not sure why the name parameter isn't working so the name should say instead of saying sidebar dash one sidebar two side by one i should say footer area sidebar area so i must have something incorrect here let me just double check my notes i did have something wrong here so the problem is there's not two separate um there's not two separate parameters here actually there's just one big array i was going off notes where i'm actually merging two arrays together so that's why i got confused when i was looking at my notes so it's just one big array for all the properties here so all i can do is just simply delete that to not create two arrays just have one single array of all of those properties and now when i jump back here and refresh that should update there we go okay so now that's looking correct right it says sidebar area there's my description this one says footer there's my description so let's just drag and drop into the footer uh maybe some meta data i don't know we'll just drop this one in here just to showcase this and it's saved there so now i can come into my footer and just like before in my header where you add the dynamic sidebar i'll copy that i'll open up my footer.php and inside of the footer area i'll paste that dynamic sidebar and this one is called footer dash one and save so now when we refresh over here in our uh theme here did i call that footer dash one i actually don't see it appearing let's just inspect let's double check and make sure we have some code saved there um test let's save refresh oh there we go just must not have that refreshed so there's all the metadata right where you can log in and see all these different things that wordpress adds but now that that's in place i can put whatever i want in there right maybe i want to put a link to [Music] oh i don't know maybe i want my archives down there so we can call this the archives and save and now when i refresh i get a link to all my archives i can click on an archive and of course i'm going to get all the blog archives from march so that uh that's how you do widget areas inside of wordpress to be able to customize those so that pretty much brings us to the final piece of this custom wordpress theme tutorial we just have a couple little things to finish up here and one is the 404 template now a 404 template is the page that shows when uh somebody navigates to a link that's broken or something on your website so what we can do is i'm just going to come in here to my index and i'm just going to highlight all this and come over here to the 404 template and paste and instead of having there's obviously no posts on the 404 so i can just go ahead and delete this loop and i'm going to go ahead and get rid of this navigation and then i'm just going to fill in this with the header one that says page not found and then just save this now you can come over here now in my little preview here i've just added the page id that doesn't exist right i can say 555 and hit return and so i get myself a nice little not found now some things that wordpress developers do is on the not found page they'll also query the database and maybe pull out a bunch of recent posts so the user still has something to look at and click what i'm going to do is i'm going to add the search form so we can come over here and let's go ahead and add the search form code for that is just it's fairly simple here so i'll open up my php tags and i'll go ahead and close these and it's called get the search form actually it's not get the it's just git search sorry get search form like that and you can see it automatically gives me a search and now i can search for a page i can say test and hit search and this will then take me to my search page now you'll notice that my search results page is blank because i haven't yet set that up so let's go ahead and set that up next now that of course is down over here in my file called search so let's come over here and this is going to behave very similarly to an archive page so i'm going to come to my archive page and just copy all of this and come over here to my search page and just paste and let's just save that and you can see that's going ahead and pull up my archive page so anything that has test right is going to show up here so let's do a different type of search here i'll just click back here i think i added a bunch of tags with um i can't remember with cool c-o-o-l so if i search for that nope it's not searching my uh tags i don't even know i can't remember what i'm on post pages we're called let's come over here and look let's go to our um blog and let's see so so if i type in the word fancy okay so that post has fancy in the tile so if i come over here to let's actually go back to the 404 um so we'll just go to a page here and then type in one that doesn't exist five five five five let's search for the word fancy hit return and you can see sure enough it's giving me the result from the fancy post pulling up on this search page so that's really all i need to do there i of course could come into the header and maybe i don't want to get the main header i could change this to say like you know search results or something like that i can modify those however i need i'm just going to leave that of course you can modify this template as you need but that's how you get the search now something that i might want to allow is that my visitors can search from any page so it's common right to have maybe a section inside of here in your header with a search form i'm just going to add one down here in the footer so that the search is available on every single page so i can come over here to my footer there's a couple of ways you can do this you can use the exact same thing like we did on the 404 page and hard code in a search form so i can just copy this paste that down into my footer area and then i'll have that search form however you can also do it with widgets so i'll show you because we already set up a widget area down here i'll go ahead and show you how you can set that up i'm logged into the back end so i'm going to come down here again to my appearance then over to widgets and i already have my footer area widget you can see that has that archives and you can see from the available widgets over here in the left hand column there's one called search and we'll search all of the posts so i can just drag this over here and drop this in my area here and just say search go ahead and click on save and now when i switch back over to my front end and refresh you'll see the search form appears right here so now i can come in here and say test and click search and i can just go ahead and search to my heart's content of course the formatting here isn't all formatted because my footer isn't set up to have that all formatted nice and pretty it'd be nice if i set up maybe three separate areas in my footer like three columns where i could have three separate widget areas but again you can do that all easily with what we've learned here in this series here in this lengthy wordpress we could really go on for hours and hours and hours there's so many things in wordpress and so many functions we could make this a hundred hour tutorial literally to cover everything that is inside of wordpress but this should give you enough to get completely started with building your own wordpress theme and converting an existing html thing theme over into a wordpress theme a few things that we didn't cover i'll just kind of mention that are somewhat popular inside of themes one is a thing called custom post types so you can add those in your custom theme what that allows for you to do is have your own post types so instead of just having posts and pages you could have one called car reviews and you could have one called videos and you can add a new car review so you can basically customize any of those main hierarchical categories inside of there there's another thing called custom fields which allows you to add custom fields to your posts or pages so an example of that i mentioned earlier is i could come into a post and say add new and maybe i wanted to have maybe this is a recipe and i wanted to have recipe ingredients and i want to be able to say this one's five minutes this one's seven minutes or something like that you can add custom fields to be able to have like a duration of ten minutes or or like we used before an article read time i could say the read time is six minutes or something like that and then i can output those custom fields inside of wordpress as well so again you can completely customize your theme and go as far as you want uh there's also many many plugins that do all the stuff we've been doing manually as well so search the plugin repository as well i hope you've learned something i hope this gives you a great starting point to be building your custom wordpress theme ours is pretty much complete here with taking our uh page and turning it all into a cms built on wordpress so all the content is now managed there i hope you've liked it uh don't forget to like and subscribe and share this content with others so they can benefit as well and we will see you in the next one

Channel: freeCodeCamp.org

Views: 343,702

Rating: 4.9349351 out of 5

Keywords:

Id: -h7gOJbIpmo

Length: 152min 35sec (9155 seconds)

Published: Thu Apr 23 2020