How to Develop a WordPress Theme in One Day

You are here : Home / How to Develop a WordPress Theme in One Day

A WordPress theme is a collection of templates files that decide the layout and behavior of your WordPress site. Themes have information about the design of the website, and other elements such as logos, headers, sidebar and footers.

There are thousands of free or paid WordPress themes available online. But they are not 100% suitable for our website so any person with little knowledge in HTML and CSS can simply make their own WordPress themes just in one day.

Theme development is a very vast topic. But here we will give you an initial start by discussing on a very simple theme. Given below theme can help you to finding basic structure and working of a theme . While working on this theme you can also find the answer of these questions.

  • How to add logo in Header area?
  • How to add Menu in Sidebar?
  • How to see the content of your WordPress Page or Post?
  • How to add widget in your footer area?

total 1024x757 How to Develop a WordPress Theme in One Day

To making a theme. First it should be divided into four components Header, Footer, sidebar, and content area and later start working on each component one-by-one.

How to Activate your Theme?

WordPress themes exist in a folder inside the /wp-content/themes/ directory in your WordPress installation. Index.php and style.css are the two main files. Without them we can’t make and activate any theme.

Make a new folder name My First Theme (You can give any other name) in /wp-content/themes/ .Add index.php, style.css and screenshot.png in this Folder.

basicfiles How to Develop a WordPress Theme in One Day

1. index.php –keep this file blank (we will edit it later).

2. style.css -Add just basic information about your theme.Add the following code inside your style.css .

3. screenshot.png – Take a screen shot of any website and make a PNG file by using window Paint tool or take any .PNG picture. Without this you can see only blank icon in Appearance -> Themes.

When you go to Appearance ->Themes now you will see the first look of your theme.

activate How to Develop a WordPress Theme in One Day

To activate this theme just clicking on activate button.But it  does not show you any thing on visiting to your website.Because our index.php file is blank and other important files are also missing.

header.php File

The header section of the theme is controlled by the header.php .In header section you can display menu, company logo, categories etc. In given below image you can see the flippercode logo .Here you can find-out about how to add logo in header section.

header 1024x187 How to Develop a WordPress Theme in One Day

Copy and Paste this code into your header.php file(delete /*comment*/ after pasting code)

In header.php file we see most of the part include HTML codes but there is only two php codes. One is used to attach Stylesheet with your website and other is used to display the logo image.Make a folder named ‘image’ inside your theme and place all images inside this.

You can also specify Meta tags such as Meta description and the Meta keywords in header.php that are must for SEO of your website.

Given above function is used to make dynamic paths. So if we change the location of file or image this function will automatically change its path, You don’t need to change its path. If we look in the source code, this will look like this.

functions.php File

By using functions.php you can change the default behaviors of WordPress. It is used for adding features and functionality to a WordPress site.
fuction.php is used to call functions, both built-in WordPress and PHP, and even you can define your own functions also. You can generate the similar results by adding code to a WordPress Plugin or through the functions.php file.

Without fuctions.php file we can see only three options in Appearance

basicfiles How to Develop a WordPress Theme in One Day

After adding fuctions.php file you can see two additional fields in Appearance that are Menu and Widget.

menu How to Develop a WordPress Theme in One Day
Copy and Paste this code into your functions.php file(delete /*comment*/ after pasting code)

This file is used to control sidebar section of your WordPress website.In this file we can use internal WordPress functions to display the Categories,Archives of posts and sidebar Menus. In this image you can see menu .Here we will discuss how to add menu in your sidebar.

sidebarmenu How to Develop a WordPress Theme in One Day
To create menu first of all create pages by clicking on Pages ->Add new and make 4 pages and name them Page 1, Page 2, Page 3, Page 4 and add these pages in menu.

To make menu go to Appearance ->Menus and then menu name ‘menu1’. And then click on Save Menu.

menu1 How to Develop a WordPress Theme in One Day

After clicking on create menu now add all pages by check all checkbox and click on Add to Menu this will create the menu1 for you.

menu How to Develop a WordPress Theme in One Day

Copy and Paste this code into your Sidebar.php file.( delete /*comments*/ after pasting)

This file is used to control footer section of your WordPress website .In your footer section you display menu,social icon,copyrights,etc.

fotter 1024x111 How to Develop a WordPress Theme in One Day

29 How to Develop a WordPress Theme in One Day

28 How to Develop a WordPress Theme in One Day

27 How to Develop a WordPress Theme in One Day

Copy and Paste this code into your Footer.php file.(delete /*comment*/ after pasting code)

>

index.php File

Index file is most important file .It is used for many purpose like call the header.php,footer.php and sidebar.php. It also contain The loop(php code) which  used to get the content from the WordPress pages or posts.Without it you are unable to see any content on your website.

You can show the content of all pages just by clicking on the menu. One impotent thing is that only content part is changed header, footer and sidebar almost remains same for all websites. In this image you can see just simple.

Copy and Paste this code into your Index.php file.(delete /*comment*/ after pasting code)

style.css File

Stylesheet is used a type of template file consisting of font and layout settings to give a uniform look to your WordPress theme.

Copy and Paste this code into your Style.css file.

 How to Develop a WordPress Theme in One Day

Flipper Code

We have been building WordPress Plugins at flipper code since 2008. We follow wordpress coding standard that ensures we deliver the excellent wordpress plugins and services.

More Posts - Website

Follow Me:
twitter How to Develop a WordPress Theme in One Dayfacebook How to Develop a WordPress Theme in One Daygoogleplus How to Develop a WordPress Theme in One Day

Customize Product according to your requirements?

We will be glad to discuss any of your needs related to our wordpress plugins . if any of functionality you'd like to see in products, you can reach us by via email hello@flippercode.com.