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.

  • style.css Which regulates the discussion user interface style and design of the website pages. It likewise holds the customized CSS styling that you will relate to your theme.
  • index.php This data regulates the HTML as well as general outcome of your style. It is the main data used for outputting data on your web page.
  • header.php Allows you to specify an area to hold important information about your website in the <head> area as well as including opening <html> <body> and <div class="container"> tags.
  • footer.php The footer will close out any opening tags you specified in the header area, in addition to giving you a place to call the wp_footer() function.
  • functions.php Enables you to call functions, both PHP as well as integrated WordPress, and also to specify your very own functions in order to transform the default habits of WordPress like Shortcode, How to create custom WordPress Shortcode plugin
Basic Concept Create WordPress Theme
Basic Concept Create WordPress Theme

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.

Create WordPress Theme Directory
Create WordPress Theme 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.

Activate Theme on Admin Dashboard
Activate Theme on Admin Dashboard

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.

Test WordPress Site on the Browser
Test WordPress Site on the Browser

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.

Recommended For You

Leave a Reply

Your email address will not be published.