BootstrapWP: WordPress Theme Development Continues

Screenshot of BootstrapWP Version 1.0 in progress

On January 31st, Twitter released version 2.0 of their popular Bootstrap framework complete with a responsive stylesheet and new components. I have been working to keep BootstrapWP, the WordPress theme for Bootstrap as up to date as possible.

If you have been using any previous versions of the BootstrapWP for theme development, I encourage you to switch to the development branch on Github. The development branch contains many bug fixes along with overall style and device response improvements.

Usage: Customize and override any of the styles using style.css file. All .css and .js files are loaded in functions.php. Don’t forget to disable any of the .js files you do not need

All development updates are displayed on the Demo site: http://www.rachelbaker.me/bootstrapwp/

BootstrapWP Development Change Log

 

Header.php

  • Added body data attributes: data-spy=“scroll” data-target=“.subnav” data-offset=“50” data-rendering=“true”

  • Changed navbar class to Bootstrap default of “navbar-fixed-top”

  • Updated wp_nav_menu function array, added “‘container’ => ‘div’, ‘container_class’ => ‘nav-collapse’,” to provide div wrapper with proper class

Functions.php

  • Added bootstrap-responsive.css to bootstrapwp_css_loader function

  • Added application.js to bootstrapwp_js_loader function and removed tablesorter.js

  • Revised pagination section to use ul class=“pager” instead of div id=“pagination”

Page-JSGuide.php

  • Updated Javascript Guide Template to match content from Bootstrap javascript.html file

Footer.php

  • Removed jQuery onload functions that are now all called in application.js

  • Added jQuery append function to automatically apply b class=“caret” to dropdown menu items in navbar

Style.css

  • Updated icon image location to match theme setup

  • Added .icon-white class with corrected image location

  • Removed over-ride of body padding to allow correct spacing with fixed navbar

  • Added styles for comment form

  • Added color primary button colors for comment and search submit buttons

Index.php

  • Edited content on index.php template to directly correlate with index.html Bootstrap file

Other/Misc.

  • Updated CSS and JS files to Bootstrap 2 Final Release files

  • Removed “lib” folder and replaced with Bootstrap “less” folder

  • Removed tablesorter.js file – as it is no longer used in Bootstrap 2.0

  • Removed wordpress.css file – as it is no longer used in Bootstrap 2.0

21 thoughts on “BootstrapWP: WordPress Theme Development Continues”

  1. Hi Rachel, great job you’ve done, congratulations and thanks helped me a great help when I can I would like to create a lite theme with boostrap 2 because to myself I need the css.

    A hug :)

  2. I try V0.8 and V1.0 Dev. After i installed on my wordpress, just see your LARGE Index page with your theme introduction. I don’t know how to use your theme. I digg on your blog, someone said using page-blog.php, but how to use??? Maybe you should assume not every peoples is web developer.

  3. I wasn’t clever enough to get all the bootstrap jquery plugins working on my own, so I’ve been using your theme as a base and wanted to thank you for your work.

  4. First off THANK YOU for doing this work!! I was going to do this on my own but happy to see someone else already started taking the reins.

    I am having a little issue with setting the home page as a static page and then setting a “news” page as the main blog page (posts listed in chronological order) What happens is, when make these settings, the static home page automatically uses your default page with your hard coded content which appears in index.php and the news page also uses index.php content even though I set the template to use Blog Page.

    This is happening because you might have misused the loop. Typically (in my experience) the index.php should just be a shell for the loop (or use multiple loops).

    Essentially your index.php should just be  ” get_template_part( ‘loop’, ‘index’ ); “  or like in twentyeleven “  ”

    Then you can create loop-index.php in the first case or content-index.php in the first page. The contents of this file will display when you land on the home page. You can do the same throughout with different types of pages.

    1. So ive been playing with this for the past hour and I got it all set if you’re interested. I’m not too familiar with how to properly use github but if you can give me a little guidance on that I can work it out for you.

      I haven’t tested in all scenarios yet but essentially built the loop externally from the index.php page and called for it within index.php. Then I also created a front.php and added another loop in there for the static home page.

      I didn’t revert and see how it looks with these files and the front page is a blog, but your theme really seems to denote use with a static front page anyways but logically it should work the same because the home page is simply a page with a template attached and the blog posts page is going to use index.php no matter where it is.

      I’ve also ported over some of the functions from twentyeleven which could be usefull like the comments and post meta stuff including support for post thumbnails (although I didn’t work them in to anywhere on the actual post page layout)

      Let me know if you want my stuff.

      My email is lindsay@creativesupplyco.com

      1.  Ok yea, I was mistaken – a LOT of the functions existent in twentyeleven exist in yours. I was messing up two projects in my head. That being said, the loop still needed work and I am working on creating the blog posts look (which is set) as well as the post types that twentyeleven comes with (aside, quote, status, gallery, etc)

        I think I need to walk away from this for a moment. My head is about to explode. For some reason NONE of my changes I am making in my child theme css are showing – even though I clearly have the child theme active and it’s using all the custom functions and look I created.

        1.  Alrighty.. Sorry for blowing up your blog with my comments. It seems I need to place to vent in order to come to a final conclusion as to why this wasn’t working.

          The way your theme calls for the style sheets does not allow for a child theme to work. You use wp_enque_scripts and then get_template_directory_uri which completely bypasses a child theme if one exists. You need to use get_stylesheet_uri for just the style.css

          What I did was removed the style.css from the wp_enque_styles and simply added it to the header with

          <link rel="stylesheet" href="” type=”text/css” />

          I literally thought I was going insane. I had made a million child themes in my short time as a web dev and thought I had literally lost it!!! I’ve never had a child theme’s template override files all work and NOT the stylesheet!!

  5. Hi  Rachel,

    Thanks for recommending at WPMU.org. I have done building my own theme using toolbox with twitter bootstrap. Not quite hard actually.

    The error from your theme is the collapse menu. When one menu collapse, another menu will collapse also. I have done customizing the nav menu function without extending the nav walker menu and its work.

    I discover the collapse issue is not from the theme but the twitter bootstrap itself. Twitter bootstrap only support one class at one time for java component.

  6. Hi Racheal

    I’m loving the work you have done so far.  I’m a little confused by the way the dropdown works.  When a I add subpages to a section I can see the parent page in the navigation and I can see the child pages in the drop down but when I click on the parent link it only reveals the drop down it doesn’t take me to the parent page.  This means that the user can’t access that page from the navigation menu and when the choose an item from the submenu the breadcrumb does not reflect the true path.  Have I missed something in setting up the theme?

    1. If you’re referring to the navbar, I think that’s intentional. Twitter Bootstrap seems to emphasize clicking rather than hovering to make sites more tablet- and phone-friendly. I’ve restructured my own test site’s menus as a result, adding an index link to the dropdown. You can put in a horizontal line between the index link and the rest of the subpages by using the “divider” class.

  7. Hi, Rachel! Thanks so much for your hard work and excellent bootstrap theme.. I’m using it on a dev site now, and I’m running across the following error as I try to add images to the media library:

    Notice: Trying to get property of non-object in /wp-content/themes/bootstrapwp/functions.php on line 345

    I’m also wondering how it might be possible to integrate bootstrap’s carousel function and thumbnail list CSS into this theme? Thanks in advance for any help you can offer.

  8. Hi Rachel, loving the code so far! Not really hit any snags or problems along the way so far… Will hopefully be using your base theme on one of my sites in the near future… Will let you know when I am done :) 

  9. hey,

    I just tried it out and the navbar seems to not work :’(
    You are using the class nav on a div container instead of using it on ul container :/
    On header.php when you are building the navbar.

  10. Hi,

    1st compliments about this theme adaptation : Great choice & works out the box.
    Now, Rachel, do you, as developer, consider page speed & request time?
    This site, this page, is very simple in fact right? no news site, no 20 images, no … is simple and it : has 107requests and takes 4.1min to load in full!
    So why Im bombing you on your blog with not so positive points?
    After installing your version of Bootstrap, page get 38 requests & load 3.25s on localhost.
    Now setting back my “standard” template = 10 request  970ms load time.
    Any comments about?

  11. Hey Rachel, good job on the theme! Suggestion for future updates, can you add in font-awesome in the library so we can all enjoy the awesomeness of the icons? Thanks!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>