How-to Guide on Building Your First WordPress Theme

Availability of free and paid themes is one of the main reasons that makes WordPress so popular for creating websites of all sorts and sizes. However, choosing a pre-built theme often restricts you from making the desired changes to it. That is not to say that you shouldn't consider choosing a WordPress theme, but if you can code it is advised that you should better create a custom theme from scratch.

                           

In this tutorial, I'll share with you the basic knowledge of building a simple WordPress theme.

But Before You Start

There are a few important things you need to take into account, such as:
  • Create a sub-folder for your theme within your WordPress folder that can be located at the path: wp-content/themes directory. I've named my folder “new_theme” (you can replace the folder name as you deem perfect).

    Note: Remember that the name of your theme folder will be same as the name of your theme.
  • You must have basic knowledge of working with an FTP client (such as FileZilla or any other).
  • Lastly, before you begin with the process of theme creation, you must know how the layout of your site will look. And so, you can either choose to create a prototype of your website design or create a PSD to decide the final structure of your site.

How Can You Build a WordPress Theme?

Almost every WordPress theme comprises of various sections, including header, footer, sidebar, and a few others.

                         build first wordpress theme

In order to build your first WP theme, you'll have to create each of those files. Let's quickly view all the files that are needed to create a functional WordPress theme:

  • header.php – Just as the name implies, this file comprises of code that will be a part of the header section of the theme;
  • index.php – This is the main file of your WordPress theme that contain code for the main area of your theme. In fact, this code also helps in specifying where all the other files can be found;
  • sidebar.php – You can find information displayed in the sidebar section of your WordPress theme in this file;
  • footer.php – This file manages your footer data;
  • style.css – Lastly, the style.css file handles how your theme is styled.


All of the files listed above can be created locally using a text editor such as Notepad  and others, and then, upload those files via FTP. Or else, just utilize the “File Manager” tool available in your cPanel for creating WordPress files on your hosting account.



Let's now see what exactly each of the WordPress file contain:

1. The “header.php” File


Here's a sample code to demonstrate what a header.php file comprises of:


This is just a simple HTML markup that contains a single line of PHP code and some basic WordPress function. However, you can also add meta tags like your site title, keywords to be inserted in a page, etc. within this file. Let's see how the above code snippet works:

  1. The following line containing PHP code, basically, informs WordPress to load the stylesheet (i.e. style.css).

  2. Next, a class wrapper has been added to the beginning of a “div” - that is the main container of the site. The class is defined so as to modify the header section using the style.css file.
  3. Lastly, another “div” container contains a label “header” which will be called in the style.css file.

2. The “index.php” File


Let us now view the code present in the index file in WordPress:

So, let's see how the above code works:
  • The first line contains:

    < ? php get_header (); ? >
    This is a default WordPress function that comprises of the Main Area text to help users identify which exact section of your theme is shown in this area.
  • In the next lines of code, you'll only find some standard WordPress functions that are used to check out if there are any posts in your blog that are created via WP admin panel. If such posts exists, they will be displayed in the admin area.
  • Next, the sidebar.php file is included in the code using the following line of code:



    The sidebar file can be used for displaying post categories, archives etc.

    And an empty “div” is added to segregate the main area and sidebar of your theme from the footer area.
  • And at last, the below mentioned line of code helps add the footer.php file in the index file. This will help display the contents of footer file in each web page.

3. The “sidebar.php” File


The sidebar.php usually contains code that looks something like:

The sidebar.php file contains information that will be displayed in your theme's sidebar (Also referred to as widgetized region). The code in the sidebar file as mentioned above make use of default WordPress functions for showing the posts categories and archives.

4. The footer.php file


Next, the footer.php file that contains source code that looks like the following code snippet:


Here in this code, we're just adding a label named “This is my FOOTER section”. However, you can also add data such as additional links, the copyright information, etc. that you would want to display in the footer area of your theme.

5. The “style.css” File



And finally, the CSS file (or style.css) file is used to specify the elements within a WordPress theme. A typical stylesheet looks like:
body { text-align: center; }

#wrapper { display: block; border: 1px #999999 solid; width:90%; margin:0px auto; }

#header { border: 2px #999999 solid; }

#content { width: 78%; border: 2px #999999 solid; float: left; }

#sidebar { width: 25%; border: 2px #999999 solid; float: right; }

#delimiter { clear: both; }

#footer { border: 2px #999999 solid; }

.title { font-size: 12pt; font-family: verdana; font-weight: bold; }



This code will help in changing the background of all the pages in your theme and will add a border surrounding your site.

After adding all of the above discussed files in your WordPress install, your theme will look something like:


Conclusion
So, that's it for now! Hope that this post will clear out your doubts concerning creating a basic WordPress theme.


                            
Samuel Dawson is a esteemed developer of HTML to WordPress theme with topical advantages. He gradually works very hard on all the projects with great passion. Samuel

Related Posts
Previous
« Prev Post