Tutorial•Wordpress Theme

How To Create a WordPress Theme for Beginners – Part 2: The Structure

06/01/2020 by miziology No Comments
B

efore we start to code, first we have to sketch our web layout that we want such as where the header or logo, menus, sidebar (if any) or anything else. This step may seem inconvenient but for some, this step will help them to focus and know their design direction.

So for this wordpress theme tutorial we will create it like below:

From the above diagram, we will create 4 different PHP files (index.php, header.php, sidebar.php and footer.php) to produce one homepage wordpress theme template. Please not that we will using header.php, sidebar.php and footer.php in every single template page. To understand the basic code structure of these 4 files, I’ll break it down in below HTML5 code.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Title of the Website</title>
        <!-- Your META, CSS File, In-line CSS Style -->
    </head>
    <body>
        <header>
            <!-- Your Header, Logo, Menus -->
        </header>
                <div><!-- Sidebar --></div>
        <footer>
            <!-- Your Footer, Copyright -->
        </footer>
    </body>
</html> 
<?php get_header(); //will include header.php ?>
    <section>
        <div><!-- Your Main Content --></div>
        <?php get_sidebar(); //will include sidebar.php ?>
    </section>
<?php get_footer(); //will include footer.php ?>

Now you can see it clearly how wordpress theme files works. That’s all for now, we will continue in the Part 3 on How To Create a WordPress Theme for Beginners in the next post. Happy coding everyone!

ps: If you guys find some error or something not good on this tutorial, feel free to comment in below section. I will improve it and learn from mistakes. Thanks.

Credit: Technology vector created by freepik – www.freepik.com