Create a custom WordPress theme from scratch using Bootstrap

In this WordPress tutorial, I will show you how to create a Custom WordPress theme from scratch using Bootstrap for beginners and very quickly.

If you are a good designer and highly skilled coder then you can also sell your WordPress theme to earn money. There are many websites available where you can sell your WordPress theme such as https://themeforest.net.

you need at least 5 files to create a WordPress theme and they are listed below:

  1. header.php
  2. index.php
  3. sidebar.php
  4. footer.php
  5. style.php

You can also create functions.php for creating your own functions and single.php for creating WordPress post page layout, although these two files are optional.

with the combination of these files, you can create the theme layout and required functions.

you can also use the readymade HTML templates to convert them into the WP theme, you need to split them into the parts of the header, footer, content part, and sidebar.

now I will show you the steps to create a custom WordPress theme from scratch using Bootstrap.

Step 1

Create your custom theme’s name folder in the themes folder of your WordPress i.e /wp-content/themes/yourThemeName

Step 2

Download the bootstrap framework for creating a responsive layout for the theme. You can download the latest pack of the bootstrap from here.

Extract the downloaded bootstrap package, you will find the JS and CSS folder in the package. Now rename the package folder name to be ‘bootstrap’ only and upload it into your custom theme folder.

Create Custom WordPress theme from scratch using Bootstrap

You can learn about creating a responsive website template with the help of the bootstrap from here šŸ‘‰ What Is Bootstrap And How To Use It In Front-End Development?

If you are using a readymade HTML template then just split the HTML layout into the parts of the header, footer, content wrapper, and sidebar.

Step 3

In this step, I will create minimum files required to build a WordPress theme and include bootstrap in your theme, they listed below:

  1. header.php
  2. index.php
  3. sidebar.php
  4. footer.php
  5. style.php
  6. functions.php

For now, you can leave them all blank, just create the files into your theme folder.

Step 4

Copy the following code and paste them in their required files in your theme.

Edit style.css

/*
Theme Name: Tech In Area
Theme URI: https://www.techinarea.com
Author: Pavan T Bhandarkar
Author URI: https://www.techinarea.com
Description: A basic theme using the Bootstrap framework.
Version: 1.0
Text Domain: techinarea
*/

Please edit theme name, URI, Author, etc information and all set here. You can add required CSS for your theme in this file.

Edit functions.php

<?php
function techinarea_enqueue_styles() {
     wp_register_style('bootstrap', get_template_directory_uri() . '/bootstrap/css/bootstrap.min.css' );
     wp_enqueue_style( 'techinarea-style', get_stylesheet_uri(), array('bootstrap') );
}

function techinarea_enqueue_scripts() {
     wp_enqueue_script('bootstrap', get_template_directory_uri().'/bootstrap/js/bootstrap.min.js', array('jquery'), '3.3.6', true );
}

add_action( 'wp_enqueue_scripts', 'techinarea_enqueue_styles' );
add_action( 'wp_enqueue_scripts', 'techinarea_enqueue_scripts' );

// code for adding page title into <title> tag
function techinarea_wp_setup() {
    add_theme_support( 'title-tag' );
}

add_action( 'after_setup_theme', 'techinarea_wp_setup' );
?>

This file is optional but we are creating it for including the bootstrap files into the theme, although you will never see a WordPress theme without this file.

You can also include these files directly in header.php within a <head> tag but that is not a proper way to do in WordPress, any JS or CSS file can be included with the help of wp_enqueue_scripts and wp_enqueue_style actions respectively.

Edit header.php

<!DOCTYPE html>
<html <?php language_attributes(); ?>>

<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>

    <div class="blog-masthead">
        <!-- Navigation -->
        <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
            <div class="container">
                <a class="navbar-brand" href="#">Start Bootstrap</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarResponsive">
                    <ul class="navbar-nav ml-auto">
                        <li class="nav-item active">
                            <a class="nav-link" href="#">Home
                              <span class="sr-only">(current)</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">About</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Services</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Contact</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </div>

    <div class="container">

        <div class="row">

Copy and paste the above code into your header.php file. Here I have used a static menu but if you want to use a dynamic menu of WordPress then use the wp_nav_menu function of WordPress at the place of the static menu.

Edit footer.php

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

</div><!-- /.container -->

<!-- Footer -->
<footer class="py-5 bg-dark">
    <div class="container">
      <p class="m-0 text-center text-white">Copyright &copy; Your Website 2019</p>
    </div>
</footer>
<?php wp_footer(); ?>
</body>
</html>

Edit sidebar.php

<div class="col-md-4">

    <!-- Search Widget -->
    <div class="card my-4">
        <h5 class="card-header">Search</h5>
        <div class="card-body">
            <div class="input-group">
                <input type="text" class="form-control" placeholder="Search for...">
                <span class="input-group-btn">
                <button class="btn btn-secondary" type="button">Go!</button>
              </span>
            </div>
        </div>
    </div>

    <!-- Categories Widget -->
    <div class="card my-4">
        <h5 class="card-header">Categories</h5>
        <div class="card-body">
            <div class="row">
                <div class="col-lg-6">
                    <ul class="list-unstyled mb-0">
                        <li>
                            <a href="#">Web Design</a>
                        </li>
                        <li>
                            <a href="#">HTML</a>
                        </li>
                        <li>
                            <a href="#">Freebies</a>
                        </li>
                    </ul>
                </div>
                <div class="col-lg-6">
                    <ul class="list-unstyled mb-0">
                        <li>
                            <a href="#">JavaScript</a>
                        </li>
                        <li>
                            <a href="#">CSS</a>
                        </li>
                        <li>
                            <a href="#">Tutorials</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <!-- Side Widget -->
    <div class="card my-4">
        <h5 class="card-header">Side Widget</h5>
        <div class="card-body">
            You can put anything you want inside of these side widgets. They are easy to use, and feature the new Bootstrap 4 card containers!
        </div>
    </div>

</div>

Edit index.php

<?php get_header(); ?>
<!-- Page Content -->
<div class="container">
<?php 
	 if ( have_posts() ) { 
	 while ( have_posts() ) : the_post();
	 ?>
		<div class="row">
			<!-- Post Content Column -->
			<div class="col-lg-8">
				<!-- Title -->
				<h1 class="mt-4"><?php the_title(); ?></h1>
				<!-- Author -->
				<p class="lead">
					by
					<?php the_author(); ?>
				</p>
				<hr>
				<!-- Date/Time -->
				<p>
					<?php the_date(); ?>
				</p>
				<hr>
				<!-- Preview Image -->
				<img class="img-fluid rounded" src="<?php echo get_the_post_thumbnail_url(null,'large'); ?>" alt="">
				<hr>
				<!-- Post Content -->
				<?php the_content(); ?>
				<hr>
			</div>
			<!-- Sidebar Widgets Column -->
			<?php get_sidebar(); ?>

				<!-- /.row -->
				<?php
			 endwhile;
			 } 
			 ?>
		</div>
</div>

<!-- /.container -->
<?php get_footer(); ?>

Output:

Create Custom WordPress theme from scratch using Bootstrap

Note: You can change in the above explained code as per your requirements.

Step 5

Navigate to Appearance > ThemesĀ from WordPress backend and find out your theme there, You will notice that the theme doesn’t have the preview image.

In this step, we will see how to set a preview image in the WordPress custom theme.

So for assigning preview image to your custom WordPress theme you just need to put an image into your theme folder with the name of screenshot.png

Here is the path instruction: (/wp-content/themes/yourThemeName/screenshot.png)

Your theme is all set now. Hover the mouse on the theme and click on the ActivateĀ button.

 

Comments are closed, but trackbacks and pingbacks are open.