How do I add a col-md-4 sidebar in WordPress?

So I’m trying to make a wordpress theme with bootstrap and I’m still a beginner at this things. This is my index.php page:

<?php get_header(); ?>

<div class="main-column">

  <?php if (have_posts()) :
    while (have_posts())  : the_post(); 

    get_template_part('content');

    endwhile;

    else :
        echo '<p>No content found</p>';

    endif;  ?>

</div>

<?php get_footer(); ?>

and this is my content.php page:

Read More
<div class="container">
    <div class="row">
        <div class="col-md-8">
            <div class="panel panel-default">
                <div class="panel-body">
                    <div class="page-header">
                        <h2 class="post-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                        <p class="post-info"><span style="color:gray"><span class="glyphicon glyphicon-time" aria-hidden="true"></span>  <?php the_time('F  jS,  Y g:i a'); ?> |  <span style="color:gray"><span style="color:gray"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> scris de <a href="<?php echo get_author_posts_url(get_the_author_meta('ID'));  ?>"><?php the_author(); ?></a> | Postat în 

                        <?php
                        $categories = get_the_category();
                        $separator = ", ";
                        $output = '';

                        if ($categories) {
                       foreach ($categories as $category) {
                       $output .= '<a href="' . get_category_link($category->term_id) . '">' . $category->cat_name . '</a>'  . $separator;
                       }
                       echo trim($output, $separator);
                       }
                       ?>
                       </p>
                    </div>
                    <div class="post-content">
                        <p>
                            <div class="img-responsive img-thumbnail"><?php the_post_thumbnail('small-thumbnail'); ?></div><?php echo get_the_excerpt(); ?>
                            <a href="<?php the_permalink(); ?>">Citeste articolul &raquo;</a>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

what I want is to have a col-md-4 sidebar in the right and i dont really know how to add it. If I write the code in the index.php under the “main-column” div, the sidebar appears on the left side under the main content. Maybe I didn’t write the code well in the content.php. As I said, I’m still a beginner and I’m trying to learn. Can you help me please?

Related posts

1 comment

  1. Easiest way is to move your bootstrap grid to your index.php. So your index.php looks like this:

    <?php get_header(); ?>
    
    <div class="main-column">
        <div class="container">         
            <div class="row">
    
                <div class="col-md-8">
    
                    <?php if (have_posts()) :
                        while (have_posts()) : the_post(); 
                            get_template_part('content');
                        endwhile;
                    else :
                        echo '<p>No content found</p>';
                    endif; ?>
    
                </div><!-- .col-md-8 -->
    
                <div class="col-md-4 sidebar">
    
                    <?php // insert your sidebar here ?>
    
                </div><!-- .col-md-4 -->
    
            </div><!-- .row -->         
        </div><!-- .container -->           
    </div><!-- .main-column -->
    
    <?php get_footer(); ?>
    

    And your content.php will look like:

    <div class="panel panel-default">
        <div class="panel-body">
            <div class="page-header">
                <h2 class="post-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                <p class="post-info"><span style="color:gray"><span class="glyphicon glyphicon-time" aria-hidden="true"></span>  <?php the_time('F  jS,  Y g:i a'); ?> |  <span style="color:gray"><span style="color:gray"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> scris de <a href="<?php echo get_author_posts_url(get_the_author_meta('ID'));  ?>"><?php the_author(); ?></a> | Postat în 
                    <?php
                    $categories = get_the_category();
                    $separator = ", ";
                    $output = '';
    
                    if ($categories) {
                        foreach ($categories as $category) {
                            $output .= '<a href="' . get_category_link($category->term_id) . '">' . $category->cat_name . '</a>'  . $separator;
                        }
                        echo trim($output, $separator);
                    }
                    ?>
               </p>
            </div>
            <div class="post-content">
                <p>
                    <div class="img-responsive img-thumbnail"><?php the_post_thumbnail('small-thumbnail'); ?></div><?php echo get_the_excerpt(); ?>
                    <a href="<?php the_permalink(); ?>">Citeste articolul &raquo;</a>
                </p>
            </div>
        </div>
    </div>
    

Comments are closed.