Technology WordPress

Create Custom WordPress Theme

February 18, 2022

How to Create WordPress Theme from Scratch: Step by Step Guide

Growing WordPress theme can be clearly simple in case you know basic HTML, CSS, and JavaScrip. However, in case you are new to WordPress, all you need to do is to follow the stairs mentioned in this educational for novices. I have indexed the required steps and mentioned the critical aspects of developing WordPress theme. So, let’s read this academic guide and discover ways to create WordPress theme from scratch.

WordPress is a extensively used open-supply content management gadget (CMS) around the globe. A complete of extra than forty% of sites are using WordPress. You could additionally pick this platform to create a sturdy on line presence and set up your commercial enterprise on-line effects with the help of effective WordPress software. WordPress is an apparent choice and the best one to start with. And that is the primary motive why each developer suggests deciding on it because the base of your website. However, if you are nevertheless no longer sure approximately what is WordPress or that’s the first-class open-supply CMS, then analyzing this guide will virtually shed a few light to make matters clear for you.

So, with out an awful lot ado, let’s begin with developing WordPress topic step-with the aid of-step method

How to Create a WordPress topic? Educational for novices

Designers and builders were unconsciously partial in the direction of WordPress primarily based themes for not just one however several motives. At times, a few client particularly asks for a WordPress web site. And the primary motive at the back of the big reputation of WordPress lies in its simplicity. In truth, it’s far a exceptionally bendy and powerful CMS. For this reason, people who are running with any other CMS(s) like Joomla, Drupal, and so forth. May sometimes desire emigrate i.E. From Joomla to WordPress or so on. So, permit’s now recognize why human beings love this platform so much.

What are the requirements to Create WordPress subject matter?

1. Putting in WordPress domestically

First factor first, you need to put in WordPress. Don’t worry it’s now not rocket technology to learn how to install WordPress. You may easily do that your self.

2. Process to create a WordPress subject matter From Scratch.

Guide – creating WordPress subject matter via coding
Automatic – developing WordPress subject matter using a WordPress theme Builder
For WordPress topic, the whole lot may be finished in the wp_content directory most effective. Just make a brand new subject subfolder in the wp_content → issues folder. Permit’s count on you name it “mytheme”.

The second one issue is to decide the format of the topic. Here, the tutorial is displaying the simple layout consisting of Header, most important area, Footer, Sidebar.

Essentially, WordPress wishes most effective 2 files i.E. Style.css and index.Php. However for this layout, you want five documents, as follows;

  • Header.php Preprocessor – consists of the code for the header phase of the subject matter.
  • Index.php Preprocessor – consists of the code for the primary region and could specify where the other documents may be covered. This is the main document of the theme.
  • Sidebar.Php – contains the data about the sidebar.
  • Footer.php home page – handles the footer segment.
  • Style.css – liable for the styling of your theme.
  • Bootstrap.css – no separate CSS code is required; exceptionally responsive.
  • Bootstrap.js – gives its personal js for the navigation bar, or tabs, etc.
  • You want to down load the Bootstrap bundle. Bootstrap.js & Bootstrap.css file desires to be copied to the subject matter folder.
  1. The way to Create custom WordPress subject step by step?
  2. Create WordPress topic from Scratch by means of Coding (Manually)
  3. Create WordPress topic with Template (automatic)
  4. You can create these files domestically with a text editor like Notepad. Beneath are the documents, you want to create to get commenced.

Steps for growing WordPress topic from Scratch by means of Coding

Step 1: header.php File

You need to put this code in the header.php file.

<html>
<head>
<title>Tutorial theme</title>
<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri().'/js/jquery.js'; ?>">
</script>
<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri().'/js/jquery-ui.min.js'; ?>">
</script>
<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri().'/js/bootstrap.js'; ?>">
</script>
<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri().'/css/bootstrap.css'; ?>">
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
</head>

<body>

<div id="ttr_header" class="jumbotron">
<h1>HEADER</h1>
</div>
<div class="container">

His report Header.php Preprocessor consists of the code for the header element wherein the js and fashion document is related. It presentations the header of the web page.

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">

This line added after the name tells WordPress to load a Style.css report with a purpose to handle the styling of the topic.

<?php bloginfo('stylesheet_url'); ?>

is a WordPress function that actually loads the stylesheet.

<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri().'/css/bootstrap.css'; ?>">

Here, we use Bootstrap. It is one of the well-known responsive net design frameworks. It affords built in CSS documents to fashion your site. You may preserve the bootstrap.Css document for your subject/css folder.

Subsequent, a “div” with elegance ttr_header is introduced and this can be the main box of the web page. Now, set a class for it so you can adjust it thru the style.Css report.

After that, add a simple label HEADER in a “div identification” with class “ttr_header” to be able to be later distinctive within the magnificence “jumbotron”.

Step 2: index.Personal home page file

The principle report index.Personal home page will comprise the subsequent code;

<?php get_header(); ?>
<div id="ttr_main" class="row">
<div id="ttr_content" class="col-lg-8 col-sm-8 col-md-8 col-xs-12">

<div class="row">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="col-lg-6 col-sm-6 col-md-6 col-xs-12">
<h1><?php the_title(); ?></h1>
<h4>Posted on <?php the_time('F jS, Y') ?></h4>
<p><?php the_content(__('(more...)')); ?></p>
</div>
<?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>
</div>
</div>
<?php get_sidebar(); ?>
</div>

<?php get_footer(); ?>

The very first line of code in this file

<?php get_header(); ?>

will include the header.php file and the code in it are on the main page.

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="col-lg-6 col-sm-6 col-md-6 col-xs-12">
<h1><?php the_title(); ?></h1>
<h4>Posted on <?php the_time('F jS, Y') ?></h4>
<p><?php the_content(__('(more...)')); ?></p>
</div>
<?php endwhile; else: ?>

The above code presentations the primary content of the submit which you have created through the WordPress administrative vicinity.
Subsequent, add the sidebar.php home page document like shown below

<?php get_sidebar(); ?>

In this file, you could display your current posts, records, contact data, and so forth.

After this line, an empty “div” inserted so one can separate the principle area and the Sidebar from the footer.

Subsequently, brought one remaining line

<?php get_footer(); ?>

which will include the footer.php file.

Step 3: Sidebar.php File

In the sidebar.php, add the following code

<div id="ttr_sidebar" class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<h2 ><?php _e('Categories'); ?></h2>
<ul > <?php wp_list_cats('sort_column=namonthly'); ?> </ul>
<h2 ><?php _e('Archives'); ?></h2>
<ul > <?php wp_get_archives(); ?> </ul>
</div>

In this file, internal WordPress functions are called to display the different Categories, Archives of posts. The WordPress function returns them as list items, therefore, you have to wrap the actual functions in unsorted lists (the

    • tags).

Step 4: footer.php File

Add the below code lines to the footer.php file:

<div id= "ttr_footer">
<h1>FOOTER</h1>
</div>
</div>
</body>
</html>

This will add a easy FOOTER label. However, you can additionally upload links, extra text, the copyright records on your topic in vicinity of simple Footer text.

Step 5: style.css document

Upload the following traces to the Style.Css record

body
{
text-align: left;
}
#ttr_sidebar
{
border-left: 1px solid black;
}
#ttr_footer
{
width: 100%;
border-top: 1px #a2a2a2 solid;
text-align: center;
}
.title
{
font-size: 11pt;
font-family: verdana;
font-weight: bold;
}

His CSS document units the fundamental appearance of your theme. This could set the historical past of the page and upload the borders as in step with your desires.

Leave a Reply