Creating Your Own Themes in WordPress

Abhigyan Singh 12th Jul 2020

WordPress is a free and open software content management system (CMS) which started in 2003 and was released by Matt Mullenwegg. This CMS is the most popular among the three others since it requires basic skills. It is a CMS for beginners. Beginners will not have a hard time learning WordPress since it has a lot of plugins and themes which will make your website manageable and better looking.

This CMS is proven free, easy to install, flexible, customizable, user friendly, and has a community support. WordPress is also known for its powerful taxonomy, ability to tag, categorize and organize.

Although, there are a lot of themes released nowadays, you can still have your own design and style freely without using any other downloadable themes. You can also edit some themes and styles if you know the basic files to start with. These basic files will be discussed here. Once you already know the basic files, can now explore to other files that are in the downloadable themes you want to edit. These process will give you freedom to have your own or modified design and style.

WordPress does not only limit into plugins. An advance user like yourself also need to know how to create your own design in WordPress. You can create your own desired design with complete freedom. A basic knowledge of PHP, HTML, and CSS will be required. Creating your own theme is not that complicated but before we get to the idea of creating WordPress themes, it is necessary to know a little about the WordPress User Interface. Let's have a quick view of WordPress.

This is the "Dashboard". Note only the admin can see this dashboard where you can manipulate and manage all the contents in your website. Notice that in the menu, you can see that there is “Appearance”. Since we are concern of creating a theme, "Appearance" is where we should be focused. This is what the “Appearance” menu option looks like. You can either download an existing theme or you can create your own. Since in this tutorial we are focusing on making your own theme, you must proceed to the file directories where you can create PHP, HTML, and CSS coding.

The folder where you can see all the downloaded or installed themes is wp-content/themes. It is located in your WordPress folder. Now that you already know where it can be found, let us begin creating themes with these steps.

Step 1: Create Folder

Create a folder in  wp-content/themes and name it anything you want. For this tutorial, I would name my folder "test".

Step 2: Create Files

Create a file named "index.php".  This file is the main file which contains codes for the body of the newly created theme. In this file, we will include all other files such us the "header" file and the "footer" file.

Another file is to be created on the same folder “test”. Name  it "header.php" which contains the header section of the theme to be created.

The next file is "footer.php". This file contains code for your footer.

And lastly, create  "style.css". This is where you put the necessary design or style for your website.

For a demo example, let us say that you are creating a website for blogging.  If you have a blogging website, it is necessary the content of your website can be visible. To do that, we will write a loop code  in "index.php".

<?php
get_header();

if(have_posts()):
while(have_posts()) : the_posts();
?>

<article class="post">
<h2><?php the_title();?></h2>
<?php the_content();?>
</article>

<?php endwhile;
else:

echo "<p>There is no posts.</p>";
endif;

get_footer();?>

This is our "index.php". Notice line 3 code "get_header();". This function is calling the "header.php" file. And therefore, whatever you include in the header, it will eventually be included in your website. For the lines 5-18, it is a loop for all the contents or posts in your website.

If you do not have posts yet, it will print "There is no post". Since, it is written in line 16, to "echo" (print in PHP) the sentence. For line 20, the “get_footer()” function calls the "footer.php". Therefore, whatever codes you provide in the file, it will reflect on your website.

For the "header.php" and "footer.php", these are just basically parts of HTML sectioned into two. The part one which is the header contains the first section of the html. It is the section from the html open tag to the body open tag. On the other hand, the footer is the second section which contains the closing body tag and the closing html tag.

In the header basically, we want the name of our website to be seen. To do this, an example is given. Examine the image below. In the image, notice that there is a code "". It is a built-in function for WordPress in order to acknowledge that it is really a header.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html <?php echo language_attributes();?>>
<head>
<meta charset="<?php echo bloginfo('charset');?>">
<meta name="viewport" content="width=device-width">
<title><?php echo bloginfo("name");?></title>
<?php echo wp_head();?>
</head>

<body <?php echo body_class();?>>

In the footer, you can do anything you want. Anything you want to display in the footer, you will have to code in the footer file. Notice the "". This function a built-in one in WordPress in order to acknowledge that it is the footer.

<?php wp_footer();?>

</body>
</html>

So basically, all you have to remember in making your own theme is the files "index.php, header.php, and footer.php" . You must not forget the placement of the contents and the styles of your website. This can be done by writing codes in “style.css". You can put effects, backgrounds, and colors. Creating the style of your website theme must be taken for granted.

It is for the pleasing presentation of the website's contents. The style should also be user friendly so that more and more users will be visiting your site and acquire the necessary information you want to impart to them. It requires basic CSS skills which is not difficult enough to learn since there are a lot of tutorials in the internet on how you can create your CSS styles.

And there is one important thing you should remember. To name your theme, you can do it by commenting the theme name inside “style.css” file. Once you have learned it, the idea of how you are going to style your website is now in your hands.

Authored By Abhigyan Singh

He is a continuous blogger and has blogged on different topic. He loves to surf Internet and always trying to get new Idea about new Technology and Innovations and sharing these great information to all the technology lovers.

Also on DiscussDesk