Ep17 - 17th Wordpress theme from scratch with simple widget plugin tutorial

all right in this episode number 17 we are going to see how to create this html template into working wordpress template along with that we are going to see some more advanced feature as it is the 17th episode and it is the 17th wordpress sim we are converting now you see we are going to add this menu using nav walker and you can see this is a widget so let me show you the working website so this is the working website you can see i have converted it to wordpress the logo the menus are also available is search bar is also available so if i wish to change this text uimong 17 to wordpress theme on the widget section we have showcase we just need to edit let me make this 17th let me format the text in this way so if i refresh i should see the reflected text over here so as you said as you see this is a widget you can see you have to install a plugin so we are going to see how to create a plugin once we install the plugin there would be a section called widget and you just have to drag this into this uh into the widget location and you can edit this let me make this and if i click save and that would be reflected on the banner and the next thing is the logo in case if you want to change the logo how previously we have we did not uh add this functionality in any of the video and we have to get into the customize um site identity i'm going to change the logo let me change the logo to some other logo i have already i already have an image let me upload this t-shirt so this is our logo at present just consider it as a logo even though it's not a logo just for our understanding cool cropped it and now you should see the reflection this logo is available here likewise let me make this to the old one i have created a logo actually it's not a logo it's something a text i made this with photoshop now i'm making this as a logo and you can see the logo is also changeable so the goal of this video is to understand three thing the first one is converting html to wordpress and then the nav walker you can see the menu is also dynamic this is of the wordpress now if i click about us you will see the about us page will show up the third one is the logo we can we are able to customize the logo the fourth one is we are going to see how to create the widget plugin so if i show you the widget plugin you have to get into the plugin section installed plugin and the fifth thing is we have already seen this many many times in the previous video it's just a copy of it we're going to add the categories on the sidebar now just to show you what our plugin looks like so this is the plugin which i have created ui monk widget plugin so once i activate it that activated plugin will be available on the widget which i have shown you now you can edit the section fine now let's start i'll to follow along i'll leave the html document and the related images in the description so that we both follow along now let's let me open my visual studio code by the time it opens let's create a fresh wordpress let's install a fresh wordpress on our c drive on the c we have xampp htdocs i have already downloaded the wordpress let's use that just paste it and we have to name our wordpress file or wordpress folder let me name this as so now our wordpress folder is ready it's over here now let's name this wordpress folder as ui monk 17 as it is the 17 theme we are creating now we need to create the database so to access the database you have to get into the localhost then phpmyadmin [Music] the spelling mistake localhost slash php my admin now we need to create a database on our phpmyadmin section we just need to create a database and wordpress will take care of all the stuff now this is the ui where we are going to add our new theme so sorry new database click on new i'm going to create a database we just need to name it i'm going to name it as a as our folder name of the wordpress file you can give any name but i'm sticking to it fine that's it the work of the phpmyadmin is done now let's install the wordpress you have to access the file which you have named it just click enter and wordpress will open the wordpress wizard for you so now we just need to uh give the details of the database so wordpress will automatically create the wordpress table for us now click on continue php let me show you the database as well in case it's required now we just need to give the database name username password and the database host the database name which we have given is simply the ui monk 17. the password is root and so the username is root and the password is blank so this is the default for samp i'm using zam i'm going to keep the database host as localhost and the table prefixes wp if i click on submit it says alright i am saying run installation once the run installation is done you can see click on the database and click on the table which you have created right now so this is the database which i have created right now and i think we need to go one more step to see the tables if i click on structure you will see the number of tables over here let's first give the site title and this is the username and password which is required whenever you want to log into your website so i'm whenever i want i wish to log into this particular website i'll be using the this credential that's the reason wordpress is asking to create i think now it's installing the wordpress so let's see the files so the tables in the database once the installation is done you will see some 14 tables sorry 12 tables here so it says 12 tables wordpress installs all over all the required tables with wp prefix wp prefix is what we have given while installing so it says it success we just need to login and check as we have seen admin admin is the username and password which we have given while installing wordpress and now we are going to see how to create themes now let me open this file open the wordpress file using this visual studio code on the htdocs we have the ui monk 17 and just select it so this is the dashboard if you see we have themes there are already three themes available now we need to add our theme here how are we going to do that we have to get into the wp content it is where all the themes are available we need to create a folder and let's name this ad as ui monk 17 and we need to create three files in order to show our themes on the appearance section the first one is index.php the second one is style.css we have misspelled it let me get into that through here and the third one we need a image that image should be in png format and the width and height is one two seven 1 2 8 0 into 7 64 something you can get it on the google click on refresh so now you can see your theme is available you have named your theme as uimong 17 and this is a screenshot which you have added on the folder and you can see there are no details about the team to get the details about the team you have to search style.css for wordpress so we need to add some comments on the style.css to get the details of your theme this applies to the plugin also which we are about to create in this video we need to give the same uh i think two files is created i have mistakenly saved it twice let me delete this now we can open the style.css just pass the comment i'm going to name this theme as ui monk and rest you can fill it i'm skipping this now if you refresh the theme section the theme section will be filled with details you can see the name you have given ui monk the version and the author description tags also show up now let us activate its active this theme i'm clicking on activate once you activate it wordpress reads your index.php file as you know the index.php is blank we are not going to get any anything on the website now as you install your as you activate your theme you can see there are two section is hidden the first one is widget and the second one is menu we are going to see how to add this in some time but first let's let us add some html on the index so as i have already said we have a html file which we are going to add this let me copy all the html and paste it on the index dot php file i have added bootstrap cdn so we will get some css design on our web page cool so these are the bootstrap design now let us add our custom css so let me open that as well on the html we have style.css let me open that let me copy all of them and paste it below close this now just by pasting it you are not going to see any dispense so we have to link the external style sheet to the index.php how are we going to do that so wordpress gives you a function for that as it is a wordpress function we have to surround it inside the syntax of php then we have block info and the parameter we need to pass is stylesheet underscore url if you refresh the style sheet will be linked to the html and we can see the changes we can see the changes if i press ctrl u and check the inspect you can see the path will be given instead of the we have passed the function name and wordpress has converted the file function into the path cool the next thing we have to separate all the header footer in a different file so before separating it we would like to see the strap the admin bar so to get that what we need to do is we need to pass the wordpress function wp underscore footer refresh it you can see the strap bar is available the same way the footer has uh for the footer we need to add the header as well so for the head we it's the wp head just refresh it you will not see any changes but in the back end in the source code you will see many css and many required javascript will be added because we have added this wp head now let's just separate these so starting from the banner section and from the from the heading from the html opening tag till the banner section i'm going to place this into a new file called header.php the same way let us let me pick the footer with the sidebar and let me save the file and save it as we'll call this footer.php all right now what we need to do is we have to include the header and footer on the index so wordpress gives you a function called get underscore header and get underscore footer and now you will not see any changes because we have properly connected the header and footer in case if you want to remove the header file and check it you will see the missing header the cs is not applied because the css code is on the header if you wish to change if you wish to remove the footer you will see there would be no sidebar and the footer refreshing it so there is no sidebar and photo so let me add that now as you see this is working now one more thing i would like to do let us add the sidebar to a different page this is first card and this is second card so get the whole thing create a new file and call it as sidebar.php paste it now we need to connect this so again we have a php function get template and we need to give sidebar i'm not sure with the function name we need to search it on the google let's just search i think it's a template name let's get template name so it's a template part we should see the sidebar actually we have made a spelling mistake its sidebar now we can see all right we can see the sidebar now what we can do now we need to add the nav bar so let's get into the now walker now walker wordpress if we will get the github phase github file let me create a new file let's open the class name class file let us copy the whole section in that file and we'll save it we can give it any name but let's stick to the name that is given on the that is given while creating it's a class file now we need to call this on the functions.php so it says everything we need to have we need to register the class so let's just register it copy the whole section and paste it in functions.php and this is a file name which we have given and what we can do is we need to make this we need to add this array on the header.php in place where we have menu so we need to replace this ul just check the container nav bar nav mr auto let's comment this and paste it refresh replacing it now we don't need container so false the content is because we already have a container here so we don't need these two because you can see collapse narrowbar collapse collapse never collapse both are safe and as i said navbar nav auto is given now let's try to refresh and check it would be dynamic now and it says to add the menu so let's try adding the menu the theme does not support navigation you can just i have already shown you on the dashboard there is no menu available so to see that we have to register the navigation on the functions.php let me add that and now i'm creating i'm not going to create a new function i'm going to use the same function so i'm registering the nav bar sorry registering the menus on the same function of registering the nail bar now this function will be called when this hook runs this hook is called after theme setup this would be called by the wordpress now if you refresh you should see the menu let's get into that menu and create some page there is no page let's just add the sample page itself create menu and on you can see we have given primary menu this text will be available over here you just have to make sure you click it and click on save once this is done you can see the created menu home and sample page that is done now let's let me show you how to add logo so to make that again we have to get into the function.php we need to add the permission so that we can use the custom logo so the function is the custom logo so let's register that as well add theme support custom logo now let me refresh it on the site identity here we can add our logo let me add a logo let me add all the images itself now let me select this logo the logo size is too small click on publish by this you will not see the logo on the header it is because we have just registered it now we need to call this logo on our header.php so let this is the place where the logo is there so so first we can directly call the function but that is not recommended we need to check whether the logo is there or not if the logo is there then call the function it's very straight for straightforward as it said if the custom logo is there then show the custom logo now if you refresh we have added the custom logo and the custom logo is available let's make this margin left auto so that the menu sticks to the right side all right now let's make these uh search bar also dynamic it is one of the easiest thing for the input field you just need to give the name as yes and for the form we need to give action home underscore url i'm going to give slash and that's it even if you search now it's not going to work because there are no pages i'm going to refresh this first check the changes we have added just type and click on search it's not working it's simple we have given input type button now i have made this input type submit and now you can check it's not actually working but once this is done the page creation is done we will check it again now we are going to see how to create widget blocking so on the appearance that is so this is ui monk this is the demo one we need to get into our ui among 17. enter let me close this these two are not needed for the front end now on the appearance they we have added the menu but there is no widget so let's add the widget now so we have already seen in the previous video how to add the widget i'm not going to do it again we are just creating a function and that function is called when this hook is called which is widget in it now we are registering two side two widget the first one is for the sidebar the second one is for the showcase so as you know these are the this is not needed for the showcase but we'll keep it and the sidebar will be surround with the card now just by refreshing it you can see on the appearance tab you will see the widget section it is because we have registered the widget and it is called when the widget widget in it is called now widgets we can see there are two places for the widget the first one is sidebar the second one is showcase so these are coming because we have given we have named it while registering the widget now let's create a plugin so to create a plugin we have to get into the plugin folder and we need to create a new folder and we'll call it as showcase underscore widget so the folder name we need to have a file name same as the folder name which is showcase underscore widget dot php now here we need to have the comment plugin comment for wordpress now as you see for the minimum you just need the plugin name but the requirement can extend to any much anything so i'm just naming it as ui monk showcase plugin description also same cool now we need to register we need to create a class so widget api wordpress it's a class which wordpress gives you we just need to copy and paste it let me copy the whole thing i'll explain you what is inside create new file and save it as class underscore showcase underscore widget this is the php file so we need to write the php syntax now let me explain you there are uh in the class we have three functions so the first one is the constructor so here we need to give the plugin name the second one is the widget function so here the output what output we need the output we need one heading and one paragraph so that we will write here on the widget and the third function is form the form is simply why on the demo i have shown you there will be two sections the first one is for title and the second one is for uh description so that form input field will be available here and the fourth function is update so in the update when whenever we click on submit for the form the data will be stored somewhere right that stored variable will be available on the update function i hope this is clear now let's get into the demo create widget plugin wordpress so i have found a url which has good description about the plugin i will leave that in the description so that you can read it now what are the things we need the first thing the comment is the first thing let's update the variable so this is the file as i said we are going to use the update first copy the whole section and place it on the update we need two variable the title and the description copied it paste it paste is not working why so before doing anything we need to register the class here so let's give the class name here class underscore showcase underscore widget so we have called the class file so we have called the php file and we are registering the class and this is called when the widget is called all right now let's create the variable first so this is the same thing which is available on the tutorial we need two variables the title and the message and then let's define the plugin name on the constructor so here is the constructor let me copy replace this now you have you have seen the class name then you can give the description and this is the name you wish to give and that's it now let's add the form on the form function so we are getting the values which we have initialized on the update function and then passing it as title and message so this function is really very simple because you need to in html we have something like the id and the 4 should be same so to get that we have the for and the id should be same to get that we have a function for what in wordpress called get field id and for the name let's get field name for the first time it will take time but if you read it it's really very simple it's likely plain html what happens is this value will be stored on these two values these two input field now the output the output is the straightforward we need heading and paragraph now just add the heading and paragraph so it's simply the heading h1 and then the paragraph and if you know this is the title and the message which we have initialized on the update function and that's it by this you can check the plugin page install plugin bottom now you should see ui monk showcase plugin click on activate once you activate it you will see a name ui monk this name which we have given on the constructor so let's add this on the showcase widget and now we have title and description ui monk 17th wordpress theme introduction to widget plugin so if i click on submit the value will be stored on the instance so even if i refresh it is not going it will not go because the value is stored in the instance click on it you can see the value is still there now we need to output this on a place so control b uh where that place will be it's on the header and now we know the this would be replaced with the widget which is dynamic underscore widget its showcase because on the functions.php i have given showcase the name showcase let me save the header and get into the index page actually it's not dynamic widget it's dynamic sidebar it's a wordpress function even though it's widget it's a function given by wordpress cool introduction to widget plugin all right we can see our work is succeeded we are able to modify it let's modify it 17th wordpress theme by ui monk click on save the h1 should be 17th wordpress symbiomoc we have crossed the toughest one now it's very easy now what we need to do is we need to get a widget on the ui monk includes get into the widget here we need categories accelerate the categories copy this and get into our folder theme folder paste this now we need to include this on our functions.php just as we did for the navwalker we need to call that class let's call the function sorry the file name so without modifying we can do one thing let's get to the widget section categories just drag it and paste it give the title as you among categories click on save now on the footer sorry on the sidebar we have sidebar it's here just remove all of it and then just call the widget name which is dynamic underscore sidebar the name is sidebar which we have registered it now let's see how does this looks okay we will skip that step because we have made this many times in the previous video because name is already in use wp widget categories functions okay we need to delete this it's the functions.php remove this and on the sidebar it's not available you can see the name we have given is sidebar let's call this on the sidebar.php actually it's still saving that's the reason let's get a category have it inside ui monk you among category click on save now you can see the category is there the name is also there because you have given the name that way and the sidebar is also working now let's loop this product so to loop we need two product at least let me add two products with the post thumbnail the post thumbnail feature we have to add this on team setup let's copy this and get into our functions.php just like we have added the theme support for custom logo we need to add the theme support for feature image you can see by default it does not come with featured image let's add a featured image section refresh it and now you see there's a featured image let's add a product hello a lorry map some text let's pick this from here so this is a content and for the excerpt just add rupees 150 and let's create a category t-shirt i'm running this because we have already seen this many times this is the 17th video one product is added and one category is also added now you can see on the category so one will be added dynamically let me create a new product again we have saved the first product which is yellow let's add another product great t-shirt the content at this time something different rupees 250 publish this now we have two products now we need to show those two products over here on the index.php now let's get it to the index.php let's take down the repeating codes so we have to check whether there is a post first if there is a post then show the image image can be seen with the post thumbnail the title the excerpt the permalink you have seen this many times i'm just pasting it and moving forward so these are the two products which we have we can delete this product if now if i click on add read more the single note php is not there let's create a new file and call it as single dot php now if you refresh this would be blank we need to copy the copy everything as of index here we don't need have and the while loop refresh it we need to make this full so let me copy it from the index single dot html desktop 17 theme single dot html now what the middle content is over here row pick this and place it here now it's just a copy paste work again the image the title the content and this is for the comment cool the title the content the image and then the comment command is also working cool hello has come up all right now it's just the single dot sorry page dot php so you can see we don't have page dot p page dot php is for the pages dot php it's the same code as of single dot php except the title and the content we have the title we have the content and we don't need this because we have already included it on the footer that's it we can delete this post i hope the scope of this video is done thank you so much for listening

Channel: UI MONK

Views: 56

Keywords: wordpressthemedevelopment, wptheme, theme customisation

Id: kcOx67VumpM

Length: 47min 29sec (2849 seconds)

Published: Sat Nov 13 2021