Know The WordPress Theme File Structure To Start Developing.

wordpress theme file structure

Are you thinking about developing a WordPress theme? If you do then you should know about WordPress theme file structure. What are the important files and portions you have in a WordPress theme?

You should know everything about it. Though if you want to develop a custom theme for your blog then you should have the knowledge of HTML, CSS, and PHP.

If you are not going to develop a light yet effective website theme then you won’t need to use the Javascript except in the Navigation menu.

Know every aspect of WordPress theme file structure so that you can start building your WordPress theme with each file. In this post, I will provide an anatomy of a WordPress theme.

WordPress Theme File Structure Consists Many Files.

First of all, let you let you know about different sections to create a WordPress theme. There are mainly four portions.

1. Header Section.

As its name suggests, the upper portion of the theme is the header section in which you would include the name of your website with a tagline or directly upload the logo of your website.

Most of the developers add the navigation menu in the headers section. Do you know how to create navigation menu in WordPress?

All the categories or pages are shown on the menu to guide the users about the type of the content available on your website.

2. Footer Section.

Just in the bottom of the screen, you would see the footer area where you place the copyright text and many other related contents.

There are many developers who add the navigation menu in the footer area too. As you can notice on the bottom of this website running on BloggingLove Theme, you can see the navigation menu consisting all the pages.

wordpress theme file structure

3. Content Section.

This is the main area of your WordPress theme where you show the articles you publish. It contains all the data you handle from your WordPress post editor.

You can display excerpt in WordPress theme in place of content using WordPress functions. Loops are used for the articles.

There are many types of the content areas. On the home page of the WordPress theme, you would like to show the featured article or the dynamic data with bigger and attractive images with no sidebar.

But on the blog page, you show the latest published articles. It’s always recommended to add read more button instead of showing the full content of the article.

Though the WordPress theme file structure may  vary but the header, footer, and content area would be same. The design would vary but the concept won’t.

4. Sidebar Section.

There are many WordPress themes which don’t consist the sidebar. But still, it’s one of the most important parts of WordPress theme file structure.

The sidebar may be on both the sides or one. It is dependent on the developer. In most of the cases, you would see the sidebar on the right side.

You can show the recent post, add subscription form, add any affiliate product etc.

Let Me Walk You Through The WordPress Theme File Structure Properly.

There are some files which are used to create all the sections mentioned above. You may have noticed that the comment section, search box, and many other things are present on the website.

You have to create the PHP files for each of the section.

1. header.php

This is the file which consists the meta tags, title tag and starting of the HTML. The stylesheet is linked in the head section.

If you have any idea about HTML then all the external files are linked put putting in the head section. Though it is recommended to put the Javascript in the bottom.

If you want to develop a mobile-responsive WordPress Theme then you have to add the meta tag which can adjust the theme according to the screen of the device.

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

2. footer.php

All the tags which were started in the header.php would close in this file. Just like the header.php, you can add the Javascript in this file. You may have noticed that the copyright is added on every website.

It is shown in the footer area where you can add many other widgets. As you can see, there are three widgets shown on this website.

If you want to add any extra widget then you can do that by adding one extra “div” tag.

3. index.php

This is the main file which loads when you open any website. The content you add in this file will open when someone visits your website.

For better coding, it’s necessary that you don’t repeat the code. So, for making it shorter, you can put the PHP code to load any other file which is used at different places.

Suppose, you are creating a loop and in the middle, the same content is needed which have to be shown at many other places. So you can use one file on all places.

4. front-page.php

In WordPress Theme file structure, this file plays an important role. When you open any WordPress file then WordPress will search for this file.

If you want to add any custom home page then it is possible by adding the code in this file. But, you have to differ the blog page and the home page.

5. functions.php

All the theme functions are added in this file. If you want to add any extra theme support option then you have to add it in this file.

You may have read a lot about adding the codes in”functions.php” and people do that without even checking the code. Well, reason is that the functioning of the theme is handled by this file.

It’s not possible to develop a WordPress theme without it.

wordpress theme file structure

6. style.css

Now is the term to reach the front-end. We have talked about the back-end files. But your WordPress theme would be plain until you add the CSS file.

The stylesheet is linked in the head section of the theme. While building the WordPress theme file structure using the HTML and PHP, the IDs and classes are given to many “divs” , paragraphs etc.

You have to design the look of your theme using this single file. CSS is an amazing language and you can have fun with it.

7. comments.php

If you want to show the WordPress default commenting system then you have to add this file. It is one of the most complicated files in the theme development.

If you are not a skilled developer then it would be hard to create the comment section. In every WordPress theme, there should be the comment section so that people can share their views.

As you know that blog commenting is one of the most important actions to take.

8. searchform.php and search.php

It is dependent on the developer whether he/she wants to provide the search form in the theme or not. But in most of the WordPress themes, you would see the search box.

The searching results are handled by the search.php and the form is generated using the searchform.php. You can enhance the search results using a few WordPress codex.

9. sidebar.php

If you want to show the sidebar on your WordPress theme then you can do that using this file. The file structure of the sidebar would be handled using the HTML.

10. single.php

To build the single post where you show the full content of the post is handled by this file. In the blog page, you show the excerpt in place of the content, but here you show the full content.

The comment section, author bio etc are added in the single.php file.

11. page.php

Just like the single.php, this file controls the output of the pages of your website. If you don’t want to add the comment section below the pages then page.php would let you do that.

The output for all the pages can be controlled.

12. content.php

The content you show in the single.php or anywhere else, this file is considered. It is because the loops you generate for the content are added in this file.

It is mostly used to reduce the size of the theme. You can add the content loops and then this file can be used in single.php, index.php.

wordpress theme file structure

There are many other files in the WordPress theme file structure depending on the vision of the developer. If you want to add the custom posts then you have to add the PHP file for each of the posts.

Suppose, if you want to add the gallery post feature, a sticky post feature then you can do that by creating a new PHP file and adding the theme support in the functions.php file.

WordPress Theme File Structure Is Quite Easy Yet Complicated To Understand.

If you know a little bit about HTML, PHP, and CSS, then it would be so easy for your to understand the concept of WordPress theme building. But if you are a newbie then it would take some time.

Though, the theme development process is a way different than it seems. You have to learn the WordPress functions which are using to show the actions.

WordPress has many functions which are used in the theme development process. When you call the header section, the navigation menu, footer section etc, you have to call the WordPress functions for each of the section.

 I have provided the basic of the WordPress theme file structure. Rest, you have to learn.

by Ravi Chahar

A WordPress Professional and a LinkedIn influencer. A coder by passion and a blogger by choice. WordPress theme development is what he can rock with. He is your WordPress guy who will teach you how to solve WordPress errors, WordPress security issues, theme development, design issues and what not.

6 comments

  1. Great info about theme file structure, Ravi.

    By the way, the older theme codes used to be different, and now the theme codes are quite different.

    Though the base is same, there are changes like I usually saw in past single.php file for single post page. But, now if I open single.php then I see it is taking reference from the content-single.php.

    Did the style of coding WP files change?

    Thanks for the post.

    1. Hey Atish,

      It is dependent on the developer. All the coding files are the same. But if you want to minimize the code then you can create a file which can be called at different places.

      As you have mentioned that you have seen file content.single.php but in a few themes, it doesn’t exist. It’s because the developer calls that file using the PHP hook.

      Every web developer has his/her own way of coding. But the basic files remain the same.
      Thanks for stopping by.
      ~Ravi

  2. Hi Ravi

    This is a simplified ost to understand WordPress theme structures and I remember when I wanted to tweak a code, I had to read the anatomy and WordPress theme structure. I wish I had seen this post, my learning curve would have been easier.

    Thanks for sharing. Take Care

    1. Hey Ikechi,

      Most of the time when you add an extra code in theme files, the most important thing is that you should have the proper knowledge about the structure.
      If you add the code in the wrong file then it won’t be favorable.
      Glad to see you.
      ~Ravi

  3. Thanks for explaining the file structure. So far I have played more with plugin development than I have with theme development. I do have a project on my to do list that will take me there eventually. It seems to me that the best way to learn about developing a theme would be to create a child theme of an existing theme that already behaves similarly to what you want to do.

    1. Hey Ben,

      If you are into theme development then you should know the basic files. There may be different files in every theme. It’s the matter of fact that the main functioning files of a WordPress theme are the same.
      Creating a child theme can be helpful. You just need to do the designing work. It would use the theme files of the parent theme.
      Thanks for stopping by.
      ~Ravi

Leave a Reply

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