How to create a custom theme in WordPress with Bootstrap 5?

In the WordPress CMS, the theme takes care of the website’s flow, color scheme, design, and many other things containing PHP files, style sheets, images, JavaScript libraries, etc. It allows to keep multiple themes on standby but activates one only.

Steps to Create Custom Theme

Let’s start, but have you installed WordPress CMS in your local webserver? In case not then install it. After installation open it into visual studio code or any other code editor.

WordPress keeps the theme in the themes directory inside wp-content that is located in the root.

Theme Directory

Every theme has a name that shows on the WordPress themes page in the admin panel. It allows putting any name in lower case if the name contains more than one word keep it without blank space and any special character.

Theme name and folder inside themes directory

Here we will be creating a nice and clean theme so create a folder inside the theme directory with the name of niceandclean. Next, create the following files in the created folder,

  • header.php
  • index.php
  • sidebar.php
  • function.php
  • footer.php
  • style.css
  • screenshot.png (width: 1200 pixel and height: 900 pixel)

Add Bootstrap 5 to the Theme

Now, we included all required files so let’s add bootstrap 5 to the theme. Go to Bootstrap 5 documentation to copy the starter template into header.php and footer.php. Bootstrap 5 is linked in the starter template through CDN.

In the header.php add the following code,

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>

Also, add wp_head() function before <head> tag ends. Below is an example

<?php wp_head(); ?>
  </head>
  <body>

wp_head() calls all the functions that are hooked with wp_head action. Next, in the footer.php close the body and html tags along with bootstrap script tags. So below code is for footer.php

<!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
    -->
  </body>
</html>

In the next step include the header and footer in the index.php file.

<?php get_header();?>

// html or content etc

<?php get_footer(); ?>

Between the header and footer add the following code that shows the recently added post and also follows bootstrap’s div structure.

<div class="container">
    <div class="row align-items-start mt-2">
        <h1 class="homepage-main-heading mb-4" >New Post</h1>
        <?php
            query_posts("post_type=post&showposts=50");
            if ( have_posts() ) {

                while ( have_posts() ) {
                    the_post();
                    $image = get_the_post_thumbnail_url();
                    $categorName = '';
                    $category = get_the_category();
                    if ( ! empty( $category ) ) {
                        $catName = esc_html( $category[0]->name );
                        $categorName = '<a title="'. $catName .'" href="' . esc_url( get_category_link( $category[0]->term_id ) ) . '">' . $catName . '</a>';  
                    }
                    ?>
                    <div class="col-md-6 mb-4">
                        <div class="col-md-10 float-start">
                            <h2 class="homepage-post-heading"><a href="<?php echo get_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
                            <p><?php the_excerpt(); ?></p>
                        </div>
                        <div class="col-md-2 float-end">
                            <?php if(!empty($image)){ ?>
                                <img alt="<?php the_title(); ?>" width="80" class="img-fluid rounded" src="<?php echo $image; ?>" />
                            <?php } ?>
                        </div>
                    </div>

                <?php
                }
            }
        ?>
    </div>
</div>

Next, design a thumbnail of the theme with the name screenshot.png and keep it in the theme folder. Then go to the admin panel of WordPress CMS and sign in. After signing, click on Appearance on the right side and then Themes.

Themes List

Now on the Themes page, you will see the nice and clean theme in the themes list. Activate button appears when you hover the mouse on the theme’s thumbnail and click it to activate.

Activate Theme

Once you activate it WordPress will be using this newly created theme. To see the result run the WordPress home URL,

http://localhost/wordpress/

At this point, a basic bootstrap-based WordPress theme is ready to use and customize.

Result of newly created theme