Introducing the Blueprint WordPress Theme

September 5th, 2007  |  Published in Art and Design, Blueprint  |  74 Comments

Blueprint-WP is a new WordPress theme based upon the Blueprint CSS framework. It is built on a grid-based design, cross-browser compatible, easy to change through CSS and has a clean look. And it’s free.

Features

  • Built on the new Blueprint CSS framework, thus:
    • Easy to change column widths
    • Easy to add columns that are cross-browser compatible
    • Cross-browser typography and grids
    • Small size (~8k)
  • WordPress Specific
    • Easy to install and modify
    • Compatible with WordPress widget function
    • WordPress 2.2 compatible
  • Design
    • Easily modify layout through custom css
    • Compatible with all major browsers
    • Clean and simple look
    • Quick page loading

Installation

  1. Download the latest version.
  2. Put the archive in your wp-content/themes directory and extract it.
  3. Go into your WordPress Admin section, click the “Presentation” tab, and choose the “Blueprint-WP” theme.
  4. That’s it!

A subversion checkout is coming soon.


Customization

To customize the layout, copy the blueprint/css/custom.sample.css to custom.css and put your CSS overrides there. Then open up blueprint/header.php and uncomment the custom CSS line.


More


Recommended Plugins

Blueprint Theme should work with all WP plugins, but here are a few that I especially recommend:


License

This has been released under the Creative Commons Attribution 3.0 License. That means you can share it and modify it as long as you keep the link to this site at the bottom of the theme. If you do not want a link at the bottom, please contact me for opportunities.

Like what you see? Subscribe to the RSS feed.

Responses

  1. Travis Seitler says:

    September 5th, 2007 at 10:41 am (#)

    Nice work! (I was wondering how soon someone would jump on this one.) =)

  2. Guy says:

    September 5th, 2007 at 1:41 pm (#)

    nice one, I was thinking of making a WP theme based on Blueprint myself but you saved me the trouble! There is also one based on the YUI if you have a look on Google… looking forward to checking this out, thanks :)

  3. Patrick Burt says:

    September 5th, 2007 at 3:45 pm (#)

    Simple and gets the job done. I like your theme m8. :)

  4. Austin Storm says:

    September 5th, 2007 at 5:15 pm (#)

    Well, look who’s going to be a celebrity!

  5. Kel says:

    September 10th, 2007 at 11:25 pm (#)

    Looks good. Two Suggestions:

    1) I’m not sure we need the “.svn” directory thats included in this download. (Side note – It’s hidden by default for Mac users since it begins w/ a period.

    2) In file header.php, link tags for the 3 BP css files are missing trailing /> in order to validate.

    thanks!

  6. Josh Sowin says:

    September 11th, 2007 at 9:10 am (#)

    Kel,

    I thought I deleted the .svn directories. I must have missed one.

    Thanks also for the validation note. I don’t care much for validation (heresy, I know), but that’s probably a good change. I’ll make a note for the next version.

    Thanks!

  7. Manuel Martensen says:

    September 12th, 2007 at 7:31 pm (#)

    hey josh.

    i love it as you already know. modified the looks, and now i am happy as can be.
    but in header.php i changed this (and recommend it) for the people who are used to click logos instead (or additional) to the nav home link:

    changed: div class=column span-12 first id=header onclick=location.href=’/';

  8. Jon says:

    September 15th, 2007 at 9:28 am (#)

    Excellent work! Very clean and beautiful design. I love it. I’ve been looking to implement a WP theme for my website. I came across your work while I was reading the Blueprint CSS Google Group and was pleasantly surprised to find your theme. I’ll be customizing it as soon as I find some time…
    Thanks again for all of your hard work!

  9. Josh Sowin says:

    September 15th, 2007 at 9:42 am (#)

    Jon,

    Glad you like it! Be sure to let me know when you customize it so I can see the results.

  10. TM says:

    September 15th, 2007 at 2:34 pm (#)

    Hello,

    I have a little problem with the image alignment. The images always automatically line up on the left. How can I change that setting?

    Many thanks,

  11. Manuel Martensen says:

    September 17th, 2007 at 2:23 am (#)

    Waiting for 0.6 release and switchback to em’s and was wondering if you will update your release accordingly — or do i just have to change the lib files?

    Have a few more blogs to create the next weeks, simple stuff – no styling, but i try to do the thing that’s less work for me :)

  12. Josh Sowin says:

    September 17th, 2007 at 9:06 am (#)

    Manuel: I might up date it — or I may wait until 1.0. Things are so unstable that I hate to change everything and then change it again. We’ll see.

    TM: In posts it should not do that. In other places, you would have to override it in the custom.css, for instance: #sidebar img { float: none; }

  13. Aarne says:

    September 30th, 2007 at 7:53 am (#)

    I have also problem with image placement in post. I can give it align=”right” or align=”left” but it does not resolve problem. Take a look at http://www.adaur.ee/index.php/tonu-toompark/
    Image should be in right side of tekst.

  14. Leesbril says:

    October 10th, 2007 at 3:26 am (#)

    Thank you.

    I was looking for a theme that would work with Internet Explorer 6 too.

    It looks very nice and clean.

  15. Janet says:

    October 13th, 2007 at 10:38 pm (#)

    Thank you! I’m just beginning to play with WordPress and this is a very nice clean theme. :)

  16. aski says:

    October 25th, 2007 at 2:43 am (#)

    How can I make the sidebar appear on the left instead of the right of the screen?

  17. rosali says:

    January 27th, 2008 at 3:48 pm (#)

    how can i display comments on pages? they don’t display after I enable the option for a page. you seem to be doing it on this page…

    thanks!

  18. Robert Edwards says:

    March 13th, 2008 at 12:48 am (#)

    I am having problems with forms. When a form box is clicked on the onclick is activated and it takes you to the home page. It has happen in two places, one on the Google groups form and another on a protected post password form. Any suggestions?

  19. Bruce says:

    March 14th, 2008 at 8:40 am (#)

    With the compress.rb and its support for generating semantic classes, it should be really easy to remove all the span-* and such classes from the template content. Could you perhaps do that for the next release?

  20. Bruce says:

    March 17th, 2008 at 3:40 pm (#)

    Quick update.

    I managed to figure out these settings for the semantic class names:

    plugins:
    - fancy-type
    - buttons
    semantic_classes:
    "#header": ".span-12 .first"
    "#maincontent": ".span-9 .first"
    "#sidebar": ".span-3 .last"
    "#nav": ".span-12 .first .large"

    I’ve not yet figured out how to harmonize the resulting screen.css file with the blueprint-wp.css though. The layout is funky. It may need custom settings for the grid?

  21. Matt says:

    April 23rd, 2008 at 11:22 pm (#)

    Hi,

    I just wanted to let you know that I’ve added Blueprint-WP to my list of the best WordPress theme available on the net, at http://www.bestwpthemes.com

    Great work!

  22. Brady says:

    June 21st, 2008 at 6:50 pm (#)

    How do you change the color?

  23. Brian says:

    August 8th, 2008 at 5:17 am (#)

    I’m just wondering if Creative Commons Attribution 3.0 License is GPL compatible?

  24. Nadaa says:

    August 14th, 2008 at 1:12 pm (#)

    hi there,
    i can’t upload to wordpress because it doesn’t have tags in the style.css file??

    Nadaa

  25. I Wordpress Layouts says:

    August 15th, 2008 at 1:21 am (#)

    Simple and neat! Well done!

  26. Mister says:

    September 11th, 2008 at 2:09 pm (#)

    I noticed that when I first load by blog using this theme, the right sidebar is floating in the middle of the web page and then it moves itself to the right after the main content pages are rendered. This produces an awkward animation affect. I couldn’t seem to figure out how to adjust it so the right sidebar is always floating on the right when loaded.

    Thanks!

    -Mr

  27. Nick says:

    September 15th, 2008 at 1:53 pm (#)

    Joshua, this is a really great, clean, pretty theme that’s extremely useful for learning both wp themes and blueprint. A really nice jumping off point for me, personally.

    seriously great work, much appreciated!

  28. jimmy1971 says:

    October 15th, 2008 at 7:56 am (#)

    haaa, jeje that bark, but very very good theme

  29. jimmy1971 says:

    October 16th, 2008 at 8:37 am (#)

    Hey, I like to leger when I do a search, display the full post?

  30. Thread Pool says:

    October 26th, 2008 at 8:44 pm (#)

    Great theme. Very professional looking. Exactly the right balance between clean design and functionality.

    I’m using it on my blog, with some minor changes to the colors.

  31. Casey Link says:

    November 6th, 2008 at 1:09 pm (#)

    I’m using a slightly customized version of your theme over at http://www.binaryleysium.com/blog

    Thanks for the awesomeness :)

    Any chance you will release an update for WordPress 2.7?

  32. blackacre says:

    December 8th, 2008 at 10:35 pm (#)

    This may be a dumb question but what must you do in order to use a logo in place of just text for the top of the blog?

  33. Tom says:

    January 11th, 2009 at 4:13 pm (#)

    Excellent work, was looking for something so clean for some time now. Just a question, I must miss something : I want little customization and did what you said, I copied the custom.sample.css to custom.css, edited it and then uncommented the line in the header.php file but nothing changes.

  34. Web design Brisbane says:

    February 5th, 2009 at 5:34 am (#)

    Very clean without being sterile. I wonder how hard it would be to give it left-hand navigation?

    A Stumble for your efforts.

  35. Damon says:

    February 24th, 2009 at 10:19 am (#)

    I too cannot get the header logo to work. Slightly discouraging. Great work otherwise!

  36. Damon says:

    February 24th, 2009 at 10:39 am (#)

    I figured out the problem…you have to change the loading order of your stylesheets in header.php so that custom.css loads first and therefore overrides other css.
    Thanks!

  37. TomC says:

    April 10th, 2009 at 9:23 pm (#)

    Cheers! I used the BluePrint theme as the basis for my redesigned blog. Thanks for a great starting point.

  38. G says:

    April 17th, 2009 at 12:35 pm (#)

    Does anyone have any idea how to tweak this to show submenus? I’m running wp-e-commerce and would like the children of the Store page to show when that’s selected.

  39. Naeem Noor says:

    April 19th, 2009 at 6:37 am (#)

    Hello,
    I’ve converted blueprint them into a blogger template, hope u dont mind.
    http://naeemnur.blogspot.com/2009/04/blogger-template-blueprint.html

  40. Harry says:

    April 29th, 2009 at 12:39 am (#)

    Hi, how do you change the background color of the theme? I can’t seem to find anyhow…thanks!

  41. edward says:

    May 26th, 2009 at 7:17 pm (#)

    hi, I just used your theme and it really is excellent..simple but manageable…just what I need!

    More wordpress users should know about your theme template!

    Thanks! Thanks!

  42. scott says:

    June 23rd, 2009 at 5:07 am (#)

    thanks dude! i dig this thing – its clean, simple, easy.

  43. Goldstar Fundraising Ideas says:

    September 4th, 2009 at 8:33 pm (#)

    This is one of my favourite themes. Playing with the CSS gives you lots of options in terms of fonts and colors. Thank you for sharing. A Stumble for your work :)

  44. Steve says:

    October 9th, 2009 at 12:08 pm (#)

    Is there something with this theme that messes up tables? Everytime I try to use a table it automatically makes the border grey and I can’t have a table without a border etc….

  45. ArleyM says:

    November 30th, 2009 at 12:14 pm (#)

    I would love a version of this theme to have some quick Theme Options for columns.

  46. Arun says:

    March 5th, 2010 at 6:40 am (#)

    Great template. Simple and elegant looking

  47. NPXP says:

    March 10th, 2010 at 1:28 pm (#)

    I just fell in love with this theme. I will be using it right away :D

  48. neXt says:

    March 29th, 2010 at 3:51 am (#)

    Clean and nice looking! Very sensible layout.
    Thank you for the good work!

  49. kakday says:

    March 29th, 2010 at 7:26 pm (#)

    look nice

    thanks for framework wordpress theme

  50. wahyu says:

    May 10th, 2010 at 8:15 pm (#)

    thanks, pren. very nice and very useful post.

  51. Richard says:

    May 29th, 2010 at 3:57 pm (#)

    I like the simplicity of this theme and green is also my favourite color. What sort of arrangement do you want done to have the footer link removed ? Just wondering.

    Good luck in the future with both your own blog and theme developments.

  52. Dom says:

    July 7th, 2010 at 11:49 am (#)

    Thanks for that nice Theme. Installed it on my new site. If anyone needs the located german version, just say yay! ;)

  53. Scott says:

    July 16th, 2010 at 3:27 am (#)

    Very nice work. Love the crisp clean set out of the theme. Look forward to more of your work.

  54. Pensiuni Sibiu says:

    October 14th, 2010 at 11:47 am (#)

    This is one of my favorite theme, its clean and work with Internet Explorer 6 too, here in Romania many peoples use IE6, thank you for your theme.

  55. juckl Social News says:

    October 25th, 2010 at 2:18 pm (#)

    Thanks for that nice Theme. Installed it on my new site. If anyone needs the located german version, just say yay!

  56. vijay dubey says:

    December 28th, 2010 at 9:23 am (#)

    thanks alot …
    pretty clean theme … stumbled upon this after searching for a similar theme for 2 3 hours !!!

  57. Ingrid says:

    January 7th, 2011 at 4:34 pm (#)

    Where would I place adsense in this theme.

    Thanks

  58. Azad Shaikh says:

    February 7th, 2011 at 6:57 pm (#)

    Very simple and elegant theme. I will do some more tweaks in this theme.
    Thanks for sharing.

  59. Jack says:

    February 16th, 2011 at 1:27 pm (#)

    Hi Josh

    Your theme is awesome! Much better than lot of commercial themes out there. I’ll be using this Theme on my new sites.

    Thanks
    Jack

  60. Rajib Kumar says:

    February 24th, 2011 at 1:34 pm (#)

    Thanks for sharing such a nice Theme. Going to Install it.

  61. Kaarel says:

    March 27th, 2011 at 11:11 am (#)

    Will try this out, looks pretty good.

  62. Webspace says:

    April 16th, 2011 at 6:05 am (#)

    Thanks for that nice Theme. Installed it on my new site. If anyone needs the located german version, just say yay!

  63. soi says:

    May 9th, 2011 at 5:53 pm (#)

    Its a nice theme, clean and simple. I would like display excerpts in categories, instead of the entire post. How can I do this?

  64. soi says:

    May 9th, 2011 at 5:57 pm (#)

    Or even just the titles..

  65. Mark says:

    June 13th, 2011 at 3:08 am (#)

    I’ve set up my site so that in “Reading Settings”, “Front page displays” is set to a static page.
    I selected a page called “Home”.

    Trouble is, when I view the site it has two “Home” buttons in the nav bar.

    I can get rid of the extra button by setting “Home” to private, but when I view the page the
    title reads “Private:Home”.

    How do I sort this out ?

    Cheers

    Mark

  66. Jessica says:

    September 26th, 2011 at 4:55 pm (#)

    How can I make the sidebar appear on the left instead of the right of the screen?

  67. Vixka Studio says:

    October 30th, 2011 at 11:58 pm (#)

    Advanced thanks to this theme. I made a new travel site using blueprint framework so easy.

    Check our site: http://hotelkeys.us.

    Thanks again to Mr. Joshua.

  68. Fick Maschinen says:

    November 23rd, 2011 at 8:02 pm (#)

    Thanks for sharing such a nice Theme. Going to Install it. greetings johanna

  69. Kreativ Theme says:

    January 25th, 2012 at 9:36 am (#)

    Thanks dude … Blueprint will serve greatly as an example for creating a new theme ;)

  70. Sandro says:

    February 2nd, 2012 at 12:32 am (#)

    Hello,
    I don’t understand how to make the comment template appear at the bottom of a page.
    I need to do exactly what you have on this page.

    Can you please help me?
    Thanks in advance.
    best regards
    sandro

  71. Kostenlos Handy orten says:

    February 22nd, 2012 at 3:26 pm (#)

    Simple and neat! Well done! THX Hanna

  72. Pagelines Coupon says:

    March 29th, 2012 at 2:15 am (#)

    Another fine article with sage advice, please keep them coming

  73. handyortung starten says:

    July 26th, 2012 at 3:04 pm (#)

    thats a realy nice Theme dude

  74. web resource says:

    December 30th, 2012 at 10:40 am (#)

    I join. ӏ agree with told all above.

Leave a Response