Springthistle Design

Launch! YOXI pilot

admin — Tue, 22 Jun 2010 19:39:12 +0000

As seen on GOOD.is, the yoxi pilot project gives four teams of three people each to solve one social problem in four weeks.

As GOOD.is put it: “Yoxi (pronounced YO-see) is a new problem-solving model that hopes to frame social innovation around friendly competition. Four teams will spend the next four weeks creating an initiative that increases the number of cyclists on the streets of urban areas. Guided by a team of professional mentors, the teams will craft a pitch for a solution that could range from a new product to a government initiative.”

Learn about Springthistle’s role in the website »

YOXI

admin — Tue, 22 Jun 2010 19:35:38 +0000

Was brought into the YOXI project by Jaki at Arrow Root. The client supplied all of the designs and required me to build a fully-functional and flexible WordPress them, customized to their needs. It’s not WordPress MU – just has some special user templates, as well as a wicket Theme Options page that lets the client customize a lot of the css, pitch, and video information easily.

The YOXI pilot project was publicized in GOOD.is.

New WordPress Plugin – April’s Facebook Like button

admin — Fri, 30 Apr 2010 17:20:25 +0000

Take a look at the new facebook like plugin I wrote for WordPress.

It’s the fourth plugin I’ve written, but it’s the first time I’ve gone to the trouble to get it added to the WordPress plugin repository. That was a fun process, involving SVN, of course. I hope you’ll try my plugin out, and write to me with feedback!

Here’s the plugin my website:
http://springthistle.com/wordpress/plugin_facebooklike/

Here it is at the WordPress plugin repository:
http://wordpress.org/extend/plugins/aprils-facebook-like-button/

Assure WordPress passes correct image to Facebook

admin — Tue, 13 Apr 2010 16:06:15 +0000

If you have a WordPress blog and want to be sure that when people share a post on facebook (either through AddThis or directly through Facebook), the right image is grabbed, you can add a meta tag to your theme that will assure it happens.

1. Install the plugin get-the-image

2. Create a default image for your blog and call it blog_icon.png. Upload it to your theme’s images/ directory.

2. Add this code to your theme’s :

$post->ID,
	'format'=>'array',
	'default_size'=>'thumbnail',
	'default_image'=>$defaultimg
)); ?>

Learn more about the meta tags Facebook looks for on the Facebook Developers Wiki.

New WP theme for Quo Vadis Blog

admin — Mon, 12 Apr 2010 16:23:00 +0000

Today launched the new theme for the Quo Vadis Blog website, a long-time client of Springthistle. The blog theme was overdue for an overhaul, and boy is the new theme a revelation.

It’s got all of the features Quo Vadis wants, with new colors, a double right-side column, and additional space for the posts themselves. Also added are a variety of features and plugins including AddThis links, tweetmeme, the comment notifier, most popular posts and threaded comments.

Take a look at the new Quo Vadis Blog!

For comparison,
you can also view the
now-retired design,
at left.

Theme for Evernote launched

admin — Fri, 26 Mar 2010 16:26:16 +0000

I’ve been working with people at Evernote for the past couple of weeks to build their new theme. I finished it a couple of days ago and sent them instructions for putting it live. Today, they put it live and it looks great! They provided the design, so my challenge was to implement all of the functionality indicated by the design, even items that aren’t built into WordPress. Thankfully, WordPress is so well-designed and flexible that it was no trouble to get it all done. Some jQuery was also required! Read more here »

Evernote Blogcast

admin — Fri, 26 Mar 2010 16:19:45 +0000

Evernote came to me with their theme already fully designed and asked me to implement it into a theme. It has a number of special features:

Featured posts – there are grabbed based on the ‘featured’ tag and displayed as you see here.
Search results – instead of the standard search results, these grab a thumbnail of the image associated with the post (or a default image, if required) and use a special, shorter excerpt.
Customized AddThis – using the AddThis service, but 100% customized for Evernote
Tree-display for comments – this was mostly a feat of careful css programming, but also required entirely customizing the WordPress output of comments. Strategy explained here.

Tree-styling for threaded comments in WordPress

admin — Mon, 22 Mar 2010 17:53:47 +0000

After quite a bit of wrangling, I got comments to display the way the client wants – in a tree (three levels deep only). I had tried to find a pre-existing solution for this, but none seemed to appear. Using a little wordpress comments tweaking and css’s :last-child pseudoclass, it’s all good to go now. Solution below the jump.

The solution

First you need to have a custom comments function. To do this, I changed the line in comments.php to this:

wp_list_comments('type=comment&callback=ahs_comment')

That tells WordPress to not use its default, but to use a custom function in functions.php called, you guess it, ahs_comment(). Then, of course, we need the css to make it all go. This isn’t all the css for the comments, just the pieces relevant for the tree structure.

Both function and css are in this file.

Lastly, you need the four images:

I know it had to have been possible without the additional image for the Double-V line, but I could not make it work, so here we are with a V and a double V.

Highlighting current post’s category in WordPress

admin — Tue, 16 Mar 2010 14:03:31 +0000

Wrote a little javascript and hook for a WordPress client today who wants the category of the current post highlighted (on single.php). Note that if you’d like to implement this, you’ve got to have jQuery already.

The php for category html output:


All Posts

I’ve got the cat-item-0 in there because WordPress doesn’t generate something like that automatically, of course. It’s essentially just a link to the main posts page, or blog home. So after WordPress processing, the output html looks something like this:


All Posts
News
Notes
Nabobs

Next, I’ve got a javascript function in the functions.js file that’s included in the head of the theme:

function highlightCurrentCategory(catid) {
	jQuery('.cat-item-'+catid).addClass('current-cat');
}

When the function is run, it’s passed the ID of the category to highlight, and it adds the current-cat class to that list item.

Finally, in the functions.php file for the theme, I’ve got this php function and the add_action for the hook:

function highlightCurrentCategory() {
	global $post;
	if (is_single()) {
		$category = get_the_category($post->ID);
		echo '';
	}
	if (is_home()) {
		echo '';
	}
}
add_action('wp_footer', 'highlightCurrentCategory');

It’s using wp_footer so that it happens at the very end of the page and doesn’t slow down other things that might need to happen sooner on the page. The javascript is only printed for single-post pages and for the home page – if it’s a category page, WordPress automatically includes the current-cat class.

Colorbox with WordPress

admin — Thu, 04 Mar 2010 19:21:13 +0000

I’ve used this method a bunch of times and have decided it’s high time to document the process. It’s my favorite method for using colorbox with the built-in WordPress gallery. Detailed steps after the jump.

Download colorbox.
Figure out which of the four existing design you’d like to use (or write your own) and grab the following files, which are in different directories in the colorbox zip you downloaded:
- jquery.colorbox-min.js
- colorbox.css
- images/
Put all three into a directory named colorbox inside of your theme folder’s js/ directory.
Download and install the plugin called Cleaner Gallery. On the settings page for this plugin (Appearance > Cleaner Gallery), set the following settings:
- Gallery Settings: Image Link: Large
- Gallery Settings: Captions: Use the image title as a caption if there is no caption available
- Javascript Settings: Image Script: Thickbox – this doesn’t require that you use thickbox, but it makes some changes to the [gallery] output that you need for colorbox also.
Add a new file called functions.js in the theme’s js/ directory and put the following code into it:
```
$(document).ready(function(){
	$('.gallery a:has(img)').colorbox();
	$(".colorbox").colorbox();
});
```
This will be sure that the colorbox script is used in the image gallery and also on any link that has the class “colorbox”, so you can add it to other images and links.
Make changes to the header.php of the theme so that it calls in jquery and the colorbox js and css. E.g.:
I usually like to put the colorbox css before my main theme’s stylesheet, in case I want to make any simple modifications to the defaults. Also, be sure to call in your javascript in the above order.

That’s it, except perhaps for some additional stylesheet-tweaking.

Some examples:
My portfolio
Congregation Emanuel