Basic Tutorial Easily Create WordPress Theme for Beginners

WordPress allows developers to create WordPress theme for own use, for a client project or to submit to the WordPress Theme Directory. WordPress Theme is a collection of files working together and used to define the interface appearance and display of a WordPress website which allows you to change,  modify, manage, and add from the WordPress admin area.

There are several free and paid plenty of WordPress themes available out there, however finding one that has the exact look and functionality based on your required it can be difficult. Creating a custom theme for WordPress is a relatively straightforward process. It also doesn’t require much technical knowledge or experience with web development.

If you want to develop or create WordPress theme, You may wish to develop WordPress Themes for your own use. This tutorial will help you build the simplest theme and create a unique look for your WordPress site.

Prerequisites

For this tutorial, you must have a thorough understanding of HTML and CSS, as both are essential building blocks for working with WordPress. You should also have a localhost environment set up on your computer in which you work in WordPress.

---

Basic Concept Create WordPress Theme

WordPress Themes typically consist of main types of files, in addition to images and JavaScript files.

Let’s get started on the following lessons.

---

Lesson 1: Create WordPress Theme Directory

WordPress Themes by default is located in subdirectories of the WordPress themes directory wp-content/themes/. Create a new folder directory and name it a bit unique, For example, a Theme named “test” would reside in the directory wp-content/themes/test/.

The main theme template files are in this directory, while JavaScript, CSS, images are placed in assets directory, template-parts are placed in under respective subdirectory of template-parts and collection of functions related to core functionalities are placed in inc directory.

Avoid using numbers for the theme name, as this prevents it from being displayed in the available themes list.

---

Lesson 2: Create WordPress Template Files

The Theme’s subdirectory holds all of the Theme’s stylesheet files, template files, and optional functions file functions.php, JavaScript files, and images.

When you are building your theme, you will use template files to affect the layout and design of different parts of your website. For example, you would use the header.php template to create a header, or the comments.php template to include comments.

---

Lesson 3: Create Theme Stylesheet File

The Theme’s subdirectory holds all of the Theme’s stylesheet files, template files, and optional functions file functions.php, JavaScript files, and images.

In addition to CSS style information for your theme, style.css provides details about the Theme in the form of comments. The stylesheet must provide details about the Theme in the form of comments. No two Themes are allowed to have the same details listed in their comment headers, as this will lead to problems in the Theme selection dialog. If you make your own Theme by copying an existing one, make sure you change this information first.

The following is an example of the first few lines of the stylesheet, called the stylesheet header, for the Theme “Twenty Thirteen”:

/*
Theme Name: OtnixTheme
Theme URI: https://samsungdriverseries.com/
Author: Otnix Team
Author URI: http://samsungdriverseries.com/
Description: Theme Basic Tutorial Easily Create WordPress Theme
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: -
Text Domain: Otnix.com
*/

.header {
  background-color: #ccccff;
}

.footer {
  background-color: #eeeeee;
}

NB: The name used for the Author is suggested to be the same as the Theme Author’s wordpress.org username, although it can be the author’s real name as well. The choice is the Theme Author’s.

---

Lesson 4: Create Theme Header File

The WordPress header file usually contains your site’s document type, meta information, links to stylesheets and scripts, and other data.
Here’s an example of a correctly-formatted HTML5 compliant head area:

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <title><?php bloginfo( 'name' ); ?></title>
    <?php wp_head() ?>
</head>
<body <?php body_class(); ?>>
<header class="header">
    <h1><?php bloginfo( 'name' ); ?></h1>
    <h4><?php bloginfo( 'description' ); ?></h4>
</header>

---

Lesson 5: Create Theme Footer File

Contains instructions for global footer and closes HTML tags. Use the wp_footer() call, to appear just before closing </body> tag.

<footer class="footer">
<p>&copy All Rights Reserved - <?php bloginfo( 'name' ) ?></p>
</footer>
<?php wp_footer() ?>
</body>
</html>

---

Lesson 6: Create Theme Index File

The main template file. It is required in all themes. The index file controls what the homepage of your WordPress theme looks like. By default, it is a loop that queries and then displays the most recent blog posts, with a link in the bottom to view previous posts.

<?php
get_header();
if ( have_posts() ) :
	while ( have_posts() ) : the_post(); ?>
        <article class="post">
            <h2><a href="<?php the_permalink() ?>"><?php the_title() ?></a></h2>
            <?php the_content() ?>
        </article>
	<?php endwhile;
else :
	echo '<p>Oppps..!! no posts</p>';
endif;
get_footer();

---

Lesson 7: Create Theme Functions File

A functions.php allows you to put your own custom PHP code in order to modify core elements of your theme. It is often used to specify multiple sidebars, change the number of characters in the excerpt or add custom admin panel options for wp-admin.

<?php

function otnix_custom_script() {
wp_enqueue_style( 'style', get_stylesheet_uri() );
}

add_action( 'wp_enqueue_scripts', 'otnix_custom_script' );

---

Lesson 8: Activate Theme on Admin Dashboard

At this point we can visit our WordPress Dashboard and navigate to Appearance → Themes and lo and behold, we see the new theme we have created.

---

Lesson 9: Test WordPress Site on the Browser

Finally, visit your website now in the browser, we can see that the WordPress Theme that we have created.

---

If this article basic guides create WordPress theme for beginners could help you, please rate above Star button rating and share to help others find it! Feel free to leave a comment below.