The other day I wrote about getting the Blueprint CSS framework into your WordPress theme. If you’re developing in CakePHP, it’s even easier to link multiple style sheets and JavaScript libraries to your layout file.

<?php

$css = array('blueprint/screen', 'blueprint/ie', 'style');
$jslibraries = array('prototype', 'scriptaculous', 'jquery');
echo $html->css('blueprint/print', 'stylesheet', 'media="print"');
echo $html->css($css, 'stylesheet', 'media=”screen, projection”');
echo $javascript->link($jslibraries);
?>

Let’s take these one at a time.

$css = array('blueprint/screen', 'blueprint/ie', 'style');

CakePHP’s html helper will load any css file you specify. First, make sure the css files are in app/webroot/css. Then put any css files you want to link to your layout in an array like I have above. You might have noticed that I didn’t include print in my array. That’s because we want to add an media=”print” as a separate attribute that the other style sheets won’t have.

Once they’re loaded into your array, simply put echo $html->css($css); in the head of your layout. The output will be:
<link rel="stylesheet" type="text/css" href="/app/webroot/css/blueprint/screen.css" />
<link rel="stylesheet" type="text/css" href="/app/webroot/css/blueprint/ie.css" />
<link rel="stylesheet" type="text/css" href="/app/webroot/css/style.css" />

We still haven’t linked our print style sheet. Make sure you link the print style sheet above the others so they override it. We can add media="print" by putting this into our layout head:

echo $html->css('blueprint/print', 'stylesheet', 'media="print"');

So now:

$css = array('blueprint/screen', 'blueprint/ie', 'style');
echo $html->css('blueprint/print', 'stylesheet', 'media="print"');
echo $html->css($css, 'stylesheet', 'media=”screen, projection”');

Results in:

<link rel="stylesheet" type="text/css" href="/cvp-msi/https/app/webroot/css/blueprint/print.css" media="print" />
<link rel="stylesheet" type="text/css" href="/cvp-msi/https/app/webroot/css/blueprint/screen.css" media="screen, projection" />
<link rel="stylesheet" type="text/css" href="/cvp-msi/https/app/webroot/css/blueprint/ie.css" media="screen, projection" />
<link rel="stylesheet" type="text/css" href="/cvp-msi/https/app/webroot/css/style.css" media="screen, projection" />

Two things to note. In $html->css($path, $attributes), the first argument is the path from app/webroot/css. The second argument is html attributes.

Linking JavaScript libraries is very similar.

$jslibraries = array('prototype', 'scriptaculous', 'jquery');

This will link to prototype.js, scriptaculous.js and jquery.js respectively as long as there in app/webroot/js.

Put echo $javascript->link($jslibraries); into the head of your layout and you’re done. You have all three JavaScript libraries at your disposal.

Other good resources:

• CakePHP Core Helpers
• Developing With CakePHP
• CakePHP API JavaScript link Helper
• CakePHP API CSS link Helper

Similar Posts:

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

You can apply the same method to upgrading your WordPress plugins.

1. Log in to your web server and cd to the WordPress plugins directory:
cd httpdocs/wp-content/plugins
   Your syntax may vary depending on your server.
2. Download the new version of the plugin. In my case I’m upgrading the Social Homes plug in.
   wget http://downloads.wordpress.org/plugin/social-homes.2.3.zip
3. Back up your current plugin directory
   tar -zcvf social-homes.tar.gz social-homes
4. Unzip the zip file of the new version
   unzip social-homes.2.3.zip
   • You’ll be prompted to confirm you want to overwrite the files in the social-homes directory
     replace social-homes/COPYING.txt? [y]es, [n]o, [A]ll, [N]one, [r]ename:
   • Type ‘A’ and hit return to overwrite the old files with the new ones.
5. Log into WordPress to make sure the upgrade worked by going to the “Plugins” panel in the admin area.
6. Clean up your mess
   rm social-homes.2.3.zip
rm social-homes.tar.gz

You’re done. You’ve successfully upgraded your plugin. This process can be much faster than downloading the plugin to your local directory, deactivating it in WordPress and uploading the new one. Especially if the plugin is a large one.Similar Posts:

• WordPress’ Auto Update Is OK, But The Command Line Is Faster
• Blueprint CSS Readme File
• Incorporating Blueprint CSS Into Your New WordPress Theme
• Wow. ACL is Hard
• Blueprint Optional Fancy-Type Plugin

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
• Getting Blueprint CSS & JavaScript Libraries Into Your CakePHP Layout
• Introducing the Baseline Development WordPress Theme
• Baseline Theme Version 1.0.1
• Blueprint CSS Readme File