How to Create a Basic WordPress Theme for Theme Development

Developing WordPress theme is not an easy task. A complete theme can take months or even years to accomplished if you don’t copy or paste a single code. But, how it would be if you get a theme which is basic and minimal but ready for further development. It might be a good idea. In this tutorial, I am going to create a primary WordPress theme. And demonstrating how to Create a Basic WordPress Theme for Theme Development. That is very basic but ready for development. So, no more delay and we are going to get started. At first, we are going to create a directory. And some other necessary files for WordPress theme that will be necessary. Then, we’ll use some template tags to create the basic structure of the WordPress theme step by step. Finally, we’ll add some advanced functionalities. I will show you by doing this step by step process. So that you do not have any problems to understand:

Step 1: Create a directory for the theme and others necessary files:  First, open the wp-content> themes folder from your WordPress directory. Now, open a new folder here. I renamed it as “A Basic Theme.” You can use any other name if you want. Now you have to create some PHP and CSS templates in it. We will create some essential files here:

  1. header.php
  2. index.php
  3. content.php
  4. content-none.php
  5. sidebar.php
  6. footer.php
  7. functions.php
  8. style.css
  9. comment.php
  10. single.php

The functionality of these files are:

  1. header.php: It is displaying the top part of a WordPress website. Name, logo, menu, etc. Important meta tags and other required scripts are also links to this area.
  2. index.php: The main part of the blog is generating here. And it is possible to display the entire blogging structure in this section.
  3. content.php: The content or contents of the website is display in this section.
  4. content-none.php: This template’s are call if no contents are available. Or, no specific content exactly matches the query.
  5. sidebar.php: Display the sidebar of the blog.
  6. footer.php: This section displays the footer and other sidebars on the website.
  7. functions.php: This template used to add various functionalities to the theme.
  8. style.css: This file used as a stylesheet for the theme.
  9. comment.php: This template displays the comments form and the comment form.
  10. single.php: This template displays a single blog entry.

Index.php and style.css files are two essential files for any theme. Because without these two files, no theme will work. Other files are sharing the contents of the original file. And some of them used for special pages and functions. Now, you may already create the index.php and style.css files in your theme directory. Step 1: Adding some details to the Style Sheet. Now let’s add some details to the style.css file so that WordPress can detect our theme on WordPress dashboard. So, don’t delay. Open the style.css file in Notepad or your preferred text editor. And add the following descriptions.

/* Theme Name: My Basic Theme Theme 

 * URI: http://yourwebsite/basic-theme

 * Author: Your Name

 * Author URI: https://yourwebsite/your-name

 * Description: A Very Basic Theme for Theme Development

 * Version: 1.0

 * License: GNU General Public License v2 or later

 * License URI: http://www.gnu.org/licenses/gpl-2.0.html 

 * Tags: Basic, One column, Empty Theme This theme, like WordPress, is licensed under the GPL 2. Use it to make something cool, exciting and have fun. Feel free to share what you've learned with others.

 */

WordPress can recognize your theme now as well as the other details. It will not do any work because the rest of the files are still empty. But now you can activate this theme from WordPress dashboard. To see your theme on the WordPress dashboard, go to the dashboard under Appearance > Themes menu. It looks like the following: WordPress Dash board If you don’t like this look, you can put a screenshot named PNG file in the parent directory. That will be used as the default thumbnail for the WordPress dashboard. Keep in mind that, the size should be at least 387 × 290 pixels. The general size of this file should be 1200 x 900 pixels. It’s good to have a big picture as a screenshot so that you can see it in the high-resolution screens. After adding the screenshot, our theme now looks like the picture below on the dashboard:   A Basic Theme And the details of the themes are looks like the following screen. So, we can see that the information we provide in the style.css file is now showing here. I give some information about the demo. But if you want, you can use your name and website address instead of the demo name and website. We don’t add any style to our stylesheet yet. As I am already saying before, we are going to create a basic theme structure or framework. You can use this framework as a base to develop any themes later on. So, we will not add any details to the stylesheet and close it for now. Step 2: The Structure of the index.php file: Now we will create the structure of the index file. I already said before, that this is a required file. And without this file, any WordPress template or file will not work. I will use some template tags and functions to build the structure of index.php file.

  1. bloginfo()
  2. wp_title()
  3. have_posts()
  4. the_post()
  5. the_excerpt()
  6. the_content()
  7. the_tags()
  8. the_posts_pagination()
  9. wpautop()
  10. get_sidebar()

The details of the templates files described below. So, you can find and understand the appropriate template codes and use it to your template or them.

  1. bloginfo(): this tag used to present various information about the blog.
  2. wp_title(): This template tag used to represent the title of a blog. Usually, placed in the header area between <title> and </title> tags.
  3. have_posts(): Used as the conditional tag of a WordPress loop. And find that whether a blog post exists on the platform or not.
  4. the_post(): Used to present the blog posts, if anything posted on the blog.
  5. the_excerpt(): Used to display the short form of a blog post in the blog feed.
  6. the_content(): Used to display the full post of the blog.
  7. the_tags(): Used to display the tag links of a blog.
  8. the_posts_pagination(): Used to create the pagination of the blog.
  9. wpautop(): Used to create automatic paragraph tags in WordPress.
  10. get_sidebar(): Displaying the sidebar area of a blog.
  11. home_url(): Used to call the URL of a blog.

We’re going to create a kind index file that will not depend on other templates. So, we do not use any special template tags which are usually used in WordPress headers and footers. Later on,  we will split this original code into a specific template file. Then, we will use some special template tags. It will help us to identify which one is the header, footer and sidebar template, etc. Step 3: Creating index.php file Open the index.php file and add the following code. Please, don’t copy or paste. Write this code by your hand, so that you will understand the structure.

<?php 

/**

  * The template for displaying the Index file *

  * Displaying all the Necessary Blog Entries. 

  *

  * @package WordPress

  * @subpackage basic_theme 

  * @since A Basic Theme 1.0 

  */ 

?> 

<!DOCTYPE html>

   <html>

   <head>

    <title>This is my Blog Title</title> 

   </head>

   <body>

   <h1>A Basic Theme</h1> 

    <p>Some Contents…</p> 

   </body>

  </html>

You can see that it is a solid HTML static content. Now we will convert it into php. But the first thing is first. Notice the <head> section of the file. In the middle of this, we can call our stylesheet in HTML file. And, also we can convert the title tag into dynamic content. Change the middle part of the <head> with the following code.

<head>

   <style type="text/css" media="screen">

     <[email protected] url( <?php bloginfo('stylesheet_url'); ?> ); -->

   </style> 

  <title><?php wp_title('|', true, 'right'); ?><?php bloginfo('name'); ?></title>

</head>

We have done two things by a single code in <style type=”text/css” media=”screen”>. type=”text/css” is define which kind of style it is and media=”screen” ensures that it will fit all types of screen. And <! – @ import url (<? php bloginfo (‘stylesheet_url’);?>); -> Creates a link of stylesheet in the index.php file. Now let’s check if the links are displayed or not. Turn on your browser’s developer tool and open the <head> tag and see how it looks. In my case, it creates a nice link, but we will check it later if it works or not. Now I’m adding the rest of the code one by one. In the middle of the <body> tag, now replace the <h1> tag with the WordPress template tag for your theme.

<body> 

<h1><a href='<?php echo esc_url( home_url( '/' ) ); ?>'><?php bloginfo( 'name' ); ?></a></h1>

<p>Some Contents…</p>

</body>

In general, bloginfo(‘name’) displays the blog name. But we can create links here by home_url () echoing the tag with the esc_url (). As a result, the original URL of the blog will be used to output the link. Our blog name now displays on the main page. Now, it is time to create the content. To create the loop of our main content, we need to create some conditions. Type the following code in the next line of <h1> tag:

<?php if (have_posts() ) : while (have_posts() ) : the_post(); ?> 

/*our loop will go's here*/ 

<?php endif; ?> 

We are going to create a loop here, which is displaying title, content and the pagination of the blog. A loop is a piece code that, used in every blog entry. Now loop code for the title from below:

<?php if (is_single() ) : the_title( 'h1', '</h1>' ); else : the_title( '<h2><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2>' ); endif; ?>

 That means, if only one blog entry is display, it will use <h1> as the title tag. Otherwise, the title tag will be <h2>. And, it will be displayed as a link with its permalink. Now, use the loop code for the content below:

<?php if ( is_search() || is_home() || is_category() ) : the_excerpt(); 
else : the_content(); 
the_tags(); 
endif; ?>

So, here we define that if the content of the page is search, home or category. Then, it will be displaying the_excerpt() or summary of the blog. Otherwise, the blog will display the full content. Now, we will create pagination for the content feed. But this part is apart from the loop code and appear only once at the end of the page. So we will close the loop now. Please enter the following code to close the loop.

<?php endwhile; ?>

Now, create the main pagination or page navigation. Put the following code beneath of the loop.

<?php the_posts_pagination(); ?>

Using this code, you can display the full pagination links of your blog. Now, in case, if any users can’t find anything after searching, or the requested URL doesn’t exist. Then how to handle this error. A 404 page can deal with this situation. Since it is a basic theme, we will put an auto system to handle this error. So we’ll add both of the following codes:

<?php else : ?> <?php echo wpautop( 'Sorry, no posts were found.' ); ?>

This code indicates that, if the user requests a post or query that is neither searchable nor exist in the blog. Then WordPress will display a small note: ‘Sorry, no posts were found.’ At this stage, the condition mentioned above comes to an end. Now we will add the sidebar and a little copyright information. And also check that the above conditions are already closed. To close a condition,  use <? php endif; ?>. Now, add the following code to call the sidebar section.

<?php get_sidebar(); ?>

 And, for copyright add the following code snippet:

<p>Copyright &copy; 2012-<?php echo date('Y'); ?> <?php bloginfo('name'); ?></p>

 Now, take a look at the complete index file: At a glance, the code snippets might be looks minimal and straight-forward. But this code is enough for creating WordPress basic Structure. In the upcoming tutorial, we will create the rest of the template files using the index.php file, how to use the content.php file as a template for the index file. And how to create various theme supports and useful function’s using functions.php file. Now we will conduct some design experiments. Let’s add some style to the title and the blog name. If it works, then we can change the look of the entire theme. Otherwise, we will find out the problems and solve it. Open the style.css file and add the following CSS styles:

h1 { color: green; } 
a { text-decoration: none; color: black; } 
a:hover, a:active { color: green; }

Save the file and reload it again in the browser and see whether your page style is changing or not. If it’s successfully changed then, we can change the look of the entire blog by adding some other division tags. Conclusion I hope that, in this tutorial, I’m able to focus on the basic structure of WordPress theme in a concise and clean approach. In the upcoming posts, we will break index file and create header and footer file. And create other necessary templates too. If you like, don’t forget to share this post and if you have any question, write down the comment below, and I’ll try my best to answer.

Leave a Reply

Your email address will not be published. Required fields are marked *