How to make your own WordPress theme from scratch (2019)

hey everyone today I'm going to show you how to set up your own WordPress theme so a lot of people who use WordPress probably know WordPress sirs are really easy to use plug and play system where you can download a theme on online or buy a theme install it change a couple of things up and launch your website that's cool personally I don't like that I develop my themes myself and I'm gonna show you the basics of how to set up your own theme and hopefully this will point you in the right direction to then maybe learning how to do even more advanced stuff let's get started so basically I have a basic setup of wordpress on my local machine and what I'm going to do is go into appearance and themes and you'll notice we have 2017 theme installed so that's just the standard WordPress theme and we want to create our own theme so obviously we want to see our theme here which we can then activate so let's go into our folder into our wordpress folder and go into our WP content so I'll just start from the beginning we're in the folder here we go to WP content we go to themes and I mean you'll see 2017 now let's just create our new theme so we'll just call it a new theme and this is basically just a blank folder so I'm gonna drag that folder into my code editor and then I'm gonna open it up in my code editor so the first thing that we want to do is create an index dot PHP file and this is the basic file that WordPress needs just to even create or even load the theme so we'll just add an index dot PHP we won't put anything into there and then what we want to do is we want to create a new file called style dot CSS so styled CSS and inside the star dot CSS we want to put theme name and let's just call it test theme and you don't want to put that those that semicolon at the end sublime text seems to be doing it by itself you can add some other information into here like the author etl so I'll just put author mr. digital and there are a couple of other things as well but I'm just gonna keep it really simple for you guys and I'm just gonna save that now so if we now go into our WordPress installation and go into themes we should then see test theme okay and if we activate it it's now activated let's delete the 2017 theme now we only have one theme which is the test theme and if we go to our main website to view it on the front end it's just gonna be blank so in any theme there are some core files which allow us to then edit facets of the theme I'm just going to quickly remove this fold us and re-add it because by the looks of it we can't see my files and now I can okay cool so the first couple of files we want to create would be the header so let's just say that header.php so that's where you store your head and the start of your HTML tags and then we'll create a new file and we'll call it footer stop here to pee and it'll be for the footer scripts and in closing HTML and body tags and then for the front page if you want to have a specific template just for the front page let's create one it's called front - page dot PHP okay and then for a standard default page on your website we'll just call it what it's called page dot PHP and for a single blog post would be blog sorry single dot PHP and for your blog archive it would be archived PHP now that looks probably just the basics that would require right now so I'm just going to close out of them to keep it tidy and okay so the first thing we want to do is we want to go into our header dot PHP and create a standard HTML document now to do that you would put doctype HTML HTML head and then body okay so I will just put that in the header and then in the footer you want to put body and then HTML so that would be the closing tags of the the HTML document and in front page what we want to do is we want to put PHP get head up and PHP get foot up okay so on the front page of the website we're calling the header dot PHP and we're calling the food up dot PHP and within the footer we want to put a script called WP footer and what WP footer is is a hook that plugins can plug into to add their JavaScript scripts at the bottom of your document automatically and also in the header we want to add a function called WP head and that is also used for hooks and adding in the standard WP WordPress scripts and also if you download it plug-in like gravity forms or something like that gravity forms hooks into the head or the footer to add the scripts that it needs to run we also want to put in the body class which is the WordPress body class and this will just allow WordPress to add its own classes to the body so sometimes it adds in like if you're looking at a page template it will actually put page template in there and that's all for you for your convenience I want to go to in depth with that so now that we've got the basics set up we have our front page if I type anything into here and just save it and we go to our front page which you can set by going to settings and reading and you'll notice that I have home set as the home page so my page that I've called home is the front page you'll see that we have that text set up that I typed in there and if we actually look at the the source of the page you'll notice that I'll look at it in cooking it on there just to take away all the wordpress admin stuff you'll notice that we have the HTML the head we have all these scripts which are scripts that are added in by WordPress theme soul and you also have footer WP embed script and these are all done by those two scripts the WP head and the WP foot up okay so now that we have our header alpha sorry our front page our page and our single page then we can basically start using it so one thing you want to do when you create your own theme is you want to include so rather than say our I have a bootstrap I want to use bootstrap in my theme instead of just going directly into your header and doing link ref equals bootstrap Dom in CSS rel eaglestar shake or something similar what you want to do is you actually want to you want to put it in the functions dot PHP file which I haven't shown you about yet you need to create a new file called functions dot PHP and this will kind of be the the file which you can add hooks into and you can configure your theme however you want to okay now the basics of the functions page would be to include your style sheets and also your scripts so let's in our theme let's install bootstrap for and in cue it so let's go to the bootstrap website and we will go to bootstrap 4 and we will download it okay so once will you download bootstrap for you want to go into what you could probably do is just drag the bootstrap folder into your theme so let's go to our theme and let's drag bootstrap into there and now that bootstrap is installed or copied in there I'm just gonna rename it to bootstrap coming to think about it probably the better way to do things would be just to create a new file a new folder sorry called CSS and inside that grab the bootstrap go into the bootstrap folder and go to disk which stands for distribution copy the CSS and J's folders go back to your theme paste that all in you'll notice that it also creates a CSS rjs folder and then just delete that bootstrap folder because you don't need that anymore and it's actually not letting me down I'll delete that so I will just get out of sublime text for a second and that could potentially be causing it yeah okay so now that we have the CSS and J's folder so I'm just going to open up my theme again and you'll see CSS as your bootstrap files or your CSS files and then your bootstrap J's files so let's include them now so go into sublime and go into functions dot PHP and let's open up the PHP tags and we will do function load style sheets okay I'm just calling it load style sheets you can call it whatever you want and inside that function we want to register a style so this will be WP register style and start it's a style sheet and then we want to point it to where this CSS is located which is in your themes directory in WordPress that's called the template directory URI so let's do get template directory URI and then dot and then we will do forward slash CSS and then bootstrap dot min dot a CSS and then there are a couple of other options that we can specify in this particular function and I will take you to the wordpress site just to look at those and see what options there are listed wordpress WP register style okay okay so i'm just looking at the wordpress site on my other screen here so this is the name of the style sheet so you can call it whatever you want you can call it my CSS or whatever you want but i'm just calling a stylesheet comma this is the actual address of the style sheet on your server and then after that you have the option to add a version so it could be oh sorry the the debt dependent stylesheet so if this starship has another stylesheet that it requires to load otherwise if you don't then you just make it default as array and then you'll so then do a comma and then after that you have the option to set the version which you can just put false be unless you want to put a version then you can put one two three four or whatever you want and then media so media is I believe a stylesheet things term for all or screen or handheld or print if this stylesheet was only to work when someone was to print it you would obviously put print but what we want to do is we just want to put all okay and then we want to just include the style okay so you'll see that it's referring to this it's in cueing that specific style shape so if we save it now and we go back to our projects and refresh it if we look in the source of the page you should see that we now have we don't actually have it so I'll just clarify what I've done and yes the problem is that we haven't added the function to actually run so we have to do add action which is this specific action and we have to tell WordPress that we want to do w WP n Q scripts and then load style sheets and if we refresh it now we should see bootstrap dot min dot CSS get out of there okay so let's now refresh the page and you won't even see anything but if we now go to front page dot PHP and we use bootstrap markup so div container and div Road legislative col will do two columns one left one right and I'll say left side and right side you should see left side right side okay so we're using bootstrap now so that's that's in queueing obviously you want to include your own style sheet as well so if you just copy this and we'll just call it say we'll change that to style and we'll make this one we'll call this one bootstrap and style will be in your main directory so style dot CSS and let's refresh it now now if I go into style dot CSS and I'll just make the body black it should come up but let's just check why that's not working so it is most likely my case so I've done a hard refresh which is ctrl f5 and if i refresh it now it should come up as black but it's actually not coming up as black still so let's just see what we've done wrong here that's because I am not actually looking at the front page by the looks of it or no that's that's not right either what I'm doing is I am loading the style sheet before bootstrap so let's let's just change that around put bootstrap first and put style second and and what why that's happening is is it's probably a good thing that it did happen is you have to take into consideration the position of where you load your scripts if you load say bootstrap after your style bootstrap Styles will probably override your own style so you always want to put your style sheet as the last script that you in queue okay so why do we in cube well we in cube because it's obviously much cleaner you're not gonna have a million scripts in your HTML markup and secondly if you do use plugins that require access to maybe modify your your CSS say for example caching plugins they can't detect the inline references to your style sheets so it's always best to include your style sheet now let's in cue our scripts our JavaScript so let's go into our new folder and we will go into our JS JS file of J's folder sorry I'm getting all my terminology wrong tonight in our J's folder let's create a new file and we'll just call it scripts jeaious okay and in there we want to we won't do anything in scripts yet but we want to encrypt into the foot out of our website so we want to go into our functions file again and we want to create a new function and in there let's call it function load J s and then we want a WP register script so WP register script let's just call it custom J s and inside there we want to get the template directory URI again and we want to then point it to Jay s scripts by Jay s and then there are some functions or some options here as well so let's go onto the WordPress site and see what this particular function allows us to do okay so in this function after we put in the the name of the actual Jay s how we want to identify it and then the source or the URL or location of the script we then have the option to add dependencies which again we're just gonna make blank will just make a blank and then we'll have version which will just make it one and then we'll do will have the option to put it in the footer so with with adding it into the footer it just our sauce yes or no so if you want it in the footer just put true if you don't want it in the footer put false but I'll just put true and then I'll go WP in queue script custom J s and then we want to make sure that we also load the actual function in Q's scripts and we'll call it a reference low j s okay let's refresh this and see if it actually works and I'm a done in PHP error okay so I haven't and if we go into my source and go to the bottom let's load this in in incognito so we can see just the basics so if we go into incognito we should see script j s here there we go and you'll see it's called version one and that's what we specified in functions or PHP as well cool so now we have our CSS in queued in the header and we also have our script or J s in queued in the footer and you can obviously in queue as many scripts as you want in the footer and now let's go into our Jas file and what we'll do is we'll just do a small script to load when the page loads just to make sure it works so document ready function and inside there we'll do alert test okay and if we refresh it now nothing happens if we go into our console that will say dollar sign is not defined and what that means is jQuery is actually not working on this theme so that's another thing that we need to make sure that we include in to the functions PHP file in order to use jQuery so to do that let's go back to our functions PHP file and we want to then in queue jQuery so there are a couple of ways to do this I will show you the way that I use and what that is is just basically in queueing the latest version of jQuery from the jQuery CDN you can also download jQuery if you want to and just put it in your project which you know what will do that so let's go to the jQuery website and look for jQuery through three point one point one and let's actually know we'll go to download jQuery and let's download the compress jQuery production and it will load all the code up in this screen so let's just copy it all and then go into our project into our J's folder and create a new file and save it in there and we'll just call it jQuery 3.1.3 dot min ojs and just copy that you can call it whatever you want but I'm just gonna call it that so we know what version it is by looking at it and then go into your functions.php and let's load jQuery so to do that we want to do function and we'll just call that function include jQuery you can call it whatever you want again and let's deregister jQuery isn't on it isn't loaded anyway but we'll just deregister it before to keep it just to keep it clean in case there is a jQuery somewhere maybe WordPress is loading it in but it's not and then we'll do WP in queue script jQuery and let's then point it to our template directory so get template directory URI dot and then J s and then put in the name of the javascript file and let's just do blank again one and then true which means it will go into the actual foot up and then we'll do add action WP in cue scripts and we'll call it jQuery ok let's save that and if that worked fine you should notice that the alert will come up from jQuery and it didn't so let's go to our inspector and go into the console and you see it just says dollar sign it's not working and again I've made the mistake where I haven't made the function run so let's just run include jQuery and we'll refresh it again now you'll notice that that alert has come up which means that jQuery is now working okay so so far I have shown you how to include the basic setup of a theme I've shown you how to Inc you or to load style sheets through functions PHP I've also shown you how to loads scripts and JavaScript and jQuery through functions dot PHP as well and now you'll notice that all it needs is your WP head and your double WP foot out to actually run those particular functions so that these are essential now that's done let's do a basic setup on the theme just to show you how easy it is to edit so within our style.css I'm gonna make the body background gray and I'm going to also oops I've got to take away that javascript file so let's just take out the alert so nothing happens let's refresh it again oops I'll just do a hard refresh cool and then in our head up let's create a let's add a header and we'll go into our style dot CSS and look for a lot of people you might want to use sass and I use ask myself but just to keep this simple I'm using normal CSS okay so for the header let's do background white with 100% and let's do height 100 pixels and if we refresh it you'll see the nice header at the top if we go into our header and we give our header a class of sticky top that will mean that if the actual page with bootstrap if the page Scrolls down that will stay stuck to the top which is great in our front page dot PHP let's just put a title called welcome to my website okay and within the container with PT 5p b5 which padding top 5 padding bottom five guys this is definitely not a design tutorial so don't worry about that now let's let's link to let's go on to a page and show content dynamically actually on the front page let's show content dynamically so if we actually log into WordPress and I'll sign in with my username and password you have the option to go into pages good on your front page and you want to be able to type information in here and click on update and for that information obviously come up on your front page it doesn't right now but let's make it happen so let's go into our theme into our front page dot PHP file and let's make instead of welcome to my website let's add some PHP code into here which will determine the actual title of the page based on this so we can call this whatever welcome to my cool website alright and we'll update it and then we'll go here and change this to PHP the title let's refresh it there you go welcome to my cool website then we want to tell WordPress that if there's anything inside this to actually show it so to do that let's do I'm just going to copy this actually no I'll type it out it's a bit long-winded but PHP if have posts so if we have posts while we have posts then show the post and then we do PHP and while and if and then within that it's kind of like a like a loop almost PHP the content okay let's refresh it and we should see the content there so let's just go to a lorem ipsum generator and let's just basically get some content out of it and paste it into our WordPress site so our front page and then refresh our front page and you should see our content comes up there now now another thing we might want to do is we might want to create some extra pages on the website so let's go to all pages create a new page let's call test page and we'll also create a page called contact us okay and these pages exist in the backend of WordPress which is cool and we can actually edit them and add in whatever we want into there so let's update that and then go to view the page but the page is blank and that's because we need to copy this stuff from the front page template and put it into the page dot PHP template and if we refresh it now all the information should then come up you can obviously edit each template individually so you could add some extra stuff into this template which will not reflect on the front page okay so now that we have a test page and we also have a Contact Us page which I'm just going to add content into as well let's grab this one that's all that's all good but you want to be able to dynamically show the links to those pages so people who are visiting can actually click between those pages and to do that WordPress has a function called the WordPress WP nav menu so if we go to the WordPress site again and we do WP nav menu there's a function which we can run in your template which will allow us to show menus so let's go back into our WordPress theme oops WordPress theme okay and we will need to go to appearance and click on menus but you'll notice here that we can't actually see menus there's no function there that allows us to click into menus and there's no link there to add the ability for your template to use menus you need to go into your function stop PHP and you need to do add theme support menus okay so then we refresh it and you should see menus now so let's create a menu let's call it top menu and let's select those three pages that we have and add them to the menu and save the menu we've saved the menu that's cool but it's still not there there's still stuff we have to do now the first thing we want to do is we need to again go into our functions dot PHP file and we want to then create a or specify a menu location a menu location basically allows us to create menus and then create locations that are kind of like wherever you want these locations on your theme you put in the code there and then you can assign the menu to a specific location or multiple locations if you want to so I'm going to go back into my functions PHP file and I'm going to register some menu locations we'll just create a top menu on a footer menu so do register now that menus and then inside there we want to do array and inside there we want to put let's call it top - menu underscore underscore top menu as just kind of the label and then we'll put theme and then let's just copy that and put footer menu and change that to footer menu there okay so if we refresh the page now we should see two locations top and footer so let's assign this top menu which I've called top menu conveniently but it doesn't need to be called that and save it now basically we have created a menu assigned it to a location now we need to tell WordPress to display that specific menu location in our template and to do that we just need to go to our header dot PHP because what I'm going to do is put the actual menu in this white section here so let's go into our header dot PHP and let's add in this particular menu ok so within the header tags I want to create one called Pier open up PHP tags and create a WP nav menu and inside there we want to do an array and inside that array we want to do theme location and that's where we want to put top - menu so that is actually referring to this specific slug here okay so top menu you can assign a menu class if you want but I won't write this second but let's go back refresh it and we should see our three links come up now okay and now that our links are there we can go back to our start our header dot PHP file and put it within a container so this will fit within the container within bootstrap and we can also give it a row actually we don't need a row I'll just put it within the container and if we refresh it you'll see that it's now contained within that container you can obviously add style so let's just do menu class equals navigation let's just call it navigation and if we now refresh you'll notice that the UL or the unordered list is called navigation so you can then star that however you want to basically go into your stylesheet navigation and start from there so actually I'm so used to SAS that standard CSS is kind of painful for me so I definitely recommend SAS if you're gonna do any styling I'm not going to do any styling here because that defeats the purpose of this tutorial I just want to show you the basic fundamentals of creating a wordpress theme so as you can see here we now have a functional basic WordPress theme which has links and it also has the ability to in queue your styles and your JavaScript in the header and footer the one last thing I'm going to show you because I could go on forever would be featured thumbnails I'll actually know we'll do two things we'll do post and we'll also do the featured thumbnails so let's go and create a post so we've got the hello world post there but we'll just trash that and we will add a new post so let's call it test blog post we'll go and get some lorem get some stuff again and we'll just copy that and paste it okay and we will create a category called blog and we'll publish it now we have this blog post you'll notice the date or the the permalink looks like that let's just change that to go to permalinks make a post name that way it's more SEO friendly so if we go to post you'll see that it now looks like that okay so we have a blog post obviously we can't look at the blog post yet because it's a blank page if you want to make it really simple just grab the page content in your page dot PHP and paste it into single dot PHP and then you should see that blog post there and it also has all the information there that you typed in in that particular blog post now with archives so you would obviously want to see all your blogs in a specific archive that you can look through and that is determined by archive dot PHP so I'm gonna place this into archive dot PHP and then take out this the content because what's gonna happen is if I leave it like that and we go to posts and we go to categories and click into view blog you'll notice that yes the blog post does come up come up but it's got everything that's in the blog post you don't want that you want it to show the excerpt we also want to put we want to change this specific title to the archives title and not the actual title of the blog post so for this we just change it to single cat title and refresh and save and you'll notice that it will come up as blog now and they'll also be just an excerpt so a cut out of all the content on that particular post so let's add an h3 PHP the title because these tags are actually a loop they're actually looping through every post within the blog category you should see the title of this specific post and then you should be able to click into it so let's create a link to that specific post a href PHP the permalink which is a link that it automatically knows to go to where where to go for that specific blog so click here or reading lists make it read more and do class equals button button success which is a class for bootstrap so if i click into it actually takes me to that blog post so let's try it let's add a new blog post grab some more content you know and we'll just call it enough another blog post and we'll assign it to the blog category and publish it you'll notice that's come up as well and within the loop if you want to make it look nice just give it a card and then a card buddy these are bootstrap classes of course just refresh it and maybe put a margin bottom for between each post and there you go so we have blog posts you can click into one read more you can quick click into another and read more and each block in each blog post that you must usually see in WordPress that there's some sort of featured image area there and here there's not so because we've created this theme from scratch a lot of the stuff is an in isn't a name to enable post thumbnails is what they're called add theme support post thumbnails and then if we refresh it you should see on the right-hand side featured image okay and then you can just add a featured image so I'm just gonna go into google images and tight and just type in I don't know happy person and let's just grab this picture save it onto our computer and drag it into WordPress save it and now that featured image is actually assigned to our post if we click into our post it's actually not there so why is that well the reason is obviously we need to call it into our theme we need to call the post thumbnail so it displays one really cool feature that WordPress has is that it can cut down your picture that you upload into many different sizes so that you know you may upload it to megabyte image but you only want to display at 500 width by 500 width you don't want it to load a two megabyte image you want it to cut it down to 500 by 500 and therefore save on the size and also make the loading speed at the website faster so firstly let's go into our functions about PHP and create a couple of images so let's add image sizes so add image size and we'll call it smallest and then we'll make it 500 300 by 300 and we will make it hard crop so true or false here will determine whether when the image is uploaded that WordPress will crop it exactly to 300 by 300 or it will keep it at 300 wide and maybe allow it to stay the same height so it won't actually hard crop the parts of the image but we're gonna hard cropper and then we'll also make one called largest and we'll make that 800 by 800 so now we have two different sizes of images and let's go back to our Blagh single page and on top of the content we want to do a couple of if statements so firstly we're just going to do well we're only going to do one if statement if has posts thumbnail so we only want it to show or come up if there is an actual post thumbnail assigned to the post and then if there is then we want to do an image and inside that image we want to do PHP the post thumbnail URL and assign it to smallest oh now we'll make it larger so that's actual name of the image that we created before we'll give it a class of image fluid because that's in bootstrap it makes it responsive automatically and let's now refresh the page so the image does comes up but it doesn't come up to the size that we want it doesn't come up to 800 by 800 it comes up at the same size that that particular person in or that image of that person is when I when I uploaded it the reason is because if you add an image or an image size to your functions or PHP and you already have existing images you need to actually regenerate the images in WordPress but to make things simpler I'm just gonna find another image of a happy person and just go for a large really large image or as large as possible I guess let's get this kid save the image and we'll go and change the featured image to this kids photo and actually that's a really small photo as well so I should probably find something that's a bit larger and just do that that's two megapixels okay all right okay that didn't work clearly let's just click on this and go to that specific page and see if we can download the image off there yeah cool so let's download that and we will assign this image of this lady and its 2560 by 1440 so it's huge we'll set it as a featured image and update it and now that we've uploaded this image straightaway after we've set made the settings for the new image sizes it will automatically create them and if you already have existing images you want to download a plugin called force regenerate thumbnails and then just regenerate the thumbnails and then it will create all those new image sizes so if we refresh it now you'll notice that it should be should be a specific size so let's go and have a look at 800 by 800 as you can see and if you go back to your your single dot PHP if you want it to be the smaller one you can just change it to small list and that will actually show the smaller size image that you requested so what you could do is you could make the actual blog post show the larger image okay and then you could go into the actual category so where it shows all the posts let me just add that onto our onto our menu at the top so it's easier to get into will go into a blog and you'll notice we have two blog posts will go into our archive dot PHP and we will add the that if statement again for the post thumbnail and we'll make it smallest and let's refresh now so that image of that lady should be there and then if we go into test Bob blog post and we add another image so let's just say this child but the image isn't going to come up right because the image is smaller than the sizes we have asks WordPress to resize to so you will notice that that won't work that's why we need to actually use images which are larger than the sizes we specify but as you can see that's how it works so when you click into there the image comes up and you click into here and then the larger image comes up there okay so that that's so basically the end of my simple WordPress theme tutorial there's obviously a lot more that you can learn but hopefully this has given you a rough idea of how to create your own theme and gives you the opportunity to muck around and try and learn new things so if you have any questions please let me know I really hope that this tutorial has been some benefit to you and have a lovely day or night wherever you are in the world thank you

Channel: Mr Digital

Views: 375,178

Rating: 4.900239 out of 5

Keywords: wordpress theme development, wordpress theme development tutorial, wordpress theme tutorial, create wordpress theme, how to make wordpress theme, php, how to, bootstrap, bootstrap 4, jquery, wordpress theme, how to create wordpress theme, wordpress custom theme, wordpress tutorial, wordpress, wordpress from scratch, wordpress themes, web development

Id: pFMgAWkrk8o

Length: 46min 58sec (2818 seconds)

Published: Tue Nov 06 2018