Archive for the ‘Web 2.0’ Category

How to: Automatically add a default set of Custom Fields to each post in WordPress Feb 12 2009 screenshot showing Custom Fields being used in a template

One of the neat things about WordPress is how easy it is to add custom metadata to a given page or post that you can then use in a template to display structured information. I’ve been using this technique for a while now to extend the basic WordPress elements of title, body, excerpt, etc and allow the creation of easily editable information-rich content.

Before now I’ve used the built-in WordPress Custom Field functionality in the Add New screen where you select previously created custom fields from a drop-down list that is limited to only showing 30 items. This is quite cumbersome as you have select each field you want to add to the entry and enter the value, click the Add Custom Field button, then repeat for however many custom fields you want to use. Needless to say, this can be frustrating to have to remember to do every time, especially for non-technical clients.

The Old Way:

Selecting a Custom Field (the old way)

During a recent site conversion to WordPress that involves 4-6 custom fields for each post, we finally decided that there must be a better way, and ended up finding a WordPress plugin that is so good that it should probably be added to WordPress core, it is so highly useful. The plugin is called Custom Field Template and is developed by Hiroaki Miyashita.

The New Way:

Custom Field Template WordPress plugin screenshot

Using a simple set of options to define the template you want to use is easy. After downloading and activating the plugin, go to Settings > Custom Field Template to define your template. One is provided for you to show you the possible template values. You can set up two separate custom field template designs.

This is the code used to generate the Custom Field Template form shown in the screenshot above:

Template Instruction

<strong>Story Template Metadata Instructions <em>(All fields are optional)</em></strong><br /><br />
1. Use this form to enter metadata about this story.<br />
2. Each item will get assigned to the correct Custom Field for use in the display template.<br />
3. Click the <strong>Save</strong> button to save the values.<br />
<br />

Template Content

type = textarea
rows = 3
cols = 50
label = Summary Deck:

type = text
size = 35
label = Byline Writer Name:

type = text
size = 35
label = Byline Writer Title:

type = text
size = 54
label = Byline Writer Picture URL:

type = textarea
rows = 3
cols = 50
label = Lead Photo Caption:

type = text
size = 35
label = Lead Photo Credit:

type = text
size = 54
label = Lead Photo URL:

Then set this setting to true by checking the box to make the form look prettier:
Custom Field Template WordPress plugin setting

Next, I tweaked the Admin CSS settings to right-justify the labels:

#cft dl { clear:both; margin:0; padding:0; width:100%; }
#cft dt { float:left; font-weight:bold; margin:0; padding: 0 8px 0 0; text-align:right; width: 20%; }
#cft dt .hideKey { visibility:hidden; }
#cft dd { float:left; margin:0; text-align:left; width:70%; }
#cft dd p.label { font-weight:bold; margin:0; }
#cft_instruction { margin:10px; }

Click Update Options to save the settings and then go to Posts > Add New to see the form in action. You may need to go back and forth a couple of times to get your text field sizes just right and to put them in the right order you want them in.

Using the Custom Fields in a template

So how do these values get displayed on your page?

Simply edit your template PHP file to look for custom field values and then display them where you want them if they’re present.

This is how I do it for the Principia Pilot site. This code goes at the top of the template for single.php

// Retrieve custom meta values from post if they're present
$byline_writer_name = htmlspecialchars(get_post_meta($post->ID, "byline_writer_name", true));
$byline_writer_title = htmlspecialchars(get_post_meta($post->ID, "byline_writer_title", true));
$byline_writer_picture_url = htmlspecialchars(get_post_meta($post->ID, "byline_writer_picture_url", true));
$lead_photo_url = htmlspecialchars(get_post_meta($post->ID, "lead_photo_url", true));
$lead_photo_credit = htmlspecialchars(get_post_meta($post->ID, "lead_photo_credit", true));
$lead_photo_caption = htmlspecialchars(get_post_meta($post->ID, "lead_photo_caption", true));
$summary_deck = wptexturize(get_post_meta($post->ID, "summary_deck", true));

Now each of the possible Custom Fields are available as PHP variables that can be checked for content.

This code example shows the “summary deck” being displayed on the page if it has been entered on the create content screen:

// Show summary deck if we have one
if ($summary_deck != "") {
    echo '<h3 class="summary-deck">' . $summary_deck . '</h3>';

Using this excellent plugin, you can set up select lists, radio buttons, check boxes and more to help you populate your Custom Fields more easily if you prefer that to using simple text fields. You can also specify default values to use for the custom fields so you don’t have to type them in every time.

Plugin Default Template Options

These are the default options included by the plugin:
type = text
size = 35
label = Where are you going to go?

type = textfield
size = 35
hideKey = true

[Favorite Fruits]
type = checkbox
value = apple # orange # banana # grape
default = orange # grape

[Miles Walked]
type = radio
value = 0-9 # 10-19 # 20+
default = 10-19
clearButton = true

[Temper Level]
type = select
value = High # Medium # Low
default = Low

[Hidden Thought]
type = textarea
rows = 4
cols = 40
tinyMCE = true
mediaButton = true

Which displays a form that looks like this:
Custom Field Template WordPress plugin screenshot - Default form options


This plugin addresses a key need when using Custom Meta Fields in a WordPress custom template design — making it as easy as possible to enter values time after time on multiple pages or posts. There are a bunch of other neat options this plugin offers to make the authoring experience even easier. This is now on my “must install” list of essential WordPress plugins.

Please support Open Source by donating to the plugin author

If you use this and like it, I highly recommend sending a nice donation to the plugin author to help support ongoing development and to say thanks. This plugin will save you and your clients a lot of time and frustration. Thanks Hiroaki!


Requires WordPress 2.1 or higher.

Click here to download Custom Field Template plugin from

New site design is live (also upgraded to the latest version of WordPress – 2.5) Apr 1 2008

New site design is finally live!

In preparation for upgrading a whole mess of sites to using the latest version of WordPress I decided it was time to finally upgrade my own site and to implement the new design I’d been working on for a while (for over a year now).

Check it out: is fast again, thanks to a new and improved SQL database schema Jul 26 2007

For quite a while, has been slow. Ever since it hit, oh, around 1.4 million items in its database (now up over 2 million) the queries that were responsible for building the home page view had gotten slower and slower.

The old design

The problem was one of normalization, and the desire to not have data going into two places. The design originally worked this way:

  1. Look up the latest posts. Find all the latest ones that have a distinct feed_id. This was running against the feed_data table, which now has over 2 million rows.
  2. Next, look up the feed information for each feed_id found. Originally, I couldn’t figure out a way to do this all in one query. So this was another 10 individual SQL queries, looking up information about the feed needed to display on the home page (like the name of the feed, URL, etc.) This query did a join of the feed_data with the feed_info tables. This is what took progressively longer and longer, the more rows in the feed_data table.
  3. Next, combine the results of finding the 10 most recent posts from the 10 most recently updated feeds into an array using PHP, then pass those results from the Data Access Object (DAO) to the presentation layer for output on the home page.

This ended up being really, really slow on the homepage load (like over 2 minutes). This was obviously too slow. I implemented caching at a number of layers to mitigate the problem, which made for a very speedy second page load, but the first one was still way too slow.

After consulting with my friend Ben, he agreed that it was an inherently expensive query to run. We agreed that it needed to be re-architected to be able to significantly improve performance.

The new design

The new design required creating a new table dedicated to the home page posts where, when a RSS feed is read, it inserts the most recent new item into the new table.

The new process works like this:

  1. RSS feed is read. Any new items are first inserted into the main feed_data table, and the feed_info table is updated as well with a last checked timestamp.
  2. Next, the new table is updated, using a MySQL REPLACE command, with the combined feed information as well as item information
  3. The complicated 11 queries that used to be run are now replaced by a dead-simple single query that will only ever have to search through the total number of feeds in the system (currently 753 rows), instead of the over 2 million rows before.

These new changes have made using much more usable again, and it is way faster. The homepage loads in under a 1/2 second now, just like it should.

Check it out: – Really Simple News For You

A List Apart: Articles: Conflicting Absolute Positions Jul 17 2007

Nice article on ALA about how to create a layout using almost pure CSS where there is a fixed-width sidebar and a dynamically resizing right-hand main content area without using Javascript to dynamically resize the page.

All right, class. Using CSS, kindly produce a liquid layout that contains a fixed-width, scrolling side panel and a flexible, scrolling main panel. Okay, now do it without JavaScript.

Check it out: A List Apart: Articles: Conflicting Absolute Positions

Web Devout Jul 11 2007

Some excellent articles here about good web building practices.

Welcome to Web Devout! This site is aimed at promoting the health of the Web by providing web developers and the public with the knowledge and tools needed to help the Web move forward.

Check it out: Web Devout

Thanks for the pointer, Ben.

Google Gears (BETA) May 31 2007


Google Gears (BETA) is an open source browser extension that enables web applications to provide offline functionality using following JavaScript APIs:

  • Store and serve application resources locally
  • Store data locally in a fully-searchable relational database
  • Run asynchronous Javascript to improve application responsiveness

Check it out: Google Gears (BETA)

WordPress 2.2 just released! May 15 2007

Looks like it’s time to upgrade again, lots of neat new features and good bug fixes in WordPress 2.2.

WordPress Blog – WordPress 2.2

Download WordPress 2.2 now.

ScobleShow: Videoblog about geeks, technology, and developers – Read it at Jan 30 2007

The ScobleShow is the 700th feed added to Congratulations, Scoble!

Check it out: ScobleShow: Videoblog about geeks, technology, and developers – Read it at

P.S. Support for displaying podcast enclosures is probably going to be coming soon so you’ll be able to play or download non-embedded audio and video podcast files directly in your browser. But that is probably for another night, since it will involve hacking on the MagpieRSS RSS feed parser a little bit so it knows that enclosures exist.

Adding new feeds to is working again Jan 27 2007

I’ve fixed it so that adding feeds to should work again now. There was a small flaw in the logic for adding the feeds that I hadn’t caught. All fixed now.

So far there have been almost 130,000 total items retrieved from almost 700 feeds since it the site launched in December.

Check it out and add your feed if you want: – Really Simple News For You

The secret to getting your website featured on the frontpage of Jan 22 2007

New homepage

If you’ve ever tried to get your website featured on the front page of a site like digg, reddit, or Slashdot you might have felt frustration when you didn’t get the right number of votes to make it.

There is a site called that will automatically put your website’s content directly on its homepage.

How to get onto the homepage

Here are the 3 easy steps for you to take to get your website featured on the homepage of

  1. Go to the site and make sure that your RSS feed is in the database. The easiest way to do this is to paste in the URL for your RSS feed into the “Read a Feed” input box at the bottom of the page.
  2. Verify that your existing site RSS feed was imported correctly. You should be forwarded to the page that shows you your feed’s page on if it was imported successfully. (For example, the page for this site is
  3. Publish a new item on your website. RSS feeds are updated every 5 minutes so you should only have to wait for a minute or two. Refresh your feed page until you see your new item appear. Now check the homepage. Your new item should be at the top of the list, and will remain until 9 newer items are published by other people in their RSS feeds.

Bonus tip #1 – how to get into the top 30 feeds list

If you want to make it into the top 30 feed list (featured at the top of every page), all you have to do is tell people about your page that features your feed and increase your view count. The easiest way to do this is to use the RSS feed stats widget at the bottom of your feed page (copy and paste the HTML into your blog sidebar or another HTML page) — note that your site must allow <script> tags to enable the live updates of your feed stats information. You can also promote yourself to the top 30 by linking to your feed page in your blog roll and by sending the link to your friends.

Bonus tip #2 – Pretty site icon

To have your site icon show up nicely in the all feeds page and in the explore lists make sure you have a favicon installed for your website. will look for that and use it for your site icon. If it doesn’t find one, it will use a generic one that doesn’t set your site apart from any of the other ones. See the Wikipedia entry on favicons for how to get one installed for your site if you don’t already have one.

So, 3 easy steps to get your website content promoted on the website.

Try it for yourself: Submit your site to

(P.S. It usually accepts most Atom feeds as well as RSS feeds.)

sell diamonds