Hey guys I am in the process of making a WordPress website mobile responsive and I decided to utilize bootstrap. I successfully implemented the changes to the nav menu and hero section but this section here: enter image description here

I want to replace it with a bootstrap mobile responsive version which I did with this:

?php get_header(); ?>

    <div class="container index">
        <div class="row">
            <div class="col-md-8">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">Welcome to Three Green Birds!</h3>
                    <div class="panel-body">
                                <?php if (have_posts()) : ?>

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

                                    <div class="date"><span class="month"><?php the_time('M d') ?></span><span class="year">.<?php the_time('y') ?>.d<?php the_time('z') ?>/w<?php the_time('W') ?></span></div>
                                    <!--<div class="spacer"></div>-->
                                <div class="post-title">
                        <?php if (function_exists('get_cat_icon')) get_cat_icon('class=myicons'); ?><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></div>
                                    <div class="spacer"></div>
                                    <div class="post-content">
                                    <?php the_content('Read the rest of this entry &raquo;'); ?>
                                    <div class="spacer"></div>
                                    <div class="postmeta"><span class="postcat"><b>Categories:</b> <?php the_category(', ') ?>
                                    <?php the_tags('| <b>Tags:</b> ', ', ', ''); ?>
                                    | <b>Comments:</b> <?php comments_popup_link('0', '1', '%', '', 'Off'); ?></span>
                                  <span class="postcat"><?php edit_post_link('| <b>Edit</b>'); ?></span>
                                    <div class="post-footer"></div>

                                    <?php endwhile; ?>

                                <div class="navigation">
                                    <div class="alignleft"><?php next_posts_link('&laquo; Older Entries') ?></div>
                                    <div class="alignright"><?php previous_posts_link('Newer Entries &raquo;') ?></div>

                            <?php else : ?>

                                <div class="post-title">Not Found</div>
                                <p class="post-content">Sorry, but you are looking for something that isn't here.</p>
                                <?php include (TEMPLATEPATH . "/searchform.php"); ?>

                            <?php endif; ?>
            <div class="col-md-4">
                <?php if (is_active_sidebar('sidebar')) : ?>
                    <?php dynamic_sidebar('sidebar'); ?>
                <?php endif; ?>

    <div class="container">
            <p>&copy; 2008-2017 Three Green Birds. All Rights Reserved.</p>

<?php get_footer(); ?>

But despite the fact that I emptied cache repeatedly, restarted MAMP, the old code will not go away. Is this because I have not made any changes to the CSS yet to go with the bootstrap html tags?

Here is the functions.php file to view the css and js scripts properly enqueued:

    // Theme Support
    function tgb_theme_support(){
        // Nav Menus
            'primary'   => __('Primary Menu')

    add_action('after_setup_theme', 'tgb_theme_support');

    function bootstrap_css_js(){

        wp_enqueue_style('bootcss', get_template_directory_uri().'/assets/css/bootstrap.min.css');
        wp_enqueue_style( 'stylecss', get_stylesheet_uri(), array(), false, 'screen' );
        wp_enqueue_script('bootjs', get_template_directory_uri().'/assets/js/main.js', array('jquery'), true);
        wp_enqueue_script( 'bootjs', get_template_directory_uri().'/assets/js/bootstrap.min.js', array( 'jquery' ), true );
    add_action('wp_enqueue_scripts', 'bootstrap_css_js');
  • Did you properly enqueue the Bootstrap CSS and JavaScript?
    – Cedon
    Jun 16, 2017 at 14:56
  • Hi, are you sure you are modifying the proper file? Home.php? Front-page.php? Maybe index.php?
    – Johansson
    Jun 16, 2017 at 15:45
  • @JackJohansson, you had the correct answer. I was modifying index.php when I should have been modifying sidebar.php and page.php. If you like you can post this as an answer.
    – Daniel
    Jun 16, 2017 at 18:40

1 Answer 1


I assume you are not editing the proper template file. Editing the home page can be a bit tricky in WordPress, some times. WordPress uses different templates depending on the situation to render the home. These templates can be:

front-page.php // Overrides all
home.php // For latest posts
page.php // For static pages as homepage
index.php // If none of the above exist

There is a good post here by @Rarst, deeply explaining the hierarchy.

Also, you can check the WP-Hierarchy Out for further information.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.