Build your own WordPress Theme

Hello everybody, I am writing the following post from my client on Code giant with some modification. For more coding related article, you can visit their website.

Okay, to build an WordPress theme, you need to have great knowledge about HTML and CSS. A knowledge of JavaScript and jQuery will be huge advantage. Plus you need to know basic PHP and MySQL querying.

Now at this point, I believe you know all the things mentioned above. We are going to jump into the development now.

 

To Make a theme you need to make a folder with the name of that theme (Better to have exact name as the theme name). Make sure the name is one word. If not, we have to use the “-” in between words. Then, inside that folder we need to have at least following files in order to make it work as an WordPress theme.

  • An index.php file
  • style.css

That’s it. Technically it will work as WordPress theme. But making a real life WordPress theme is not that easy. In fact we need to create more files and split the code into them for various sections. The common files contain in a modern standard themes are:

  • index.php
  • style.css
  • header.php
  • footer.php
  • functions.php
  • archive.php

But before digging inside the header.php file I would like you to know the basic information to set up a design as WordPress theme.

In your style.css, you need to have the following lines to work it as an WordPress theme.

Above written lines must reside at the very top of the style.css file. This indicates the name of the theme, URI, a short theme description, version of the theme, Author(s) Name, Author URIĀ  and Theme tags. Please remember that you need to keep the comments for this theme to work.

For Reference as the full page design, we will be using the following code:

 

Okay now the header.php:

We normally create the full webpage design in one document like index.html / home.html etc. But in WordPress, we split the code that is repetitive for all pages and used for navigation and common linking of various files into the <head> section of a webpage. This files are stylesheets, script file etc.

A typical header portion code will be something like the following:

Then we need to put the code of the repetitive portion of the body section into the header.

That code will be something like the following:

So the final header.php will be something like the following code:

Still the theme won’t work because we haven’t finished creating all the files necessary plus the main file that will call all the files like header.php, footer.php etc. That file is the index.php. But as this is a series in next tutorial we will be discussing about the style.css file.

Until next tutorial , I am Mizanur Rahaman Mizan, saying you good bye. Please feel free to leave any comment below. Thanks!