adventures of a blogjunkieWordPress » adventures of a blogjunkie

WordPress Online Business Giveaway

David — Sat, 25 Feb 2012 11:21:35 +0000

Posted in Blog

The folks over at WP Pro Business are running an insane giveaway of WordPress-based online business products. Some of the stuff up for grabs include..

Gravity Forms licenses
WPMUDEV Memberships
BackupBuddy licences
Wishlist Member licenses
Standard Theme
Marketeer Theme

and more! The total value of the giveaway is over $9,000! Like I said – insane.

Head on over and enter the giveaway now.

[Published] Take 5 Minutes to Make WordPress 10 Times More Secure

David — Thu, 11 Aug 2011 14:59:03 +0000

Posted in Asides

http://www.problogger.net/archives/2011/08/11/take-5-minutes-to-make-wordpress-10-times-more-secure/

ProBlogger.net published my guest post today. Guess that officially makes me a professional blogger

Custom size featured image thumbnail with fallback in WordPress

David — Tue, 21 Jun 2011 16:25:53 +0000

Posted in Blog Geek

Occasionally you may need to display featured images in sizes other than WordPress’ default thumbnail, medium and large sizes. That’s quite easily solved with the add_image_size() and the_post_thumbnail() functions. Unfortunately, there are still 2 problems to be solved:

Some posts may not have images at all, or the author forgets to attach a featured image
Previous posts don’t have featured images

Here’s a solution that 1) resizes the featured image to the right size, 2) uses the first image in the post if a featured image is not set and 3) falls back to a default image if none of the above are true.

TimThumb

TimThumb is a popular script that crops and resizes images and then caches them that is used in many WordPress themes. Download the script from the project page and save it as timthumb.php in your wp-content folder.

The script’s purpose is to resize images that are not hosted on your website, and therefore unable to be resized by WordPress. By default it only resizes external images from a few ‘safe’ sources, e.g. flickr.com, but you can override that by setting define ('ALLOW_EXTERNAL', TRUE); in the script. Please read up on the TimThumb documentation.

Theme customization

functions.php

In your theme folder, add the following code to your functions.php file. If your theme doesn’t have a functions.php file, simply create it and save it into your theme folder.

add_image_size( 'featured-thumbnail', 95, 66, true );

// Figure out which image to be shown
function featured_image_thumb() {
	global $post, $posts;
	// If a featured image has been set, use the
	// featured-thumbnail size that was set above with the
	// class of 'optional_img_class'
	if (has_post_thumbnail() ) {
		the_post_thumbnail('featured-thumbnail',
		array('class' => 'optional_img_class') );
	}
	// If a featured image is not set, get the first image in
	// the post content
	else {
		$first_img = '';
		ob_start();
		ob_end_clean();
		$output = preg_match_all('//i', $post->post_content, $matches);
		$first_img = $matches [1] [0];

		// Define a default fallback image in case a featured image
		// is not set and there are no images in the post content
		if(empty($first_img)){
			$first_img = get_bloginfo("template_url").'/images/default.jpg';
		}

		// Generate the HTML code to display the image and resize
		// the image with timthumb.php
		return '';
	}
}

Code for grabbing the first image courtesy of WpRecipies.com: How to: Get the first image from the post and display it

In your theme

Call the featured_image_thumb() function in your theme, e.g.

Don’t forget to regenerate your previously uploaded images

The add_image_size() function only works on images that are uploaded from this point forward. You can force WordPress to regenerate the images again with that specific size by using the Regenerate Thumbnails plugin.

How to make WordPress bulletproof for clients

David — Sat, 14 May 2011 03:29:29 +0000

Posted in Blog

This is my talk at WordCon / WordCamp Asia 2011. Here are the notes from my presentation – for my reference and yours. If you enjoyed my ideas here, please Like or tweet this post. Thanks!

I’ve had the privilege of working on many WordPress projects big and small throughout my career. However in many situations I’ve realized that creating a great design and then turning it into a high-quality WordPress theme is not enough to make the project a success. WordPress developers can find themselves in this situation when

the client has different expectations – the developer delivers a theme, but the client is left scratching their heads wondering, “How does this WordPress thing and a zip file going to become my website?”
there is little or no documentation – the developer assumes that the client can just figure it out because hey, WordPress is a piece of cake!
there is little or no support – what happens when the client needs help? Most freelance developers do not specify a support process for clients, which leads to frustrations on both ends.

I have identified 4 approaches for developers to prevent unnecessary stress between the client and developer:

Don’t use WordPress, just because you’re familiar with it and especially if the client doesn’t need a CMS.
Provide website updates and support as monthly subscription
Simplify WordPress by removing menus and unnecessary features. I’m against this because it makes WordPress into something it’s not.
Bulletproof WordPress (and the client-developer relationship) by implementing the strategies below.

Educate clients about WordPress and set expectations. Make it clear to the client that running a website is like driving a car so that they are prepared for the commitment in owning one. If they aren’t prepared, you the developer are available to provide assistance. Just like how they might send their car for a professional wash and wax, your professional help costs money too.

Pre-empt potential problems. Anticipate stumbling blocks and nip them in the bud, e.g. feature overwhelm and auto-updates not working. Take the extra time to do these before handing over the site and developers will save time in providing support.

Proper documentation. Again, taking the time to create the documentation for the site will save time later. Instructions hurriedly sent over via email does not constitute proper documentation. There are lots of options to create manuals, user guides and tutorials for the client. My favorite technique is to record a screencast for the client.

Provide inline / contextual hints. Similar to the above, this strategy advocates creating documentation for the client but breaking it up smaller pieces and displaying them only where necessary.

Provide shortcuts for more complex functions. Finally, shortcuts are stuff that makes it easier for the client to perform a particular task, e.g. formatting text and adding images into the sidebar – difficult with the text widget, easy with the Rich Text Widget. I also like to make use of custom shortcodes in my themes.

In conclusion, some clients really are idiots but most aren’t but will still need hand-holding, support and education. Despite needing extra time and effort to bulletproof your work, it’s worth it because happier clients will lead to more business for you

P.S. Dear clients who are reading this post, ‘idiot’ is just a moniker. I don’t mean you. Really

If you enjoyed my presentation, please support me by purchasing the following products with my affiliate links:

More robust footer widget areas for Headway

David — Tue, 26 Apr 2011 03:46:25 +0000

Posted in Asides

I recently got an email from a reader who wanted to know how I implemented my footer widget areas, and seen some similar requests in the Headway forums. With Headway, you can flip your widget areas horizontally to make a widgetized footer but it works best when you only have 3-4 widgets in them. I wanted to have more flexibility and so I injected 3 widget areas into my footer.

Screenshot for posterity, if I ever re-design this blog. Click for full-size image.

I didn’t have time for a full tutorial but hopefully you’ll find these code snippets useful:

blogjunkie.net custom_functions.php for Headway theme

blogjunkie.net custom.css for fat footer widget areas

Why Jetpack really packs a punch – the future of WordPress and why you may not like it much (if you’re a premium developer or service provider)

David — Tue, 15 Mar 2011 01:37:00 +0000

Posted in Asides

http://wpmu.org/why-jetpack-reallypacks-a-punch-and-the-future-of-wordpress-as-a-platform/

Last week, Automattic announced Jetpack, a bundle of plugins that will bring the hosted WordPress.com features into self-hosted WordPress blogs. On the surface it sounds like a great addition to the WordPress platform, but James from WPMU.org points out some far reaching implications.

How to create your own Twitpic-like site

David — Sat, 29 Jan 2011 11:18:54 +0000

Posted in Asides

http://xes.cx/?p=4800

@xescx explains a useful tip on how to roll your own Twitpic service with WordPress. Related posts: Create a WordPress tumblog with Headway and WooTumblog KDDI US Related posts:

Solved: Cufon text not refreshing on jQuery UI Tabs

David — Tue, 11 Jan 2011 15:49:06 +0000

Posted in Blog Geek

Today I was working on a project that:

Made use of jQuery UI Tabs through the WordPress Post Tabs plugin
Uses custom fonts for the tabs via Cufon
Requires tab font to change color when selected

My first attempt was to simply render the tabs with Cufon…

jQuery(document).ready(function($){
    Cufon.replace('.ui-tabs .ui-tabs-nav li a');
});

..and style the active and default states with CSS.

/* default tab style */
.ui-tabs .ui-tabs-nav li a {
    color: #454545;
}

/* selected tab style */
.ui-tabs .ui-tabs-nav li.ui-tabs-selected a {
    color: #FFFFFF;
}

So far so good. The tabs were customized quite heavily and now looked like this.

However, there was a problem: the Cufon text wasn’t changing color when you clicked on different tabs.

The reason for this is because Cufon has already rendered on the page, and because there is no page reload when you click the tabs, Cufon doesn’t re-render to update the fonts and colors.

Checking the Cufon documentation, I found that you could manually refresh Cufon by calling the Cufon.refresh() function. With jQuery UI Tabs you can bind the refresh function to fire after the tabsshow event:

$('#tabs_0').bind('tabsshow', function() {
    Cufon.refresh('.ui-tabs .ui-tabs-nav li a');
});

Now the tab fonts and colors update when you click on the tabs, yay!

One more thing. In the code above I had to target the #tabs_0 selector because that is the selector which the Post Tabs plugin uses to render the tabs. However this wasn’t very flexible because it wouldn’t match the other instances of the jQuery UI Tabs which would have the IDs of #tabs_1, #tabs_2, #tabs_3.. #tabs_n.

So I turned to Twitter and within minutes I had my answer (thanks @cheeaun!). Simply use jQuery’s Attribute Starts With Selector:

$('[id^="tabs_"]').bind('tabsshow', function() {
    Cufon.refresh('.ui-tabs .ui-tabs-nav li a');
});

Now, the Tabs are a lot more bulletproof.

Cufon text will be updated when new tabs are selected
The code applies to multiple tabs generated by the Post Tabs plugin, i.e. #tabs_1, #tabs_2, #tabs_3.. #tabs__n_.

I hope this saves a few people the time spent figuring this out.

Simple form validation with FBJS on Facebook Page Tabs

Create a WordPress tumblog with Headway and WooTumblog

David — Sat, 01 Jan 2011 11:37:01 +0000

Posted in Asides

http://headwaythemes.com/using-headway/create-a-wordpress-tumblog-with-headway-and-wootumblog/

Here’s a guest post I contributed to the Headway blog:

Recently I launched a redesign of my personal blog (blogjunkie.net) which essentially turned it into a tumblog. I achieved the look and functionality with the Headway theme and the WooTumblog plugin. I received a few questions about the redesign so here is a tutorial on how you can do the same with your Headway blog.

What is a tumblog / tumblelog?

Some people were confused with the concept of a tumblog so I thought I would explain it first.

A tumblog is a publishing tool that is in between Twitter (140 characters) and full-blown blogging (500+ words). It’s great for times when you have more to say than what Twitter will allow, but not so much that it deserves an entire blog post. I simply wanted to post a link / image / video and add a comment to it, without worrying about the post formatting. A tumblog is perfect for that.

Five Nerds and Projectionist are typical examples of tumblogs–short form snippets of content with occasional long posts.

Bulletproof domain redirection for CPanel Add-On domains

David — Mon, 06 Dec 2010 05:45:39 +0000

Posted in Blog Geek

Recently I helped my friend Beth Heavrin of Smart Green Tips to migrate her blog to a new domain name. Along the way I realized that the simple way of domain redirection doesn’t work as well for websites that are add-on domains in CPanel environments. This article shows you how to create bulletproof redirects that will work, even for add-on websites.

The Problem

CPanel site structure

In CPanel environments, you start off with a primary domain that resides in the public_html directory. When you add new site to your CPanel hosting, they are added as add-on domains whose root folder are subdirectories of public_html.

You end up with a directory structure in your web hosting account like the image on the right.

Simple .htaccess Redirects Don’t Work

For our example, let’s assume that the primary domain is PrimaryDomain.com and the new domain we want to redirect it to is AddOn1.com. To redirect PrimaryDomain.com to AddOn1.com, you may have used this code in the .htaccess file for PrimaryDomain.com:

# Redirect 301 / http://www.AddOn1.com/

Or, you may have used this code:

# RewriteRule ^(.*) http://www.AddOn1.com/$1 [R=301,L]

With the code above, PrimaryDomain.com will get redirected to AddOn1.com. But unfortunately visitors to AddOn2.com will be wrongly redirected to AddOn1.com/AddOn2.com. Same for other add-on domains within the public_html directory.

This is because AddOn2.com is a subdirectory of public_html. The 2 code snippets above redirect everything, including add-on domain subdirectories to AddOn1.com. Confused? Never mind! Just use the solution below.

The Solution

The solution is to check the hostname (URL) that the visitor is trying to visit before redirecting them. So, let’s update our .htaccess file to the following:

# Redirect PrimaryDomain.com to www.AddOn1.com
RewriteCond %{HTTP_HOST} ^PrimaryDomain\.com$
RewriteRule ^(.*)$ http://www.AddOn1.com/$1 [R=301,L]

#Redirect www.PrimaryDomain.com to www.AddOn1.com
RewriteCond %{HTTP_HOST} ^www\.PrimaryDomain\.com$
RewriteRule ^(.*)$ http://www.AddOn1.com/$1 [R=301,L]

The first block of rules only redirects visitors to PrimaryDomain.com and the second block only redirects visitors to www.PrimaryDomain.com. Visitors to AddOn2.com or AddOn3.com will not be redirected. Solved!