Creating a Required Theme Folder and Files

It’s Day 3 Welcome to the Custom WordPress Theme Development. In lesson 1 – we learn about all the template files in WordPress and in lesson – 2 we learn how to setup the local server for Custom WordPress Theme Development.

In this Day-3 Article, we see setup of WordPress Theme Folder and Required template files to create which we work out throughout the WordPress Theme Development.

First goto your local server xampp -> htdocs -> wp-content -> themes -> under this folder create a new folder and name it with your theme name.

After creating WordPress Theme Folder you need to create the required files for your theme to install those are

index.php
style.css
functions.php
screenshot.png
assests folder – where placing all the styles and script files of your theme
- css files folder
- js files folder
- fonts folder
includes folder
template-parts folder – used for custom-template-part-files
templates folder – used for custom templates files

Now place the below code in top head of style.css

/* 
Theme Name: BtechiotBlogTheme
Text Domain: Btechiot
Version: 1.0
Decription: Fancy left sidebar Blog Theme
Tags: left-sidebar, responsive, fancy
Author: Shiva Kumar
Author URI: https://btechiot.com
*/

/* start your styling your Custom WordPress Theme Development */

The above content tells about your theme information – theme author, tags, description and more about the license of your theme.

Now in this course, we converting the HTML template to our WordPress Theme. Download the HTML template to access all the files which make your work so easy to develop a custom WordPress theme. And you will learn how to convert any type of HTML template to WordPress Theme.

Why we prefer html to wordpress theme development because your theme is almost designed with styles, scripts and mobile responsive. Now just you copy your code and past in wordpress template files and use the template tags to retrieve the data from wordpress pages and post.oney.

Follow the below step to start custom wordpress theme development process dividing your main index page into 4 different parts are

Create New files under your theme folder are
1. header.php
2. front-page.php
3. sidebar.php
4. footer.php
copy your index.html code to front-page.php
cut the header part of your theme which common to all the pages and past it in header.php
cut the footer part of your theme which common to all the pages and past in footer.php
now use below template tags in your front-page.php
1. <?php get_header(); ?> – place at top of front-page.php which to get header part from the header,php template file
2. <?php get_footer(); ?> – place at bottom of front-page.php to get footer part from the footer.php template file
3. <?php get_sidebar(); ?> – if you have side bar page in your front-page then place at above of <?php get_footer(); ?> in front-page.php to get sidebar.php part from the sidebar.php template file

Example: Look of header.php file

<!DOCTYPE html>
<html lang="en"> 
<head>
    <title>Blog Site Template</title>
    <!-- Meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Blog Site Template">
    <meta name="author" content="https://youtube.com/FollowAndrew">    
    <link rel="shortcut icon" href="images/logo.png"> 

    <!-- getting styles sheets from the functions.php file we see this in next lesson how to enqueue the script and style files in WordPress Theme Development-->
    <?php wp_head(); ?>

</head> 

<body>
   <header>
        <a href="#" class="logo">your logo</a>
        <nav>
            <!-- your menu navigation section -->
        </nav>
    </header>

Example: Look of footer.php file

    <footer class="footer-section">
        <!-- place your footer content  -->
    </footer>

    <!-- getting the script files from functions.php  -->
    <?php
        wp_footer();
    ?>

</body>
</html>

Example look of front-page.php file

<!-- calling header part from header.php -->
<?php get_header(); ?>

        <main class="main-container">
            <article class="body-article">
                <!-- place your article content -->
            </article>
        </main>

<!-- call the sidebar part from sidebar.php -->
<?php get_sidebar(); ?>

<!-- call the footer part from footer.php -->
<?php get_footer(); ?>

That’s it we have created our header, footer, sidebar and main content part of your home page.

In the next lesson, we see how to add your styles and script paths in WordPress Theme Development using functions in the functions.php template file.