April 7, 2020
WordPress 101: Create a Theme from Scratch

WordPress 101: Create a Theme from Scratch

hey what’s going on guys Alex here and thank you for checking this video and this is the first of a series of tutorial about WordPress and the series is WordPress 101 for beginner developers so before starting just a little announcement that is not an actual announcement but anyway if you’re already skilled with WordPress you already know what to do how to build a theme a template this is not the video for you this is totally a beginner beginner level video I’m going to explain how a wordpress template is built oh you can start from scratch and it’s going to be really detailed and probably really boring if you don’t want to check this video of course YouTube this full of way better tutorial that this one my tutorial is just for really really absolutely beginners but stop talking and let’s get started this is my basic WordPress installations you can see it’s on my local machine I install Apache my sequel on install WordPress and it’s a standard WordPress running I did nothing about is totally the standard ministration panel in the appearance we can see we have our three default standard themes there are the 2015 14 and 13 and outside is pretty empty by default it selected a 2015 that is the last team developed by the word press developers so going back here we can open our editor i’m currently using coda but you can use whatever editor you need you can also code in a text editor if you feel confident so let’s start by default this is your wordpress folder this is the standard default wordpress folder and when it started using wordpress the first time I wordpress folder i had a little bit of heart a hard time because i couldn’t figure it out all these files will were where is my team where is my template how can I get it the font how can I do the collar how can I create my own template and what are those files it’s messy and it’s confusing beginning so let’s start by saying don’t care about this just ignore completely this is the core this wpm intimately includes and all these files outside the folders you don’t have to care about them its standard WordPress installation and you don’t have to edit those files the wp-config.php file is the one that connects wordpress to the database wordpress configured this files for you during the standard installation so you don’t have to care for now about these files just completely ignore it they don’t exist so it’s fine what we have to care about is the wp-content folder we can open the folder and we can see that by default WordPress creates for us the plugins folders in the team’s folders and this index dot PHP that usually it’s completely empty is just open the PHP tag and then is amazing comment as silence is golden but by default these are the two folders that we have to care about and where we are gonna do the majority of our code so let’s start by opening one of this team for example the 2015 that is the last the most recent template developed by wordpress and a double click on the folder so we can just check the structure and as you can see it’s kind of huge its massive my first reaction when I saw these files were oh my god I I’m never gonna be able to do this there’s too much file too much logic too more too many things to remember how can I do it at don’t worry it’s totally easy it’s easy to remember WordPress is a really solid logic and you don’t have to care about connecting interactive or interacting between these files because if you follow the rules that WordPress creatives WordPress is going to recognize all these files is gonna create the team for you and Aaron is gonna work no problem so let’s get started with our own template with our own custom teens like a bad to WP content team and let’s say I want to create a new team I want to create a new team from scratch so the first thing that I have to do is create a folder with the name of the team so create a new folder and we’re gonna create like awesome team so inside is empty the first thing that I did when I start getting wordpress was opening a temp later was a team that was already build a copy oldest files and passing into my team and then changes slightly little bit thing and using the default functionalities just because i was i was really lazy and i wanted to use a pre-made code but then going on i understand that i have to start from scratch i have to code everything from scratch by myself I don’t have to be lazy because if I learn how to think it’s made of how it’s built it I can recreate it and I can code it by myself without any problem so let’s start by default we created this folder awesome theme if we go in our WordPress installation in appearance teams we see the automatically WordPress by default recognize there’s something’s going on inside team folders but he said way this team is broken the files are missing there’s something that is not probably working so we’ll press lists for us inside the team page our team that is austin t recognize also name but it says also the style sheet file is Miss in so if you want to use this team you have to work a little bit more and not just create a single folder so let’s go back to our editor we open our folder the first thing that we have to do is create a style dot CSS file so style.css it is if you already know what’s a CSS file is you know that is for is to style up a page is a cascading style shit so the first question that I used to have when I started coding wordpress themes was why I have to create a style shape before creating a actual team structure like an HTML page or a PHP page why do I have to create a CSS style before everything else because WordPress use the style dot CSS and be careful to use these exact name to collect information and to print information of your team in your administration panel so if we open the file we have to start writing the description in the name of our team so what’s our tea is made of why is the name of our team was the the other name the description the license all a bunch of information that WordPress need so as you can see i created a code common tag to list all this information and wordpress is really powerful because if we write team name and we call it awesome team and we team you where I and we say that this team is from my local oh sorry let’s say de da calm / awesome team and the auth or it’s me so it’s a CAD and a description this is an awesome team with these standard and basic information WordPress is going to be able to recognize the team and give it some preview let’s see what’s going on in our administration panel let reload the page and let’s see that doesn’t require any more the style but the template is missing so something is missing because he cannot visualize the team inside our team is still broken so let’s start creating the basic structure what WordPress needs rest our wid new file index dot PHP the index file is the basic file is the file that WordPress access by default as soon as a user hit your your website so let’s use it inside the index.php file you can print the loop of your post you can visualize your pages you can visualize your categories your tag pretty much everything you can even avoid if you wanna keep it super basic to create other pages you can put everything inside your PHP file but because we’re press suggest a specific guideline to properly build a template and to make it as as easy as possible to manage oh you’re all the aspects of your template let’s follow the rules so the first rule that we have to follow is to create a header PHP and a food or PHP the top at the bottom the top and the bottom of our WordPress team so new file header dot PHP let’s open the file and let’s start with some HTML boilerplate doc type HTML let’s open the HTML tag let’s open the Hat tag let’s use a matter charset utf-8 always use utf-8 let’s use the tile awesome team oops let’s close the Hat and let’s open the body so this is our header by default we don’t have to close the body we don’t have to close the HTML because these two things are going to be close inside the next file that we’re going to open and what’s the next file and X file is the footer.php that is the file that close our team soap new file shooter dot PHP let’s open the footer and let’s close the body let’s close HTML that’s clean the annotation a little bit and if we want here we can use shooter and this is my fitter if you want if you want to write something pretty so this is our standard template we start with a header inside the other we open the HTML we open the head and we open the body inside the footer we close the body and we close the HTML and it’s out the index PHP we can write something for example h1 this is my endless Daisy’s our basic structure of our custom team so let’s go anywhere teen section in the administration panel let’s see what’s going on Oh in the bottom we don’t have any more the error message because our team now by default as old default at the necessary files there wordpress user to generate our amazing team so as you can see by wordpress by default it creates this preview we don’t have a screenshot preview but doesn’t matter we can add it later and if we click on Team details we’re gonna see that the title Austin team is the same title we enter before the author is the other enter and the description disease awesome team is the description and I insert inside my coat so just check it if you want to expand a little bit the information that we want to use inside the wordpress theme description we can implement an author you where I and I’m gonna say that the URI is my website and we can specify a version of templates you point 1 alpha because we are working in it and if a1 a1 wanna be like kind and open my team to everyone I can specify a license and by default you can specify a general public license version to Daddy new version for open sores and remember if you specify as specific license if you choose a specific license always insert also the license URI and to complete our style.css file we can enter also at tags lists the tags list is good if we want a deploy our template our team inside the WordPress team representative for example let’s say one my Asantehene to be black by default and with white colors and be responsive to columns and I won the option of huge red images custom menu custom patter let’s say also that by default is kala just to pump up our results and we have tossed formats and we can’t say that said this is our tag we save the file we’re going to check inside our team reload the page open the team details at wawa we have all our information to name the version now because I specified it author URI I can click on this uri and access my website that is a loading super slow but there it is finally and we have the description and all the tags that we specify before and this is amazing this is super easy if we click on live preview of course what we’re going to see just what’s inside index this is my index the h1 tag that we created before in our index page so now let’s go to the light side or the front end and we can see that after activity in a World War us we we see what’s inside our index dot PHP file that is the first thing that as I said WordPress access when he your website let’s inspect the source code to check what’s going on and as you can see here something’s missing it’s missing the doctype HTML is missing my meta charset information is missing my title what’s going on why wordpress cannot grab this information is missing also my feeder where is my footer this is a super simple thing to do by default WordPress built for you the entire theme using preset file name to include these files name we have to use the word press tag for example if a one in my index dot PHP include the adder I can simple simply open PHP tags and get header oops maybe if I write it header this code is up code by wordpress wordpress recognized that i want to include my header inside the index dot PHP and because i don’t specify any other information by default WordPress is going to look inside the team folder created for a file called added PHP the same thing is gonna happen if I specify simply get footer so let’s reload our page and as you can see we have finally our doctype we have inside the header the information utf-8 our title and we have also our footer where we include so this is our default WordPress team and this is our just a simple first step as you can see is super easy you can include all the files that you generate you can edit and you can manage all the single separated file without recreating every time a file to contain on the information and this can be our starter team this can be our first step to understand how a word wordpress theme works and how we can keep going from this point to create our real awesome team so thank you for listening thank you for following this super easy as I said is a super beginners beginners class and in the next lesson we’re going to start actual creating and using WordPress functionalities to pull our to create a proper CSS file to create a javascript file and to start printing our post lives our pages and all the information that we insert in our WordPress administration panel so thank you again for checking this tutorial my name is Alex and if you enjoy please give it a thumbs up or subscribe to my channel if you don’t give a shit anyway thank you for listening see you next time

100 thoughts on “WordPress 101: Create a Theme from Scratch

  1. Hello great guy. This is one of the guys to had a live video chart with in Port Harcourt, Nigeria. Just want to say your tutorial is great. Thanks

  2. Why cant we use Html instead of php?please reply i am new to wordpress and i haven't learned php but i know html and css .

  3. Everything else is good but I think you pronounced Team instead of Theme, which is confusing …. no offence…

  4. Awsome video thank you so much… I wonder wich progam i can use to develop for wordpress, currently i am using cpanel but it is reeallllyyy hard to do it with own editor. so what shold i use instead?

  5. Li Alessandro, Thank you for all the tutorials. I finished them all. I have some fews questions that i want to ask. How did you add the search bar on the nav bar?

  6. Great tutorial! just a question though…how did you get the wordpress to run locally and how did you install it? Is it the business plan?

  7. Thank you so much for this tutorial. I am getting an error and unsure why this is happening when I go to preview on my browser.
    "Fatal error: Call to undefined function get_header() in /home1/sarahjasmine/public_html/wordpress2/wp-content/themes/awesometheme/index.php on line 1"

    I am unsure why WP is not recognizing the get_header function. please help anyone.

  8. This tutorials are amazing and profesional. I'm so happy to found this chanel. It's helping me a lot with my WP development skills. Thank you! Greetings from Venezuela!

  9. Thanks dude. I badly need these tutorials. Wordrpess is my next subject in my full stack training and i was struggling hard to understand how these template files work. Thanks a ton

  10. Thanks for creating this wonderful tutorials, please what text editor can i use that has those wordpress hook on it. am on windows pc. waiting for your reply

  11. Your video is great! I understand English isn't your first language, but the way you say theme bugs the hell out of me. It's not pronounced, T-he-me. You have to say it as Th then add. eme. So it sounds like, Th-eem. I'm not good at teaching English. Just youtube it how to pronounce theme.

  12. Thank you for this tutorial, I got a WordPress project dropped on me out of the blue and this saved my booty! Very clear and easy to understand.

  13. I've been through Treehouse, Udemy and Lynda and I kept fumbling around themes trying to incorporate my own code like this and it wasn't this clear until now.

    Thank you

  14. how can I customize the login screen without using a plugin and without creating another template page? I tried targeting id="login" in my style.css and changing the background-color, but it did not work.

  15. I didnt understand how you worte the Theme URI
    what exactly is to be written in that Theme URI
    please answer this

  16. This is amaaaazing thank you for this! I just have one question – How did you get up the code at 17:53 whilst looking at the theme? thanks! 🙂

  17. Hi Sir

    could you tell me the extension names that we have to activate in text editor(I am using Brackets) to run wordpress functions

  18. By far the best beginner tutorial I found. All other tutorials don't really explain a lot (regarding the built-in wordpress functions), which leaves me assuming a lot of stuff. Thanks for your effort

  19. i can not locate my theme in the Appearence in WordPress allthough i have done everything correctly. What is going wrong ?
    Can someone help me out please ?

  20. Hello your tutorial is amazing, but do you have any other advanced wordpress development tutorial or can you suggest me any other advanced tutorial ?

  21. Hi Alessandro! Is it possible for you to upload a video on the standard installation of wordpress. i downloaded the wordpress 5.1.1, have the same wordpress folder structure as shown in the video but not sure how to install wordpress next. Since i couldn't do it, i went ahead and installed via bitnami.

  22. It would be really nice if you show us the final product so we beginners know where we heading at but I do appreciate these tutorial vids and will check them all out. You got a sub also!

  23. Great video, very straight forward and understandable! I watch 15 videos to try and understand how to create a theme and they were all over the place. Some multiple videos with this topic smh but your was the best. Thank you for taking your time to help others!

  24. Hi bro,

    I have one doubt.
    where this will be useful Blog pages show at most(what we set in setting–>readings).
    It was set to 10, but where ever i need to display posts i am setting posts_per_page manually in wp_query to 16..
    but some where this query hitting due to reading setting

    this is the query frequently hitting

    SELECT SQL_CALC_FOUND_ROWS  wp_posts.ID FROM wp_posts  WHERE 1=1  AND wp_posts.post_type = 'post' AND (wp_posts.post_status = 'publish')  ORDER BY wp_posts.post_date DESC LIMIT 0, 10;

    how to know where it is hitting?
    can you please help me out??

  25. It's been a while since this was put up, but my immediate thought was – Alessandro – don't put yourself down with making this extremely helpful tutorial.
    Everyone was once a noob, but every noob forgets.
    – This video is precisely what I've been looking for, and I should imagine; others as well.

    It's at that stage where you've got your local version of WordPress up and running, .. then you're stumped as to what to do with it to make you're awesome theme .. (or plugin).
    – You have an idea, but can't get past the primary basics.
    Just before the vast chasm of primary nothing, is that (huge mental leap) that everyone else out there makes when discussing what to do in developing a WordPress website.
    – Take the style.css file for example, most other vids delve straight in : then professionally discuss text colour, – positioning, – borders and background hues, and not one actually explains what that file does, ..
    (You just did: well done).

    This tutorial really got down to the absolute basics of how to get a WordPress bare-bones theme up and running. Don't be ashamed of being a chasm-less primary school teacher, ..

    Subscribed, thumb's up, – and now looking forward to part two.
    RGDS – Terry the noob.

  26. I think you should remake this tutuorial with an explanation on how to install coda. I'm a true beginner and I can't start without knowing how
    to install coda

  27. Awesome video! Very well explained. Very nice for coding, vs the other how to videos. Drag and drop.. If you don't give a shit 21:02 =)

  28. I have been surfing the web in search of an explanation like this for two weeks. It blows my mind how people like to make this seem way more complicated than it is! THANK YOU!!!

  29. Really useful tutorial, however please learn how to say "themes" correctly. found it difficult to understand what you mean with closed captions on.

Leave a Reply

Your email address will not be published. Required fields are marked *