讓我們從頭開始使用我們的WordPress Bootstrap主題：
1.轉到 WordPress 根目錄下，打開 wp-content -> themes 文件夾
這裏只有WP默認的幾款主題
2.在此目錄下新建一個叫 wpstrap 的新文件夾
3.在編輯器中打開 wpstrap 文件夾
4.新建一個 style.css 文件，在文件頭部輸入以下代碼：
/*
Theme Name: WPstrap
Author: 埼玉
Author URI:
Description: Simple Bootstrap Theme For Wordpress
Version: 1.0
*/
5.創建一個 index.php 文件
如果我們去站點後臺 外觀| 主題，你可以看到我們現在有這個 WPstrap 主題：
6.在主題文件夾中隨便放一張 screenshot.jpg 的主題縮略圖
7.在index.php文件中加入以下HTML基本標籤：
<!DOCTYPE html>
<html>
<head>
<title>WPstrap</title>
</head>
<body>
</body>
</html>
8.接下來，我們需要Bootstrap。 轉到https://getbootstrap.com/docs/3.4/然後下載它
9. 打開下載的ZIP文件和我們的主題文件夾。在 wpstrap 文件夾中創建一個css文件夾，然後放入 bootstrap.css 文件；同理在創建一個 js
文件夾，然後放入bootstrap.js 文件。
10. 回到index.php文件幷包含幾個 link 標籤，添加bootstrap.css文件。 接下來，我們還要確保包含主樣式表。 爲此，Bootstrap爲我們提供了一個我們可以使用的功能。 我們將添加樣式表然後再添加href。 我們還可以添加一些php標籤，添加bloginfo，這裏我們只放入stylesheet_url。 它現在將包含所有系統樣式表。
<title>WPstrap</title>
<link rel="stylesheet" href="./css/bootstrap.css">
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
11. 接下來創建一個導航欄
在Bootstrap網站上，我們轉到 Components 然後 navbar ，複製所有的事例代碼，將它粘貼到 index.php 文件的body部分。
12.保存代碼，到站點後臺激活主題，然後到前端重載頁面
出現這個錯誤的原因是WordPress沒有找到 bootstrap.css 文件，查看前端頁面源碼， 你可以看到前端正在查看/ css / bootstrap，但是這個文件實際上在themes文件夾中：
13.讓我們回到index.php修復這個錯誤，找到 link 標籤升級其中的代碼，如下：
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/css/bootstrap.css">
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
保存代碼，刷新前端頁面，導航欄出現了
14.要稍微更改導航欄，我們將縮進 nav 標記。我們現在將去掉相當多的代碼。 首先，我們將擺脫 fluid; 我們希望它只是容器：
<div class="container">
15.接下來刪除一些不需要的代碼部分
對於Brand，讓我們稍微改變一下代碼。 我們希望它能反映出WordPress中的網站名稱。 我們將添加<？php bloginfo（）; ？>然後傳遞名字。 對於href，我們將添加<？php bloginfo（）; ？> 鏈接並輸入網址
<a class="navbar-brand" href="<?php bloginfo('url'); ?>">
<?php bloginfo('name'); ?></a>
修改後的完整 nav 部分代碼如下：
<nav class="navbar navbar-default">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<form class="navbar-form navbar-left">
</form>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
回到前端刷新頁面
你可以看到它是非常基本的樣式。 我們只是擁有自己的品牌，我們稍後將添加 walker-nav 或 nav-walker 類; 但是，讓我們繼續添加一些基本的HTML
16. 我們將在結束</ nav>標記的正下方創建一個< div >標籤，併爲其提供一個container類，並添加索引。我們再添加一行，因爲我們將使用Bootstrap的網格系統。 在 row 類中，我們將使用 col-md-8 添加一個列，因此它將是一個8列div，我們還將有一個4列div，它將是側邊欄
<div class="container index">
<div class="row">
<div class="col-md-8">
</div>
<div class="col-md-4">
</div>
</div>
</div>
因此，在8-column div中，我們將使用class =“panel”和panel-default添加一個面板
<div class="col-md-8">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Blog Posts</h3>
</div>
<div class="panel-body">
<?php if(have_posts()): ?>
<?php while(have_posts()) : the_post(); ?>
<?php endwhile; ?>
<?php endif; ?>
</div>
</div>
</div>
接下來，我們將添加兩列，一列用於圖像，另一列用於所有數據。 所以讓我們添加一個名爲row的類，然後我們將添加一個div類，其值爲col-md-3。 接下來我們將在此處添加 IMAGE HERE，然後使用col-md-9添加9列。 然後我們將使用< h2 >添加the_title（）：
<?php while(have_posts()) : the_post(); ?>
<div class="row">
<div class="col-md-3">IMAGE HERE</div>
<div class="col-md-9">
<h2><?php echo the_title(); ?></h2>
</div>
</div>
保存代碼，刷新前端頁面：
正如您所看到的，我們有3-column div，圖像將在那裏，然後是9-column 用來存放內容。 我們將回過頭來添加所有內容，但接下來我們將添加側邊欄代碼。