how to create a theme in wordpress

There are very few steps needed to create a theme in WordPress -

First Go to /wp-content/themes/
Make a directory that will be the name of your theme. For me, I’m naming it as custom-theme.
Now go inside that directory and create 2 file index.php and style.css

Step #1: Create style.css and index.php

A. style.css its main responsibility is to recognize our theme. We have to add the following code block in style.css. When you add this code block in your theme it will display all information when you preview the theme.

 /*
     Theme Name: My Custom Theme
     Theme URI: https://yourwebsite.com/theme
     Author: Your Name
     Author URI: https://yourwebsite.com
     Description: This is my first custom theme!
     Version: 1.0.0
     License: GNU General Public License v2 or later
     License URI: <https://www.gnu.org/licenses/gpl-2.0.html>
     Text Domain: my-custom-theme
     Tags: custom-background
 */

Here is how your theme will look like after adding the above code block in style.css

style.css Output

A. index.php index.php is the only other strictly required file. Its job is to render all the front-end output for our theme.

Since index.php is going to be rendering all of our pages (home, posts, categories, archives) it’s going to be doing a lot of work. To start we need a head section that will cover the HTML basics.

Now write code in index.php one by one

<!DOCTYPE html>
<html <?php language_attributes(); ?>>

here one thing to note we are adding additional values into the Html tag. so <?php language_attributes(); ?>> is builds up a set of HTML attributes containing the text direction and language information for the page. like for the English page, it will set lang=‘en’ and the same for the other language.

 <head>
        <meta charset="<?php bloginfo('charset'); ?>">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="profile" href="https://gmpg.org/xfn/11">
        <?php wp_head(); ?>
    </head>

Here we have used bloginfo which is basically used to display information about your current site. So here we have used it with charset. So it will fetch charset information from the blog/page. Next, we are using wp_head() which is necessary to use in any theme. It’s call action hook which allows WordPress and third-party plugins to insert code into the header without modifying your template files.

<body <?php body_class(); ?>>

body_class() is a helper function provided by WordPress that will output a list of useful CSS classes which describe the page being displayed such as: class="page page-id-2 page-parent page-template-default logged-in" . You can add additional classes in the function call like body_class(‘my-custom-class’); then it will append it in the body class with the default class. After using it, it will look something like this class="page page-id-2 page-parent page-template-default logged-in my-custom-class"

Now add header

<header class="site-header">
            <p class="site-title">
                <a href="<?php echo esc_url(home_url('/')); ?>">
                    <?php bloginfo('name'); ?>
                </a>
            </p>
            <p class="site-description"><?php bloginfo('description'); ?></p>
        </header> <!-- .site-header -->

Here we have used home_url() which basically gives us the home page URL. and same as before bloginfo function which is used with the name parameter to get the name of the page/blog and the same for description.

Now you can add your content

   <div class="site-content">
            <h5>You can add anything here. depend on your need</h5>
    </div> <!-- .site-content -->

Now add footer

<?php wp_footer(); ?>
    </body>
</html>

Here is the full code of index.php

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
    <head>
        <meta charset="<?php bloginfo('charset'); ?>">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="profile" href="https://gmpg.org/xfn/11">
        <?php wp_head(); ?>
    </head>
    <body <?php body_class(); ?>>
        <header class="site-header">
            <p class="site-title">
                <a href="<?php echo esc_url(home_url('/')); ?>">
                    <?php bloginfo('name'); ?>
                </a>
            </p>
            <p class="site-description"><?php bloginfo('description'); ?></p>
        </header> <!-- .site-header -->
        <div class="site-content">
            <h5>You can add anything here. depend on your need</h5>
        </div> <!-- .site-content -->
    <?php wp_footer(); ?>
    </body>
</html>

So our basic index.php is ready now. You can add whatever you want in the site-content section. Here is how it looks now

Index.php Output

Step #2: Create functions.php

functions.php is not strictly a required file, but it provides so many benefits that 99.99% of themes have it. In functions.php you can utilize WordPress’s built-in theme functionality and also add your own custom PHP code.

So in our case, we will be adding our custom CSS and js file in the functions.php and will see the output in the theme. So lets begin

Create folders named css & js
then add custom.css in css folder and main.js in js folder and add the following content to it

in custom.css

body {
    background-color: #3A3A3A;
    color: white;
}

in main.js

console.log('dom loaded');
alert('Congrats! you did it!')

Now require these files in fucntions.php by the following method

wp_enqueue_style( 'my-stylesheet', get_template_directory_uri() . '/css/custom.css' );
wp_enqueue_script('my-javascript', get_template_directory_uri() . '/js/main.js');

Now reload your theme and you will get the following output

main.js output style.css output

If you get the above output then congrats! you have successfully learned how to create a theme in WordPress or if you haven’t got the output do let me know in the comment section so that I can help!

Happy Learning!

How to create a theme in WordPress

Step #1: Create style.css and index.php

Step #2: Create functions.php