Create a responsive wordpress theme from scratch

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.
1. working with Header.
2. working with menus.
Customization of WordPress sidebar.
1. working with the custom search form.
2. working with widgetized areas.
Customization of WordPress Footer.
1. making responsive footer.
2. 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.

Tools required while creating a responsive WordPress theme step by step:

1. Theme Unit Test Data:

But before applying any styles and customization to this theme, we need to have some content on our WordPress site.Instead of writing content by yourself, I would recommend you to use Theme Unit Test page Data, This is XML file which contains the number of Images, Post, and Pages with author name.

So for that visit Theme Unit Test page on the WordPress Codex Now, Download test data XML. After you download the XML file import that content into your WordPress site.

First Go to, Dashboard=>Tools => importand select WordPress. Now WordPress will ask you to install WordPress Importer if you don’t have installed it. After the installation ofWordPress Importer plugin, select XML file that you downloaded and upload it. Now you have all the possible content that a WordPress site can have.

2. Developer Plugin

While building your own theme, you also want to get notified when something is not going smoothly, for that purpose we need to install Developer plugin, you can directly installit from WordPress plugin directory. This plugin is brought by Automattic, It is a bundle of a number of plugins which are helpful while developing the theme.

You can use any Text Editor for developing themes, like Sublime Text Editor or Notepad++ But I would recommend you to use IDE like Netbeans, PhpStorm or Eclipse.

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,