Bluelime Media » WordPress

Is WordPress a Content Management Solution?

Christine — Sun, 13 Jun 2010 14:30:13 +0000

I had the privilege of sharing the stage with Cameron Cavers and Dave Zille this weekend at
WordCamp Vancouver, and discussed the merits of using WordPress as a CMS.

Some of you might have disagreed with me when I answered No to the question ” Is WordPress a CMS?” I probably should have said Yes AND No…

I’ve been using WordPress for a number of years now. Version 1.2 might have been the first version I worked with. Originally built as a blogging platform, WordPress 1.2 mainly focused on Posts. The ability to display anything but your blog posts on your home page didn’t exist and I’m not even sure Pages were around. When compared to larger CMS built by Oracle, IBM and Microsoft some would argue that WordPress isn’t a CMS mainly because of the lack of approval process. Content types in WordPress are also limited, but WordPress 3.0, due for release anytime soon, is about to change that. Custom post type and menu management will offer us much more flexibility to manipulate content and thus enhance WordPress’s CMS ability. No changes in approval processes are expected for WordPress, but personally I don’t think that there’s a need for this. If this is all that it takes for WordPress to gain the title CMS, then I think it can do without. Organizations and companies looking for sophisticated approval processes usually have many layers of bureaucracy and probably won’t be looking for a free CMS anyway.

Looking back at an older versions of WordPress, it’s interesting to see how the platform and community has evolved. I’m not sure that Matt and the folks at Automattic perceived that one day WordPress would become much more than a blogging platform and be used as a CMS. I can only see great improvements and exciting features when I look at WordPress’s evolution and I won’t be looking at another CMS solution for a long time.

WordPress categories vs tags. What’s the difference.

Christine — Wed, 21 Apr 2010 16:02:52 +0000

WordPress and most other blogging platforms allow you to organize your content in one of two ways: Categories and tags. I’ve often been asked about tags and so thought I would write my thoughts down. Personally, I don’t use tags. Here’s why.

Categories are easy to grasp
Sorting out your blog posts is crucial. This simple act alone will tell your readers what your blog is about. I currently have 291 posts organized in 22 categories. Visitors to my site can clearly see what my blog is about simply by scanning the category list. I like to think that these categories are similar to the sections of a book store or library. If you’re looking for the latest Neil Gaiman novel, you’re most likely to go in the Fiction section instead of the cookbooks. The same is true for your blog categories.

Thus when planning your blog, you should think of broad categories that will guide your users towards the content they are seeking.

Tags are too personal
On the other hand, tags aren’t very logical. As Michael Fields pointed out in his excellent article, tags are found on items sold at department stores and on Christmas presents. When applied to blog posts, they don’t make as much sense and are highly personal. Sites such as Delicious and Flickr use tags and I find myself frustrated to see that there is no proper tagging convention.

As a result I find myself only using categories and so far have never had a request asking me where are my tags? Perhaps that’s because my blog is simple and doesn’t have that many articles. A blog with numerous writers or that focuses on many different subjects may benefit from the combination of both tags and categories. In fact a complex blog may also benefit from Custom Taxonomy. Michael Feilds’s article describes how custom taxonomy can be used to organize your blog in new and exciting ways. I highly recommend that you have a look at it and learn about the many ways you can use tags appropriately.

Is WordPress Killing Web Design?

Christine — Thu, 15 Apr 2010 18:06:55 +0000

During the 2010 SXSW Interactive Festival designers debated whether or not WordPress is killing web design. The idea is that WordPress and other CMS are constraining designers to think outside the box and turning them into lazy designers. I was quite pleased to hear that no one on the panel agreed with this statement. Brendan Dawes, one of the panel members pointed out that WordPress is simply a tool that manipulates data. Said in another way, Gina Bolton confirmed what I believe, which is that WordPress is highly customizable and can be made to do whatever you want.

One of my latest project consisted of converting a design provided by Mizu Creative into a WordPress site for Paul Sangha. The site included a photo gallery which required jQuery animation, a few different templates, random background images and flash on the home page. I’m very proud of this work, but more importantly, by the fact that it looks nothing like a WordPress site.

I’ve worked with many graphic designers in the past and when asked about constraints, my only suggestions is to keep the width of the canvas to 960px. This constraint is only there to ensure that the site will look good on most browsers, but even this is debatable and will depend on the target audience.

The Paul Sangha website is a great example which demonstrates that designers should not be constrained by the CMS.

Stop climate change by optimizing your website

Christine — Thu, 15 Oct 2009 15:47:23 +0000

Climate change has no regional boundaries and threatens more than the environment. If we continue on this path, famine, flooding, war, and millions of refugees are the likely outcome. Given the urgency of the issue and the upcoming international climate negotiations in Copenhagen later this year, it’s only natural that this years’ topic for Blog Action Day, is climate change.

All throughout the day, you’ll no doubt be reading on the many actions you can take to help stop climate change. But did you know that if you are using WordPress, you could be making minor adjustments that also help? Making your website “green” is as easy as reducing the number of of calls to your database. Let me show you how.

WordPress is a database driven website. All of your content, posts and page information resides in a database and every time someone visits your site, a call (SQL query) is made. Reducing the number of calls will not only green your website, it will also speed it up.

Obvious ways to reduce the number of calls are by:

optimizing your images and make them as small as possible
displaying a few posts on your page instead of hundreds
cleaning up your css and reducing the file size
minimizing the use of plugins

Something that may not be as obvious is to remove calls to the database located in your template files.

For example the header.php template is usually made up of the following code:





<?php if (is_home()) : ?><?php bloginfo('name'); ?> - <?php bloginfo('description'); ?>
<?php else : ?><?php wp_title('', 'false'); ?> - <?php bloginfo('name'); ?>
<?php endif; ?>

You can eliminate 5 calls to the database simply by replacing the meta http-equiv tag with:

the feed with:

the pingback link with:

and the style sheet link with:

It’s not much, but any reduction in energy use is better than nothing.

Is WordCamp the conference for you?

Christine — Wed, 23 Sep 2009 17:16:10 +0000

I had the pleasure of attending my first WordCamp conference this weekend in Portland. Yes, I know, first WordCamp, how is that possible for a WordPress focused web developer like you? I guess I just wasn’t organized enough to attend previous ones.

I was also not expecting much. As the saying goes, you get what you pay for, so how good can a $20 conference be? WordCamp PDX proved to be exceptional and went beyond my expectations.

The first scheduled speaker, Jason Grigsby started the conference with a bang and demonstrated how important and easy it is to speed up your WordPress installation. His presentation consisted of information that was easy enough for bloggers to grasp and yet didn’t belittle hard-core developers.

Matt Mullenweg opted for a casual question and answer session instead of a presentation which gave the audience an opportunity to pick his brain. Having heard Matt speak in the past, it was great to see him answer people’s question and chat with them casually afterward.

Saturday ended with another great presentation by Tyler Sticka who talked about WordPress powered portfolios and provided us with code samples that we can use and customize to our liking. Once again, the talk was slightly technical, but Tyler managed to present in a way, which I think wasn’t too intimidating to non-coders.

Sunday’s presenters were equally stellar. John Hawkins and Will Norris gave us great advice on how to build plugins and what not to do, while Scott Porad, Cheezburger Technology Officer of Pet Holdings, Inc., the company behind the hugely popular I Can Has Cheezburger? and Failblog.org gave quite a high-level presentation explaining how his company operates and shared tips on how to be more efficient when programming.

Overall, I was very impressed with the information I gathered during the weekend. I was expecting discussions on CSS, content organizing, problems with installation, etc.., but instead, was confronted with SQL queries and plugin development code. I learned a great deal and now have plenty of advice to follow and put in place.

As most WordCamps go, the model is based on the unconference. As a result, during the scheduled talks, other discussions were taking place here and there. People simply wrote topics on the board and initiated the discussions. A group of realtors even gathered on the roof deck on Sunday afternoon to discuss matters that relate to them. How awesome is that?

As Matt pointed out during his Q&A session, WordPress has become popular because of people like you and me who attend and organize WordCamps. Regardless if your a blogger or hard-core coder, WordPress is a great platform and there’s bound to be something for you at WordCamp. So check it out and see if there’s a conference near you.

Incorporate Cufón in WordPress

Christine — Tue, 08 Sep 2009 15:08:53 +0000

Every once in a while comes a project where using a font other than verdana, arial, trebuchet or tahoma would be nice. I recently finished a website for Tod Maffin where, Rob, the designer chose Sansa Condensed as the font of choice for headings. I could have created images for all of the page headings, but I wanted to give Tod the ability to update them if he chose to and more importantly, I also wanted to use the same font for the headings of blog posts. After reading about the alternatives, I decided to give cufón a try and was quite surprised to discover how easy it is.

Here are the steps required to integrate cufón in your wordPress site:

Step 1 – Get cufón
Visit the cufón website and download the YUI-compressed version of cufón. Save this js file in a js folder in your wordPress theme.

Step 2 – Generate your font file
Follow the steps on the Cufón website and add the generated js file to your js folder in your wordPress theme. You’ll be required to upload your font files and thus you need to have purchased them as well as verified that your fonts are legal to use in font embedding. Upload your js folder in your wordPress theme via FTP.

Step 3 – Add the code to your wordPress template
To use cufón, simply add the following lines of code to your header.php file.

These few lines of code will convert all of your h1 and h2 into my selected font. That’s it.

How to use Slimbox plugin to display your portfolio in WordPress

Christine — Wed, 22 Jul 2009 15:59:20 +0000

If you’ve been following the Bluelime Media website you will know that we’ve partnered with Barbara from BlueCitrus on many occasions to develop websites and as the saying goes, “The son of the cobbler has no shoes“, the BlueCitrus website was in need of a facelift. My latest teaching gig at Langara provided me with the opportunity to design and develop a WordPress site for Barbara. The goal of the class was to teach the students how to use WordPress to create a portfolio. So building a site for Barbara was the perfect project.

Barbara laid the ground work and designed the header, navigation and gave me a good indication of how she wanted the site to work, but I was given carte blanche on how to make the portfolio work. After looking at numerous portfolio examples, I came across the stunning work of Koldo Barroso. Koldo’s illustrations are simply marvelous and I could look at them all day. His portfolio section is simple, yet very elegant. On closer examination of his site, I noticed that he uses Slimbox to display his gallery pieces which is just a slimmed down version of the original Lightbox.

A few clicks later, I read a few tutorials on how to use Slimbox and decided to use it to build it Barbara’s portfolio section. If you’re familiar with WordPress plugins, you’ll know that beyond how to install and activate, instructions are usually fairly slim when it comes to how to use them. Since I just finished the site and the steps I took are still fresh in my mind, I thought I’d walk you through on how to set your own gallery using the Slimbox Plugin.

Step 1:
Download the Slimbox plugin, upload it to your plugins folder and activate it.

Step 2:
Get your portfolio images ready. During the design process, I came to the decision of making my large images 500px x 405px and the thumbnails 110px x 80px. In my WordPress admin, under Media, I set the size of my thumbnails to 110px and 80px. I then proceeded to create all of the portfolio images and uploaded them using WordPress’s media tool. During this process, WordPress automatically created corresponding thumbnails and added a -100×80.jpg extension to them. The thumbnails weren’t exactly as Barbara had hoped for, so I downloaded them all, she tweaked them in Photoshop ensuring the the same names were kept, I then re-uploaded them to the server and replaced the old ones.

Step3:
Once the images in the media library, it was time to add them to the WordPress Websites Page. I opted for a unordered list of items to display the thumbnails.

Using the image insert tool, I selected the image to show, fine-tuned the title of the image, ensured that the file url was selected, selected the thumbnail size and clicked insert into post.

Which gave me the following line of code.

In order to activate the lightbox, I then inserted rel=”lightbox” to the anchor tag.

In order to display the caption under the image a title must also be added to the anchor tag.

This code now works perfectly, but you probably want to display more than one image. All you need to do is repeat the process and modify the relative attribute. Instead of using rel=”lightbox” I used rel=”lightbox-website” on all anchor tags. Modifying the relative attribute this way activates the previous and next links on the images.

You’ll notice that on Barbara’s website, once you view the images in the lightbox, you can read the title of the image but also visit the website by clicking the link. To do this, you need to add the link to your title.

So you might be tempted to using something like:

title="Portfolio Piece 1 - visit website"

But you will soon find out that this doesn’t work. What you need to do is swap some of the characters for their html equivalent. For example, quotes (”) would be " and brackets (<) would be <. So your final code will be something like this:

Step4:
Once all your thumbnails are in place, you may want to adjust your style.css. Here’s what I used for the Bluecitrus website.


ul.thumbnails {width:520px; list-style:none; margin:0; padding:0;}
.thumbnails li {float:left; margin:5px 4px 5px 3px;}
.thumbnails img  {width:110px; height:80px; padding:5px; vertical-align:bottom;}
.thumbnails a {border:1px solid #D4D4D4; background:#FFF; display:block; margin-bottom:5px; float:left;}
.thumbnails a:hover img {background:#F9F9F9;}

You can see the final results here.

Enhance your WordPress site with Custom Fields

Christine — Mon, 22 Jun 2009 22:20:16 +0000

Over the years of converting other graphic designer’s design into WordPress templates, I’ve had to think of ways to keep the code simple and easy for clients to maintain the site once live. Working on a few challenging design lately has given me the opportunity to look at using custom fields.

You’ll find custom fields in your admin panel under all post and page text areas. These custom fields allow you to add extra information, technically termed meta-data, and allows you to add jazz up your posts or pages. Here are a few examples of how custom fields can be used:

Add a style to your header

Navigating through the various topic of one of our latest projects, “The Challenge Series” you’ll notice that the sustainability section has a green title, while history is orange, policy red and design concepts blue.

This was achieved by doing the following:
1. Adding a custom field called Colour and assigning it a value of green, orange, red of blue.

2. Editing the code in my index.php as follows:

ID, $key, true); ?>">

3. Setting up the appropriate styles in my CSS as follows:

h1.orange {background:#F26F21 }
h1.green {background:#5D9632}
h1.red {background:#B22217}
h1.blue {background:#00728E}

Insert an image outside your content area

During the build of the latest version of the Crisis Centre website, the design required that a unique image be inserted in the top right hand corner of each page. Inserting the image within the main content entry would have required me to fiddle with the padding of my paragraph tags. Instead I opted to use a custom field and added this piece of code to my index.php template:

/images/photos/ID, $key, true); ?>" alt="" border="0" />

This line of code, simply pulls the image specified in the custom field and inserts in a div tag which has its own unique style.

Although custom fields, can get a bit tricky, especially when using more than one per entry, they allow you to enhance your site and give you much more design freedom.

Fairly Painless WordPress 2.8 upgrades

Christine — Thu, 18 Jun 2009 01:49:29 +0000

I had the “privilege” of updating 47 websites today to the new WordPress 2.8 version. All of these sites were updated from version 2.7 or 2.71 so as you can imagine, there were no major issues. While taking care of these updates, I also took a look at all of the plugin upgrades and discovered only three plugins that were slightly problematic.

Following the upgrade and applying the latest patch CForms failed to work properly and the following error popped up:

Fatal error: Cannot redeclare class cf_mail in .../public_html/wp-content/plugins/cforms/lib_email.php on line 3

I did a quick search on Google, deleted and re-installed the plugin, but because I was in a hurry and didn’t want to leave the site without a working form, I simply decided to ditch the plugin and opted for Contact Form 7 instead. CForms has worked very well for me in the past, but I’m a bit uneasy and confused with the fact that they are no longer in the WordPress.org plugin repository, so I think that I’ll just stick to Contact Form 7 from now on.

When upgrading other websites that use CForm, I opted not to go through the plugin upgrade and will deal with those some other time.

Both My Category Order and NextGEN Gallery required an additional step once the update was applied. Following the My Category Order upgrade, I noticed that the categories were gone from the sidebar. I simply went to the Posts > My Category Order tab in the admin and clicked the button to re-order the categories and bingo, that did the trick.

Similarly, with the NextGEN Gallery, following the upgrade, I noticed that my slideshows no longer worked. Navigating to the Gallery section in the admin revealed a final step. Once the upgrade complete, the slideshows reappeared.

When building websites I try to minimize my use of plugins and always delete unactivated ones, but once live who knows what plugins will be installed by the client. Having said that, when looking at the list of plugins used on 47 sites, I’ve been impressed with their compatibility so far. All of the following plugins work perfectly:

Add to Any: Share/Bookmark/Email Button
Akismet
All in One SEO Pack
Audio player
Blubrry PowerPress
Custom Query String
Digg This
Email Immunizer
FeedBurner FeedSmith
Fuzzy Recent Posts
GD Star Rating
Get Recent Comments
Google XML Sitemaps
is_child
Kimili Flash Embed
My Page Order
Ozh’ Better Feed
pb-embedFlash
Post Content Filter
Quotes Collection
Redirection
Revision Control
Robots Meta
Secure WordPress
SlideShare
SEO Slugs
SEO Title Tag
ShareThis
TinyMCE Advanced
Transpose Email
What Would Seth Godin Do
WordPress Database Backup
WP Audio Player
wp-cache
wp supercache
WP-FLV
WP-PostViews
WP-SpamFree
Yet Another Related Posts Plugin
ZenphotoPress

All in all this was a good day.

The Challenge Series built on WordPress

Christine — Sun, 07 Jun 2009 17:22:51 +0000

I was very pleased to read a recent article on the WordPress blog about Ford choosing the WordPress platform for their new website: “The Ford Story“. This new website aims to show Ford’s commitment towards getting new, high-quality, fuel-efficient cars and trucks on the road and uses WordPress as a CMS to deliver a wide variety of static content, videos, photos, and dynamic updates.

I recently came to the same decision when building a website for the Challenge Series which is a celebration of the planning, design and building of Vancouver’s first sustainable neighbourhood – Millennium Water: The Southeast False Creek Olympic Village.

Published as an online book, the first of eight chapters was recently launched and, just like The Ford Story, uses WordPress as a CMS to deliver a wide variety of static content, downloadable documents and photos. Future issues will also include videos. When I was first introduced to this project, I instantly thought of WordPress as the CMS for this website, but wondered if perhaps Drupal or some other CMS might be a better platform. The design of the home page alone proved somewhat challenging and uses a large number of custom fields, but with proper training and the use of simple HTML, I think that the website is fairly easy to maintain and look forward to seeing how it progresses and develops. Finding out that companies like Ford also choose WordPress has convinced me that I’ve made a good decision.