{"id":803,"date":"2025-12-10T19:16:36","date_gmt":"2025-12-11T01:16:36","guid":{"rendered":"https:\/\/kop.lat\/blog\/?p=803"},"modified":"2025-12-10T19:18:34","modified_gmt":"2025-12-11T01:18:34","slug":"how-to-create-a-wordpress-theme-from-scratch-using-bootstrap-css","status":"publish","type":"post","link":"https:\/\/kop.lat\/blog\/how-to-create-a-wordpress-theme-from-scratch-using-bootstrap-css\/","title":{"rendered":"How to create a WordPress Theme from Scratch Using Bootstrap CSS"},"content":{"rendered":"\n

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\/<\/code>.<\/p>\n\n\n\n

1. Prepare the theme directory<\/h3>\n\n\n\n

Access the WordPress installation directory (e.g., via file manager, FTP, or terminal).
Create a new folder for the theme:<\/p>\n\n\n\n

cd wp-content\/themes\/\nmkdir my-bootstrap-theme\ncd my-bootstrap-theme<\/code><\/pre>\n\n\n\n
2. Create the main stylesheet (style.css)<\/h3>\n\n\n\n
This file defines the theme metadata and can include custom CSS.
Create and edit style.css<\/code>:<\/p>\n\n\n\n
\/*\nTheme Name: My Bootstrap Theme\nTheme URI: https:\/\/example.com\/my-bootstrap-theme\nAuthor: Your Name\nAuthor URI: https:\/\/example.com\nDescription: A basic WordPress theme using Bootstrap CSS.\nVersion: 1.0\nRequires at least: 6.0\nTested up to: 6.6\nRequires PHP: 7.4\nText Domain: my-bootstrap-theme\n*\/\n\nbody {\n    font-family: sans-serif;\n}<\/code><\/pre>\n\n\n\n
The comment block at the top is required for WordPress to recognize the theme.<\/p>\n\n\n\n
3. Create the main template file (index.php)<\/h3>\n\n\n\n
This serves as the fallback template for displaying content.
Create and edit index.php<\/code>:<\/p>\n\n\n\n
<?php get_header(); ?>\n\n<div class=\"container\">\n    <div class=\"row\">\n        <div class=\"col-md-8\">\n            <?php if (have_posts()) : while (have_posts()) : the_post(); ?>\n                <article id=\"post-<?php the_ID(); ?>\" <?php post_class(); ?>>\n                    <h2><?php the_title(); ?><\/h2>\n                    <div class=\"entry-content\">\n                        <?php the_content(); ?>\n                    <\/div>\n                <\/article>\n            <?php endwhile; else : ?>\n                <p>No content found.<\/p>\n            <?php endif; ?>\n        <\/div>\n        <div class=\"col-md-4\">\n            <?php get_sidebar(); ?>\n        <\/div>\n    <\/div>\n<\/div>\n\n<?php get_footer(); ?><\/code><\/pre>\n\n\n\n
This uses Bootstrap’s grid system (container, row, col-md-* classes) for layout.<\/p>\n\n\n\n
4. Create the functions file (functions.php)<\/h3>\n\n\n\n
This file handles theme setup, including enqueuing Bootstrap CSS and other assets.
Create and edit functions.php<\/code>:<\/p>\n\n\n\n
<?php\n\nfunction my_bootstrap_theme_setup() {\n    add_theme_support('title-tag');\n    add_theme_support('post-thumbnails');\n    add_theme_support('html5', array('search-form', 'comment-form', 'comment-list', 'gallery', 'caption'));\n    register_nav_menus(array('primary' => 'Primary Menu'));\n}\n\nadd_action('after_setup_theme', 'my_bootstrap_theme_setup');\n\nfunction my_bootstrap_theme_enqueue_styles() {\n    \/\/ Enqueue Bootstrap CSS from CDN\n    wp_enqueue_style('bootstrap-css', 'https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.3\/dist\/css\/bootstrap.min.css', array(), '5.3.3');\n\n    \/\/ Enqueue theme's style.css (depends on Bootstrap)\n    wp_enqueue_style('my-bootstrap-theme-style', get_stylesheet_uri(), array('bootstrap-css'), '1.0');\n\n    \/\/ Optional: Enqueue Bootstrap JS if needed (requires Popper.js)\n    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);\n    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);\n}\n\nadd_action('wp_enqueue_scripts', 'my_bootstrap_theme_enqueue_styles');\n\n?><\/code><\/pre>\n\n\n\n
This loads Bootstrap CSS and optionally JS from a CDN.<\/p>\n\n\n\n
5. Create the header template (header.php)<\/h3>\n\n\n\n
This file contains the HTML head and opening body elements.
Create and edit header.php<\/code>:<\/p>\n\n\n\n
<!DOCTYPE html>\n<html <?php language_attributes(); ?>>\n<head>\n    <meta charset=\"<?php bloginfo('charset'); ?>\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n    <?php wp_head(); ?>\n<\/head>\n<body <?php body_class(); ?>>\n    <header>\n        <nav class=\"navbar navbar-expand-lg navbar-light bg-light\">\n            <div class=\"container\">\n                <a class=\"navbar-brand\" href=\"<?php echo home_url(); ?>\"><?php bloginfo('name'); ?><\/a>\n                <button class=\"navbar-toggler\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#navbarNav\" aria-controls=\"navbarNav\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">\n                    <span class=\"navbar-toggler-icon\"><\/span>\n                <\/button>\n                <div class=\"collapse navbar-collapse\" id=\"navbarNav\">\n                    <?php\n                    wp_nav_menu(array(\n                        'theme_location' => 'primary',\n                        'menu_class' => 'navbar-nav ms-auto',\n                        'container' => false,\n                        'fallback_cb' => false,\n                        'walker' => new Bootstrap_Nav_Walker(), \/\/ Optional: Custom walker for Bootstrap menu\n                    ));\n                    ?>\n                <\/div>\n            <\/div>\n        <\/nav>\n    <\/header><\/code><\/pre>\n\n\n\n
This uses Bootstrap’s navbar component.<\/p>\n\n\n\n
6. Create the footer template (footer.php)<\/h3>\n\n\n\n
This closes the body and includes wp_footer().
Create and edit footer.php<\/code>:<\/p>\n\n\n\n
    <footer class=\"bg-light py-3\">\n        <div class=\"container\">\n            <p class=\"text-center\">&copy; <?php echo date('Y'); ?> <?php bloginfo('name'); ?>. All rights reserved.<\/p>\n        <\/div>\n    <\/footer>\n    <?php wp_footer(); ?>\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\n
7. (Optional) Create a sidebar template (sidebar.php)<\/h3>\n\n\n\n
For widget areas.
Create and edit sidebar.php<\/code>:<\/p>\n\n\n\n
<aside>\n    <?php if (is_active_sidebar('sidebar-1')) : ?>\n        <?php dynamic_sidebar('sidebar-1'); ?>\n    <?php endif; ?>\n<\/aside><\/code><\/pre>\n\n\n\n
Register the sidebar in functions.php<\/code> by adding:<\/p>\n\n\n\n
function my_bootstrap_theme_widgets_init() {\n    register_sidebar(array(\n        'name' => 'Main Sidebar',\n        'id' => 'sidebar-1',\n        'before_widget' => '<div class=\"widget %2$s\">',\n        'after_widget' => '<\/div>',\n        'before_title' => '<h3>',\n        'after_title' => '<\/h3>',\n    ));\n}\nadd_action('widgets_init', 'my_bootstrap_theme_widgets_init');<\/code><\/pre>\n\n\n\n
8. (Optional) Add a custom Bootstrap nav walker<\/h3>\n\n\n\n
For better menu integration, create class-bootstrap-nav-walker.php<\/code> and include it in functions.php<\/code>:<\/p>\n\n\n\n
require_once get_template_directory() . '\/class-bootstrap-nav-walker.php';<\/code><\/pre>\n\n\n\n
Content of class-bootstrap-nav-walker.php<\/code> (extend WP’s Walker_Nav_Menu):<\/p>\n\n\n\n
class Bootstrap_Nav_Walker extends Walker_Nav_Menu {\n    \/\/ Custom walker code for Bootstrap 5 navbar (search for \"Bootstrap 5 WordPress nav walker\" for full implementation).\n}<\/code><\/pre>\n\n\n\n
Refer to online resources for a complete Bootstrap nav walker class.<\/p>\n\n\n\n
9. Activate the theme<\/h3>\n\n\n\n
Log in to the WordPress admin dashboard (\/wp-admin<\/code>).
Navigate to Appearance \u2192 Themes<\/strong>.
Select and activate “My Bootstrap Theme”.<\/p>\n\n\n\n
10. Test and customize<\/h3>\n\n\n\n
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<\/code> or add custom JS in a new file enqueued via functions.php<\/code>.<\/p>\n\n\n\n
The theme is now functional with Bootstrap integration.<\/p>\n","protected":false},"excerpt":{"rendered":"
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 […]<\/p>\n","protected":false},"author":1,"featured_media":463,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[1,145],"tags":[17,146,147],"_links":{"self":[{"href":"https:\/\/kop.lat\/blog\/wp-json\/wp\/v2\/posts\/803"}],"collection":[{"href":"https:\/\/kop.lat\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kop.lat\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kop.lat\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kop.lat\/blog\/wp-json\/wp\/v2\/comments?post=803"}],"version-history":[{"count":1,"href":"https:\/\/kop.lat\/blog\/wp-json\/wp\/v2\/posts\/803\/revisions"}],"predecessor-version":[{"id":804,"href":"https:\/\/kop.lat\/blog\/wp-json\/wp\/v2\/posts\/803\/revisions\/804"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kop.lat\/blog\/wp-json\/wp\/v2\/media\/463"}],"wp:attachment":[{"href":"https:\/\/kop.lat\/blog\/wp-json\/wp\/v2\/media?parent=803"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kop.lat\/blog\/wp-json\/wp\/v2\/categories?post=803"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kop.lat\/blog\/wp-json\/wp\/v2\/tags?post=803"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}