Learn the theme directory structure in wordpress – Learn WordPress from a to z

To understand the components that make up a wordpress theme before going into wordpress theme programming , today we will learn the theme folder structure in wordpress.

In this article, I will provide you with a list of directories as well as the necessary files for a wordpress theme to work. As well as share the basic theme folder code that I often use.

The directory structure needed for the theme to work:

First we need to know, the wordpress theme will be located in the directory: domain.com/wp-content/themes in the wordpress source code. The themes folder can contain 1 or more subfolders, each folder will be a different theme. You can install multiple themes but only use 1 theme at a time.

For a wordpress theme to work, only 2 files are needed: index.php and style.css

• The index.php file contains the display content of the website homepage, which may contain no content.
• The style.css file contains the declaration of the theme, for example: Theme name, theme description, theme path, version of the theme, author’s name as well as the author’s website…

Demo content of style.css file:

/*
Theme Name: GIAN DON
Theme URI: https://huykira.net
Author: Huy Kira
Author URI: https://huykira.net
Description: theme wordpress don gian
Version: 0.2
*/
<div>
<span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span>
</div>

This is the content of the style.css file of the theme

The full structure of a theme in wordpress:

Depending on the different functions and folder structure of the theme, the main content also revolves around the following files:

• css folder -> Contains style css files of the theme
• Images folder -> Contains images of the theme such as: wallpapers, buttons, icons…
• js folder -> Contains .js files like jquery…
• libs folder -> Contains front end libraries like bootstrap, owl slider…
• File style.css -> Declare the theme as mentioned above
• FIle screenshot.png -> Theme image
• File index.php -> Display the content of the website’s homepage
• File functions.php -> Where to declare more functions and functions of the website
• File header.php -> Show the upper area of ​​the website like (Logo, menu…)
• File footer.php -> Show the bottom area of ​​the website like (Contact information, copyright)
• File sidebar.php -> Display side columns of the website (In case the website has side columns)
• File category.php -> Display the content of the category page (The page lists the posts of a category)
• File category-{slug}.php -> Display the content of a specific item story by slug for example: category-tin-tuc.php -> Display articles as news
• File single.php -> Display the content of the article’s detail page
• File page.php -> Display detailed content of a page (page)
• File search.php -> Display search results content
• File 404.php -> Show page content not found (Not Found)
• File archive.php -> Display content of archives in the website such as (List of posts by date, list of articles by tag)

For advanced themes that use custom post type, custom taxonomy, we will name the file as follows:

• archive-{slug}.php Displays a list of posts of a post type with a slug of {slug}
• single-{slug}.php Displays the details of an article of the post type whose slug is {slug}
• taxonomy-{slug} Displays taxonomy page content with slug {slug}

Share the theme folder structure that I often use:

By the way, I also share with you the folder structure that I often use. This is the structure I built myself, there are some functions as well as some necessary declarations available.

This theme structure has some of the following functions available:

• Available bootstrap 4
• owl slider available
• Available fontawesome
• jquery is available
• Declare to use thumbnails for articles
• Declare 2 top and footer menus
• Declare a built-in sidebar with widgets enabled
• Built-in function to count views and display views
• Built-in function get a short description of the article

This is the theme structure I will share with you:

Download the theme structure of :

Summary:

So today I introduced you to the WordPress theme directory structure . Understanding the theme structure helps you to be proactive in the process of developing functions as well as fixing errors in time.

In the next article, we will learn about simple functions commonly used in wordpress theme programming .

Good luck learning wordpress!