Adding the Bootstrap Grid system to WordPress

This tutorial will go over how to add the Bootstrap Grid system to our WordPress starter theme. This will make our WordPress theme responsive and also get our sidebar positioned correctly. You will also learn how to add the grid system to full width pages and every other page that is included with our starter theme out-of-box.

You need to have an active subscription to view this content.

Register Here!

  • Brad makes the theme process easy! Practicing these concepts over and over is going to help me become a better developer. These are super-tools for WordPress Theme Developers

  • Antonella

    Hi Brad, I’m really enjoying your course so far and all is proceeding well. My only query at this time regards the comments.php template. This template goes inside single.php, to which I applied your recommended treatment to add the Bootstrap grid. Do you recommend that I also apply the container, row and column classes to comments.php? Also, I keep getting a broken layout with the sidebar below the main content on all single post and pages except the blog listings page. I checked the source and the Bootstrap classes are in place both in the main content and the sidebar. Any ideas of what I might be doing wrong?

  • Code Ecstasy

    Great tutorial. Everything works fine for me except 404.php , I just add the two “div’s” with ‘container’ and ‘row’ calss add the classes ‘col-md-12 col-lg-12’ to the div with the id “primary”. Also close the two div’s with ‘container’ and ‘row’ class before get footer function.

    404.php is not showing the same output as like you when I put a wrong URL. it just says “Object not found!” and “Error 404” , could you please check my attach screenshot. I’m using xampp in my localhost windows machine. Do you have any suggestion?

    • Just adding divs to the page theme shouldn’t cause the page to be missing (404).. If you remove the markup that you added does the page work? Moving forward, please add your support questions to the Support Forum. Thanks

      • Code Ecstasy

        Thanks for your fast reply. I’ll move to the support forum
        Thanks

  • bn86

    Hey Brad, loving the course!

    I notice at 12:40 you remove ‘section’ and replace with a div, unlike in the other files which didn’t have a section there. Is that intentional/ok?

    Thanks 🙂

    • I am glad you are enjoying the tutorials. You can keep section or use div like I did in the tutorials. Just make sure you have the same Bootstrap classes like the tutorials. If you run into any problems, don’t hesitate to post something in the support forum or send me an email.

      • bn86

        Just a heads up to anyone out there like me: if you do replace the ‘section’ with a ‘div’ like in the video, don’t forget to also change the closing section tag to a div!

  • Hey Brad, all of the page templates are working fine accept for the blog posts page, if I do not have “the latest posts” set as the home page. I have a static page set as both the the home page and blog posts page The sidebar is at the bottom of the page. Can you please assist?

    • Have your reviewed this topic in the support forum: http://bootstrapwp.com/topic/sidebar-is-beneath-my-
      comments/

      If you have a static page set for the homepage and blog page then WordPress will be using the page.php template. Review this tutorial and make sure you are not missing a div tag. If you think everything is correct please create a topic in the forum or email me your URL and/or markup so I can review your code.

  • Eric Young

    Hey Brad, Im getting an error on this function bootstrapwp_categorized_blog() in the footer

    • What does the error say? Do you have the function bootstrapwp_categorized_blog() in the templates-tags.php file?

      • Eric Young

        Sry its actually on the 404 page – here is the error Call to undefined function bootstrapwp_categorized_blog() in C:wampwwwUNDERSCOREwp-contentthemesunderscore404.php on line 28

        • Is that function defined in template-tags.php? If you named your theme something other than bootstrapwp, it’s probably not named the same thing.

          • Eric Young

            In template-tags.php there is a function called underscore_categorized_blog() if i change the 404 to have the function it works fine but doesn’t work with bootstrapwp_categorized_blog() as you have above in your 404 code

          • Well the theme in the tutorials is named bootstrapwp, that is why the function name is bootstrapwp_categorized_blog().. You need the function name in the 404 template to match whatever is in your template-tags.php file. So in your case it sounds like it should be underscore_categorized_blog().

            Be careful copy and pasting code from the tutorials, there will be different markup that will not work in your theme because the ‘bootstrapwp’ prefix on the functions.

            I hope you have realized or have learned that the 404.php page template is looking for a function called bootstrapwp_categorized_blog() within the theme files. In your case, it is underscore_categorized_blog(). So if that function doesn’t exists you will get an error.

  • tracy

    I must have an extra div tag someplace, my footer is now showing up under the sidebar/in the 3 column for all posts. Not pages though, there the footer is where it should be. The static front page? that’s got the footer over in the sidebar too. Ideas where to look?

    • Glad you got it sorted out!

      • tracy

        just to be clear, what .php pages in the bootstrap directory am I NOT updating – the content.php pages? comments.php? or am I adding some form of the bootstrap column class to all the php pages?

        • There would be a lot of files that you are NOT updating… It would be a shorter list of the pages you should update.. The video should cover them. If you need further help on this, please create a topic in the forum.

  • lilyh

    Hi guys – if you are using underscores theme, make sure you replace the line of code on your index.php file. Instead of use and it should all work fine. There is a mention of underscores theme being different… but I missed it. Hope this can be a helpful reminder. Cheers.

  • Ceremco

    Great tutorials! A link at the end of the tutorial to the next one would be a great help tho!

  • Ceremco

    In newer versions of underscores, content.php is in a subdirectory. Therefore line 31 of index.php should be get_template_part( 'template-parts/content', get_post_format() ); and line 40 should be get_template_part( 'template-parts/content', 'none' );

    • Ismael Maneh

      @braginteractive:disqus You might want to update the code a bit as as it will prevent the display of content on the container unless you do what @disqus_K04FWNZo7I:disqus pointed out. The result of not having those two things update is that the sidebar will be the only element being displayed.

      • Are you using the theme I provide at the beginning of the tutorials?

        • Ismael Maneh

          Not in the version i’m currently working, decided to go for the updated version in the end. Although it would be useful for those like me who choose this path, to add a Disclaimer so they don’t miss anything:

          • I have a paragraph about how the tutorials will vary depending on what version of underscores you are using in one of the first tutorials. That is why I provide the same version of underscores, so you can follow each tutorial exactly. Once you get the the Gulp/Sass tutorials, I download the latest version of Underscores (which I also provide). FYI, you arent missing out on any new/updated features by using a different version on Underscores..

  • Drew Barker

    I am not sure why but I can not get my side bar show up.

    • Did you remove the PHP to the sidebar by accident or something? Are you sure you have a widget set in the Dashboard so the sidebar shows up?

  • Hi Brad

    First of all: GREAT info, thanks. Well worth the price of a coffee.

    You close the opening container and row in sidebar.php.

    However, if there is no sidebar, php will exit at that point and never print the closing divs, as far as I can tell.

    Am I wrong?

    Hugh

    • Thanks for the kind words. You are correct. If you are wanting to create a page without the sidebar, I would personally remove the call to the sidebar and extend the Bootstrap grid to be full width. If you are worried about people leaving the sidebar area blank, you could also do a conditional statement in the sidebar.php to add the closing divs if necessary. Hope this helps!

  • Chema Gallego

    404 Error & Solution (for linux systems)

    Hi,

    If you get an Error like “Object not found” instead of “Oops! That page can’t be found”, and you are using a linux machine, you have to load “mod_rewrite” module in Apache.

    Follow next steps (I’m using debian and ubuntu with Apache):

    1. Open one terminal (console).
    2. Load mod_rewrite in apache:

    sudo a2enmod rewrite

    3. sudo nano /etc/apache2/sites-available/000-default.conf

    Search for “DocumentRoot /var/www/html” and add the following lines directly below:

    AllowOverride All

    4. And restart Apache Web Server:

    sudo service apache2 restart

    5. That’s all. You can check if ‘mod_rewrite’ is enable with phpinfo().

    6. Try now.

    Hope this help you.

  • bevon

    I am getting this error on my 404 page:

    Fatal error: Call to undefined function bootstrapwp_categorized_blog() in /404.php on line 28

    ‘count’,
    ‘order’ => ‘DESC’,
    ‘show_count’ => 1,
    ‘title_li’ => ”,
    ‘number’ => 10,
    ) );
    ?>

    • Do you have that function ( bootstrapwp_categorized_blog() ) defined anywhere? If not, remove it from the 404.php page template.

      • bevon

        Yes its in my content-search.php, content-single.php and content.php

        • Please create a support topic in the forum with further details on the errors you are getting. If you are not using the same theme as the tutorials and are copy and pasting the code, you might just have a error in your markup.

          • bevon

            I figured as much. I am going to start from scratch. I notice the underscore theme that is in the video is different that what they are currently using. For example. the content.php is under /template-parts and not in the root of the theme.

            Thanks

          • You are correct. They renamed some functions and removed some things, but other than that it is the same theme. You aren’t missing out on anything using the starter theme I provide. I promise.

          • bevon

            Ok. Thanks. So far so good.