The payoff will be my next post on how to use Paypal and WordPress Custom Fields to create simple, elegant and fast e-commerce pages. Stay tuned for that.

So, what is a custom field? It’s a key/value pair. What the hell does that mean?

In WordPress, there is a fundamental divide between data and display (it’s a simplistic view, but if that bugs you, you probably don’t need to read this article, then). If you’ve ever installed WordPress before, you know that it’s a two-part operation: you upload .php files to your server, and you connect those files to a mySQL database. The parts that display live on the server, and the data lives in the database.

Imagine making 100 people fill out a form. Each person fills out the same form with different information. Think of it as 1 form filled out 100 times. Now, go find a magician, and give him your stack of 100 forms. He will shake them over a box so all the words fall off into the box, hand you the box, and leave. Now you’ve really got something interesting.

Sit down with your box-full-of-words and declare “Show me the name and age of the 61st person!” Out of the box flies “Margaret V., 34″. Next, declare “Show me the name, age, and eye color of all the people named John!” The details for four different Johns appears. “Show me the last form filled out!” and the information person 100 put down appears.

Are you getting the idea? The magical box-full-of-words is your mySQL database, and your commands are the .php files on your server. When you look at a .php file on the internet, the .php files say “TITLE goes here, DATE goes over there and the CONTENT goes underneath that”, reaches into the database, pulls out, say, post #34, and populates TITLE, DATE, and CONTENT with the information saved under that post.

It might be something like:

My Day

posted 3/04/2010

Today was wonderful! I got icecream!

So, are you starting to get an idea of how the data is stored? For post #34,

• TITLE:My Day,
• DATE:03.04.2010
• CONTENT:Today was wonderful! I got icecream!

For post #35, it could be

• TITLE:I have a Cat
• DATE:03.26.2010
• CONTENT:My cat is really cute when she lays on her back

We have defined information types, and the various information filed under them. The information types are KEYS, and the various information under are the VALUES. Collectively, we make KEY/VALUE PAIRS.

WordPress comes with tons of pre-defined key/value pairs already. Why do you care? Because you can take those KEYS, and put them in the .php files in your WordPress theme and make them display VALUES.

One of the things that’s awesome about WordPress is that, if you like, you can make up your own keys on the fly, and display them in your themes. That’s what a custom field is. (We’ve finally come back around to what a custom field is, yay!) A custom field is just an arbitrary key/value pair that you make up and use for your own sinister purposes.

For example, say you want your blog posts to display your mood. In your post, you go to your custom field, create a new key called “mood”, then set it to “bouncy”. Then, in your theme, under TITLE, DATE and CONTENT, you can add MOOD, and for every post you put a “mood” custom field in, it’ll output your mood in the blog.

Cool, huh?

I’ve tried to make this really simple, but what I hope was conveyed is that custom fields can be a powerful tool. In my next post, I’ll show you how you can use custom fields to create a quick-n-dirty e-commerce application for your WordPress website.

If you have any questions at all, please hit me up in the comments. I would HATE to have gone through all that and still be unclear.

Ok, so, it’s the Magnatune promotional ambient music podcast, so it’s not THAT big of a deal, but still. Kinda cool.

Hyphen hasn’t made it out to iTunes or the Amazon music store yet, that takes a couple of weeks, but if you want to purchase a copy now, I’ve published a copy of Hyphen at Bandcamp. The individual tracks are a buck a piece, and I’ve set the album price to “whatever you like, as long as it’s 8 bucks or more”. Why would you want to pay more? You might love me, and be excited to know that this money is direct artist support, or if you pay $15 or more I’ll send you a physical CD to go along with your digital download. Shipping and handling will even be included. Ain’t that cool?

That’s not the only option, either. You can also go to Magnatune and subscribe as a member, and for $15 a month you can download Hyphen and every other album available on the website, DRM-free.

If you want to license a tune from this album, and use it attribution-free in whatever wacky project you have going on, Magnatune can help you out there. (And then send me a note. I love wacky projects.)

If you’ve got a podcast or a blog and you want to review Hyphen, kill some time talking to me, or play some of my music, just drop me a line, and I’ll be happy to work with you.

And, finally, go to Braindouche! and subscribe to the goddamn podcast already. It’s music and stuff. Some of it is quite pretty. It’s free.

So, to review:

Buy Hyphen from me.

Buy a subscription at my label.

Subscribe for free to my podcast.

Drop me a line.

Click that link, and poof! You know where your package is.

I’ve been using this trick for years – probably read about it on Lifehacker or something – but I find that it’s something a lot of people don’t have in their database-o-internet-tricks. Enjoy!

How freakin’ cool is that?

The short version of the story goes something like this: I started 4 years ago, noodling around with sound software and publishing it on a podcast, and then one day listened to a new Magnatune dark ambient album and thought “hell, I make music like this, and better”. I sent off some tracks to the label, they came back with a yes, and here we are.

The album cover is Dani’s work, and it’s a confirmed awesome.

As I get to it, there will be more information on the podcast site, braindouche.net, but here’s what we know now: the release won’t be for a little while yet, but I’ll let you know when it’s live. It’ll be available for purchase on iTunes, Amazon MP3, and a few other places too, you can choose to get a subscription to Magnatune and get my album and a boatload of other great music for not a whole lot a month, and in the not-too-distant-future I will get some physical CDs printed up and let everyone know ahead of time, so we can have fun with preorders and whatnot.

Late last year, we were contacted by a fellow Pennsylvanian (well, we were still Pennsylvanians at the time) via our Etsy shop with a new-to-us logo request: design a retro, lounge-style logo for a home that didn’t yet exist.

Brief

The client and her family were searching for the perfect vacation home in sunny California. Daydreams and plans led to a name and a decorating scheme, and they wanted to surprise a family member with notepads, towels, etc. personalized with the vacation home’s signature feel. The client’s initial concept was for a highly detailed, illustrated logo with multiple elements. To keep costs down, and to maximize suitability for embroidery and screenprinting, we worked with the client to create a simplified logo that maintained the relaxing-with-a-martini, retro lounge feel that they desired.

Design

After a few preliminary sketches, I headed straight for our font library. I played with a wide variety of retro fonts (boy howdy, do I love Font Diner) to create a number of electrodoodles inspired by drive-in movie signs, refrigerator emblems, hotels in Wildwood, NJ, retro geometry, and the shows I watched on TV Land as a kid (back when TV Land was still Nick at Nite. Hell, back when Nick at Nite was just, yanno, nighttime programming on Nickelodeon.) In the end, I presented three concepts:

The bottom “bracketed” logo breaks all the damn rules. It’s hard to read. It wouldn’t embroider well. It’s hard to read. (Yes, that’s worth mentioning twice.) It’s still my favorite of the three, maybe because it looks like it should be the sign for a smoky underground lounge.

The center logo is sweet and saucy retro with a bit of slinky feline impact. Donna Reed meets Julie Newmar, if you will.

A variation of the top logo concept, with a splash of color, became the final logo, shown at the beginning of this post.

1. Visit the BlogTab page and click the blue “Go To Application” button on the left.
2. Review the request for permission and click “Allow” to proceed.
3. Enter your blog’s RSS feed in the space provided, and click “Add Blog”.
   Note: this app requires an XML feed. If you’re running a self-hosted WordPress blog, this is likely http://yourblog.com/feed. However, if you’re using Feedburner, you’ll need to append “?format=xml” (without quotes) to the end of your Feedburner URL. For example, the Feedburner URL for this blog is http://feeds.feedburner.com/CreativeGrease, but the XML feed address required here is http://feeds.feedburner.com/CreativeGrease?format=xml.
4. After your blog has been added, click the “Pages” tab at the top of the BlogTab app page. You should see your Facebook Fan Pages listed. Tick the box for the Fan Page where you would like your blog to appear, and then click “Authorize”.
5. Return to the main BlogTab page and click the “Add to my Page” link on the left. Click the “Add to Page” button for the Page you’d like to add your blog to, and click Close.
6. Visit your Fan Page: click the “Account” dropdown in the upper right corner of the screen, and select the “Manage Pages” link to view a list of your fan pages. Click the “Go To Page” button directly to the right of the Page you wish to visit.
7. Click the plus sign on the rightmost tab on your Fan Page to add a new tab, and select “Blog”.
8. Poof! Your newest blog entries will appear on the “Blog” tab of your Fan Page.

The unfortunate downside to this app is that it only lets you (that is, your personal Facebook account) have one blog feed. So if you have several Fan Pages for unrelated things, you’re limited to only one of them having a blog. (Unless you blog about all of them in one place; in that case, more power to you.)

View Code

That’s copied from the HTML tab – I don’t generally use the Visual Editor, so I can’t speak to the output of the Kimili button.

But once I thought about it for a while, I realized that I’ve embedded SWF files in other places as well, with nothing more than some basic embed codes in the HTML editor, like so:

It’s a basic SWF slideshow with associated XML file, but it’s embedded with the help of no plugins at all using the following code:

View Code

The code must be pasted into the HTML editor (HTML tab, as opposed to the Visual tab). This blog is running WP3.0, so I don’t know if this will work on previous versions (although I may check that later if I have a moment.)

You don’t need knowledge of HTML or FBML to follow along, but basic internet knowledge and the willingness to muck around a bit are required. :)

Preliminaries
Well, to start, you need a Facebook account, a YouTube (or Vimeo, or other video hosting service) account, and a video that you’d like to use. You can sign up for a Facebook account here (be sure to read their somewhat dubious privacy policies first) and YouTube here.

Step 1: Facebook Fan Page Basics
A standard Facebook page isn’t quite enough – you need to create a Facebook Fan Page. If you haven’t already created one*, visit the Facebook Pages page and click the green “Create a Page” button. Select your page category and give your page a name (usually the name of your product or business.) Read and agree to the terms and conditions, and click the “Create Official Page” button. Once your page has been created, click the “Info” tab at the top of the screen, click the “Edit Information” link, and enter basic information about your business.

Next, click the “Photos” tab, and upload your logo or profile picture. Tip: in order for the image to display correctly in both the main logo area and the avatar/icon, the image must be square. View the photo and click “Make Profile Picture for Page”. Your Fan Page basics are now set.

*Not sure if you’ve already created one? While logged in to Facebook, click the “Account” drop-down in the upper right corner of any page, and click “Manage Pages”. This will show you all of the pages associated with your account.

Step 2: FBML
The next step is to set up the FBML application with your page. FBML, short for Facebook Markup Language, is what allows you to add video (or HTML, or pretty much anything you’d like) to your Facebook Fan Page. To add FBML to your page, click the “Edit Page” link just under the logo on the left side of your fan page. Scroll all the way to the bottom to the “More Applications” box, and click “Static FBML”. Once on the Static FBML page, click “Add to my Page” just underneath the logo on the upper left side. You’ll be presented with a pop-up list of all your Fan Pages. Click the “Add to Page” button directly to the right of the page you’d like to add it to; then click “Close”.

Step 3: FBML Configuration
Return to your Fan Page: click the “Account” dropdown in the upper right corner of the screen, and select the “Manage Pages” link to view a list of your Fan Pages. Click the “Go To Page” button directly to the right of the page you wish to edit.

Once again, click the “Edit Page” link on the left just under your logo. Scroll down to the “Applications” area and look for “FBML”. Click the “Application Settings” link in the FBML box. Change your settings to read “Box: Available” and “Tab: Added”. Click “Okay”. Next, click the “Edit” link in the FBML box. The “Box Title” will appear as the name of the tab on your Fan Page. Enter your business name, product name, tagline, or anything you’d like here. (It’s worth noting that you only get ten characters or so on the tab, so keep it short or Facebook will truncate it for you.) The large “FBML” text area is where we’ll add the video code; for now, just type “Test” or something similar. Click “Save Changes” at the bottom.

Step 4: Show the World
Return to your Fan Page and click the “Settings” button, just under the “Share” button in the center column. Change the “Default Landing Tab for Everyone Else” to the FBML page you created in the previous step.

Return to your Fan Page again and copy the public URL for your page. The easiest way to do this is to copy the beginning of the URL from your browser’s address bar, before the first question mark. It should look something like this: http://www.facebook.com/pages/City-ST/Your-Company-Name/00000000, except those zeroes will be a string of integers. Log out of Facebook (or open a new Incognito Window, if you’re using Chrome), and paste that URL  into your address bar. You should see your thumbnail logo, your tabs, and the word “Test” (or whatever you typed in the FBML field in the previous step). Congrats – you’re on your way to a custom page.

Step 5: Upload your Video
In order to embed a video on your Facebook Fan Page, you first need to upload it to a video hosting service, such as YouTube. To upload your video to YouTube, log in and click the “Upload” link at the top of the page. Click the yellow “Upload Video” button. Browse to and upload your video. Wait while it processes – this may take quite some time, depending on the size of your video. Add your video’s title, tags, and description. Click “Save Changes”.

Step 6: Add Video to your Facebook Fan Page
It’s been a long time coming, but we’re finally at the point where you can add video to your Fan Page. :)  To do so, make note of the URL for the video you just uploaded (presented in a green box at the top of the upload page as “Your video will be live in a moment at:”.  Go back to your Fan Page, and click “Edit Page” under the logo on the left side. Scroll down to your FBML settings – the box will now be titled with whatever you named your FBML page in Step 3 – and click “Edit”. In the large “FBML” box, paste the following code:

View Code

Replace the YOUTUBEID with the ID of your video. Your video ID is the string of random characters in the URL you noted above. Next, you’ll need to provide the URL of an image that will display as the placeholder for the video. This can be an image in your Facebook gallery, Flickr stream, etc. Replace YOURIMAGE with the complete URL for your placeholder image (including http://).

If you’d like to use the placeholder image created by YouTube, log in to YouTube and click your user ID in the upper right corner. Click “My Videos” on the dropdown menu, and click the “Edit” link for the video whose image you’d like to use. Scroll down to the “Video Thumbnail” section. Right-click on the image you’d like to use, and copy the image URL (“Copy Image Location” in Firefox, “Copy Image URL” in Chrome, “Properties > Address URL” in Internet Explorer). Paste that URL in place of YOURIMAGE above.

After you have edited the code to include your video ID and image URL, Click “Save Changes”.

Return to your Fan Page again and copy the public URL for your page. The easiest way to do this is to copy the beginning of the URL from your browser’s address bar, before the first question mark. It should look something like this: http://www.facebook.com/pages/City-ST/Your-Company-Name/00000000, except those zeroes will be a string of integers. Log out of Facebook (or open a new Incognito Window, if you’re using Chrome), and paste that URL  into your address bar. You should see your thumbnail logo, your tabs, and your video image. Click the image to play the video.

Congrats! You’ve got a video on your Facebook page.

The results of this tutorial can be seen on our brand spanking new Facebook Fan Page if you’d like to check it out. (Including cameraphone videos from a rainbow we were lucky enough to see on one of our first days in Buffalo.)

So Now What?
You can add additional information to your FBML page, such as text, more videos, or HTML if you’re up for a challenge. Have fun!

All the cool kids are hanging out at Dribbble.com (pronounced Drib-Bibble, but only by me), sharing their secret projects in 120,000 pixels (400×300, if you’re counting). Not being cool or persistent enough to have my own Dribbble account*, I figured I’d just start here, and post snippets of work that we’ve done that we can’t add directly to our portfolio, and we’re going to call the Drippps.

See what I did there?

So, this is a restaurant site we did recently as a subcontractor. Aside from using @font-face and some wacky textures, the really cool feature is that chalkboard is dynamic and instantly update-able by the user. Dani says that it’s a widget (WordPress, natch). I say it’s awesome.

What do you say?

*This however doesn’t mean that I wouldn’t be thrilled to be invited. Really.

Yep, changes are brewing. Over the next few weeks (and months), we’ll be packing up and moving our base of operations from Pottstown, PA to Buffalo, NY.  While this particular move is happening insanely fast, we’ve loved WNY/upstate NY for a long time, so when the universe whacked us on the head with a stick that said “Buffalo”, we listened.  This is a huge move for us, professionally and personally, and we’re super-excited to become part of the fantastic art scene and amazing culture. (OK, really, I just want to watch hockey.)

We remain committed to our clients in Eastern PA, and we’re confident that we can continue to provide the same high-quality service and support regardless of our location, as our clients across the country and around the world can attest.  Our PA number will remain active, but effective immediately we can also be reached on our shiny new NY number, 716.803.6646.

Buffalo, here we come!

Image: “Can peace bring about a change?” by Catlin Doe via Flickr.