これまで1カラムで作ってきましたが、サイドバーを入れるために2カラムにします。
bootstrapを利用しているので簡単です(*’▽’)

<div class="row">
    <div class="col-md-9">
     |
    省略
     |
    </div>
    <!--//col -->
    <div class="col-md-3">
        <ul class="list-group">
        サイドバー
        </ul>
    </div>
    <!--//col -->
</div>
<!--//row -->

col-xs-12と書いてあったところをcol-md-9に変更。（メインのカラム）
divを追加してcol-md-3追加。（サイドバー）
これで2カラムになります。

ウィジェットを使う

<?php dynamic_sidebar(); ?>

functions.phpを作る
functions.phpは空のままテーマのフォルダにアップロードします。

テーマの編集からfunctions.phpを選択して中身を記述していきます。

<?php

//ウィジェット機能を有効にする
register_sidebar();

//カスタムメニュー機能を有効にする
register_nav_menus(array('navigation' => 'ナビゲーションバー'));

?>

ウィジェット機能を有効にします。
ついでにカスタムメニュー機能も有効にしておこうー。

記事それぞれの個別のページもindex.phpから生成されるので
index.phpに記事の個別ページ用のテンプレートタグを追加します。

個別ページのタイトルを出力

<?php wp_title(); ?>

投稿した記事のタイトルが個別ページのタイトルになります。
head内のtitleタグに書きます。
※titleに記述した個別ページのタイトル用のテンプレートタグは、トップページには出力されません。

<title><?php bloginfo('name'); ?><?php wp_title(); ?></title>

このように書くと、記事の個別ページのタイトルが下の画像のように表示されます。

<?php wp_title(); ?>を入れると、「»」が勝手に入ります。。

個人的には・・「個別ページのタイトル | サイト名」という表示にしたいのでパラメーターを指定します。

<title><?php wp_title('|',true,'right'); ?><?php bloginfo('name'); ?></title>

記事の個別ページにも前へ次へのpagerを出力

<?php if(is_single()): ?>
    <nav>
    <ul class="pager">
        <li class="previous"><?php next_post_link(); ?></li>
        <li class="next"><?php previous_post_link(); ?></li>
    </ul>
    <!--//pager -->
    </nav>
    <!--//nav -->
<?php endif; ?>

<?php if(is_single()): ?>～<?php endif; ?>

個別ページだけに出力したいものをこの中に書きます。
※トップページには出力されません。

<?php if(is_single()): ?>
    <nav>
    <ul class="pager">
        <li class="previous"><?php previous_post_link('%link'); ?></li>
        <li class="next"><?php next_post_link('%link'); ?></li>
    </ul>
    <!--//pager -->
    </nav>
    <!--//nav -->
<?php endif; ?>

トップページ用に入れたものにそっくりですが、よーく見ると微妙な違いがあるので注意！
prev・nextを逆にしたのは、記事の順番の兼ね合いからです(~_~;)

パラメーター%link
「» «」が表示されていて邪魔だったのでリンクだけ。

01-10までのおさらい。

<main id="main" role="main">
    <div class="container">
    <section>
        <div class="row">
            <div class="col-xs-12">
                
                <?php if(have_posts()): while(have_posts()): the_post(); ?>
                <article>
                    <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                    <time><?php the_date('Y/m/d (D)'); ?><?php the_time(); ?></time>
                    <div class="well well-lg">
                        <div class="categorybtn">
                            <?php the_category(); ?>
                        </div>
                        <!--//categorybtn -->
                        <?php the_content(); ?>
                    </div>
                    <!--//well well-lg --> 
                </article>
                <!--//article -->
                
                <?php if(is_single()): ?>
                <nav>
                <ul class="pager">
                    <li class="previous"><?php previous_post_link('%link'); ?></li>
                    <li class="next"><?php next_post_link('%link'); ?></li>
                </ul>
                <!--//pager --> 
                </nav>
                <!--//nav -->
                <?php endif; ?>
                
                <?php endwhile; endif; ?>
                
                <?php if(is_home()): ?>
                <nav>
                    <ul class="pager">
                       <li class="previous"><?php next_posts_link('<i class="fa fa-angle-left"></i> Older'); ?></li>
                       <li class="next"><?php previous_posts_link('Newer <i class="fa fa-angle-right"></i>'); ?></li>
                    </ul>
                    <!--//pager --> 
                </nav>
                <!--//nav -->
                <?php endif; ?>
            </div>
            <!--//col --> 
        </div>
        <!--//row --> 
    </section>
    </div>
    <!--//container --> 
</main>
<!--//#main -->

ページャー、、カタカナで書くとなんかヘン（笑）
pagerは、前へ次へとリンクするやつです。トップページを複数のページに分割させてpagerで移動します。
※設定画面で1ページに表示する記事の数を指定しておきましょう～。
デフォルトでは10件になっています。

<?php if(is_home()): ?>
    <nav>
    <ul class="pager">
        <li class="previous"><?php next_posts_link('<i class="fa fa-angle-left"></i> Older'); ?></li>
        <li class="next"><?php previous_posts_link('Newer <i class="fa fa-angle-right"></i>'); ?></li>
    </ul>
    <!--//pager -->
    </nav>
    <!--//nav -->
<?php endif; ?>

bootstrapのnext・prevと、wordpressのnext・prevが逆だということに気付いた（笑）
bootstrapは、prevは古いほうを指して、nextは新しいほうを指すけれど（古い:prevが左、新しい:nextが右）
wordpressはprevは新しいほうを指して、nextは古いほうを指す。（古い:nextが左、新しい:prevが右）
なんかややこしいなぁ(;´Д｀)

<?php if(is_home()): ?>～<?php endif; ?>

トップページだけに出力したいものをこの中に書きます。
※各記事の個別のページには出力されません。

<i class="fa fa-angle-left"></i>

パラメーターに記述しているiタグ部分は、Font-Awesomeのアイコンを表示させています。
Font Awesome