This guide covers manually creating a basic WordPress theme using code, incorporating Bootstrap CSS for responsive design. Assume a local or hosted WordPress installation is available. All files will be placed in a new theme directory under /wp-content/themes/.
1. Prepare the theme directory
Access the WordPress installation directory (e.g., via file manager, FTP, or terminal).
Create a new folder for the theme:
cd wp-content/themes/
mkdir my-bootstrap-theme
cd my-bootstrap-theme2. Create the main stylesheet (style.css)
This file defines the theme metadata and can include custom CSS.
Create and edit style.css:
/*
Theme Name: My Bootstrap Theme
Theme URI: https://example.com/my-bootstrap-theme
Author: Your Name
Author URI: https://example.com
Description: A basic WordPress theme using Bootstrap CSS.
Version: 1.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
Text Domain: my-bootstrap-theme
*/
body {
font-family: sans-serif;
}The comment block at the top is required for WordPress to recognize the theme.
3. Create the main template file (index.php)
This serves as the fallback template for displaying content.
Create and edit index.php:
<?php get_header(); ?>
<div class="container">
<div class="row">
<div class="col-md-8">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<h2><?php the_title(); ?></h2>
<div class="entry-content">
<?php the_content(); ?>
</div>
</article>
<?php endwhile; else : ?>
<p>No content found.</p>
<?php endif; ?>
</div>
<div class="col-md-4">
<?php get_sidebar(); ?>
</div>
</div>
</div>
<?php get_footer(); ?>This uses Bootstrap’s grid system (container, row, col-md-* classes) for layout.
4. Create the functions file (functions.php)
This file handles theme setup, including enqueuing Bootstrap CSS and other assets.
Create and edit functions.php:
<?php
function my_bootstrap_theme_setup() {
add_theme_support('title-tag');
add_theme_support('post-thumbnails');
add_theme_support('html5', array('search-form', 'comment-form', 'comment-list', 'gallery', 'caption'));
register_nav_menus(array('primary' => 'Primary Menu'));
}
add_action('after_setup_theme', 'my_bootstrap_theme_setup');
function my_bootstrap_theme_enqueue_styles() {
// Enqueue Bootstrap CSS from CDN
wp_enqueue_style('bootstrap-css', 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css', array(), '5.3.3');
// Enqueue theme's style.css (depends on Bootstrap)
wp_enqueue_style('my-bootstrap-theme-style', get_stylesheet_uri(), array('bootstrap-css'), '1.0');
// Optional: Enqueue Bootstrap JS if needed (requires Popper.js)
wp_enqueue_script('popper-js', 'https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js', array(), '2.11.8', true);
wp_enqueue_script('bootstrap-js', 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js', array('popper-js'), '5.3.3', true);
}
add_action('wp_enqueue_scripts', 'my_bootstrap_theme_enqueue_styles');
?>This loads Bootstrap CSS and optionally JS from a CDN.
5. Create the header template (header.php)
This file contains the HTML head and opening body elements.
Create and edit header.php:
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<header>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="<?php echo home_url(); ?>"><?php bloginfo('name'); ?></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<?php
wp_nav_menu(array(
'theme_location' => 'primary',
'menu_class' => 'navbar-nav ms-auto',
'container' => false,
'fallback_cb' => false,
'walker' => new Bootstrap_Nav_Walker(), // Optional: Custom walker for Bootstrap menu
));
?>
</div>
</div>
</nav>
</header>This uses Bootstrap’s navbar component.
6. Create the footer template (footer.php)
This closes the body and includes wp_footer().
Create and edit footer.php:
<footer class="bg-light py-3">
<div class="container">
<p class="text-center">© <?php echo date('Y'); ?> <?php bloginfo('name'); ?>. All rights reserved.</p>
</div>
</footer>
<?php wp_footer(); ?>
</body>
</html>7. (Optional) Create a sidebar template (sidebar.php)
For widget areas.
Create and edit sidebar.php:
<aside>
<?php if (is_active_sidebar('sidebar-1')) : ?>
<?php dynamic_sidebar('sidebar-1'); ?>
<?php endif; ?>
</aside>Register the sidebar in functions.php by adding:
function my_bootstrap_theme_widgets_init() {
register_sidebar(array(
'name' => 'Main Sidebar',
'id' => 'sidebar-1',
'before_widget' => '<div class="widget %2$s">',
'after_widget' => '</div>',
'before_title' => '<h3>',
'after_title' => '</h3>',
));
}
add_action('widgets_init', 'my_bootstrap_theme_widgets_init');8. (Optional) Add a custom Bootstrap nav walker
For better menu integration, create class-bootstrap-nav-walker.php and include it in functions.php:
require_once get_template_directory() . '/class-bootstrap-nav-walker.php';Content of class-bootstrap-nav-walker.php (extend WP’s Walker_Nav_Menu):
class Bootstrap_Nav_Walker extends Walker_Nav_Menu {
// Custom walker code for Bootstrap 5 navbar (search for "Bootstrap 5 WordPress nav walker" for full implementation).
}Refer to online resources for a complete Bootstrap nav walker class.
9. Activate the theme
Log in to the WordPress admin dashboard (/wp-admin).
Navigate to Appearance → Themes.
Select and activate “My Bootstrap Theme”.
10. Test and customize
View the site to ensure Bootstrap styles apply.
Add more template files (e.g., single.php, page.php) as needed.
Customize CSS in style.css or add custom JS in a new file enqueued via functions.php.
The theme is now functional with Bootstrap integration.