There is a new version of the Baseline Theme. In the last few days of tinkering with it and modifying it for use with this website, I noticed a small bug. The Blueprint IE reset was acting funny in conjunction with the IE8 JavaScript. I chose to make IE8.js the default with the option of including Blueprint’s reset instead. (more…)
Archive for the ‘wordpress’ Category
Baseline Theme Version 1.0.1
Tuesday, February 16th, 2010Blueprint Optional Fancy-Type Plugin
Monday, February 15th, 2010The Baseline Development Wordpress Theme has Blueprint plugged in already. There are some optional Blueprint plugins you can take advantage of. We’ll take a look at the fancy-type plug-in. (more…)
Why Use Blueprint and the 960 Grid System in the Baseline Theme?
Sunday, February 14th, 2010An Inventory of Blueprint’s Style Resets and Useful Classes
A friend contacted me about using the Baseline Wordpress theme, but asked why I included both Blueprint and the 960 Grid System. The short answer is that Blueprint has a number of browser resets that I like to take advantage of and 960 GS offers greater flexibility in terms of the width of columns and their gutter widths. Especially if you want to adhere to the Golden Ratio for design. 960 pixels divides very neatly into 3.
Let’s take a look at what Blueprint does to reset some things to establish a cross-browser baseline. (more…)
Introducing the Baseline Development Wordpress Theme
Monday, February 8th, 2010I’ve come up with some habits that I’ve developed from building themes for Wordpress over the years. One, is to start with a nearly blank style sheet. I also like to hook in several JavaScript libraries and CSS frameworks from the start to take advantage of things like JQuery, Blueprint’s CSS reset and Superfish menus. (more…)
Wordpress’ Auto Update Is OK, But The Command Line Is Faster
Tuesday, November 25th, 2008I recently found a great article about upgrading Wordpress from the command line. If you’re familiar with a command line interface at all, it’s by far the simplest way to upgrade your Wordpress install.
You can apply the same method to upgrading your Wordpress plugins.
- Log in to your web server and
cdto the Wordpress plugins directory:
cd httpdocs/wp-content/plugins
Your syntax may vary depending on your server. - 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 - Back up your current plugin directory
tar -zcvf social-homes.tar.gz social-homes - 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.
- You’ll be prompted to confirm you want to overwrite the files in the social-homes directory
- Log into Wordpress to make sure the upgrade worked by going to the “Plugins” panel in the admin area.
- 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.
Incorporating Blueprint CSS Into Your New Wordpress Theme
Sunday, November 23rd, 2008If 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.
