1. WordPress Theme Development with Bootstrap 5 and Sass in 5 Steps

In this blog post, I will be teaching beginner-level WordPress theme development using Bootstrap 5 and Sass. Both Bootstrap and Sass are popular front-end frameworks that can help simplify the development process and add extra features to your WordPress theme.

Bootstrap 5 is a powerful framework that provides pre-designed components, such as navigation menus, buttons, forms, and more, that you can easily integrate into your theme. This saves time and effort compared to creating these components from scratch.

Sass, on the other hand, is a preprocessor that allows you to write CSS in a more efficient and organized way. You can use variables, mixins, and functions to write CSS that is easier to maintain and reuse.

Whether you are a complete beginner or have some experience with WordPress theme development, this tutorial will provide you with the knowledge and skills you need to create professional-looking themes using Bootstrap 5 and Sass. So, let’s get started!

In this tutorial, I will be covering everything you need to know to get started with developing a WordPress theme using Bootstrap 5 and Sass. We will start with the basics, such as setting up a development environment and creating a child theme, and move on to more advanced topics, such as integrating Bootstrap 5 and Sass into your theme, customizing the components, and adding custom styles.

1. Install WordPress and theme

Since this is a theme developer tutorial I will assume that you already know how to install WordPress in your local computer.

First step

-Open wp-content > themes > create theme folder(theme name)

2. Create themes files

Inside your new theme folder create.

Index.php

Style.css inside this file include code below and add the info asked

/*
 Theme Name:   WordPress theme
 Description:  Building a WordPress theme with bootstrap
 Author:       Your Name
 Author URI:   http://padron.studio
 Version:      1.0.0
*/

Enter theme author description etc…More info here: https://developer.wordpress.org/themes/basics/main-stylesheet-style-css/

Take a screenshot for your theme. Create file, screenshot.jpeg and add it to your theme

Save and reload WordPress go to admin page and visit the theme menu you’ll see your new theme there, click activate theme. and visit home page, it should be blank.

3. Install Bootstrap 5 using the command line

More Info at https://getbootstrap.com/docs/5.3/getting-started/download/

Open Visual studio code (you can use any other, I recommend Vs code) terminal and install bootstrap in the theme directory using npm steps below.

Cd into the theme folder in your terminal and enter: npm init follow the instruction(click enter) this will add package.json,

Then enter: npm install bootstrap in the same folder to install node_modules inside is bootstrap.

At this step you can go to index.php -copy code below as an example (replace /themename/ in the stylesheet and js link with the name of your theme folder). Bootstrap should work now! if not make sure bootstrap directories are right, later we are going to add Sass to customize all bootstrap default theme colors so use this approach if you never intent to use your own colors.

<?php wp_head(); ?>

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="wp-content/themes/themename/node_modules/bootstrap/dist/css/bootstrap.min.css">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

--->this is a sample card from bootstrap to test

<div class="card" style="width: 18rem;">
  <!-- <img src="..." class="card-img-top" alt="..."> -->
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
    

<script src="wp-content/themes/themename/node_modules/bootstrap/dist/js/bootstrap.min.js"></script>


<?php wp_footer(); ?>

<?php get_footer(); ?>

</body>
</html>

4. Install Bootstrap icons and create functions.php file

In the terminal inside your theme type: npm i bootstrap-icons

This will create another folder with all the icons, inside node_modules folder, a file inside this folder must be link on the functions php -> bootstrap-icons.css, example below.

Create the file named: functions.php in your theme folder where we are going to link bootstrap.min.css and the icons , make sure you link it to the right directory path! copy code below and paste it, Important: remove – css and -js links in the index.php file and reload the page again, bootstrap should work as before.

<?php 

    /* functions.php Add bootstrap support to the WordPress theme*/
function add_scripts_and_styles(){

    //register style, icons and scripts
    wp_register_style('bootstrap_style',get_template_directory_uri().  "/node_modules/bootstrap/dist/css/bootstrap.min.css");
    wp_register_style('bootstrap_icons',get_template_directory_uri().  "/node_modules/bootstrap-icons/font/bootstrap-icons.css");
   
    wp_register_script('bootstrap_js', get_template_directory_uri().   "/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js", array(), '0.1', true);

    // enqueue styles 
    wp_enqueue_style('bootstrap_style');
    wp_enqueue_style('bootstrap_icons');
    wp_enqueue_script('bootstrap_js');
}
add_action('wp_enqueue_scripts', 'add_scripts_and_styles');

?>

Note: Make sure to place these php tags inside index.php for functions.php links from bootstrap css and js to work.

<?php wp_footer(); ?>

<?php get_footer(); ?>
I’ve added this php tags early in the sample code. Just make sure they are there.

5. Sass Let’s customize bootstrap theme with our own colors

Instead of changing bootstrap colors inside bootstrap.css folder , let’s create our own sass folder and do it from there, this will prevent problem in the future if you update bootstrap.

Inside the theme folder we are going to create a sass folder and inside an scss file named main.scss, this can me name anything, I’ll call it main.scss.

themefolder -> sass -> main.scss

Inside this file, main.scss we will import all the bootstrap file and here is where we can modify them. Copy code below and paste in main.scss

  //import bootstrap
 @import '../node_modules/bootstrap/scss/bootstrap.scss';

Before we move on we need to compile scss into css so WordPress recognize this new colors, for this we need a compiler so when we write any code inside main.scss file the compiler will change it to css. I’m using Visual studio code where you can download an extension called Live sass compiler after you instll this extension visit the extension settings > extensions formats and change it to this below.

//change or commentthis code inside the brackets 
// {
        //     "format": "expanded",
        //     "extensionName": ".css",
        //     "savePath": null,
        //     "savePathReplacementPairs": null
        // }

//and add this and save it
        {
            "format": "compressed",
            "extensionName": ".min.css",
            "savePath": "/css",
            "savePathReplacementPairs": null
        }

Now let’s try to change the primary color from blue to green. On the terminal click Watch Sass on the bottom nav bar of Visual studio code it will change to Watching.

Add the custom variable below to change the primary color of bootstrap to green and click save

 //custom variables must be first
$primary : green; 
  
  //import bootstrap
  @import '../node_modules/bootstrap/scss/bootstrap.scss';

Then inside your theme folder or on the root folder you’ll see a new css folder and two files, make sure this folder is inside your theme folder, this is where sass will compile all the sass code into css.

Final step link the new css folder in your functions.php where all the bootstraps link are. These is how it should look.

<?php 

    /* Add bootstrap support to the WordPress theme*/
function add_scripts_and_styles(){

    //register style, icons and scripts

//------->new link to the css folder
    wp_register_style('bootstrap_style',get_template_directory_uri().  "/css/main.min.css");
    
    wp_register_style('bootstrap_style',get_template_directory_uri().  "/node_modules/bootstrap/dist/css/bootstrap.min.css");

    wp_register_style('bootstrap_icons',get_template_directory_uri().  "/node_modules/bootstrap-icons/font/bootstrap-icons.css");
   
    wp_register_script('bootstrap_js', get_template_directory_uri().   "/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js", array(), '0.1', true);

    // enqueue styles 
    wp_enqueue_style('bootstrap_style');
    wp_enqueue_style('bootstrap_icons');
    wp_enqueue_script('bootstrap_js');
}
add_action('wp_enqueue_scripts', 'add_scripts_and_styles');

?>

Visit your page and the primary color should be green now.

Now let’s create a WordPress site from Bootstrap!

Continue