What you are gonna learn in this tutorial? It’s custom wordpress theme development.
Note: Before starting let me tell you it’s a complete guide only for those who want’s to become custom WordPress theme developer. In this guide, we are building our own custom WordPress theme but before that, we will grip the basics. There will be around 15 parts of this guide which will make you, definitely a good WordPress theme developer.
- Requirements to start custom wordpress theme development
- Location where your wordpress themes exsits and create your wordpress theme folder
- Recognize your theme by image
- Two important files to initate wordpress theme
- Write the bio about your created theme (Name, description etc)
- How to set thumnail of your wordpress theme?
- Introduction to bloginfo() function
- Famous wordpress loop, the_post, the_title, the_content, the_permalink
- Role of index.php, page.php, single.php
- Role of header.php and footer.php
- What’s the functionality of get_header and get_footer
- How wp_head & wp_footer works?
- Write your first function in functions.php
- add_action concept in wordpress
- What are hooks in wordpress?
- wp_enqueue_style, wp_enqueue_script
- get_stylesheet_uri function concept
- Difference between wp_header & get_header
- Create your first and main function file in wordpress
- Download html template
- Start converting downloaded html template into wordpress
- And many more…
Before going in depth I want to recommend you to read this article first, the benefits to become a custom WordPress developer and some initial steps: Custom WordPress Theme Developer Guide
Requirements to start development in WordPress:
First thing first, you should have skill of php development. It’s very important for WordPress, why? Because, WordPress is written in php. Now, if you have basic skill in php than you can proceed with this article. One more thing to mention here, I am not going to train you about installation or setup of WordPress, I have already posted Resources to install and setup WordPress theme you can check and first learn it. Are you ready to learn and earn from the theme development? Let’s proceed.
Location of your WordPress themes:
Actually, when you download and install WordPress on your local environment. I hope you have installed it? If yes than just go to the folder where you installed WordPress then wp-contents folder after that go to themes here in this folder you will find your themes. Now, choose your WordPress theme folder name and create it in themes folder. Just like I created wptuts check image below:
At the moment you have created your wordpress theme folder, let’s visit to the wordpress dashboard and go to appearance > themes. You created the theme folder right? Why it’s not displaying in the themes section. Just scroll down to bottom of this themes page on your wordpress dashboard and check the errors. You will see some errors like below in image. What it says? Stylesheet is missing. So, what we need to do is to create two most important files. Let’s create in next step.
Two important files to initiate wordpress theme:
As you saw the errors that we were facing in the above section. So, here is the solution to resolve them. Let’s create the css file or the main stylesheet file for our theme. Note: The naming convention should be as it is. Open the folder of your theme into an editor so it will be easy for us to code and add edit files in it, you can choose whatever editor you want i will use brackets. Now, you have opened code editor let’s create style.css file. After that refresh themes page from your wordpress dashboard, your stylesheet error will no longer there but you will see another error of index.php missing. Create index.php in the same directory which is your themes directory for reference like “wptuts”. Now, reload the themes page there will be no error there. Errors are gone Hurrah!
So, you have finally cleared that there are two main files which are very important to initiate a wordpress theme. First one is style.css and second one is index.php, cleared? Let’s move to the next step.
Recognize your theme by using image:
In the market you have seen too many themes that have customized or branding image on it. How they placed that images on their theme? Well, it’s not a rocket science all you need is to create your own branding image with any of the designing tool and just export it in dimension of 1200px wide and 900px tall. It’s highly recommended size, now you are thinking what could be the name of that image? Well, the extension of that image should be .png and name screenshot. So, name of the file becomes screenshot.png. Just place that image in the directory of our wordpress theme.
Now, we have three files in place : index.php, style.css and screenshot.png.
Write the bio about your created theme:
Writing bio about a theme is the next big step. If you have seen wordpress theme for example below we have default wordpress theme Twenty Seventeen.The image shows that a wordpress theme has it’s specific name, theme url, author name and description. And your cretaed theme don’t have it right? Check it by clicking on your theme from theme panel in dashboard.
When we create the theme it’s essential to write theme bio. At the moment you are questioning where to write the theme details? Actually, you only need to write the comments in style.css file at the top of file.As you can see in the image below:
Theme Name: The name of wordpress theme you have wish to write.
Theme URI: The web page from where your users can purchase this theme or have details about the theme.
Author: The creator of theme
Author URI: The url of creator’s website or any link from which we can create the author.
Description: The description that will describe your wordrpress theme.
Version: Version if you have plans to update your theme in future than you could write the version here.
Tags: Tags helps the theme to be recognized in the wordpress market engines.
Note: Custom WordPress Theme Development Part 1 is not completed yet. It’s a very long article .Don’t forget to share on social media channels and help others to learn and earn. Use Hash tag: #CustomWordPressByShanShah.com.