WordPress Theme Development: The Ultimate Folder Structure Guide

#wordpress #php #cms #coding

WordPress is a flexible framework when building websites. You can build any type of website such as CMS, e-commerce, single landing page etc. Here I will discuss the WordPress project's structure, so that you can make your custom theme. Popular themes like divi, Astra, Neve, oceanwp etc. are some fantastic choices when you make a website for yourself or a client. But sometimes you also need to build your custom theme for building websites from scratch. The main advantage of using WordPress as backend, is that you have a readymade admin panel with robust features like blog post, S.EO , versatile plugin library for various work.

Let's see how to build a proper WordPress project's structure:

index.php
page.php
single.php
404.php
front-page.php
category.php
header.php
footer.php
archive.php
template-name.php
sidebar-name.php
/assets
          /js
          /css
          /images
          /fonts
          /icon

/templates
          contact_us.php
          about_us.php

🙈 For the homepage:
🦧front-page.php (if it exists): This file contains header.php and footer.php. Alongside it also contains home page sections like banner, carousels, front page images etc.
🐒home.php (if no static front page is set, or if front-page.php does not exist)
index.php (if neither front-page.php nor home.php exist)

🤓 page.php: calls when you call a page in the frontend. using this file that Page's content gets displayed. For displaying content inside the page you need to call the “the_content()” function.

🤔 single.php: when you call a blog post that time this file gets called. For installing this file get the post-details.html file from the frontend developer or your HTML theme.

🤦 404.php: Calls when page not found. sometimes we hit some page in the browser regarding our WordPress website, and meanwhile that page or slug does not exist! that time this file gets called. It also mentions a home page redirection link, which processes using “<?php echo get_site_url(); ?>” .

🗿 category.php: when you want to show posts related to a particular category, that time this page get called.

🙂 header.php: This file contains the header section related to the website. It includes meta tags, favicon, header files, navbar & pages and even common banner areas sometimes.

🙃 footer.php: This file contains footer section information like quick links of pages, newsletter section, site admin email address, phone number, email etc.

🤠 archive.php: An Archive Page in WordPress enables you to easily steer readers through your previously published content, such as blogs. WordPress Archive Pages are produced to organize a list of posts under a particular post type, category, or tag.

👻 template-name.php: when you have to call a certain part in every pages in wordpress website, that time you can use this file technique. For example every website has a section called “get in touch” or “subscribe newsletter”. This section is always present on the top or either footer area in every page of that website. So we can make a file like “template-get_in_touch.php” and we can call it via <?php echo get_template_part(‘get_in_touch’); ?>

👩‍🔧 sidebar-name.php: Sidebars play an important role in designing the layout of a WordPress website to display content other than the main articles of a website. For example, a short list of recent articles, recent comments, a list of pages, or popular articles on a website can easily be displayed across the entire site.

🎅 assets/: Contains files like js, css static images, fonts etc. These files are not changed dynamically, it is required by many pages. For calling these assets you can use “<?php echo get_template_directory_uri(); ?>/assets/js/file.js”

🌲 templates/: These folder consists of many php files which can be use by some pages in wordpress as ‘Template’. For example I have a page called contact and I made a file as ‘contact_us.php’ and set its ‘Template Name’ as ‘Contact Us’ inside templates/ folder. Now I can select this template inside the ‘contact’ page.