Basic WordPress Theme Structure

Basic WordPress Theme Structure

by

In this article I will show you the Basic WordPress Theme Structure and so that you can easily create a WordPress template from the scratch.

WordPress Worldwide Statistic

4.5% of the website is operated and run by the WordPress Content Management System (CMS) followed by Joomla, Drupal. WordPress was the king of all Content Management System (CMS) all blogging platforms worldwide run by WordPress no wonder it is the most popular CMS of them all.

WordPress is the most simple and easiest customizable platform template compared to other content management systems like Joomla and Drupal and easy to set up to your web server’s the file structure are easy to manage and customizable user interface. If you have a  knowledge of programming and coding in PHP, HTML/CSS it was a lot easier to customize your own WordPress Theme and advantage to create your own template design.

In your WordPress root directory, there is a folder name themes C:\xampp\htdocs\marjun.net\wp-content\themes\MarjunTheme every folder in this path has a unique subdirectory.

WordPress Theme Structure

There is a two file structure for the basic fundamental of the WordPress theme which is the main file to read if you open the website

  • index.php
  • style.css

index.php
index.php is must be present in the first or template folder in your directory root it is the main page to display by all pages on the website.

Take a look my index.php sample

<?php get_header(); ?>
<?php get_template_part('navigation'); ?>
<?php get_template_part('indexheader'); ?>

     <!-- Main Content -->
    <div class="container">
      <div class="row">
        <div class="col-lg-8 col-md-10 mx-auto">
          <?php if(have_posts()): ?>
          <?php while (have_posts()) : the_post(); ?>
          <div class="post-preview">
            <a class="post-title" href="<?php the_permalink(); ?>">
         
              <h2 class="post-title">
                <?php the_title(); ?>
              </h2>
              <h3 class="post-subtitle">
              </h3>
            </a>
            <p class="post-meta">Posted by
              <a href="#"><?php the_author_posts_link(); ?></a>
              <?php the_time( 'F jS, Y' ); ?></p>
          </div>
          <hr>
                <?php endwhile; ?>
                <?php else: ?>
                  <p><?php __('No Post Found'); ?></p>
                <?php endif; ?>
          <!-- Pager -->
          <div class="clearfix" style="text-align: center;">
              <?php echo paginate_links( $args ); ?>
          </div>
        </div>
      </div>
    </div>

   <?php get_footer(); ?>

style.css
It is consists of all CSS code in your template this is the main stylesheet of your themes and must include in your main themes directory folder and it should place inside your head tag <head>.

style.css file must contain information about your theme and provide details about the ownership of the theme in the form of comments before the actual CSS codes. If you creating your own theme make sure that you put your ownership or author information inside the comments before the actual CSS codes below.

The following is my example stylesheet code that I’m using to my website template

/*
Theme Name: Marjun Theme
Theme URI: http://www.marjun.net/MarjunTheme
Author: Marjun Guindulman
Author URI: http://www.marjun.net/
Description: Bootstrap 4 to WP Theme
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: marjuntheme

*/

This is the template files include

  • header.php
  • comments.php
  • single.php
  • page.php
  • footer.php
  • sidebar.php

These files can include into your index.php file within the same path directory in your theme folder C:\xampp\htdocs\marjun.net\wp-content\themes\MarjunTheme.

Inside your index.php you can include those files with this GET function

  • get_header()
  • get_comments()
  • get_single()
  • get_page()
  • get_footer()
  • get_sidebar()

Here is the example include code inside your index.php

<?php get_header(); ?>
<?php get_comments(); ?>
<?php get_single(); ?>
<?php get_page(); ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

So that’s it I hope it can help you with your WordPress theme customization or if you want to create your own WordPress Template if you want to stay updated about Website Development just bookmarks this website and stay connected with us at https://marjun.net/category/web-development/

Happy Coding.

Leave a Comment