Patterns and Textures

March 18th, 2014

Need a pattern for a design projects? Subtle Patterns has been my go-to website for finding the right one but today, I discovered these two new resources.

Transparent Textures allows you to pick your colour with a picker and then spits out the CSS you need. If you’re looking for a fancier pattern, check out http://thepatternlibrary.com/.

What’s the closest Google font?

March 10th, 2014

Ah, I’ve asked myself that question so many times and I’m not alone. Joel H Crawford-Smith has come up with a great tool that allows you to find the closest Google font for a series of non web fonts.

How to add a caption to featured images

October 18th, 2013

Featured images are awesome and if you’ve ever wanted to add an image above the title of your post, using a feature images is the way to go.

When adding images in your posts or pages, adding a caption is easy, but if you’ve tried to do the same with featured images, then you’re out of luck. This is problematic if you want to use images from the Creative Commons where a photo credit is requested.

Faced with this problem this morning I did a quick google search and found the following answer on Stack Overflow.

Easy peasy once this snippet of code is added to your functions.php

function the_post_thumbnail_caption() {
  global $post;

  $thumbnail_id    = get_post_thumbnail_id($post->ID);
  $thumbnail_image = get_posts(array('p' => $thumbnail_id, 'post_type' => 'attachment'));

  if ($thumbnail_image && isset($thumbnail_image[0])) {
    echo '<p class="caption">'.$thumbnail_image[0]->post_excerpt.'</p>';
  }
}

Then use the following in your single.php.

<?php if ( has_post_thumbnail() ) : 
  the_post_thumbnail( 'feature' );
  the_post_thumbnail_caption();
endif; ?>

And Voila!

WTFPL Photos to use for Free

October 14th, 2013

Theme developers and web designers often need photos to work with as placeholder. Place Kitten is a fantastic resource, but sometimes you may want something other than a kitten. Finding the right photo can be tricky, since there are so many licences, rules and regulations. Of course the easiest way to get photos is to just go out and shoot your own… I’ve been snapping pics for a few years now and I’ve amassed a large set of them on Flickr.

Today, I created a new set and decided to share them under the WTFPL. This license is pretty permissive and allows you to take any of these and just do whatever you want with them. So go ahead, help yourself.

Giving back by providing support

October 14th, 2013

One of the ways to learn more about your craft is to help others. For this reason, I’ve been teaching WordPress theming for a number of years and I’ve contributed on the WordPress support forums a bit. Everyone involved on the WordPress.org support forums is a volunteer and although I haven’t asked all of them why they do it, I’m guessing the reason they do it is like mine, I love it.

cyberchimpsI got addicted to the forums 6 years ago and I’ve contributed in spurts. Some weeks are super active, while other weeks simply leave me no time. Some of you may have noticed that, as of late, I’ve been absent from the forums. The reason for that, is that I was recruited to work on the Cyberchimps forums. I’ve been working with the other “chimps” for a few weeks now and even got my first pay check. I felt a wee bit guilty when the money landed in my Paypal account. Here I was getting paid for doing something I used to do for free!

The purpose of helping on forums is to help others, but also you learn a great deal from troubleshooting. With the wage that I got from Cyberchimps, I thought how I could help even more? I always find looking through the loan requests on Kiva humbling. It’s amazing how such small amounts (for me) can change lives. Last month I lent money to Nalini, allowing her to buy a sewing machine. It’s a small gesture, but if I can provide some CSS guidance to someone on one side of the globe and help someone financially on the other, I feel better about our future.

I plan on continuing this process every month and look forward to seeing who else I get to help out.

Design research done simply with Stylify.me

September 21st, 2013

Ever visited a site and wondered what font is being use or what shade of green that is?

In the old days (i.e. last year) I would make a screenshot of the web page and then inspected the colours in Photoshop. But that was only good for colours and didn’t give any info about the typeface.

A few months ago I discovered the what font bookmarklet and I’ve used it countless of times. It works really well and even gives me info about the font foundry should I wish to purchase the font.

I mark a lot of tweets as favorites as a way to read them later and today discovered a tool which I think may become my favourite resource of all time. Stylify.me is a fantastic resource for designer.

Simply type in the url of the website you like and you can find all the hex values, typeface used as well as size and line-height as well as image dimension. This tool is so simple, yet allows designers to get a rough style guide without having to dig around the source code. Fantastic.

Sylify.me

Bold Headline now available in French and Polish

September 12th, 2013

I received a request from a fan of my Bold Headline theme earlier this month which led me down an interesting rabbit hole. This fan, Dariusz, wanted to use my theme but would like a Polish version of it. Not knowing any Polish myself, I asked if he could provide the translation, which of course then led to his next question, how do I do that?

Since I use underscores as the base of all my theme work, I knew that the theme was internationalized, but I didn’t really know what that meant. In order for a theme to be used in another language, one must wrap all english content in the _e function.

<?php _e( 'Some text to translate and display.', 'textdomain' ); ?>

Underscores already does all that, so I didn’t need to worry, but now what?

Turns out translating a theme is quite easy.
Read more…

Easier conditionals with mobble

September 09th, 2013

A few weeks ago, I was working on a site that had the busiest footer. The footer design made sense on a large screen, but I couldn’t wrap my head around how to make it look great on tablets and phones. I was looking for a way to extend beyond media queries and apply a different design per platform, not just breakpoints. That’s when I discovered mobble.

Mobble is a handy WordPress plugin that provides conditional functions for detecting a variety of mobile devices and tablets.

Once installed, mobble allows you to add conditional statement to your theme templates such as:

<?php 
if ( is_mobile() ) {
  get_template_part( 'foot-mobile' );
} elseif ( is_tablet() ) {
  get_template_part( 'foot-tablet' );
} else {
  get_template_part( 'foot-desktop' );
}
?>

Now all I had to do was create different templates for each type of footer. This is so much better than having to fight with media queries.

Some of you will undoubtedly say, that you don’t need a plugin for that. But if your PHP knowledge is limited like mine, this plugin is fantastic!

UPDATE: As noted below in Alex’s comment, if you are using Jetpack, you can also use it’s built in function and target specific devices.

WordCamp Vancouver: Put some shine in your back-end

August 17th, 2013

Coming up with titles for WordCamp talks is always tricky. I’m not proud of this latest one, but it did garnered a few fans and thus was stuck with it.

My WordCamp Vancouver talk this year is about looking at ways pages can be designed slightly differently. During the presentation we’ll be looking at using shortcodes, widgets, include pages, looping through pages and advanced custom fields.

Here is the link to my slides: http://www.bluelimemedia.com/wcyvr-2013/

Happy Summer

July 09th, 2013

raised eyebrowWith the arrival of the sun in Vancouver, and another speaking engagement under my belt, it’s time to for a quick update on what’s happening at Bluelime Media.

My big news is that I have taken a three month full-time contract at Raised Eyebrow Web Studio. They are a great bunch of people and I look forward to learning a lot from them. What this means, of course, is that I’ll have less time available for maintenance of existing sites and for new clients. If there is work needing done, I’ll be able to help but my response times will be slower than you might be used to.

This will be an excellent new challenge for me and help to hone my WordPress skills while adding additional depth in Drupal. If you have any questions or if I can suggest another developer to help you out, feel free to drop me a line. You may also want to bookmark the list of developers I currently recommend.