現在我們設置側邊欄，以便我們可以添加側邊欄小部件
- 打開functions.php文件，在add_action（）下面添加一個名爲init_widgets（）的函數，代碼如下：
// Widget Locations
function init_widgets($id){
register_sidebar(array(
'name' => 'Sidebar',
'id' => 'sidebar',
'before_widget' => '<div class="panel panel-default">',
'before_title' => '<div class="panel-heading"><h3 class="panel-title">',
'after_title' => '</h3></div><div class="panel-body">'
'after_widget' => '</div></div>',
));
}
它的作用是允許我們在窗口小部件呈現之前插入代碼，我們希望我們的小部件在Bootstrap panel內渲染，所以我們使用了帶有Bootstrap的 panel 和 panel-default類的 div。
- 在下方添加一個add_action( ) 函數，放入鉤子widgets_init，和要執行的函數init_widgets，保存代碼
add_action('widgets_init', 'init_widgets');
- 到站點後臺刷新頁面，外觀功能下出現了小工具選項和Sidebar顯示位置
- 把“目錄分類”，“近期文章”和“近期評論”工具拖到sidebar中
- 刷新前端頁面
現在我們遇到了一個問題，因爲我希望類別顯示爲列表組，格式比這更好。所以我們需要做的是在 theme 文件夾內部創建自己的這些小部件版本。
- 我們在themes文件夾內創建另一個名爲widgets的文件夾。通過文件管理器我們先轉到wp-includes |widgets文件夾，你會看到所有的核心小工具文件：
找到文章分類，最近評論和最近帖子小工具文件，然後複製（確保不剪切）並將它們粘貼到我們新創建的widgets文件夾中。
- 先從文章分類開始，在編輯器中打開它，修改類名：
class WP_Widget_Categories_Custom extends WP_Widget {
（同理，也要修改另外兩個小工具中的類名，同樣是在原類名後面加上 _Custom）
接下來修改其中的 ul 和 li 標籤，爲它添加一個Bootstrap類：
<ul class="list-group">
還需要爲列表項添加 list-group-item 類，這樣做之前我們需要先在functions.php文件中進行一些自定義，否則無法從內部訪問列表項標籤，打開functions.php文件，到代碼最下方，添加如下代碼：
// Adds 'list-group-item' to categories li
function add_new_class_list_categories($list){
$list = str_replace('cat-item', 'cat-item list-group-item', $list);
return $list;
}
add_filter('wp_list_categories', 'add_new_class_list_categories');
- 接下來還需要註冊這些小工具才能使用它們，很簡單只需要在functions.php文件頂部引入它們，我們使用require_once()引入這些小工具：
require_once('widgets/class-wp-widget-categories.php');
require_once('widgets/class-wp-widget-recent-posts.php');
require_once('widgets/class-wp-widget-recent-comments.php');
現在我們開始註冊它們，在代碼最底部，我們將添加函數wordstrap_register_widgets（）。 同樣我們需要類名，我們添加’WP_Widget_Recent_Posts_Custom’。 下一個將是
‘WP_Widget_Recent_Comments_Custom’。 最後一個是添加
‘WP_Widget_Categories_Custom’：
//Register Widgets
function wordstrap_register_widgets(){
register_widget('WP_Widget_Recent_Posts_Custom');
register_widget('WP_Widget_Recent_Comments_Custom');
register_widget('WP_Widget_Categories_Custom'); }
- 現在我們添加另一個add_action（），再次使用’widgets_init’鉤子，接着寫入函數名稱 ‘wordstrap_register_widgets’：
add_action('widgets_init', 'wordstrap_register_widgets');
保存代碼，返回前端頁面刷新：
- 我們希望所有的小工具都應用list-group和list-group-item樣式。我們轉到class-wp-widget-recent-posts.php小部件文件，找到< ul >標籤。 我們添加一個list-group類，然後< li >標籤將有一個list-group-item類：
<ul class="list-group">
<?php foreach ( $r->posts as $recent_post ) : ?>
<li class="list-group-item">
刷新前端頁面
再打開class-wp-widget-recent-comments.php文件，找到ul和li標籤，同樣爲他們添加樣式：
$output .= '<ul class="list-group" id="recentcomments">';
if(is_array($comments) && $comments){
$post_ids = array_unique(wp_list_pluck($comments, 'comment_post_ID'));
_prime_post_caches($post_ids, strpos(get_option('permalink_structure'), '%category'), false);
foreach((array) $comments as $comment){
$output .= '<li class="list-group-item recentcomments">';
保存代碼，重載前端頁面
現在我們統一了自定義小工具的樣式，最重要的是這些自定義小工具只會在這個主題加載時生效，不會影響到WordPress的核心代碼