When I started using WordPress, all I wanted is to Create a responsive WordPress theme.No, I’m not talking about a child theme or a theme built on a framework. I’m talking about to a Create a responsive WordPress theme from scratch. So in the process of learning How to Create a responsive WordPress theme from scratch, I noticed that there are not many good blogs targeted towards beginners, So I have decided to write series of articles where I will try to cover all the topics listed below,
- Customization of WordPress header.
- working with Header.
- working with menus.
- Customization of WordPress sidebar.
- working with the custom search form.
- working with widgetized areas.
- Customization of WordPress Footer.
- making responsive footer.
- working with social icons.
I will be showing you step by step process and tools required to Create a responsive WordPress theme. To create WordPress theme, you should have good knowledge of CSS, HTML, Javascript or Jquery and PHP.
The Underscores (_S):
Yes, building WordPress theme from scratch seems like intimidating task, But don’t worry you can use underscores also known as (_S).underscores is a starter theme, on top of underscores you can build any WordPress theme, underscores is a constant development process, so you be always working with the latest WordPress has to offer.
Now, For your underscore starter theme go to underscores.meand Type the name of your Theme in Textbox on underscores site after that click Generate as shown below image.
In a few seconds, your download will start and you will have your starter Theme ready based on underscores(_S). After downloading copy of your theme, move that copy to themes folder of your WordPress site and open the Dashboard go to themes section, you will see themes that you have your themes folder, click on the theme that you have just downloaded and you should see below image, by clicking on the Theme details buttons.
Now activate your theme and visit the home page of your WordPress site.Now, you will see broken site with no styling.Now we will apply styles and customize this theme step by step.
How WordPress Theme works:
WordPress works on DRY development principles, DRY is short term for Don’t repeat yourself.Wordpress does not provide a single template for every post and page instead, it uses the same templates to show the each post and pages over and over again. When you visits a WordPress website, for example, let’s take this site itself, On the home page you see the number of posts i.e. your content.php file, inside the loop as shown below image.
When you click on any post link WordPress opens the single.php file, which displays the Single post as shown in below Images. Additionally, you can remove sidebar if you want. This page contains the queries inside the loop and displays the results according to the results.
And when you open any page, WordPress displays the page.php file to display the pages as shown in below image.
Now you know how WordPress theme works, So we are all set to create WordPress theme from scratch, So let’s start by giving identity to our theme.
Create a responsive WordPress theme from scratch
Giving Identity your Theme
Go to your theme directory folder and open the style.css, here you can set your theme’s name, Uri, Author, Description, and Tags.When you will open style.css you will see something like this,
/* Theme Name: My Theme Theme URI: http://underscores.me/ Author: Underscores.me Author URI: http://underscores.me/ Description: Description Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: my-theme Tags: ... ... .. */
Now you can edit theme’s name, Uri, Author, Description and add different Tags as shown below Image. You can use tags to represent all the features of your theme. I suggest you add tags from wordpress.org site, Go to wordpress.org/themes and click Feature Filter button. You will number of filter/tags, select tag suitable for your Theme.
/* Theme Name: My Theme Theme URI: https://codershood.info/ Author: Shashank Tiwari Author URI: https://codershood.info/ Description: MY Theme is fully responsive and created on top of _S. Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: my-theme Tags: Two Columns, Left Sidebar, Featured Images, Custom Header, Gray, Orange ... ... .. */
Now all we have left to do is to give a face to our Theme.Open your theme directory you will find the screenshot.png file. Replace that file with a screenshot of your theme’s. After following these steps, you should see something like this,
I’m starting with a brand new ‘blog. This should be fun.
Thanks for the tutorial so far.