How to create a WordPress theme from scratch

A WordPress theme has a fairly very simple structure. Much as many people might look at it as something difficult and for professionals, truth is; anyone can create it. All you need is to have a few ideas of what to do.

If you start with the CSS for example, you may find your work even much easier. The reason is, CSS details everything about the theme for WordPress to use. After this, you have a simple template file- the same one you are using which comes with a php template tag inclusion. The tag looks like this index.php. Together with that, you will also find included a header.php and a footer.php. These files are used across the whole site making your work much easier.

In most cases you will find more files apart from just the four used in a theme. This is because in WordPress, you have the capability to use template files in laying out different content. For example, you can find something like this archives.phpand single.phpwhich are basically part of the defined layout files. Now, if say you don’t find these good enough, you can still create your own theme. If you wanted a totally different layout to the default, you can do it with great ease.

Creating a WordPress theme is simple but it is a wide topic and needs a lot of explanations to give. In this article however we are going to break it down into simpler subtopic so that you can get it better. WordPress has managed to attract the attention of many designers and developers because of several reasons. The fact that most clients will specifically ask for a website designed in word press is of them.

Its simplicity is another reason it is widely known. WordPress is flexible and offers great power to developers when creating a commendable WordPress theme. This is why you need to understand how to set up the theme if you are switching to it over the others.

What you need to set up a WordPress theme

  1. Local installation of WordPress

The internet offers a variety of articles on how to install WordPress locally. However what is common to all of them is how easy it is to install it from the official website. This is the first thing you will need to do. After all, you are creating a WordPress theme and it only makes sense if you have it installed on your computer first.

  1. You will need a procedure to create the theme from scratch
  • You can opt to use manual help which happens via coding. For this, you will need to have coding knowledge.
  • Automated help. This is the easiest way as you can do it simply through word press theme builder.

All the work related to creating a word press theme will be done in the wp_content directory alone. Simply make a new theme sub-folder in the wp_content Themes folder. You can give it a namelike “firsttheme” for example.

After this, you are going to have to decide the layout of the theme. We shall look at it in detail under basic layout with header, main area, footer and sidebar. There are only two files you will need to lay the foundation of WordPress: style.css and index.php. But because you are creating a WordPress CMS layout manually, you will need at least the 5 files indicated below.

  • header.php – This file contains the code for the header section of your theme, meaning you cannot afford to miss it.
  • index.php – if you want to create the main area, the code for the part is contained in thisfile. This file will also specify where to include other files. It is more important because it marks the main file of your theme.
  • sidear.php –this is where all the information about the sidebar will be contained.
  • footer.php – this one simply takes care of the footer section.
  • style.css – you will need to create style for your theme and this is the file you are looking at.
  • bootstrap.css – with this file, you will not need a CSS code.
  • bootstrap.js – this file is responsible for providing it own js for the navigation bar, or tabs among many other feature.

Create-Your-Very-Own-WordPress-Responsive-Website-Based-On-Bootstrap-3.jpg

Note: bootstrap.js and bootstrap.cs folders need to be copied to the theme folder after being downloaded. The files above can be created locally with a text editor like notepad.

You will now have to code the files above….

The header.php:

This file contains the files for the head part with the js and style files linked. It is responsible for displaying the header of the page. To start on the header, you have a code that you are required to put in the header.php file.

Adding this line <link rel=”stylesheet”href=”<?php bloginfo(‘stylesheer_url’); ?>”>, after the title commands the WordPress to load a style.css file which in turn takes care of the site styling.

<?php bloginfo(‘stylesheer_url’); ?> is a function that enables the actual loading of the style sheet. While here <link rel=”stylesheet”href=”<?php echo get_stylesheet_directory_uri();/css/bootstrap.css’;?>”> is where the Bootstrap is used( best known as framework for responsible websites)

After this, a “div” with class trr_header is added as the main container of the website. You will finish this part by adding a simple label HEADER in a “div id”.

The index.php file:

This part will also come with its file code and the very first line of the code is <?php get_header(); ?>.This means the header file is included and the code in it are in the main page. You will then include the code for the main content followed by a sidebar.php file- <?php get_sidebar(); ?>. You can display your recent posts, archives, contact info e.t.c in this file.

This line will be followed by an empty “div” that separates the main area and the sidebar from the footer. The last line will be <?php get_footer(); ?>.

The sidebar.php:

This part too will come with its own code. The file enables the calling of WordPress to display the different categories, archives of posts. These functions are retuned as a list in the WordPress.

The footer.php file

The footer code is actually easy and adding it will not take any effort. After the code, you may choose to add links, additional text, and the copyright info for your theme where the FOOTER plain text is.

The style.css file

The CSS file sets the basic looks to your theme and comes with its own code. The code sets the background of the page and the main parts of your site. You continue to modify the CSS file as you see fit from here. Add images, animations and other content to make your blog amazing. This will however require HTML, PHP and WordPress knowledge to execute effectively.

Now, this is the manual procedure. However, wouldn’t it be cool if you can create a word press theme without a single code? That you don’t have to struggle with a lot and it takes only a few minutes to complete. TemplateToaster is one of the software you can use.

Creating a WordPress them with a TemplateToaster

The software is easy to install, simply visit the website and follow the download procedure. After this, you can make the CMS selection from the first screen that appears. In this case WordPress with content.

The next screen will provide you with options to make them from scratch or modify a sample template provided. If you choose to start from scratch, you will first of all choose the color scheme and font typography which can be changed any time. Now click start.

From here, you will encounter the main interface of the software from which you can design a theme according to your needs. There are many self-depicting options here including menu, sideshow and tabs among others.

You can start by designing the menu from the menu tab. Simply place it by selecting menu position above header. You will find a menu above Header in the editor section. Make it full width in the width option. There are options to set a background color, gradient or image in the background option. Put in a log now and style the menu items from Menu button option. Now choose the background color in all 3 states; Active, Hover, Normal, the menu is ready now.

Once you have finished with the header, you can now go ahead and design the other parts starting with the header from the header part. Se its height and select a background and an image on the foreground. Go to text area options and write require text after which you can put a READ MORE button from the editor tab and link it with specific target.

You can now go head and manage the content area from the content tab. This will set you to design the sidebar from the Sidebar Tab; select the right sidebar, add recent posts widget, set the width, set the typography ad you are set.

The last section will be to design the footer from the footer tab. Here, presets are displayed for your choosing. Once you set the background for the footer, set the number of rows, columns and width. Place the social media icons then use the typography options to add content and style.

Simple as that and with a few clicks of the mouse, you have your theme set.

Final thought

This article has tried to explain in the simplest way how you can create a WordPress theme. However, the choice will remain entirely with you whether not you want to go manual or use theme builders.