How can we create a custom WordPress theme easily? 


WordPress Themes is a collection of template files written in PHP, HTML, CSS, and JavaScript. We need to have a good understanding of all of these web design languages ​​to create a custom WordPress theme. Using the new WordPress theme generators anyone can create their own customized WordPress theme within an hour without any coding knowledge. There are also WordPress page builder plugins that help you create custom page layouts using the drag and drop interface, but this is limited to layouts only; We cannot create custom themes.

This is until Beaver Builder decides to resolve this issue with their Beaver Theme. This is one of the best WordPress page builder plugins. We need to install and activate Beaver Builder and Beaver Theme plugins. We can find many themes in the theme directory. Some of the best WordPress themes are listed below 

Astra – This is a free lightweight all-purpose WordPress theme that comes with built-in support for Beaver Builder.

OceanWP – This is a popular free multipurpose WordPress theme that comes with full-page builder support.

StudioPress themes – All of their themes are compatible with Beaver Builder and work well with Beaver Theme. Use this link to set up your layout Setting up Your Theme for Beaver Themer

Requirements to Create a WordPress Theme

1. Installing WordPress 

The first thing we have to process with installing WordPress. It can be easily done by yourself. Second thing is to decide the layout of the theme.

2. Create a WordPress Theme either by Manual or Automated 

Manual       – creating WordPress theme via coding

Automated – creating a WordPress theme using a WordPress Theme Builder

Creates your custom theme ( without the use of plug-ins, widgets, or anyone else’s theme)

In discovery, follow the path of wp-content> themes to come to your themes folder. WordPress default themes – twentyfifteen, twentyeighteen, twentythirteen – and index.php. Create a new directory for your theme; I called it my startup WordPress.

Only two files are required to be a WordPress theme – style.css and index.php.

create style.css in your custom theme folder. It contains a comment that warns WordPress that there is a theme here. Change the name, author, description, and more.



Theme Name: Start WordPress

Author: Tania Rascia

Description: Bootstrap Blog template converted to WordPress

Version: 0.0.1

Tags: bootstrap


Remind Bootstrap blog source code, Move those two files – index.html and blog.css – to your custom theme folder. Rename Index.html to index.php.

Your theme is now created. Go to the WordPress Dashboard and click on Appearance> Themes. You will find all the default themes in the collection. Activate the theme and go to your main URL. Yes, it is very simple. You have already created a custom theme. One thing you may notice – blog.css is not loaded but bootstrap’s core CSS and JS files are loaded via CDN.

Note: Chrome will no longer allow .dev local URLs. 

Fortunately, this can be easily fixed. There are some ways to do this, but I will show you the simplest way to get started.

Find the place where you linked to the CSS stylesheet in the index of index.php It seems like it right now, but we need to change that.

<link href=”blog.css” rel=”stylesheet” />

We have to say it in such a way that the themes change with the folder. Replace the code above with the code below.

<link href=”<?php echo get_bloginfo(‘template_directory’); ?>/blog.css” rel=”stylesheet”>

If you reload the page, you will see that CSS is now loaded. If it does not load, please make a hard update. This concept is the same for images, javascript, and other files in the Themes folder, except for PHP files.

If you are unable to load CSS successfully, click “View Source” and find the path to your CSS file in the code. It should be Make sure Blog.css is stored in the right place.

Keep in mind that this is not the right way to load scripts on your site. It’s easy to understand and it works, so let’s do it now.

Dividing of pages into sections

Now, everything is in index.php. But we want the title, footer, and sidebar to be the same on all pages. We are going to divide index.php into four sections namely header.php, footer.php, sidebar.php, and content.php. The original index.php is here. Now we start to cut and paste.

<! Everything from DOCTYPE html> to the main blog title is in the title file. The title usually contains all the necessary head styles and navigation over the website. The only addition I make to the code is <? Php wp_head (); ?> Before closing </head>.


<!DOCTYPE html>

<html lang=”en”>


  <meta charset=”utf-8″>

  <meta http-equiv=”X-UA-Compatible” content=”IE=edge”>

  <meta name=”viewport” content=”width=device-width, initial-scale=1″>

  <meta name=”description” content=””>

  <meta name=”author” content=””>

  <title>Blog Template for Bootstrap</title>

  <link href=”” rel=”stylesheet”>

  <link href=”<?php echo get_bloginfo( ‘template_directory’ );?>/blog.css” rel=”stylesheet”>

  <!– HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries –>

  <!–[if lt IE 9]>

      <script src=””></script>

      <script src=””></script>


  <?php wp_head();?>



  <div class=”blog-masthead”>

    <div class=”container”>

      <nav class=”blog-nav”>

        <a class=”blog-nav-item active” href=”#”>Home</a>

        <a class=”blog-nav-item” href=”#”>New features</a>

        <a class=”blog-nav-item” href=”#”>Press</a>

        <a class=”blog-nav-item” href=”#”>New hires</a>

        <a class=”blog-nav-item” href=”#”>About</a>




  <div class=”container”>

    <div class=”blog-header”>

      <h1 class=”blog-title”>The Bootstrap Blog</h1>

      <p class=”lead blog-description”>The official example template of creating a blog with Bootstrap.</p>


The title to the footer is the same deal. Any footnotes you have, your JS links (for now) and <? Php wp_footer (); ?> Perfect front </body>. Since I added the .container div to the title, I’m going to close it in the footer.


</div> <!– /.container –>

    <footer class=”blog-footer”>

      <p>Blog template built for <a href=””>Bootstrap</a> by <a href=””>@mdo</a>.</p>


        <a href=”#”>Back to top</a>



    <script src=””></script>

    <script src=””></script>

  <?php wp_footer(); ?>



Most websites, especially blogs, archives, tags, category, ads, and whatnot contain a page for adding content. (Content removed for summary.)


<div class=”col-sm-3 col-sm-offset-1 blog-sidebar”>

  <div class=”sidebar-module sidebar-module-inset”>



      Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur

      purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.



  <div class=”sidebar-module”>


    <ol class=”list-unstyled”>

      <li><a href=”#”>March 2014</a></li>

      <!– More archive examples –>



  <div class=”sidebar-module”>


    <ol class=”list-unstyled”>

      <li><a href=”#”>GitHub</a></li>

      <li><a href=”#”>Twitter</a></li>

      <li><a href=”#”>Facebook</a></li>




<!– /.blog-sidebar –>

If there is a sidebar where all the secondary information goes, then all the articles and important content of the website is available content. 


<div class=”blog-post”>

  <h2 class=”blog-post-title”>Sample blog post</h2>

  <p class=”blog-post-meta”>January 1, 2014 by <a href=”#”>Mark</a></p>


    This blog post shows a few different types of content that are supported and styled with

    Bootstrap. Basic typography, images, and code are all supported.


  <hr />

  <!– the rest of the content –>


<!– /.blog-post –>


The index file should now be much smaller. In fact, it should be:

<div class=”row”>

  <div class=”col-sm-8 blog-main”></div>

  <!– /.blog-main –>


<!– /.row –>

Now we are going to add everything again. Here is your new index.php.


<?php get_header(); ?>

<div class=”row”>

<div class=”col-sm-8 blog-main”>

<?php get_template_part( ‘content’, get_post_format() ); ?>

</div> <!– /.blog-main –>

<?php get_sidebar(); ?>

</div> <!– /.row –>

<?php get_footer(); ?>

Even if you have never used PHP before, this code is all self-explanatory. get_header () ;, get_sidebar (); And get_footer (); All functions for searching for the respective .php files and inserting the code. Sure, they all have their own <? Php?> Go to the tags and tell the server to parse them into HTML. The content function is a bit different, but it does the same thing.

If you re-load your URL, your entire site is loaded as before. If you log in at the back end you will see the top bar.

Primary settings

Before you can start dragging posts and pages, you need to configure some key settings in WordPress. For example, my title is now “Bootstrap Blog”, which is hardcoded in HTML. I want the <title> and <h1> back-end of my site to be editable.

On your dashboard, go to Settings> General. Set your title.

In Header.php, convert the contents of the title tag and the main h1 tag to this code:

<? php echo get_bloginfo (‘name’); ?>

This is an explanation.

<? php echo get_bloginfo (‘description’); ?>

Finally, the title always wants to take me to the main blog page. bloginfo (‘wpurl’); The code that makes it.

<a href=”<?php Echo get_bloginfo(‘wpurl’) ;?> “> <! – Site Title -> </a>

If you are confused the full code is here.

<div class = “blog-header”>

  <h1 class = “blog-title”> <a href=”<?php echo get_bloginfo(‘wpurl’) ;?> “> <? php echo get_bloginfo (‘name’); ?> </a> </h1>

  <p class = “lead blog-description”> <? php echo get_bloginfo (‘description’); ?> </p>


We have finally made the first dynamic change to the page. The front end should reflect what you have in your settings. Now go to Settings> Permalin. By default, WordPress is set today and name, which is a very ugly URL system. Click on the post name and apply the changes.

The Loop

The most exciting part is being able to dynamically insert content, and we do that through The Loop in WordPress. This is the most important function of WordPress. All your content is created by a single loop.

In the dashboard, if you click on the post, “Hello, world!” Post there by default. Our goal is to show that post on the blog.

The loop is very simple.

<? php if (have_posts ()): when (have_posts ()): the_post (); ?>

  <! – Contents of the ring ->

<? php end; endif; ?>

This explains itself – if there are posts, when there are posts, show the post. Anything within the ring will be repeated. For a blog, this is the post title, date, content, and comments. The loop ends where each individual post ends. We are going to add a loop in index.php.

Your new index file is here.


<? php get_header (); ?>

<div class = “row”>

<div class = “col-sm-8 blog-main”>

<? php

if (have_posts ()): when (have_posts ()): the_post ();

        get_template_part (‘Content’, get_post_format ());

In the meantime; endif;


</div> <! – /.blog-main ->

<? php get_sidebar (); ?>

</div> <! – /.row ->

<? php get_footer (); ?>

The only thing inside your ring is content.php, which contains the contents of a single post. So open content.php and change the contents to:

<div class = “blog-post”>

<h2 class = “blog-post-title”> <? php the_title (); ?> </h2>

<p class = “blog-post-meta”> <? php the_date (); ?> Issued by <a href=”#”> <? php the_author (); ?> </a> </p>

 <? php the_content (); ?>

</div> <! – /.blog-post ->

Title (); The title of the blog post, the_date (); Shows the date, the_author (); Author, and the_content (); The content of your post. I added another post to prove it works in the ring.

Let’s make the sidebar dynamic. The sidebar should have a description and archive list. On the dashboard, I’m going to edit my user description to say “front end web developer and professional nerd”.

Remove all <li>s under archives and convert them to this code.



<ol class=”list-unstyled”>

<?php wp_get_archives( ‘type=monthly’ ); ?>


For my explanation, I am going to pull metadata from my user account.


<p><?php the_author_meta( ‘description’ ); ?> </p>

Now this content is being pulled into dynamics as well.

Menu and pages

We know how to create a blog and edit some sidebar content. There is only one important aspect of this page – the navigation and where it goes. Well, WordPress has two main features – Posts and Pages. They are both very similar in their use of the loop. However, pages, where you post content that is not a blog post, are pages. This is where WordPress’s CMS feature comes in – you can customize each page as much as you want.

In the dashboard, I have added one page so I can see two. First, we are going to edit the navbar so that the links lead to the pages. Go back to header.php and find and replace this code.


<div class=”blog-masthead”>

<div class=”container”>

<nav class=”blog-nav”>

<a class=”blog-nav-item active” href=”#”>Home</a>

<?php wp_list_pages( ‘&title_li=’ ); ?>




wp_list_pages (); The unlisted list will list all the pages you have. ‘title_li =’ The code tells you not to add the title “Pages” before the list. Unfortunately for us this is terrible; The original blog.css contains links encoded in a tag, not li tags.

Fortunately, this is a very easy solution. I am going to use styles from one to another. Add this to blog.css


.blog-nav li {

  Status: relative;

  Display: inline-volume;

  Dump: 10px;

  Font weight: 500;


.blog-nav li a {

  Color: #fff;


Now it should be displayed correctly. However, if CSS does not apply, please find the source of your HTML output and find out the URL of your CSS. It should be Be sure to do even better


Think of index.php as a blog-code and page.php as a page-code. I’m going to create page.php, which will be very similar to the code except for the 8-width content and the full 12-width grid instead of the 4-width sidebar.


<? php get_header (); ?>

<div class = “row”>

<div class = “col-sm-12”>

<? php

if (have_posts ()): when (have_posts ()): the_post ();

get_template_part (‘Content’, get_post_format ());

In the meantime; endif;


</div> <! – /.col ->

</div> <! – /.row ->

<? php get_footer (); ?>

When I click on my sample page, the layout is now different from the blog post layout.


There is still a lot to learn about WordPress. Now you know how to turn any website into a WordPress theme – without the use of plug-ins, widgets, or anyone else’s theme.

Previous post How to Install WordPress
Next post How to Create a Child Theme in wordpress?

Leave a Reply

Your email address will not be published. Required fields are marked *