Basic WordPress Theme Development

In this article,  we are going to create a Basic WordPress Theme Development. In this tutorial, we create a WordPress theme from scratch. So this article is all about developing a WordPress theme. If you want to learn about how to use and apply themes then review this WordPress article. This topic differs from how to use the theme and apply the theme. So we will only discuss the technical aspect of writing a code and build your own theme.

Basic WordPress Theme Development

We will create a few articles on WordPress theme development tutorial. Must read this all article to understand how WordPress theme work. we will link bootstrap classes to this WordPress Theme. WordPress themes are files that work together to create the design and functionality. If you want to be WordPress developer then you need to know few things about WordPress development. so we will learn WordPress theme development step by step.

the WordPress theme typically consists of two main files.

  • Index.php
  • Style.css

The other WordPress template files are optional. it typically contains WordPress template hierarchy. following is the list of Wordpress theme template list files.

  • Index.php
  • Style.css
  • comment.php
  • front-page.php
  • home.php
  • single.php
  • page.php
  • single-{post-type}.php
  • category.php
  • tag.php
  • taxonomy.php
  • author.php
  • archive.php
  • date.php
  • attachment.php
  • search.php
  • image.php
  • 404.php

These files are used to replace WordPress index.php file when available. it depends on your theme type how functional theme you wanted to do. These files are used to create more functionality to your WordPress theme. The most important part is that WordPress have there default file or function to perform a certain task. For example, if you want to show header you just need to add  <?php get_header(); ?>

There are some custome templete files for that.

  • header.php
  • footer.php
  • sidebar.php
  • comments.php
  • comments-popup.php
  • functions.php

Make sure when creating this WordPress template files all file name are exactly match with the WordPress template file name. we will discuss creating own template file in future articles.

Create Style.css

First of all, we need to create the style.css file in the root folder of WordPress theme. Do not add the style.css file in any subdirectory. WordPress probably look for template files with specific names in the current theme directory. hence, if you place this file in the subdirectory then WordPress did not find it and you will not able to view theme in the WordPress theme appearance.

WordPress uses the comment header section of the style.css file to display information about your theme. especially, it contains Theme Name, Theme URI, Author, Description and much more.

Create Index.php

This is most generic template file in the WordPress and one of the two required files for the theme. It is specially used to display a page when nothing matches template file are not there. if other template files are there as a result index.php file will replace with that file.

To Include the header in your theme just add  <?php get_header(); ?>  and  <?php get_footer(); ?> to insert footer section in your theme.

Furthermore, we will add a loop. The loop is the mechanism WordPress uses for outputting posts through a theme template files. The loop extracts the data for each post from the WordPress database and inserts the appropriate information in place of each template tag.

You can use the loop to display post titles and excerpts, display content and comment on the single post, the display content of the individual page and display data from the custom post type. Following is the code to create the loop.

Finally, we want to show our post title and content on index.php page. So we will insert code in the loop to show post title and content on the page.

After inserting it your index.php file would look like this.

Now your basic WordPress theme is ready to live. But there are lots of things to do. In the next article, we will show you how to create further theme function. So don’t forget to visit next article.

That all in this lesson.