In this section, we'll see how to create our theme files and enable a theme. We'll use Sublime Text and add the project folder, so that we can access the files easily:
- Go to C:Amppswwwwpthemes.
- The folder in which you want to create your theme is going to be themes, which is within the wp-content folder:
You can see here that we have the three themes that come with WordPress already installed, namely twentyfifteen, twentyseventeen, and twentysixteen.
- We'll create a new folder and call it simple. This is going to be the name of our theme:
There are two files that you absolutely need in order to enable your theme: one will be style.css, and the other will be index.php. Now, the reason we need style.css is because that's where all of our declarations, such as theme name and the descriptions, go.
- We'll open up a comment block and enter the fields, shown as follows:
You can refer to the documentation at https://codex.wordpress.org/Theme_Development, which shows all the different fields that you can use. We'll not use all of them as they're not required. Theme Name is all that's required, but it's good to have some other information as well.
- We will enter the Theme Name as Simple. We also need to have an Author; you can put your own name there if you'd like. We'll also have Author URI. If you are creating themes for clients, you'd probably want to put your company's website there. We can have a Description. We'll enter Very Simple Wordpress Theme, and then enter Version: 1.0. Let's save this. Now, just having this information will allow WordPress to see your theme.
- Now let's go back into our localhost/wpthemes/wp-admin/themes.php backend, and go to Appearance and then Themes; you can see the Simple theme, and we can actually activate it:
- Now, in order for a screenshot to show in the Simple theme, we need to put an image in the root of the theme folder and call it screenshot.png:
- Let's create a sample screenshot using Photoshop, which just says SimpleTheme, and place that in our theme folder, as shown in the preceding screenshot. Go to the server root, wwwwpthemeswp-content hemes, and then simple. We'll just paste that screenshot in there. Now if we go back to the backend and reload, you can see that we have a screenshot, as shown here:
Well, it's not really a screenshot but it's an image.
- Now if we go ahead and activate our theme for this, and go to our frontend and reload—we get absolutely nothing because we haven't added any code yet:
Our theme just contains nothing, it's completely blank.
- Now let's open the index.php file and enter TEST, then save and reload; we can see that we get TEST on our frontend too:
Basically, it's reading our index.php file by default.