Archive for the 'WordPress' Category
Stop climate change by optimizing your website
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.
Is WordCamp the conference for you?
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.
Incorporate Cufón in WordPress
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.
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/cufon-yui.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/your_cufon_generated_font_file.js"></script>
<script type="text/javascript">
Cufon.replace('h1');
Cufon.replace('h2');
</script>
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
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.
Enhance your WordPress site with Custom Fields
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:
Fairly Painless WordPress 2.8 upgrades
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 3The Challenge Series built on WordPress
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.
Looking for Canadian web hosting company? Look no further than Blacksun.
More often than not, web hosting is something that clients have already set up when they contact me. As a result I have to work with many hosting providers and learn how to navigate their admin panel and many quirkiness.
I ran in to a very bizarre WordPress error this morning following a brand new installation on one of Blacksun’s server. Certain area of the web admin turned up blank pages. I did a quick search on Google and thought that this error may be due to a wrong php.ini setting.
Looking at Blacksun’s website, I found the contact number to their technical support really fast, called, and was greeted by a human voice in less than 2 minutes. I explained the situation, she looked at the error files and confirmed my initial thought. Instead of putting me on hold and leaving me to talk to her manager, she simply took my contact details and told me to call back. Have you ever had technical support call you back? I wasn’t going to hold my breath.
No more than 20 minutes later, a voicemail was delivered to my phone. The error was fixed and my site is now working perfectly. That’s the best customer service I’ve encountered in a long time.
Bluelime Media launches Framework Templates
For the past few years, I’ve been working more and more with WordPress as a Content Management System, in fact some of you might have noticed that I’ve changed my website content to reflect this transition. If you’ve looked into WordPress yourself, you will know that there is a huge, very generous community that provides online help, tips and tutorials and themes. These themes can be downloaded, installed on your server and you now have a different looking website. However, the problem with these, is that usually, there is always something that just isn’t right for us. Whether it’s the column layout, the width of the site, the header graphic, etc… Modifying the WordPress templates and the CSS can be challenging at times. It’s like trying to prepare a five course meal in someone else’s kitchen. They might have lots of pots and pans but they’re just not the right ones for you.
As the years have progressed, I found one template that I modified and used as my starting point, but I found myself doing the same things over and over. As a result I decided to create a series of new templates which are very basic. They only have the absolute necessary, are very clean, simple and easy to modify. You won’t find crazy function files with lines and lines of code, they only have one image and the colours are neutral.
The idea behind these templates, is that they should be used as your starting block. Once you have them installed, you can modify the CSS, add your images, required plugins and style them the way you’ve envisioned. I’m hoping that these new templates will be useful for WordPress developers, especially those who are just starting out and learning CSS and how to navigate through the many WordPress files. I’ve released the first three templates at www.framework-templates.com and will be releasing more as time permits. I’ll also keep a blog there where you can read about WordPress, templates and plugins.
Please check out the new site and let me know what you think.
Add social bookmarking icons to your sidebar without using widgets
As social bookmarking sites such as Twitter, Facebook and Linked in become more and more popular, these days, I find myself being asked to make adjustments to several WordPress websites by adding social bookmarking links and icons to the sidebar. After 2 such web updates this week, I was asked by a friend to send me the code so that they could add it to their site. So instead of doing the work and sending it to him, I thought I would share it with you all.
The following examples are just code snippets that you can add to your sidebar.php template file. These snippets will not work if your website use sidebar widgets. (That’s not exactly true, but it’s a bit more complicated.)
The first example is very simple and can be seen live on the kitsilano.ca website.
First you’ll need to edit your sidebar.php template and add the following lines of code:
<h2>Follow Us</h2>
<ul>
<li class="rss">
<a href="[insert your rss link here]">Get our Feed</a>
</li>
<li class="twitter">
<a href="[insert your twitter link here]">On Twitter</a>
</li>
</ul>
Next you can adjust the styling by adding this piece of code to your style.css
#sidebar li.rss {background:url(images/rss.gif) 0 50% no-repeat;}
#sidebar li.twitter {background:url(images/twitter.gif) 0 50% no-repeat;}
#sidebar li.rss a, #sidebar li.twitter a {padding-left:20px;}
The icons will also have to be uploaded in your templates’ images folder. You can use your own icons or grab the ones that I’ve used by downloading the zip file.
The second example may look a bit more complex, but is just as easy and can be seen on the mudcreative.com sidebar.
First insert these lines of code in your sidebar.php:
<div id="social_media">
<h2>Follow Us</h2>
<ul>
<li><a href="[insert your link to linked in here]"><img src="<?php bloginfo('template_directory'); ?>/images/linkedin.png" alt="View our linked in profile" width="32" height="32" border="0" /></a></li>
<li><a href="[insert your link to twitter here]"><img src="<?php bloginfo('template_directory'); ?>/images/twitter.png" alt="On Twitter" width="32" height="32" border="0"></a></li>
<li><a href="[insert your link to rss feed here]"><img src="<?php bloginfo('template_directory'); ?>/images/rss.png" alt="Via our RSS feed" width="32" height="32" border="0" /></a></li>
<li><a href="[insert your link to facebook here]"><img src="<?php bloginfo('template_directory'); ?>/images/facebook.png" alt="On Facebook" width="32" height="32" border="0"></a></li>
</ul>
</div>Next, add the following to your style.css
#social_media {
width:200px;
background:#F2F7F7;
border:1px solid #ACD0D1;
padding: 0 0 5px 0; margin-bottom:10px;
}
#social_media ul {list-style-type:none; margin:0 0 0 6px; padding:0;}
#social_media ul li {display:inline; padding: 0 6px 0 0;}
Depending on what your stylesheet already contains, you may need to make a few tweaks, but it should be pretty straightforward. Here is zip file with the code snippets and icons. Have fun.