Getting Category Info in WP Theme

In WordPress, there isn’t a simple template tag to get the category slug or description if you’re making a category.php template. Here is a little work-around:

$cat = get_query_var ( 'cat' );
$catslug = get_category ( $cat )->slug;
$catdesc = get_category ( $cat )->description;

 

My Phone Speaks French

Recently got the myTouch G3 phone with Android OS by Google. It is a lot of fun. I got it to speak French. There is an application that you can get from the Market called Rings Extended. It is free to download and install. Rings Extended allows you to assign ringtones from all of the audio files on the phone, not just the default Android ringtones.

Next, I went to Yahoo! Babel Fish since I can’t actually speak French myself. It traslates as best as it can from one language to another. Translate phrases like “incoming telephone call” to “appel téléphonique entrant”, etc. Copy the French phrase from Babel Fish and go over to AT&T’s speech-to-text demo page (see the links below). You can paste the text in and select to have it spoken in French by the Juliette voice and it will create a .wav audio file for you to download.

From here it gets pretty obvious… USB or Bluetooth your phone to your computer, copy the files over and then choose the ringtones for your different applications.

Now my phone sounds sexy and everyone thinks I’m super-cool when I get a call or (nerd) alert….

Links

Android OS by Google
Yahoo! Babel Fish
AT&T’s Text-to-Speech Demo

Fading Images with jQuery

I just started using the jQuery javascript framework to replace my home-grown animation functions. It is really helpful in speeding up development and is cross-browser compatible so it also cuts down on QA testing. Below is a little bit of jQuery code for swapping out images:

function imgin () {
	$( '#img-id' ).attr ( { 'src': 	new_img_url } );
	$( '#img-id' ).load ( function () {
		$( '#img-id' ).fadeIn ( 1000 );
	} );
}
$( '#img-id' ).fadeOut ( 200, imgin );

Start by setting a 200 millisecond fadeOut on the current image with a callback to imgin function. imgin sets the src attribute (via the attr method) of the image to load the new image file (via new_img_url variable). Then set a load event on the image to trigger fadeIn after the image is loaded.

Links

docs.jQuery.com/Effects

Shopify Design Upgrades

Shopify is a hosted e-commerce solution that I have been using for a couple years now for clients that want to sell their products online. It is great software with quick setup and really intuitive and easy to use Admin. They offer a variety of pre-canned themes to choose from so a store can be set up in a few hours by anyone. If you know HTML/CSS and aren’t afraid of a little bit of programming, you can also create your own customized themes. So it is a perfect choice for smaller companies without a million dollar budget to hire a web designer to get a custom-branded storefront up on their website.

Shopify just released a whole bag of tricks for theme designers that really extends the flexibility of theme design. Previously, the theme structure was set to a fixed number of templates that could be used in the theme… collections, products, informational pages, etc. They’ve just added the ability to add child templates that you can specify on each product, collection, or page in the Admin. For example, 3 different types of products need to have different visual treatment and layout: shoes, pants, shirts. Instead of trying to jam a bunch of conditions into one product template to make it work, you can create 3 additional templates (product.liquid is the default template):
product.shoes.liquid
product.pants.liquid
product.shirts.liquid

The same type of branching is now available for the entire layout as well using the new layout tag.

This is only one of the great new features that was added in this round of upgrades. Read more about the other just-as-great additions on the Shopify blog: blog.shopify.com/theme-customization-for-everyone


URL decode PHP with JS — Removing the Plus Sign

PHP functions for creating and decipering URL-safe strings are urlencode and urldecode.

Javascript functions for creating and deciphering URL-safe strings are escape and unescape.

PHP’s urlencode replaces spaces with + and Javascript’s escape replaces spaces with %20. So if you are decocing a string from PHP with Javascript, you have to replace all the + in the string with spaces using the JS string.replace function. Since + is an operator in Javascript, it has to be escaped with a backslash ( \ ) for the function to execute without error. The g flag has to be included to replace all instances of occurance ( g = global):

string.replace ( /\+/g, ' ' );

Links

urlencode
urldecode
escape
unescape
string.replace

Adding .liquid to DW Code View

I’ve been using Shopify a lot recently as an easy to use hosted e-commerce solution. They have a handy theme editor called Vision that lets you create your own custom theme on your desktop and then upload it to your Shopify account. It is pretty easy to use if you are familiar with markup and CSS. They also have their own markup language for their application, called Liquid with a helpful wiki.

The only problem I find is that when I’m editing the .liquid files in Dreamweaver in Code View, the color coding on the markup isn’t there… it’s just all black text. Enter this handy Adobe Tech Note to the rescue: http://kb2.adobe.com/cps/164/tn_16410.html

Using CryptX in WP Template

Separating the images from content using strip_tags in a WordPress Template to control the page layout. Using the CryptX plugin to encrypt mailto and email addresses so they won’t get picked up by spam bots. After installing the plugin, you can call the cryptx function directly from the Template to apply the encryption:

if ( function_exists ( 'cryptx' ) ) :
	cryptx ( $content, $text, $css, $echo );
endif;

$content is the string to encrypt.
$text is the string to replace the text inside the alt attribute of the <a> or <img> tags.
$css is the css class to assign to the link.
$echo is set to false to return the result in a variable, true to echo the result to the browser.

Links

CryptX plugin page: wordpress.org/cryptx
CryptX author’s site: weber-nrw.de
PHP function to strip HTML and PHP tags: php.net/strip-tags

DW Extension: EnityConverter

Converting seven back issues of a magazine for online publication, I had to copy and paste the text from the designer’s PDFs into my HTML documents for formatting (Acrobat has “Export as HTML with CSS” but it was über-Frankenstein, creating more work than doing it by hand… export as txt is much better). Of course all of the special characters like em-dash, smart quotes, etc. had to be converted to HTML entites: &mdash; &ldquo; etc. Frustrated with the ongoing find and replace in Dreamweaver, Google found me this time-saving relic in the Adobe Exchange that will auto-convert everything to HTML entities in code view:

www.adobe.com/cfusion/exchange/entityconverter/