How to create a custom theme in WordPress? Step by Step

How to create a custom theme in WordPress? Step by Step

WordPress Custom Theme Development is not tough as we think. When I started learning WordPress I just messed things up and ignored the Template Hierarchy of WordPress.

If we got the Template Hierarchy then it would be very easy to develop Custom WordPress Theme.

In this post, you will be guided Step-by-Step, hope you will feel easy to develop Custom WordPress themes.

Let’s Take Action

Step 1: Create Folder/Directory to wp-content/themes

The very first step is to create the theme name in the themes directory. So Create a folder for your theme. In my case I named nauloupaya.

After creating the theme name create style.css , this file defines the theme existence or theme defination.

After creating style.css file we have to create index.php file, so create it and check the theme will appear in the themes section. We have Successfully created the theme but it’s not completed we need some more files to add functionality to our theme.

Step 2: Create functions.php

This is the most important file in WordPress Theme Development. All functionality was performed using functions.php so,  a theme had to functions.php

Now, we have to include JavaScript and CSS files for our theme.There are some methods to include those files.

<?php

if (!function_exists('theme_enquee_scripts'))
{
	function theme_enquee_scripts()
	{
		wp_enqueue_style('google_fonts_sans', 'https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap');
		wp_enqueue_style('mdb', 'https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.1.1/css/mdb.min.css');
		wp_enqueue_style('bootstrap', 'https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.4/css/bootstrap.css');

		wp_enqueue_script( 'bootstrap_JS', 'https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.4/js/bootstrap.min.js');
		wp_enqueue_script( 'mdb_js', 'https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.1.1/js/mdb.min.js');

	}
}
add_action('wp_enqueue_scripts', 'theme_enquee_scripts');

Step 3: Create other files

We have to create other files as WordPress Template Hierarchy shows.

Image Source: https://code.tutsplus.com/articles/the-wordpress-theme-files-execution-hierarchy–wp-23508

We do not need to create all files as Template Hierarchy Show as per our requirements we could mention or create in our theme.

We could create home.php or front-page.php as a homepage to our theme. 

After that, we create  header.php, footer.php, page.php, category.php, and single.php




Copyright © 2020-2021 Engineer Jagat All rights reserved. Developed by Ravindra Rana