Basic Tutorial Easily Create WordPress Theme for Beginners

WordPress permits developers to create WordPress theme for own usage, for a customer project or to submit to the WordPress Style Directory. WordPress Theme is a collection of documents collaborating and also used to define the user interface look and also screen of a WordPress site which enables you to change, modify, handle, and include from the WordPress admin area.

There are a number of complimentary and also paid plenty of WordPress styles readily available out there, nonetheless locating one that has the precise appearance and capability based on your needed it can be tough. Producing a custom-made style for WordPress is a reasonably straightforward procedure. It likewise does not need much technical knowledge or experience with internet growth.

If you want to develop or create WordPress theme, you might desire to develop WordPress Themes for your very own usage. This tutorial will certainly aid you construct the simplest theme as well as develop a special seek your WordPress website.

Prerequisites

For this tutorial, you should have an extensive understanding of HTML and also CSS, as both are necessary foundation for dealing with WordPress. You should additionally have a localhost atmosphere established on your computer system in which you work in WordPress.

Basic Concept Create WordPress Theme

WordPress Themes typically contain major sorts of documents, in addition to pictures as well as JavaScript data.

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 possessions directory, template-parts are put in under particular subdirectory of template-parts and collection of features connected to core functionalities are positioned 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 constructing your theme, you will certainly make use of design template data to influence the design and layout of different parts of your internet site. For instance, 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 Motif’s subdirectory holds all of the Theme’s stylesheet data, theme files, and optional functions file functions.php, JavaScript files, and images.

In addition to CSS design information for your theme, style.css provides information concerning the Theme in the form of comments. The stylesheet should provide information about the Theme in the form of comments. No 2 Themes are permitted to have the very same information noted in their comment headers, as this will cause troubles in the Style option dialog. If you make your very own Theme by copying an existing one, make sure you change this information initially.

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://www.otnix.com/
Author: Otnix Team
Author URI: http://www.otnix.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 includes your site’s file type, meta details, links to stylesheets as well as scripts, and also various other data.
Here’s an instance of a correctly-formatted HTML5 certified 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 major template documents. It is called for in all styles. The index data manages what the homepage of your WordPress style looks like. By default, it is a loophole that inquires and then shows the most recent article, with a link in the bottom to view previous articles.

<?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.