Tutorials
I recently worked with Magnify Digital on a website for a very interesting group of people in the Fraser Valley. These folks are concerned about Air Quality and thus have come up with a website and community to address these issues.
A big part of the website was the social media aspect. Thus facebook, twitter and youtube feature prominently on the website. There are plenty of WordPress plugins that allow you to display your latest tweets, but I wanted a simpler solution. The following piece of code proved to be just what I needed:
<?php
$username = "yourTwitterUsername";
$limit = "1"; // Number of tweets to pull in.
/* These prefixes and suffixes will display before and after the entire block of tweets. */
$prefix = ""; // Prefix - some text you want displayed before all your tweets.
$suffix = ""; // Suffix - some text you want displayed after all your tweets.
$tweetprefix = "<p>"; // Prefix - some text you want displayed before each tweet.
$tweetsuffix = "</p>"; // Suffix - some text you want displayed after each tweet.
$feed = "http://search.twitter.com/search.atom?q=from:" . $username . "&rpp=" . $limit;
function parse_feed($feed, $prefix, $tweetprefix, $tweetsuffix, $suffix) {
$feed = str_replace("<", "<", $feed);
$feed = str_replace(">", ">", $feed);
$feed = str_replace(""", "\"", $feed);
$feed = str_replace("'", "'", $feed);
$clean = explode("<content type=\"html\">", $feed);
$amount = count($clean) - 1;
echo $prefix;
for ($i = 1; $i <= $amount; $i++) {
$cleaner = explode("</content>", $clean[$i]);
echo $tweetprefix;
echo $cleaner[0];
echo $tweetsuffix;
}
echo $suffix;
}
$twitterFeed = file_get_contents($feed);
parse_feed($twitterFeed, $prefix, $tweetprefix, $tweetsuffix, $suffix);
?>
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.
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.
Continue reading »
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:
Continue reading »
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.
Earlier this year the folks at Automattic launched www.WordPress.tv, which is a new website to learn about all things WordPress. I just had a quick look and it looks like the list of videos is quite extensive (Click the how-to link for the list of videos. Personally I’m not sure this tab is appropriately labeled, but hey, I found the list.) The site also has a WordCampTV section where you can watch videos, slides and listen to audio clips.
This site is definitely worth bookmarking and investigating further.
In my last post I talked about using the “Better Coda Slider” created by Remy to create the testimonial slide show on the Enhance Dental Centre. While working on this, I ran into a problem. Instead of using a single image when moving from image to image, I wanted to use a rollover image. I looked at the thread of comments on Remy’s blog post and noticed that I was not alone in wanting this and that no one had offered a solution.
Possibly because of my stubbornness I tried all sorts of CSS tricks and hacks and couldn’t get the damn rollovers to work. In the end, the solution was pretty obvious, in fact a bit embarrassing.
I asked Ben to look at my code and in my coda-slider.js file, he simply changed
.before('<img class="scrollButtons left" src="/images/left.gif" alt="" />')
.after('<img class="scrollButtons right" src="/images/right.gif" alt="" />');
to this:
.before('<img class="scrollButtons left" onmouseover="this.src=\'images/left_hover.gif\'"
onmouseout="this.src=\'images/left.gif\'" src="images/left.gif" alt="" />')
.after('<img class="scrollButtons right" onmouseover="this.src=\'images/right_hover.gif\'" onmouseout="this.src=\'images/right.gif\'" src="images/right.gif" alt="" />');
Doh! I was trying so hard to do my rollovers with css, that I forgot the “old school” way of doing this.
In case anybody is interested in re-creating this example, here are the files are zipped up for you to play with.
Yesterday, I was invited to have lunch at Twin Fish Creative‘s monthly staff get together. Since, I’ve been doing a lot of work with them, I thought I would take the opportunity to explain what I do to their Photoshop files and more specifically how CSS is used.
What’s this CSS?
HTML tags were originally designed to define the content of a document. They were supposed to say “This is a header”, “This is a paragraph”, “This is a table”, by using tags like <h1>, <p>, <table>, and so on. The layout of the document was supposed to be taken care of by the browser, without using any formatting tags.
Continue reading »