How to make your own WordPress theme from scratch (2019)
- December 21, 2023
- Posted by: MainInstructor
- Category: BASIC Go JavaScript PHP
![*](https://i0.wp.com/allprowebdesigns.com/wp-content/uploads/2023/12/1703194982_maxresdefault.jpg?resize=840%2C430&ssl=1)
Video Title: 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
-
Sale!
Wireless WIFI Repeater Extender Amplifier Booster 300Mbps
$29.99$14.99 Add to cartWireless WIFI Repeater Extender Amplifier Booster 300Mbps
Categories: Electronics, Wi-Fi Router, Wireless Wi-Fi Extender Tags: 300Mbps, 802.11N, Amplifier, Booster, Extender, mobile wi-fi booster, Remote, WIFI, Wireless, Wireless WIFI, Wireless WIFI Repeater, Wireless WIFI Repeater Extender, Wireless WIFI Repeater Extender Amplifier, Wireless WIFI Repeater Extender Amplifier Booster, Wireless WIFI Repeater Extender Amplifier Booster 300Mbps$29.99$14.99 -
Sale!
Full RGB Light Design Gaming Headset Headphones with Mic
$24.99$14.99 Add to cartFull RGB Light Design Gaming Headset Headphones with Mic
Categories: Electronics, Gaming, Gaming Headsets Tags: Design, Full, Full RGB Light Design Gaming Headset, Full RGB Light Design Gaming Headset Headphones, Full RGB Light Design Gaming Headset Headphones with Mic, Gamer, Gaming, Gaming Headset Headphones, gaming headset wireless, Headphone, Headphones, Headset, Light, Mic, Package, RGB$24.99$14.99 -
Sale!
Wireless BlueTooth Multi-Device Keyboard Mouse Combo
$39.99$19.99 Add to cartWireless BlueTooth Multi-Device Keyboard Mouse Combo
Categories: Electronics, Gaming, Gaming Keyboards, Keyboard Mouse Combos Tags: Combo, Keyboard, keyboard mouse combos, Mouse, MultiDevice, Set, WireKeyboard Mouse Combo, Wireless, Wireless BlueTooth Keyboard Mouse Combo, Wireless BlueTooth Keyboard Mouse Combos, Wireless BlueTooth Multi-Device Keyboard Mouse Combo, Wireless BlueTooth Multi-Device Keyboard Mouse Combos$39.99$19.99 -
Sale!
High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar
$199.99$139.99 Add to cartHigh Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar
Categories: Gaming, Gaming Chairs Tags: Adjustable, Chair, computer chairs, Desk, Executive, Gaming, Girl, Headrest, High, High Back Leather Executive Adjustable Swivel Gaming Chair, High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest, High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar, High Back Leather Executive Adjustable Swivel Gaming Chairs, Leather, Lumbar, Office, Racing, Swivel$199.99$139.99 -
Sale!
Professional LED Light Wired Gaming Headphones with Noise Cancelling Microphone
$29.99$19.99 Select optionsProfessional LED Light Wired Gaming Headphones with Noise Cancelling Microphone
SKU: N/A Categories: Electronics, Gaming, Gaming Headsets Tags: Cancelling, Gaming, Gaming Headphones with Noise Cancelling Microphone, gaming headset, Headphones, Headset, LED, Light, Mic, Microphone, Noise, Professional, Professional LED Light Wired Gaming Headphones, Professional LED Light Wired Gaming Headphones with Noise Cancelling Microphone, Wired, Wired Gaming Headphones, Wired Gaming Headphones with Noise Cancelling Microphone$29.99$19.99 -
Sale!
Gaming Desk with LED Lights USB Power Outlets and Charging Ports
$349.99$249.99 Select optionsGaming Desk with LED Lights USB Power Outlets and Charging Ports
SKU: N/A Categories: Computer Desk, Gaming, Gaming Desk Tags: and Charging Ports, Charging, Desk, Desks, Gaming, gaming desk with led lights, Gaming Desks with LED Lights, Home, LED, Lights, Monitor, Office, Outlets, Port, Power, Room, Stand, USB, USB Power Outlets, White, Workstation$349.99$249.99 -
Sale!
Wired Mixed Backlit Anti-Ghosting Gaming Keyboard
$99.99$79.99 Add to cartWired Mixed Backlit Anti-Ghosting Gaming Keyboard
Categories: Electronics, Gaming, Gaming Keyboards Tags: Antighosting, Backlit, Blue, brown, Gaming, Gaming Keyboard, gaming keyboards, gaming keyboards and mouse, Keyboard, Laptop, Switch, Wired, Wired Mixed Backlit Anti-Ghosting Gaming Keyboard, Wired Mixed Backlit Anti-Ghosting Gaming Keyboards, Wired Mixed Backlit Gaming Keyboard$99.99$79.99 -
Sale!
Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset
$119.99$59.99 Add to cartWireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset
Categories: Electronics, Gaming, Gaming Headsets Tags: 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset, ANC, Audio, Bluetooth, Cancellation, Ear, Earphone, gaming headset, Headphones, Headset, Hi-Res Over the Ear Headphones Headset, HiRes, Noise, Wireless, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Headphones, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headsets$119.99$59.99 -
Sale!
Wired Sports Gaming Headset Earbuds with Microphone
$19.99$9.99 Select optionsWired Sports Gaming Headset Earbuds with Microphone
SKU: N/A Categories: Gaming, Gaming Headsets Tags: Accessories, Earbud, Earphone, Earphones, Gaming, gaming headset with microphone, Headphones, Headset, IOS, Microphone, Sports, Wired, Wired Sports Gaming Headset Earbuds, Wired Sports Gaming Headset Earbuds with Microphone, Wired Sports Headset Earbuds$19.99$9.99 -
Sale!
150W Universal Multi USB Fast Charger 16 Port MAX Charging Station
$49.99$29.99 Add to cart150W Universal Multi USB Fast Charger 16 Port MAX Charging Station
Categories: Charging Stations, Electronics Tags: 150W, 150W Charging Station, 150W Universal Multi USB Charging Station, 150W Universal Multi USB Fast Charger 16 Port MAX Charging Station, 150W Universal Multi USB Fast Charger 16 Port MAX Charging Stations, 150W Universal Multi USB MAX Charging Station, 16 Port MAX Charging Station, 3.5A, Charger, Charging, Fast, laptop charging stations, Max, Multi, Port, Stand, Station, Universal, USB$49.99$29.99
Check out my new series for simple WordPress Theme Development – https://www.youtube.com/watch?v=n3EcEYFgyrQ&feature=youtu.be – still under construction but 7 videos so far! Subscribe to be notified when my new videos come out. Will be creating a few per day! Cheers
Do we have a Github Repo for this tutorial.
At 23:30 I believe we dont need add_action('wp_enqueue_scripts', 'jquery'); on line 41 as we and adding it for the function in line 44? Please correct me If I am wrong anyone!
how does the template just appear in your themes do you have to add the files ? please help
Pretty awesome! Thanks!
Hi, Many many thanx for this great tutorial. You make it very clear how to work and explain it very clearly.
I'm not working very long with wordpress and PHP … I was more like an ASP person ..
And i followed every step you did in realtime . But after looking into the source code i found out i was something missing ..
My generated code stopts after body . My style sheet ( style.css ) is presenting a black background like yours
however i don't see my end tags for body and html also al the scripts and extra lines you have there are missing.
Maybe i'm overlooking the problem but i have no clue where it wend wrong… Any ideas ?
Great tutorial 👍
why on my front-page.php command. i can't call get_header and get_footer.
it's say undifined function on may vc editor. can anyone help me on this. thanks
sir when i tried the same code in archive.php it didn't worked. The entire blog content was shown. Why?
please send me all these files
I have a problem with add_image_size, it does not work for me. I have big images 4k resolution, I set img-fluid, I reuploaded them, I even installed and activate the plugin "Force Regenerate Thumbnail", but the image is not cropped at 300×300 or 800×800 like in the video. I could not find a good answer on google. Has anyone this problem?
Thanks very educative, one thing is you can upload a copy of all the files on git, people can use it.
Hello, I'm new to wordpress and have got stuck on the Left Side and Right Side in Functions.php. After flowing the video (very good description) my Left Side and Right Side are below each other not like in the video. Have good over the code many times for mistakes and spelling errors. Please can some help me with this so I can move forward. Many Thanks James
Good
Awesome tutorial, thanks!
How do you get the live preview of your theme?
I am working inside the wordpress folder on my computer. I can't see the theme in wordpress. I tried to upload my theme folder via FTP, but it didn't work.
How can I work on my theme and see the changes live at my website?
Any help would be much appreciated.
This is by far the best tutorial for someone starting on his first template! Clear, straight to the point, and showing common mistakes and how to solve them.
Thank you
As soon as you said you were going to drag it to your code editor, you lost me!
4th tutorial I tried it was also the only one I could follow without having to do a lot of extra installs. Thank you very much.
I’m not able to see home front page in pages option.
Excellent work!!!!!!!!!!!!need same tutorial for sidebar and footer 🙂
Hello I'm new to your channel and I ran across your video which is great! But I wanted to find out do you have to know php to build a custom theme in WordPress? I currently don't know it just html,css and javascript. I see the language isnt much different that javascript, but I rather not learn it until I get a job as a wordpress developer.
Literally glued to the screen for the whole video. I never understood how WP is put together but this has just booted the doors open for me!
Thanks so much very good Tutorial
21:09 No need to enqueue JQuery in functions.php because WordPress has in-build JQuery and a few others library. We just need to write 'jquery' in dependency array.
Got a new gig and just wanted to see if there were any changes in how WP custom sites are built. I learned a lot. Thanks for contributing your skills and knowledge to all who watch. I gave you 2 thumbs up. 🙂
Better than the freecodecamp video, and a third of the length! 😀 Great work!
It's still working perfectly in 2022, but I have one issue. The single pages display perfectly, but I cannot get the archive to work. Most likely scenario is I did something stupid, or made some typo that my debugger hasn't picked up. Can anyone help please?
I've been so lost with some other videos explaining this, but you explain things clearly and cut right to the chase. Great video, very helpful! Thanks a lot!
Amazing Video, I feel like I finally understand WP. Thank you so much!
It is 2022 and this video still is the best tutorial on developing a basic wp theme. Thank you so much!