Incorporating Blueprint CSS Into Your New WordPress Theme

If you’re familiar with the Blueprint CSS framework, you already know it can make your life a lot easier. So how do you get it into your WordPress theme? Luckily, WordPress is designed to make your life easier too.

I’m assuming your know the basics of WordPress Theme Development. That is, at the very least you need:

• header.php
• footer.php
• index.php
• style.css

Put those files in a folder named after your theme. And put that folder in /wordpressroot/wp-content/themes/.

Once you’ve gotten that far, download the Blueprint CSS Framework and drop the “blueprint” folder from that download into your theme’s directory.

Finally, to include the new CSS files into your theme, just add this code to your header:

<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/blueprint/screen.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/blueprint/print.css" type="text/css" media="print">
<!--[if IE]>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/blueprint/ie.css" type="text/css" media="screen, projection">
<![endif]-->
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />

Pay attention to the order. You want to make sure that href="<?php bloginfo('stylesheet_url'); ?>" appears last in the list of style sheets. That’s your style.css where you can tailor the CSS for your specific design.

That’s it.

Similar Posts:

• Incorporating Blueprint CSS Into Your New WordPress Theme
• Introducing the Baseline Development WordPress Theme
• Getting Blueprint CSS & JavaScript Libraries Into Your CakePHP Layout
• Baseline Theme Version 1.0.1
• Blueprint CSS Readme File

Categorised in: Blueprint Framework, css, PHP, web development, wordpress

This post was written by admin