How to Build a WordPress Theme from Scratch

hello everyone this is if the car from ithaca.net today in this video tutorial i will show you how to build on a wordpress theme for yourself from scratch um this is a wordpress documentation or codex page that explains how you should be developing a wordpress template there are a lot of things mentioned over here most probably we won't be able to go through all of them but we will try to cover as much as we can now let's put it aside and for development purpose i have a folder over here and there is in a local installation of exam software where we can build a template and can take a look at how exactly it looks like but before we get it started within the theme folder let's create a folder i'm calling it as dokon this would be the name of a domain name that i have i'm building this template for the domain name which eventually would be converted for that specific domain name but for the time being let's use it as an example okay so let's open up our editor i'm using visual studio for coding purpose let's select the folder first okay this is the example installation over here this is the wordpress installation and this is the theme folder since we created a folder called document we would select this folder as we would be working from this folder or inside this folder let's select this folder okay so first what are we going to do we would build a html template and then we will convert it to php so that we can use it with wordpress platform okay let's create an index dot html page okay and this is the html5 doctype head tag this is our title and this is our main style.css file okay let's create another file over here style.css okay so before i get started i should be using a thingy style guideline over here mentioned over here simply copy this one from here and paste it over here as you can see over here it actually this theme is actually 2013 themes style dot css files template but we will change it to token and theme uri we can remove it for the time being and i'm using my name as the author and author uri you can use your own website address wordpress theme for token.eus this is the domain name that i will be using so license supposed to be copyright protected uh not a big deal but you can use it okay it takes time and i didn't really need that i really don't need that okay now tags i don't need that either bit because it'll be used for my template only okay so first thing we want to do is it's called master reset in one of my video i discussed about the css reset which you can take a look at from my channel and i'm just going to use it for html 5 css reset okay from html5 doctor this is the standard css receipt code that i used for most of my made okay so i'm just going to copy this simple part i think that should be good enough okay now let's open this html file with our browser that's firefox okay let's see if it is working okay let's put the body tag let's type something and see if it's working okay one thing i think i got it wrong over here okay yes it's supposed to be href okay yeah it's working okay so let's start designing the template first this would be our main wrapper that basically be holding the whole block of the template design wrapper let's okay so for style split right okay let's minimize that let's make it a little smaller so that we can work easily okay okay so from here we start our okay wrapper i'm going to be using with 100 percent max with uh for me i would be using 1200 pixel i mean that's just my preference but if you want you can definitely change it the way you want to depending on your requirements overflow hidden okay so now we need to have a header and footer section that's header let's assign an id let's call and let's put in a footer section there'll be a lot of content in between but we will get into that shortly okay so let's call the id to be folder and the header id to be header okay for the time being let's make a little bigger okay better and um let's keep it hundred percent okay let's keep it 100 okay overflow hidden we'll take a look at what's going on but for the time being let's keep it with 100 come on okay so this is our footer section this is our header okay well let's see if it shows over here yep okay let's put some kind of border so that you can see what's going on solid one picks red okay let's do the same over here okay as you can see over here it's working just fine but something really border solid okay that's supposed to be px okay so you can see the header and footer section within the red border but let's put another border line for the wrapper so that we can see whether or not it's within the wrapper let's put it blue we will change it afterwards okay okay so the whole thing is within the footer section now we have our header and footer section you can put it a nav section over here for primary menu primary menu okay you know what we've been modifying a lot of thing as we go primary okay so primary navigation okay menu menu okay you know what let's keep it only menu i'm not quite sure why there is an underline over here okay um yeah so menu primary i think we should use primary you know what actually we can make it nav bar which would be a lot easier okay same goes over here 100 percent butter solid one pics use any color actually red okay over flow hidden okay let's see refers the page okay we got a little red section going on over here so let's put nav over here see if it shows up okay so here we go now we need to have our main section this is where all the content is going to be our content will be here okay so let's call it content okay content let's call it content over here okay let's put something in there and see if it shows up okay so we have our header section nav section this is our content section and this is our folder section let's call it content okay there you go now um as you can see we are not using any font yet but we will use fonts so it looks better okay we can use google web font google web font okay so let's go let's go there and we would be using open sense okay here we go actually okay customize six seven i think that'll be good enough yeah okay let's embed this code [Music] okay make it look good cool looks better i think so okay um we would have to declare that every single font on our content or anything within our site has to be in open sense font okay so let's do it on within the bodies within the body tag okay so let's refresh okay so we are using open sense already okay now within the main content we would have one section for for sidebar and another section for the content so we would have a content section large content section on the left hand side and on the right hand side we would have our sidebar okay let's put the sidebar first aside id okay there'll be a sidebar you can use it over here sidebar i should mention an id we can actually call it not content we can put it like main content or let's keep it content actually okay and this section would be let's call this entry okay and this section has sidebar okay content overflow hidden okay entry since our total width of our content wrapper is 1200 and our sidebar would be like 300 pixel width 300 pixel so the entry section can easily be 900 with 900 pixel okay overflow hidden okay here's a spelling mistake over here going on okay so 900 and 300 that's 1200 but we have to remember that cyber cannot have a border for the time being because that would be more than 1200 combined together because if you intersection has a border of two pixel or one pixel that would be nine hundred and one pixel or two pixel 902 pixel okay let me give an example border solid one pix uh we can do blue okay and from here we can do border solid one pegs blue as well let's refresh the page okay now as you can see this content section over here let's put a text entry entry okay as you can see they're not side by side because we have to use float float left okay but as you can see the sidebar is not going on to the right let's use float right okay but still i don't think that will as you can see there were a little difference in over here because the total width is 1200 pixels the main wrappers one pixel is taken over and there is also one pixel each for entry inside but actually two pixel right hand side there is one pixel and left hand side there is one pixel same goes over here same goes over here so let's take out the wrapper border first so the wrapper let's put border zero because as you can see this whole wrapper is the all the contents are within the wrapper section anyway okay before we do that let's do another thing let's put the whole content at the center of the website okay center of the page auto what it does mean the content should be in the middle and if i do take out the border or let's put zero okay now the border is gone for the wrapper but still there were four pixels over here in contact so that's why you cannot see this sidebar section to be going on the right if i take out the border color for the entry border 0 and border for sidebar you will see there side by side entry and afterwards there should be cyber section okay as you can see they are side by side one way to see it is that if you put background color background color you can see the difference a little bit okay as you can see there this this entry section got different border color background color and sidebar is white that means they are side by side but the sidebar does not have any background just to show you that they are in the same line for the time being okay all right now before we do anything else since we have the master reset section over here let's put the second section just to organize the content a little bit or the css code a little bit okay template these are the basic content that we are using and we will be modifying it later later on okay now as you can see the whole page is pretty much the layout is pretty much here now what we all need to do is to convert this template to php so that wordpress can understand this template okay now to do that first thing all we need to do is create a okay from here as you can see on the template theme development page we need a php file called header i cannot see it over here okay here we go this is the header sidebar folder these are some of the php files that we need and i will show you how using php code we can simply call those templates easily okay now from here from this section content we will copy it and put it in our new file called header dot php okay this is it and then we're gonna create another file called footer okay and from here we will copy this section this main content section where it ends this section okay okay now we would have to create a index.php page that would be holding that both of them together okay okay let's do the sidebar section as well sidebar.php let's create another file called sidebar.php and put this code to hold the cybersection and from here we can copy this section and put it on index.file index.php page okay now at this point i think we can delete the index.html file because we wouldn't need that i think this theme would be recognized within the local wordpress installation that we have let's take a look at it localhost wp dash admin wp-admin okay let's see okay our exam is not running so let's run this exam first exam control start start okay now it should be working hmm it's taking a little time okay here we go so this is my default username and password let's log into our system do not save okay and let's disable certain things so that it becomes a lot more easier for you uh let's deactivate woocommerce i already have it installed okay now go to the theme section appearance theme section and as you can see our token template shows up this is the default um default theme that we have from 2017 this is 2017. this is my template for another website for my personal website and this is for the new one that we are building okay let's activate this template we can put the screenshot later on but for the time being let it be like this okay now let's delete the index.html file and let's take a look at our website first how does it look like nothing it just shows entry because the index.php has entry in it now let's go back to the theme development page and you can see over here that we have functions like get cyber get footer and we should have something called like get header as well over here like this okay [Music] now before index okay you can do it like this php and get a header okay copy this at the bottom we can put get footer okay and get header and get footer looks good now let's go back to the template page refresh now you can see the header and the footer section over here the nav section as well now we can also put get sidebar for sidebar.php to show up sidebar okay okay here we go we have the sidebar section as well now what you can see over here the basic structure is over here and it's visible but for some reason not for some reason we could not locate the css file that's why you cannot see the design overall design but that is very much possible let me show you okay google.com stylesheet uri okay this is the default function this is exactly how you can use them okay on our header.php page so we do it like this okay php and then just put in a forward slash let's take a look at the source code what's going on over here okay is it working yes so the templates theme should be working right now as well yep here we go okay these are the very basic thing but i think there are a lot more php functions that will go in here and we will show you how to do that i will show but uh before that there are a lot more things that needs to be done let's go to the theme development page and see what it says okay we need another okay we can delete this index.index.php html file we don't need them anymore okay we have to create another file called functions.php this is the page where a lot of php code gonna go for custom function and everything will be over here which i will show at some point but for the timing let's stick to the main idea of building the temp template first okay now we also need single dot php that is the page basically will display the post so let's create another file called single dot php okay same tag will go over here just like header footer okay single okay now over here i will show with the php loop wordpress loop how to show a post on google wordpress loop or we can even take a look at a sample actually sample supposed to be on single dot php page okay let's take a look at like this uh single dot php okay here we go click on it okay we cannot see it over here okay let's get the wordpress template loop i'm sorry about that noise that's coming from outside okay here is the basic template of the wordpress post page single post page okay we will copy the whole thing and paste it over here i will go one by one but i will show for the time being that how single post can be visible okay now we have a test post over here so if you just simply open it up you should be able to see the post content over here so that means this loop is working okay there are a lot of things that we don't need i will i will just simply delete them for the okay so let's delete this part which we don't need actually okay we're gonna knit this part let's delete this text as well we really don't need them as well this is the loop okay let's actually put it aside a bit on single page we really don't need a link to the title so what i'm going to do as you can see over here there is a link on the title we don't need because it's on the single page and a single page you don't need that one we will need that one on the archive page so let's get rid of this link from here okay and delete this h2 section okay there is no more link but there was something wrong our template broke up for some reason okay entry okay we don't need that either okay we can actually make it short like this does it work yeah perfect okay we will style them a little later okay one thing that i just realized actually rather than doing it like this entry since the entry actually would be the content the blog post content that's welcome to the most welcome to the wordpress this section should be the con entry section and this should be actually post id is supposed to be post section entry right this section we will be calling it a post post [Music] and let's call it the end of post okay refresh this looks okay all right so this looks okay now on index page though it'll be a bit different because on index page this is supposed to be multiple post so it's supposed to be posts with a plural word on it section posts or we can even call it archive section archive because there will be multiple posts in here on index page let's go to our index page okay there's just only one post okay um okay this is for single post number three supposed to be post and number four we are making it for archive okay so archive it's pretty much the same code just like this one this is the css code over here as you can see okay just wanted to make sure this loop is working now for some reason it's the loop is not working okay wordpress loop the basic example of wordpress loop is supposed to be at the very beginning okay [Music] this is the one actually we've had post style well we can actually copy this one from while half post the post okay not quite sure why exactly multiple posts are not being let me take a look at it over here real quick reading this is the reason we have assigned a different page over here because i was working on a different template so we had a separate page to show the front page and separate page for the blog section so let's put it over here the latest post supposed to be the first page now refresh it as you can see as multiple posts are showing up right now okay so this is the reason why it did not work okay now what do we do within the post section we need to create a class the reason we are doing it so that we can style them each and every single post over here okay let's show it let me show you i want to do class call post i can put an id over here which is not important but still you can use it php and get the id let me see if it does work okay let me take a look at the source code a little bit okay so the id maybe the id if i'm not wrong yeah that's supposed to be the id so these are the post id number there's no significance to that one but you can use it if you want you can use it like this to make it look better okay as you can see at the end of the tag you would be able to see which post section it is okay post number with number on it there's no significance to that one but you can definitely use it like this also remember that there isn't a php class function which i can show you postcards let me open up another window wordpress post class okay this is the function that you can use this is exactly what i was talking about to be honest with you so let's do it like this the whole thing over here okay this is the entry section and i'm getting a little bit messy over here but you get the idea okay i think we don't need that just remove it for the sake of simplicity let's separate them and do it like this okay i think i got it wrong that's supposed to be over here so that we can show all the posts and if there are no post let's open up the page okay let's take a look at the source code in here yeah it's working just fine as you can see over here because of using this function post class which is a default or one of the wordpress function native wordpress function uh to display the kind of post classes that are that are being used there were different kind of post format over here that can be changed and style can be changed on that way as well now we have the post class over here so we will use this post class to style this section okay now let's go to the archive section over here and it's telling them a little bit archive dot post post emerging okay and it's not necessary but just to okay just to separate the content now one thing that i really wanted to test real quick is that put all the post in draft mode so that it does not show okay it does not show any post as a published post because we are using a logic over here showing that if there is any post then only then it shows okay since we do not have that let's say sorry okay let's separate them let's take a look at the wordpress loop in here what i'm getting it wrong okay you can use like else just in case there are if there are no post i'm assuming you are building the template to show the post but if you do not have post it will simply show that sorry okay but we can style them a little bit nicer way h2 section div class post and okay this would be the message displayed once you do not if you do not have any publish post then you will see this message okay so let's make it a little bit better over here post entry font size 15 pixel okay fine line height i'm using 1.5 1.5 okay so it doesn't look bad okay cool now over here within the post section we can say h2 nothing found just to show this message there is nothing in here okay so now um we need to make it okay this is pretty much what we let's publish them let's publish them and see how does it look like publish then publish this post as well okay publish okay we have both of them over here okay as you can see over here it shows post metadata we can just simply do it meta data okay like this and let's do it over here like this um 10 pixel and this one's supposed to be zero let's just separate them a little bit okay so that they have a little bit more space to breathe okay and also for the p tag within the entry section over here the p tag over here within this content section this content function will generate a lot of p tag as you can see there are a lot of p section over here tag over here if you inspect this element you can see this p tag so we have to style them as well so that it doesn't look bad okay we can do it like this p tag margin okay let's reverse this page okay now it looks better so the font size i think it'll be wiser to use 16 because 15 seems to be a little bit smaller okay i think now it looks much better okay now let's start with our header section and then we will get to the sidebar section okay so this is our index.php for the time being let it be like this and let's go back to the header section let's fix our header section first okay for the title okay there are a number of things that we want to add over here but i just wanted to see the default wordpress site title function let's see [Music] that'll be wp title um theme development template let me see if it is something over here the loop we looked at okay let's take a look at header content footer okay get sidebar okay we have to put in a search form as well okay so let's create a php file called search form.php and we can simply put this function over here and i'm sorry it's supposed to be on header section right next to if you wanted to put it over here okay let's create a logo section first okay div class logo logo what we're going to do using the h1 we will just simply call the site title over here and there would be div class div search and box okay that's our good search form let's refresh this page okay nothing shows up on a h1 tag over here it's supposed to be logo and within the header section header dot dot logo float float left left with 300 pixel maximum we don't want to use more than that we really wouldn't need that big of a header section over here okay and to show the site title we can use it like get blog info actually you can use this get blog info function blog info function with a lot of parameters over here that you can use so let's call this php get blog info i guess so right php blog info uh login for or i get blog info it's supposed to be name over here okay so the name info okay let's put like this the perimeter over here and let me refresh this page okay there was an error let me eco then get blog info no i'm getting it something very very wrong okay let me go back to that supposed to be blog info okay now refresh this page yeah this is the site title that we're looking at within the h1 tag so we can okay over here we can decide some common section common elements let's say h1 tag no let's put like this two three four five six okay that's h1 that's h2 h3 h4 h5 h6 i don't think we would need all this but just to be on safe side form size let's put it like 48 pixel for the sake of okay uh it sounds like too big 40 pixel maybe okay let's put it 40 pixel whatever we can we can put whatever you want and it's not a big deal you can customize it any way you want let's keep it like that okay now so font h2 that's side supposed to be something around 35 36 i'm i'm just doing it you know based on whatever i'm feeling like buddy you can definitely change it the way you want to there were a lot of standards a lot of people would be talking about that hey uh this is the way it's supposed to be h1 h23 tag supposed to be this size you can follow that one no problem i'm just doing it for the sake of showing it to you that what's supposed to be on how exactly it can be done okay let's put it in 28. we will we will discuss them later but for the time being let's see refresh this page okay the size seems to be a little big let's put it 30 pixel okay it's a reasonable okay so over here header dot logo h1 we can put it margin bottom 10 pixel maybe just to give you some spacing over here okay meanwhile we can think of clearing up our section a little bit okay now as you can see over here this header section need to be styled a little bit now i'm using these color palettes from here i think these colors are pretty goody there are a lot of color palettes that you can choose but i think this one is something that i want to stick with okay now if you inspect this element you can get the color code in here where is it um where did it go where did it go okay here we go okay background color okay so for header section i can use this background okay to be the background of my header i'm sorry this is the one okay now i can get rid of the border we really don't need the border at this point border and also the h1 color can be white just to make it look better like i said i mean you can use whatever color you think is good for your site no problem okay we need a little bit of space in here let's put padding 20 pixel so that it would look nicer okay it looks better okay now the nav section okay i want to move the nav section over here have its own dedicated we will fix this number thing afterwards okay for the time being let's just stick to navigation something gonna be there okay uh let's get rid of the background uh border first we really don't need a boulder anymore at this point we can have a simple background okay okay looks good but we have to get rid of this background color over here because that's bothering quite a bit over here okay content section also remember since the whole background is background of our side is white it looks kind of a little awkward so why not we put in a background over here background color f2 f2 x2 i'm just picking up some random color that popping up in my mind and there is no specific reason why i'm doing f2f2 okay now we need some kind of color to separate the content section from the site background so what we can do the content section make it white okay not good looks very good let's do the background color for the footer white as well okay refresh okay cool now border we do not need the red border over here we can have top sorry it's supposed to be top let's see okay it's kind of harsh color let's make it a little softer um six six nah that's even worse to be honest with you um 888 maybe um okay let's go ddd how does it look like looks better i'm happy okay with 100 border now we can use padding a little bit at the footer section padding 10 pixel maybe 20 afterwards we can change it okay 10 for the timing it looks okay now if you want to change it over here on the footer section you can just simply type some typical word and maybe we can add another menu section over here but let's do it for the time being copyright and copy 2019 all rights reserved okay just to have the text in there okay nothing fancy now as you can see over here this content section is pretty wide and it's coming all the way edge of this section so we can have a little bit space in here a little bit of space in here in between the sidebar okay now let's go back to our css let's inspect element this is the main content archive section we're talking about as you can see the cross is basically showing it to you that it all the way ends over here now we can have 20 pixels over here space and 20 pixel over here that will look nicer okay so the archive section actually can have a little bit of space instead of 900 pixel padding 20 pixel on each side it's going to get a lot bigger as you can see the sidebar went down because 900 is plus additional 20 pixel on the right hand side over here and 20 pixels on the right hand side over here that's 40. so basically it became 940 pixel width what we got to do we can make it 25 pixel on each side so that's 50 on the right uh 25 on the right 25 on the left that's 50 and out of 50 if we do deduct that 50 that's going to be 850 pixels let me see if it works fantastic it's working okay it looks better definitely looks better okay for the menu section okay we will have to would have to use a php function so that we can dynamically add wordpress menu team support excuse me we can use this function to display the menu let's take a look at what happens over here once we do put this function okay this is supposed to be our header meaning looks good okay and for header menu we need to have a let me see let's go over here appearance and we do not see any menu theme support okay we need same feature okay from the add theme support we need to have sidebar menus menus okay we can use this function on our functions.php page to support okay let's go to the functions.php page and let's add this code see what happens header menu header menu and on the headers page we have the team location header menu okay we can write it over here support header menu okay let's see as you can see the menu section showed up okay now we have our primary menu and as you can see from the section over here display location is header menu so basically we want to display a menu on the header section if you want we will show you later on how we can add another menu second menu over here at the bottom with link for certain pages but for the timing let's add the primary menu first okay so automatically added the top-level pages uh we don't need that save let's see what happens over here we got to link okay so we're on the game okay now let's take a look at the default css that got generated you can put a primary menu nav bar that's fine either way i remember changing it to menu primary let's see if it does conflict with that or not let's put it menus okay and this one gonna be our menu primary okay so this id and this edit remains the same let's go back to the site and take a look at okay everything looks okay now take a look at the code over here uh this is the section basically got generated okay and this is a section that got generated automatically in that case we would have let me see primary menu let's see refresh okay remains as it is manage location that's supposed to be our primary menu header menu as you can see over here this header menu got registered as we on our functions.php okay you really want to check out real quick something um register nav menu how exactly location and description okay so what we can do on the description section we can do it holds primary menu and we can add custom menus we would add multiple menus so let's do it over here right now okay one is for header one is for footer the footer section holds secondary menu okay let's call this function from here register menus header and footer menu okay this is our theme support okay let me go back to the admin panel and as you can see we just added another menu over here instead of doing that we can do it like simply footer menu okay a little bit header menu and the footer menu okay cool okay now you can create another menu over here create a new menu you can just say footer folder menu okay you can just add some privacy page over here okay then you can add contact page over here and we can add them to our footer menu this two section okay now as we are done saving over here let's go back to our header section and see we use this function and we would be using the same function for footer at the bottom okay over here to show our footer menu okay so at the bottom over here there should be another menu as you can see it shows up just fine no problem we will be styling them soon enough okay so we have two menu over here that are being used and you can switch in between from the drop down menu over here okay so if you want to edit the header menu it still shows primary menu why is it like that header okay let's go back to the functions.php what it does says primary meaning okay we named it as such that's why it shows primary menu menu top let's make it a little easier for us to understand and menu bottom naming doesn't have anything specific to that one but we just need to specify them okay now what we need to do is start styling them okay menu primary should have a class called this one okay now let's copy this and this is the container menu menu top container this is the container that's basically holding the whole manual all the way top over here as you can see right so let's style them first background color correct let's just check that if it works or not that's working okay now let's copy this with ul margin z row padding zero butter zero we don't need any border and copy them ulli display inline block okay it should be floating left so that we see the menu float left side by side okay refresh side by side cool now put the anchor element or the link display 10 pixel by 15 pixel let's see how does it look like looks good looks good but we have to modify a little bit okay let's see float left and this one's supposed to be over here let's display them as an inline block and let's refresh this page okay on list style type none so that we don't see that one okay now as you can see this despite the fact that we have red color background we didn't see the red color background that's why we have to use over flow hidden so the container okay now we were pretty happy with the color that we had over here that's ef so we really don't need to use that background color unless you really want to change it to something else or you can even take a look at the color palette from here if you want to use this color as a background you can definitely do that let's inspect this element and see the background color this is the background color i'm just taking the color code from online just to you know follow a certain pattern but you can definitely do the way you want to you can change the color you know any way you want it's not a big deal but it's necessary just to show you dea okay cool uh it's pretty eye catchy but still we can use that color white and we do not want any text decoration that means this text underlines link underline so we don't need that one so we can remove it using text decoration none okay i'm sorry something is wrong i couldn't type it decoration notation ration r-a-t-i-o-n decoration none okay cool now i think we should make it 15 all together it's just like tula the height is not all that great okay now it looks a little better okay font weight i wanted to make it a little thicker font weight to be 600 as you remember that we added three four six seven hundred so we can definitely use 600 to make it look a little thicker okay nice now we can use a hover effect if you want to i'm just going to show you over here hover background color background color let's use it background color fff white and text color will turn into this one the default color let's see how does it look like okay looks good can't complain okay we'll get back to the footer section a little later let's fix the sidebar section right now for the time being okay that's going to be a lot of work on sidebar section let's style our sidebar okay we will number them as we as you have seen over here that i used one over here to style this and two over here we will number them afterwards once we are done that's not a problem okay now in order to use the sidebar widgets we need to have a function so that our team supports just like this one our team should be able to support widgets so that we can drag and drop widgets and be able to display them on our sidebar okay let me show you uh register menu let's go back content with background supposed to be add theme support widgets over here hmm add theme support post formats wordpress sidebar widget support okay there you go okay there are so many things that we can do we will do it in the shortest way it's possible okay um i don't think i'm still getting the function thing wordpress sidebar widget support to theme okay okay we think i think i think we can we can use only one sidebar and use this function between full expanded code let's copy this one register sidebar let's do it over here see what happens okay primary sidebar will refresh this page sorry over here refresh as you can see the widget section showed up and we should be able to add widgets on our sidebar from now on however this is the primary sidebar or the only side but if you want to add a multiple sidebar as you can see from this section over here there are two different function register side bars that's the plural one if you want to use multiple and this is sidebar single if you want to use only one okay and they have examples over here if i'm not mistaken okay to use side varsity muscle register theme function theme in functions.php and register sidebar as you can see we have a register sidebar function we actually don't need this function okay we really really don't need this function as you can see over here it says repeat register sidebar this function for additional sidebars we don't need that we would have only one so let's do it like this okay sidebar support sidebar widgets okay single line code we don't need that you know we okay i think we would need this function because there is a hook over here widgets in it so that means we would have to call this function to register this sidebar we can straight use this like this but i wouldn't suggest that since there isn't a hook there's always the best way to go about it okay function register custom widgets okay so the bracket starts and here we go the bracket ends i'm sorry okay now support that would be for sidebar widgets and if you do call this function and hook it up with the function within the add action we can do it like this okay so it should be registered register custom widgets okay we will call it let the idp whatever it is over here and we can do it primary sidebar like this you can change the description okay i'm going to keep it the way it is i really don't need to worry too much about it okay save that go back to admin panel as then you can see a short description of the sidebar you can change it over here only primary sidebar widgets just a simple description so that it shows up over here for you better understanding okay all right now uh there's a lot of thing or the available widgets over here these are can be added over here but we would have to have some kind of style to make it look good okay let's say case in point we can add this widget all right all pages just to show you an example page title sort by page title doesn't matter save them and as you can see on the section okay there was a function that's needed to be over here to call that function to call this a primary widget that's just been displayed that has to be this one actually this is the way it's supposed to be on the sidebar let's go back to our sidebar and we can call this function over here like this dynamic cyber okay i think the name was primary sidebar if i'm not wrong primary so we can do it over here like that p all right primary okay refresh as you can see this we just just showed up whatever we added over here it showed up over there so now let's try with another one um let's show the calendar let's see just to show you an example okay so it's working so our sidebar is dynamic right now we can use as many widgets as we want but we gotta be a little bit careful because we would have to style all these widgets even though we would be using classes but there are certain cases where the classes won't work that would require you to add a whole lot of css but i'm going to show you the simple one okay let's inspect this element as you can see over here there is a class called widget that we are using over here and widget title and there is a list section okay so let's style them like this let's go back to our sidebar section okay let's put it look like this okay now the sidebar has widget class so copy this i'm not going to use all of them but simply this one okay let's see border solid pixel red let's see if the red shows up then we would know the class is working there you go okay our class is working now we need this we need to put some space in between so what we're going to do we're going to put space at the bottom of each widget so it's supposed to be like this 0 0 25 pixel 0. so what we're seeing on the top 0 right inside 0 pixel at the bottom is 25 and on the left there were zero pixels of margin so if you refresh this there is a 25 pixel spacing between these two widgets now one thing that we need to remember that we left 25 pixel on the left hand side of this post section over here and 25 pixel over here so if we don't put 25 pixels over here it wouldn't look nice i think that's the case so what we have to do we have to reduce additional 25 pixels from here so that we can make space for the sidebar widgets on the right hand side let me show you let's put it aside first over here 850 so deduct another 25 so 825 since 25 pixel is smaller it became this whole section this whole section became 25 pixels smaller so i can take the space over here on the left so our sidebar section can become actually 325 325 pixel and refresh this page since it became bigger that's not what we wanted we wanted these widgets to be with 300 pixel so that you would have additional 25 on the right hand side okay or we can even use it in a different way okay we do not have to make the widgets 300 at all rather we can delete them and padding 25 pixels zero zero that should do the work um didn't work okay didn't work because this one we still have the margin over here and we need to get rid of the border border is taking two pixels over here so zero refresh coming back coming back no okay kind of problematic um 25 pixel over here and border zero okay what am i doing it wrong what is wrong let me see our sideburst section should be 350 and 25 okay here is the mistake we did the width to be 325 and on top we are adding another 25 pixel padding so 325 and 25 that's 350 but we allocated this space 225 only so what we do padding make it zero margin 0 25 pixel 0 0. let's see if it works still didn't work something is seriously wrong with my code okay again the same mistake with supposed to be 300 gosh okay here we go now if you want to skip some space on the top you can do that too so we can just simply put margin on top 25 pixel it will look nicer okay we have same amount of space on top and bottom and over here margin in between the widgets we need 25 pixels zero so that there is any space in between these two block widget okay this is exactly what i wanted okay now as you can see the calendar is h3 title that every single we just has h3 title h3 seems to be pretty big for a widget because our post title has h2 so this is supposed to be h5 i think or you can you can actually use whatever you want but i'm just saying for the sake of simplicity let's make it h5 okay h5 and make it h5 from the functions.php so that we have all the widgets titled to be h5 refresh within the h5 tag okay there we go now as you can see the title need a little bit of breathing space in between okay so let's go back to our css [Applause] margin bottom 10 pixel and we need to add some padding because if we do not have padding there were a certain letter like g over here they're gonna get a little bit messed up at the end okay so let's put padding bottom 10 pixels so that our total 20 pixel and that looks nicer but if you really really want you can lower that a little bit like maybe 5 pixel okay yeah i mean that works why not now we would have to style this list over here as you can see this list menus we need to fix them as well now depending on the type of elements that you are using right now we have the page item but if we have custom link it would look different or the class would change so what are we going to do the generic styling it will be like this let me show you sidebar widget ul margin zero padding zero border zero [Applause] [Applause] display block i'm gonna show it as a block okay let's see looks like block fine now for the link item display block as well padding 10 pixel 0 on the left and right hand side refresh it's too much so let's do five looks all right okay but we do not want any text decoration our underline anyway so we can put just like before text decoration none and it's supposed to be in a semi-colon and for hover we can put the underline back it's like hover text decoration decoration underline okay refresh now there are underlines okay looks okay now for this calendar you have to use this table styling okay this is a bit complicated i'm not going to get into that you would find a lot of css or you can write your own css i'm just showing you how to add this widget section on the sidebar so that you can do it by yourself and if you want like the recent post you can add another one over here like the recent post even though it shows over here five but most probably you won't see it because we only have two published posts and also there is a one called display post date which is something most probably you would be using or should be using because people need to know when you were writing this post as you can see over here the item shows up but the dates are kind of like big now we have to style them so that it doesn't look that bad okay span class post date okay so what we need to do sidebar [Applause] ul ally span home we can use span or even the post title post date class so that to be a specific font size is supposed to be 13 pixel maybe let's see how does it look like looks okay and the color is supposed to be maybe 888 a little grayish because we really don't want text to be that visible okay now in between as you can see for each element even though we do have a little bit of space it seems like they're very close so we need to put a little bit of space in between so we can put it like this margin 0 0 10 pixel 0. let's see how does it look like i think it looks okay you can install them more if you want you definitely can style them actually but um excuse me i will keep it the way it is right now i wouldn't go a little bit too much in details on that one excuse me um as you can see over here on the post title we need a little bit of space because the meta i'm sorry i'm getting okay um the post title over here seems to be overlapping with the date and there's not much space in here so what we can do we can give them a little bit of space to breathe and let's take a look at the element first we have within the post class and then we have h2 so if we go to archive section post and then we can put it like this post h2 padding 0 0 10 pixel and 0 and margin could be at the bottom like 10 pixel zero okay now they have a little bit more breathing space in here so if you have a very long title that it still should be okay and excuse me and if your title becomes like too big and you see this two different line are coming very close just like the content you can add one line over here like line height like 1.345 for whatever you think it's good okay i'm putting 1.5 just to be on safe side if you want you can reduce the matter you can make it bigger or make it a smaller whatever you feel like but this is basically basically the idea okay for the time being i'm going to put 1.1 actually i really don't need one point that big of an space and also over here on the meta tag section or metadata section we are using cold span small okay that's not nice enough what we can do on the index.php we can go back in here and instead of small we can use a section called div class post meta post meta okay post meta just um like this instead of metadata you can use post meta like this okay and instead of p we can use d or div i'm sorry that's supposed to be dave not p div okay so now let's go back in here and make the necessary changes over here on the archive section instead of metadata it's a div so uh it's a class and it's called post meta right yeah so we can do it like this post meta okay now as you can see over here even though we have post meta block for some reason [Music] overflowing hayden so i should not be overflowing at all okay uh i'm still not getting the point what's going on here ctrl d okay i think i messed it up a little bit over here like this post meta and we did not fix this the small should go away and we should be using like that okay so there is a space over here and you can style them a little different color or maybe you can style them style the content a little different color but for sure i want the meta tag or metadata to be a little smaller i do not want them to be the same size of entry or p that's 1 16 pixel what i can do i can add a font size to be 14 or 13 something like that so they're a little bit smaller and a bit different from the typical post as you can see over here they're a bit different right now okay now also we are still dealing with the very basic of our template design which we still have to design a lot more okay so this is the section now this is if we don't have a post okay so this is our archive page for the timing or the index page home page if you refresh it it should be fine and working fine okay now since it's in our archive page we need a link over here okay for every single because this is still not the single page single page supposed to be only one post and that should not have other posts this is our single page which we need to fix but for the time being since we have the archive page let's fix it first okay we need a link over here so it can be like this a href a php function get the permalink okay that should be okay let's check it out does it work most probably now so the permalink as far as i can remember either get the permalink or the get the permalink is basically for the eco if i'm not wrong but for general link it's supposed to be permalink as you can see it's working just fine now let's go back to our single dot php page we have our post section this is our archive page this is our post section okay now same instead of post id we should use something called like single okay and this is supposed to be the same thing like over here and i'm going to remove the post section because i want to take advantage of the same section over here now one thing please bear in mind the older post class since this post section i'm not talking about the archive this let me copy and paste it so that you understand what i'm talking about apart from the single id the rest of the section remains pretty much whatever it is so what you can do rather than typing it in twice you can just have a section with only class like this let me show you just like not like this but rather like the clasp only like this okay that would work for both the archive and the single post page but bear in mind i just want to make it i would at some point i would make it more customized you can use this section or these classes for both the archive and the single post page that means over here okay i think i messed up the code that's why it's showing it in different ways so either way you can use this section or you can just simply remove this section altogether the only reason why i'm doing that one once i'm done with this tutorial i will customize the whole section based on my requirement because this is going to be not only the template for a blog section but also going to be template for e-commerce section so i would customize it a lot more okay but for the sake of simplicity i would just remove it and use it the way it is over here so that i do not have a problem later on to deal with let's refresh this page i'm not quite sure what it does happened oh it's our page instead of post we came back to our page okay refresh it okay now let's make some changes in here this is supposed to be our single single post section and then we have div class post so h2 remains as it is we're not going to change it you can make it h1 a lot of people think it should be better for seo purpose but that that section remains entirely up to you i really want or i really don't want to bother you with that idea right now because we are working with the development section so let's stick to that idea do class post meta i guess yeah post meta and it ends with div okay so dave class post meta div okay now go to this page single post page this is how it looks like on this page we do not have any link to the title there wasn't supposed to be any this is the full post we are looking at and this is the full post that we are looking at and there should be a comment section at the bottom but before we get into that one let's fix this footer menu at the bottom okay let's fix this footer menu okay so we have two section going on we have two sections going on over here one is a copyright content or text and then the menu over here okay so let's separate them first let's go to footer section let's do div class copyright okay and this is our menu that's it now first thing we need to do refresh and take a look at the div copyright okay we typed it wrong actually copy right so on the footer section we would have a class footer i'm sorry that's supposed to be copyright actually float left and then you can define width 500 pixel maybe just to be on safe side so that if your name is kind of a little big you can definitely adjust it to it okay you know what we need to go to the small post so that we can fix it better okay so as you can see we have the menu over here but we need to put it side by side just like this one but in a little bit shorter form okay now let's take a look at the div wrapper that we have over here that's menu bottom container it's kind of big name i'm not liking it actually as you can see over here menu top container that's kind of big like that so over here it's supposed to be made in the bottom container okay you know what let's copy the whole thing and we would adjust okay i'm i wasn't supposed to be there let's adjust over here okay don't get scared i will make it i'll make the change over here first okay footer footer footer footer and this one is going to be footer as well and as far as the classes are concerned this is going to be not top what it is bottom container right okay so instead of top we can just put bottom copy this content over here okay bottom now we need to remember that the background for the top one was blue but we do not want that over here so we will keep it normal we don't need any background and for we actually do not need this one either i would say now like this and as far as the font size is concerned let's make it padding looks a little too much in here for bottom section let's make it 10 and font size make it 14 13 pixel let's see how does it look like i don't even see that it's kind of weird what happened okay copyright is float letters let's make it 400 pixel overflow hidden float right let's see footer what am i getting it wrong float right manual hidden okay let's put a width over here 400 maybe 300 pixels let's see if it shows up first okay so the messed up thing is that we gotta take out this color and color from here because of the white color just like before over here it became invisible okay here we go now what do we need to do we do not need font weight we can use 400 or normal i would say it's basically saying as it's supposed to be normal and also also you can have underline or background actually okay let's see looks alright okay what we can do though make it a little bigger actually it looks a little too small let's make it 14 pixel and also once we refresh we want to make this text 14 pixel as well so that it doesn't look odd font size you know what you can actually remove this and remove that from here as well and we can assign the font size to our parent class a parent i div if i'm not mistaken let's see so that we don't need to put all the code okay i think that's that's what we were talking about here okay now another important thing that we need to remember we had a 25 pixel space over here in between the content and the border of this design over here we have a little less so we have to fix that first thing we do is whatever it is on the top most probably 20 pixel 20 pixel and on the 25 for both side let's see how does it look like yeah now it looks the same okay also what we need to understand there was too much space over here copyright what happened is okay even the width is 100 we have to mention max width 1200 because we really don't want to overlap the actual size so it remains as you can no it still remained um since we do have 25 pixel on both sides so it's supposed to be 1150 not 1200 1150 pixel maximum width border top remains as it is it's not a problem at all yes perfect now as you can see over here there is a balance between there is a little bit problem with the balance between the copyright text and the menu link so what we can do this copyright we can add a little bit of extra space maybe and it could be like this padding top 10 pixel maybe yeah i think we are pretty much at the same yeah it looks alright it looks alright okay now this color i'm not liking it to be in this color okay it's always got to be black regardless let's put it one one one and even if it is visited if it is visited it's supposed to be a little grayish color as you can see it's visited well you know what it doesn't matter let's remove the background keep it 1 1 1 and when it is color is active color 1 1. and really doesn't matter but you get the idea yeah and for text decoration text decoration there must be an underline so that they understand that they are hovering on top of this link okay like this contact page this is the contact page okay also we i really need to i really really forgot is that um we need to have a page for this page content to be displayed so we need to create another file called page.php which is very similar to single.php but only difference is that it won't show any metadata so let's go back to our single dot php copy the entire thing paste it over here just get rid of the post meta because we really don't need to show the post meta section or the page metadata all we need to show need is just a post content okay so if you refresh this page and go back to contact page you will see it's different okay so there is no additional content there is no okay let me go to the page section and to show some content lauren epsom we just need to add some content so that we can show how exactly the page looks like okay we need to modify the contact page contact this is the second paragraph update this and and that should be it over here so this is how the contact page is going to look like and for this if you want to design it a bit different way we can have a separate page for this one as well so instead of post we can have another blog section over here called page this would be highly useful if you want to make custom template page or custom page like as you can see at the very beginning that if you go to the home page you will see a bunch of posts over here right but if you do not want to show them but just like my website if you go to the home page you see a custom page that does not show any post at all so for that kind of thing if you want to do that one you can create custom page but that's for different discussion but for general post related content this kind of post related content or service section whatever you want to do you need to have a page section separated so we can have a instead of single we can have a page just like exactly now here is one thing that i would recommend just in case if you are wondering if you want your page section to be just like mine and you don't want any sidebar all you have to do go to the page section and get re get rid of this side get sidebar section okay now if you remove it let me show you what it does happen if you remove it on page dot php page remove it and the sidebar is vanished all you have to do put the content in the center but that's about it apart from that one this thing remains as it is it's supposed to be page and we are changing the title from sidebar to page if you want to keep the sidebar you can keep it if you don't want to that's fine too okay so since i'm keeping this i would have to maintain that level like this maintain the same standard and rest of the section would remain as it is there are a lot more thing that can go actually within this single posting but i really can't show everything there are a lot of customization that's necessary that you have after that you would have to do it by yourself and okay this is the post section and we since we do not have any meta section we do not need that so this is our page css looks all right okay so the sidebar section it's up to you well you know what okay let's remove the sidebar because on page we do not want to or i did not want to show the sidebar it would rather look awkward so what we can do instead of float we can put margins so that we can put the content in the middle now remember one thing it's in the middle now remember one thing the title looks in the left hand side but it looks a little bit awkward if you want to want to put it in the middle it would have been nicer so what you can do over here on the page section you can just put this line text align center okay just like that that's it and if you want to get rid of this border line at the bottom that's even better i mean you can do that it's not like something big of a deal remove it done one more thing that i want you to take a look at okay this is a blog page that i customly created over here to show the separate the blog section from the uh main site content but in that case you would have to in that case you would have to create a custom page template which i don't want to do it over here but this is just another page doesn't have any content because if you go to post section i'm sorry the page section and take a look at the blog there's supposed to be a page template over here but there is no parent section or no template if we do use template it should be visible over here okay [Music] but since we are not using we can just put dummy content like dummy and update this page and refresh it you would have your page but if you want to use the blog section then i would recommend you to go with the standard design for the template just like on my website i separated the blog section from the home page so if you go to blog it's entirely custom made because this is a custom template and if you want to as you can see i added a lot more um content to display the ads as well over here uh that's that's kind of like a little different if you want to do that one you would have to know how to customly design the whole page so uh that's that's a different discussion i will i will make another video to show you guys how to do that one but for the time being just understand that you can create a custom template for a contact page like this you can have a contact form over here that would record another template that's also possible but that's pretty much all you need to do for the time being and also we were talking about the search form so let's go back to our um 2019 there was in a custom form um search form php i'm assuming there should be a one over here template part post no i do not see over here but for the sake of simplicity i can grab one from my um my own custom template search form it's very very simple actually there is nothing much in here so we created another page over here called search form it's already there so skip it i don't want to overwrite it remove this one because there is no content in here and just paste it over here now let's open it up and see what is inside okay okay for method there is not much going on here but i thought there should be a template for search form if i'm not wrong okay this is pretty much all you have and if you refresh it you should be able to see the search box in here okay if you write hello we we will need another search result page which is also called search result let me see uh search result search form let's try to do hello as you can see hello world showed up because we are using the search form to search content for the for displaying this result they are using actually my index.php because if you take a look at the template hierarchy if you look at the template and let me close this page for good and close this as well close this one as well and if you look at the template over here wordpress theme development where it is in uh php go back let's go back in here for the time being okay this is the line as you can see search.php let's create the search.php so that we can actually search.php okay this would be the page where we would be displaying the search results so over here we would have the traditional okay let's copy the whole thing okay paste it over here and then instead of the w2 over here for the post link we need to have a title over here instead of we can put it like this h2 h2 to display the query that being searched for over here and using the title over here okay so what it does happen is that if you do performance search it will show what are the word or what are the keyword that you use to search this page as you can see over here search result for hello now if you do search with world so both this page both this post has a word called world let me search there you go there's another word on this post as well this is how you can build your search result page also what we need to remember is that if you have multiple posts let's say more than one post we need to show that on our archive page okay so let's create another page called archive dot php which is going to be very similar uh to our index.page with a little difference let's go back over here let me see if i can show you from here archive should okay wp link pages for page navigation okay this is the most of the page in fact index.php page should have this let me see if i can show you to you over here index page i'm sorry i got it wrong okay this section default usage okay at the bottom of this page because on index page we want to show go to the home page and we want to show next back from previous page or next page at the bottom of this page because but since over here on the settings section it shows reading the number of posts until it shows the page navigation at the bottom next or yeah next or previous page our next page is 10 we do not have 10 posts over here so let's put one for the sake of example for the sake of this example let's put it like this and it does not show okay um what do we do what do we do what do we do okay um quick tag the same way linked pages are deprecated linked pages before after paragraph tags okay we can even use this one previous post nav link next post link post archive get the post pagination okay let me see i think i got it wrong it's wp-link pages not pages it's supposed to be post pagination but let me confirm this i think i'm using my own custom function to display this navigation as you can see on my blog section once again i'm going back to my blog section blog station to show you what i meant by uh own custom navigation if you go to blog section and if you take a look at the archive section let's say on the thought section we have archive and at the bottom the navigation that you were looking at the pagination you were looking at that's a custom function that i wrote by myself to make it nicer which i provided at some point in my post on my website but the default wordpress usage is something like this if i'm not wrong made sizes tool okay let me see if it does shows up okay this is the post navigation two is the hello world and then back now as far as this navigation section is concerned it shows over here there is an a pagination class that's been used to style that okay which we can create as well on our style on archive page or independent one because this navigation would show up on archive page search results if they have multiple pages that's supposed to be next not onward look nicer okay yeah that looks okay um post navigation i'm not quite sure if you really need this text but just to be on safe side you can have that you can even hide the screen reader text over here it's not a big deal i can show you how to do that so we can create another section called pagination okay not navigation it's supposed to be pagination pagination display block overflow that's supposed to be hidden and if you refresh this page there must be a block yeah we have that as you can see our css shows up over here now for screen reader text i'm not quite sure if i want to show it or not if you want to show it you can show it but i think how about pagination and h2 just simply item display if you have any creative idea please feel free to use it any way you want as you can see it's gone and for nav links you can install them just like the way we did on ul ally kind of thing over here but i don't want to go a little bit more in details on that one because i think it took quite a lot of time already to record the whole thing but this is pretty much the basic idea you can show the page description content and there are a lot more thing that can be done like this profile page as you can see there is no content or no content is being displayed on author if the car but you can have a custom profile page for any user if you go to the template section let me show you there must be a page php page that's something called like author if i'm not wrong author.php yeah this is author.php if you click on that link on the user link that author dot php page can show the content or if you have multiple authors on your site so you may want to show let's say somebody's reading this post and you want to show the other posts written by this author on that case you can definitely use another template called php.author.php and show the post that belong to that specific um author only but i really don't want to use that one because that's something your very own adventure that you got to make it's a lot of custom coding can be there you can show users social links and other stuff that's pretty much the basic that you can do on authors so i would highly recommend you to go through the list of template files over here that's being displayed please understand that archive.php page that i did over here is not actually appropriate one in fact i did not do anything over here wow okay let me fix it over here then since i did not do it i have to do it and what i can do just copy everything that you have on your index.php paste it over here but for over here you can have a section that's going to be a pretty big one i'm going to show you but that's going to be a very very big line because this archive can be based on dates based on author based on month based on the year based on tag based on category so that plays in a significant role but i'm going to show you real quick so that you can have an idea that what exactly is being what exactly is happening on those archives let me see if i can find the necessary information over here on archive i think that would have a lot more data than just okay you know what i don't want to get two more deep on that one let me go back to my template page and on this page there was just simple one line that you need to add over here let me show you okay i'm going to post or copy paste this tag line just to show you that how exactly it should be working so that you don't get stuck in there it's a lot of lines with author tag category and all these so it will take a little bit of time okay go back okay on this editor if you have then you come over here okay let's widen it up a bit okay you can see a lot of else if going on here okay so this is what you want to show just to make it look a little bit more dynamic because like i mentioned before you need to have um tag for archive page for post tag archive page for date archive page for author there could be so many uh archive page so just to give an example how exactly it can go or look like something like this you can pause this video just in case if you want to know that what exactly would be what exactly it should be showing over here okay once i'm done with this you can take a look at it and then make the necessary adjustment for your own need okay and like this so basically all i'm saying over here okay i don't think we need this okay so this is basically a page title kind of thing uh showing that if you have archive content archive let's say like this and we are looking at book archive okay unexpected php i got it something wrong okay i did not close this tag okay now topic book it shows topic because i wrote topic over here it's actually supposed to be category okay so refresh this page and you can see this is the archive category books category archive now if you want to what it does mean is that on the review category there is a book review category and if you remove the book and keep the only reviews you can see the review category okay even in fact you can do it like this let's say you can do 2019 archive for 2019 because as you can see these posts were written in 2019 now let me show you one more thing it's may and the other post is on may as well so if we do write a post let's say this one test post as you can see so it's written over here in june so publish it test post and it's on 7th 201907 so if you do it like this 2019 201907 you see july archive only as you can see over here right so this is what it what this piece of tag or this piece of php code does it recognizes the request from your browser and showing it that based on 2019 and 007 that's july this is the post or these are the posts that has been written but if you put only 2019 all three post shows up this is the second one and this is the last one okay and also please remember that on the settings section i put for reading i put only one if you do put two and save the changes then you'll see there will be two pages only because on the first two page on the first two page refers this page okay on the first page you see the first two page the first two post and the second page you see the last post or the third one because we have total three different posts that has been published that's pretty much the basic and you can go tag um these are some of the tags that i have been using on some of my posts let's say test four right now copy this text and if you go over here and most probably use tag test4 see tag test4 because this is being picked up by this tag this function if it is a tag archive page then show the tag and also show the tag title that's being searched for okay and you can change this code any way you want and if you want to style them you surely can style no problem with that one this is basically the whole idea of now definitely i'll be working more at the back end to develop this theme to further and make it uh woocommerce compatible but that's a different discussion at some point we will style them and search box i would have to style them as well but apart from that the basic functionality of your template is pretty much working you have the footer section header section navigation you have the sidebar and you have the post you have the search box that works and you have the archive page as well now there are some other features that you can add that for that i would highly recommend you to go through the theme development section of the wordpress and there are a lot more thing that you can do you can do custom post type registration registration and then you can use custom form whole bunch of things you can use 404 i did not add you can definitely add one and the template for 404 is simply this one copy the whole thing copy it and create 404.php and paste a simple code but make sure the template tag that you are using this get header you can get rid of this line you really don't need that one okay and since i started doing it um why not okay i'm not gonna do the entire thing it's gonna take some time actually if i want to do but here is the thing this whole code you take it like this and make the necessary changes it's pretty it's gonna follow the page.php in mo for the most of the part like this okay let's do it since i started doing it why not just finish it okay like this section page and since i did not need any content over here post section i do not need that dave section is supposed to be post um i'm sorry it's supposed to be page page okay page get footer section and we do not need any header we just need an h2 tag to show the title and change it to h2 and you do not need that php tag you can just simply say 404 not found kind of like this 404 not found and get rid of this header section and instead of post content you can simply add post over here to follow the simple pattern for officing a simple page so i'm not going to go really really complicated with that and actually it's supposed to be inside okay so and then we need another div class entry e-n-t-r-y okay then you can wrap the whole text within a p tag okay i don't even know why i removed that p tag over there okay looks good and then close the div section or then you can simply add this php to show the search form this is about it if you want to show now 404 404 okay this is your 404 or error page the search box once you style them it's going to be like this exactly like over here that's pretty much it if you do not find anything it will just straight go to the 404 page and say saying that it looks nothing was found over here on this location maybe try a search so search box is already there so you can even get rid of it if you don't want to sure why not okay remove this search box that's it you can change the content that you can change the language over here it's it's entirely up to you okay that's pretty much all it's going to be for theme development i would encourage you to dig and study a little bit more the wordpress theme development section you will find all the necessary elements that you need all the necessary instructions that you need there are a whole bunch of things that you need to do apart from that one you have to follow this css coding standard and i would also encourage you to go and use the handbook best practices to find i'm sorry about the there it's new york city it happens all the time and study this section best practices see how exactly they are asking you to use the php javascript or html codes to get the most out of your template you can do a lot more thing on your template but that's basically what you need to do to build your template as you can see our theme already been recognized on the plugin section over here on the theme section we have our widgets we have our menus there'll be a lot more video tutorial explaining certain little things that i may have missed if you have any questions feel free to drop that question from the comment section and i will get back to you but for the time being that's pretty much all we have got for today thank you take care subscribe my channel when i talk to you soon take care bye

Channel: iftekhar

Views: 503

Keywords: Theme Development, WordPress Theme, How To

Id: rIH9M2mKoro

Length: 141min 15sec (8475 seconds)

Published: Sun Apr 18 2021