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