We’re going to start things off by creating a theme as I stated previously. This course does not focus on most of the HDMI out see assess and JavaScript provided to you. This is because WordPress is very flexible when it comes to developing themes. With that said I already have a static template ready. You can download this template in the resource section of this lecture. This template was built with Version 4 of bootstrap. I’ve done nothing to this template that makes it WordPress ready. I will walk you through every step to convert it from a static template into a WordPress theme. If you have a template ready then feel free to use it. You don’t have to make any CSX or H team l changes at this moment any kind of template will work.
If you’re new to WordPress development then I recommend you use the template I provide. Let’s take a look at some of the pages. Let’s view the home page as you can see everything is pretty standard. We have a header footer sidebar and a list of posts everything that you see here will be turned into a fully functional theme while the design is simple and clean.
Don’t let that fool you. We’re going to make this thing very flexible now that we have an idea of what we’re going to create. It’s time to start coding open the text editor of your choice and point it to the WordPress directory we installed in the previous lecture inside the wordpress installation navigate to WP dash content slash themes. This is where WordPress will search for theme files from the start. WordPress has already prepackaged some themes for you. We want to keep our theme separated from the rest of the themes so create a new folder called Udemy it’s required that you create a folder for your theme.
This is so themes don’t conflict with each other. It’s also great for organization. Inside this folder you will have to create two files. The first file is style that CSX and the second file is indexed not BHP. These are the only two files required by WordPress to create a theme. These style dot CSX file is where we will place or file header information. A file header is just a comment block placed at the very top of the style that CSX file that describes our theme. Let’s open this file and create a file header in the resource section. I provide the link to more information about the file header the file header is a block comment placed at the top of the file that has met information about a theme or plugin.
I’ll explain more in just a moment but let’s see this in action. Scroll down to the theme file header example section. Copy and paste this into the style that CFS file. I’m going to remove most of this info except the theme name change this value to you to me. That’s it. This is the absolute minimum requirements for a theme. Go to your WordPress admin dashboard and navigate to appearance themes an empty block with the theme name Udemy should appear. You can actually activate this theme and start using it. If you did everything right then you should receive no errors. Let’s go to the front end of the site. You’ll see an empty page.
However WordPress throws no errors because we did everything required. If you take a look at the source code then you will find that WordPress added absolutely nothing because that’s our team’s job. As you can see WordPress gives you complete control over your theme. Let me prove this even further. Open the index top page PDF file and add the text. Hello World refresh the front page and you will now see it output it. WordPress is very smart and will automatically load this file without us having to write any logic the index stop page PDF file can be thought of as the default template for wordpress. There are various templates we can create but we’ll cover that later. I’m going to temporarily switch back to the theme 2017 then I’m going to delete the index stop the HP file. I’m going to refresh the admin things page and you’ll notice that the broken theme section appears below. It’s telling us that the index stopped Pete. Templar file is missing. WordPress is capable of finding out this information even though this theme is inactive the absolute minimum requirement for creating a wordpress theme is the style that CSX indexed P2P files and the file header with just the name of a theme.
I’m going to create the index stop page file again so we don’t see this broken theme section let’s go back to the file header in the style that CFS file. Let me go over what’s going on when WordPress retrieves a list of themes in your wordpress installation. It’ll go to the WP dash content slash themes folder each theme should have its own folder and WordPress will go through each one and look for a file named style dot CSX. If this file is available then WordPress will scan the contents of this file and look for something called the file header.
If a file header is available WordPress will then extract each piece of information from that header. The format is the name followed by a colon and then the value the data inside this comment is what WordPress calls meta information for themes. The only thing you need is the theme name. I’m going to rehab the medic information we previously removed. Let’s go over this one by one. The thing you are awry is a link to where users can view where your theme can be found officially. I’m going to remove this piece of information. Feel free to keep or remove it as well. The author is the name of the creator of this theme. This can be your own personal name or if you’re on a team then the name of your team. I’m going to set this to Jack. The author you are why is the U.R.L. to your own personal site or you are to your team’s site. I’m going to set this to HDD P.S. Cohen slash slash u to me dot com the description is a brief summary about your theme.
Let’s set this to a simple bootstrap wordpress theme the version is the current version of this theme since this is a brand new theme. We’ll be setting this to one point zero. You can use whatever version schematic you want. WordPress doesn’t force you to stick any specific version schematic. The license is simply the name of the license you’ll be using. I’m going to leave this as is for now. We’ll be going over licenses later in this course. The license you are righ is the your l to where the user can find more information about the themes license the tags is the comma separated list of words that describe your theme. This piece of information is used by wordpress theme repository to help users find your theme. If you plan on uploading your theme to WordPress dot org then setting this piece of information is important. I don’t plan on uploading this to the repository so we can remove this. The last property we can set is the text domain the text domain is very important when it comes to translating our theme. You can think of the text domain as a unique idea for our translations. It’s common practice to set the text domain to the same name as your folder. In our case we’re going to set it to you to me I promise you we’ll be going more over what the text domain does and its role in WordPress development later in the course. For now just know that if you want to make your themes or plugins translate ready then set the text domain to something unique. Right below there’s this small bit of text you do not have to add this bit of information. Authors usually use this space to add in more info about the theme such as license info or developer notes. WordPress will not bother standing this part of the file so you did not have to worry about it.
I’m going to remove this bit. Let’s go back to the themes admin page and refresh the page.
You can click on the theme and you will now see some of our information displayed. As you can tell so far WordPress handles a lot for us. If you’d like to know more about file headers then I highly suggest you read the Codex page I provided earlier. This page details what metadata you can create. You’ll notice that it provides information about creating plugins.
I want you to ignore this for now as will be developing plug ins in a future section. There’s one last thing I want to do before I end this election while not required. WordPress will search for a file called screenshot dot PMG. This file is basically a screenshot of your theme that will be displayed on the admin side of WordPress and the resource section I provide a screenshot.
You can use for our theme upload it to the Udemy theme directory we just created. You can now refresh the themes admin page and you will now see our screenshot being displayed. You can create your own screenshot if you’d like. The recommended size for a screenshot is 8 80 by 6. However you should double the size for retina devices. We’re going to start things off by creating a theme as I stated previously. This course does not focus on most of the HDMI out see assess and JavaScript provided to you. This is because WordPress is very flexible when it comes to developing themes. With that said I already have a static template ready. You can download this template in the resource section of this lecture.
This template was built with Version 4 of bootstrap. I’ve done nothing to this template that makes it WordPress ready. I will walk you through every step to convert it from a static template into a wordpress theme. If you have a template ready then feel free to use it. You don’t have to make any CSX or H team l changes at this moment any kind of template will work. If you’re new to WordPress development then I recommend you use the template I provide. Let’s take a look at some of the pages. Let’s view the home page as you can see everything is pretty standard. We have a header footer sidebar and a list of posts everything that you see here will be turned into a fully functional theme while the design is simple and clean. Don’t let that fool you.
We’re going to make this thing very flexible now that we have an idea of what we’re going to create.
It’s time to start coding open the text editor of your choice and point it to the WordPress directory we installed in the previous lecture inside the wordpress installation navigate to WP dash content slash themes.
This is where WordPress will search for theme files from the start. WordPress has already prepackaged some themes for you. We want to keep our theme separated from the rest of the themes so create a new folder called Udemy it’s required that you create a folder for your theme. This is so themes don’t conflict with each other. It’s also great for organization.
Inside this folder you will have to create two files. The first file is style that CSX and the second file is indexed not BHP. These are the only two files required by WordPress to create a theme. These style dot CSX file is where we will place or file header information. A file header is just a comment block placed at the very top of the style that CSX file that describes our theme.
Let’s open this file and create a file header in the resource section. I provide the link to more information about the file header the file header is a block comment placed at the top of the file that has met information about a theme or plugin. I’ll explain more in just a moment but let’s see this in action. Scroll down to the theme file header example section. Copy and paste this into the style that CFS file. I’m going to remove most of this info except the theme name change this value to you to me. That’s it.
This is the absolute minimum requirements for a theme. Go to your WordPress admin dashboard and navigate to appearance themes an empty block with the theme name Udemy should appear. You can actually activate this theme and start using it. If you did everything right then you should receive no errors. Let’s go to the front end of the site. You’ll see an empty page. However WordPress throws no errors because we did everything required. If you take a look at the source code then you will find that WordPress added absolutely nothing because that’s our team’s job.
As you can see WordPress gives you complete control over your theme. Let me prove this even further. Open the index top page PDF file and add the text. Hello World refresh the front page and you will now see it output it. WordPress is very smart and will automatically load this file without us having to write any logic the index stop page PDF file can be thought of as the default template for wordpress. There are various templates we can create but we’ll cover that later. I’m going to temporarily switch back to the theme 2017 then I’m going to delete the index stop the HP file. I’m going to refresh the admin things page and you’ll notice that the broken theme section appears below. It’s telling us that the index stopped Pete. Templar file is missing.
WordPress is capable of finding out this information even though this theme is inactive the absolute minimum requirement for creating a wordpress theme is the style that CS indexed P2P files and the file header with just the name of a theme. I’m going to create the index stop page file again so we don’t see this broken theme section let’s go back to the file header in the style that CFS file. Let me go over what’s going on when WordPress retrieves a list of themes in your wordpress installation. It’ll go to the WP dash content slash themes folder each theme should have its own folder and WordPress will go through each one and look for a file named style dot CSX. If this file is available then WordPress will scan the contents of this file and look for something called the file header. If a file header is available WordPress will then extract each piece of information from that header. The format is the name followed by a colon and then the value the data inside this comment is what WordPress calls meta information for themes. The only thing you need is the theme name.
I’m going to rehab the medic information we previously removed. Let’s go over this one by one. The thing you are awry is a link to where users can view where your theme can be found officially. I’m going to remove this piece of information. Feel free to keep or remove it as well. The author is the name of the creator of this theme. This can be your own personal name or if you’re on a team then the name of your team. I’m going to set this to Jack.
The author you are why is the U.R.L. to your own personal site or you are to your team’s site. I’m going to set this to HDD P.S. Cohen slash slash u to me dot com the description is a brief summary about your theme. Let’s set this to a simple bootstrap wordpress theme the version is the current version of this theme since this is a brand new theme. We’ll be setting this to one point zero. You can use whatever version schematic you want. WordPress doesn’t force you to stick any specific version schematic. The license is simply the name of the license you’ll be using. I’m going to leave this as is for now. We’ll be going over licenses later in this course. The license you are righ is the your l to where the user can find more information about the themes license the tags is the comma separated list of words that describe your theme. This piece of information is used by wordpress theme repository to help users find your theme. If you plan on uploading your theme to WordPress dot org then setting this piece of information is important. I don’t plan on uploading this to the repository so we can remove this. The last property we can set is the text domain the text domain is very important when it comes to translating our theme. You can think of the text domain as a unique idea for our translations.
It’s common practice to set the text domain to the same name as your folder. In our case we’re going to set it to you to me I promise you we’ll be going more over what the text domain does and its role in WordPress development later in the course. For now just know that if you want to make your themes or plugins translate ready then set the text domain to something unique. Right below there’s this small bit of text you do not have to add this bit of information.
Authors usually use this space to add in more info about the theme such as license info or developer notes. WordPress will not bother standing this part of the file so you did not have to worry about it. I’m going to remove this bit. Let’s go back to the themes admin page and refresh the page. You can click on the theme and you will now see some of our information displayed. As you can tell so far WordPress handles a lot for us. If you’d like to know more about file headers then I highly suggest you read the Codex page I provided earlier. This page details what metadata you can create. You’ll notice that it provides information about creating plugins. I want you to ignore this for now as will be developing plug ins in a future section. There’s one last thing I want to do before I end this election while not required. WordPress will search for a file called screenshot dot PMG. This file is basically a screenshot of your theme that will be displayed on the admin side of WordPress and the resource section I provide a screenshot.
You can use for our theme upload it to the Udemy theme directory we just created. You can now refresh the themes admin page and you will now see our screenshot being displayed. You can create your own screenshot if you’d like. The recommended size for a screenshot is 8 80 by 6. However you should double the size for retina devices.
