So here’s what happened.
- Downloaded WordPress 3.2.1 from http://wordpress.org/download/ and extracted this in /Users/andij/Projects/wp-bootstrap/httpdocs/
- Gave it a url of wp-bootstrap.com (set 127.0.0.1 wp-bootstrap.com in my hosts file and then setup the vhost accordingly) as this url will be the final destination of the sample theme.
- Created a new database in mySQL called wp-bootstrap.
- Visited my new local development environment of wp-bootstrap.com and followed the config steps. All is well : )
- Copied the ‘twentyeleven’ theme, renamed it as ‘bootstrap’ then switched to it.
- Took a look at http://wordpress.org/extend/themes/upload/ to see what’s involved in creating a proper WordPress theme.
- Here http://codex.wordpress.org/Theme_Unit_Test there’s a list of things to do to setup the blog to enable comprehensive testing.
After importing the test-data.xml and adjusting the WordPress settings accordingly including the the Long and Short menus I decided to add an html comment to the top of each of the php files in the bootstrap theme . I did this to make it a little easier to pinpoint which file to edit from viewing the source. In Firebug. (Select the HTML menu flyout and choose ‘Show Comments’)
Add the bootstrap hotlink to the hosted stylesheet:
link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap-1.1.1.min.css"
Starting point
For now, I’m going to leave the twentyeleven.css in place give me a helping hand (kinda like the feeling of walking hand in hand through a park in the autumn with a new love). I will however remove the reset css from the top of this file.
I will start at the top of the homepage and see what I fancy changing first.
Taking the menu from underneath the banner and placing it at the top and inheriting the bootstrap styles seems to be a good starting point.
Moving the search into the topbar which meant removing some default twentyeleven functionality which changed the position of the search if there’s the Display Text enabled or not.
Including #masthead from the docs.css from Bootstrap to emulate the same design made the look of the entire header and nav pretty sweet.
If you’re looking at this blog at the end of August 2011 then this is likely to be what you’re seeing right now.