Adam Rice

My life and the world around me

Tag: wordpress

Showing lots of options in Contact Form 7

Contact Form 7 is a widely used WordPress plugin that offers a fair amount of flexibility, but I needed for it to do something it didn’t want to do: I wanted to display a form with a lot of options and make it look good. Normally one would do this using radio buttons or a dropdown menu. Because scrolling through long dropdown menus is especially annoying, I opted for radio buttons. But then I wound up with a long blob of radio buttons I wanted something with some structure: columns and headings.

CSS to the rescue. The following is not perfect (there are some limitations on selectors that prevented me from getting as fancy as I wanted), but I consider it a big improvement.

First, use the “Generate tag” option to create a radio button. Set an ID for the radio-button set. In this example, it is recipientlist. Enable the “Wrap each item with <label> tag?” option. This CSS is dependent on the tagging that option produces. You could rewrite this to work the other way, but it’s friendlier to turn that on anyhow.

Second, create your list of options. You probably want to do this in a text editor, not the CF7 editing window. Organize your options into sections, and insert new lines with section headings where appropriate. Begin each section with the same word–in the example shown below, I’m using “Area”. If you’re using piped options, it doesn’t matter what comes after the pipe for these section headings. Paste your completed list into the “Choices” field

Third, gank the following CSS:

<style>#recipientlist {
display: block;
-webkit-columns: 3 150px;
-moz-columns: 3 150px;
columns: 3 200px;
#recipientlist .wpcf7-list-item {
display: block;
margin: .25em 0;
.wpcf7-list-item input[value^=Area] {
display: none;
.wpcf7-list-item input[value^=Area] + .wpcf7-list-item-label {
font-weight: bold;

and paste that right into the CF7 “Form” field, right at the top. Change #recipientlist to whatever ID you are using for your button set. Change Area to whatever you are using as the lead-in text for your section headings. Do not introduce any extra line breaks into this, as WordPress will add tags that you don’t want. Do not try inserting this into your theme’s styles.css document or via other style-injecting mechanisms, as parts of this will get overridden and you will be sad.

Your radio-button tag should look something like this:

[radio recipient id:recipientlist use_label_element *lots of options follow*…]

Copy that code and paste it wherever you think it belongs in your form. The style element should be at the top though.

You may want to play around with the number and width of columns, depending on your theme and the content you’re presenting.

Here’s a before and after.



This isn’t perfect–there’s no way to control where the column breaks occur, or to show the sections as blocks of equal height. And it’s not semantically correct HTML. But it’s an improvement.

[Nerd mode=on]
There are four CSS rules here. The first one forces the set of buttons to show as a separate line, and breaks it into columns. The second forces each button to display on its own line. The third picks up buttons that begin with the section-identifying word “Area”; hiding the radio button and setting some margins. The fourth styles the label text for those section heading buttons.
[Nerd mode=off]

Building the Flipside Ticket Exchange for 2012

I’m on the admin team for the Flipside Ticket Exchange, better known as Bob’s List, also known as !Bob’s List, also known as Not Not Bob’s List since !Bob moved on to better things. This year it is running on a WordPress install. I configured that setup, and am writing down what I did so I don’t have to try to remember it.
Continue reading

Hard Better Faster Stronger is live

I’ve pulled the trigger on this theme. Come and get it. At the last minute, I figured out how to present the monthly archives in calendrical form, a trick I’m fairly pleased with.

Theme updated

I’ve updated the theme for my blog, Harder Better Faster Stronger. If things look funny, please reload.

I do not have this update available for download just yet—I want to shake it down in my regular blog for a few days before making it publicly available.

There are only a few visible changes. I’m using Helvetica instead of Lucida Grande for the typeface. I’ve added gravatar support. I hope I’ve made things a little more consistent and harmonious.

A lot has changed under the hood. I’m now using Blueprint CSS (with customized metrics courtesy of this generator). Getting this to work right without hideous kludges required a fair amount of tinkering, and resulted in me learning a bit about WordPress’ inner working and a bit more PHP.

Please let me know if you run across any obvious design bugs.

Blog theme updated

I’ve finally finished the new theme for my blog. The name of the theme is “Harder Better Faster Stronger.” If you want to download it, here’s the official page for the theme.

I’ve been noodling around with themes in WordPress for a while, and it’s been a learning experience. Much of the inspiration for this came from Khoi Vinh’s Grids are Good presentation, though I don’t pretend this theme has anywhere near the level of polish found at Subtraction. There’s also a lot to like in Derek Powazek’s DePo Clean theme, though his is a little too austere for my purposes.

The name of the theme comes from the song by Daft Punk, a favorite of mine.

Wooly WordPress

I’ve been working on developing my own theme for WordPress, and the more I work on it, the more I learn how WordPress examplifies both the good and bad of open-source software projects.

The good is that a lot of people use it and develop for it. Problems seem to be patched quickly. There seems to be more innovation surrounding it than Movable Type.

The bad is that it feels as if there’s nobody in charge. This becomes acutely obvious once you start looking at the tag system. Even the tag nomenclature is not close to consistent, with some tags prefixed by “wp_”, some by “the_”, some by “get_”, some by “list_” and some with no prefix. There are some swiss-army-knife tags that can do many different things, with their output controlled by arguments, and there are some that are extremely specific, such as the tag that returns the blog author’s first name. Tag arguments are another area of inconsistency, with two completely different ways of expressing arguments, with some tags using one, some the other. There’s a lot of duplication of effort between tags, with one tag that returns a permalink formatted as a link and another that returns only the raw URL. And there’s inconsistency between the behaviors of tags, for example, the “wp_dropdown_categories” tag generates a dropdown menu of categories as a monolithic block of HTML; wp_get_archives, which generates date-based archives in a variety of formats can be used to produce a dropdown menu of monthly archive pages, but this is more atomic and makes it easier to tweak its output.

Perhaps some of these differences make sense to the programmers behind the project, but even so, they do not make sense to someone trying to write a template. I suspect some of the inconsistencies result from either lack of standards in the project, or lack of attention to standards if they exist. WordPress really should have someone stand up, acknowledge the mess, and lay down the law. I suspect if I delved deeper into the code, I’d discover more evidence of inconsistency.

Switching to WordPress

I’d been using Movable Type for years, but had grown disenchanted with their dual-architecture of Perl+PHP. And I guess my life just wasn’t complicated enough. And I had the general sense that the Mandate of Heaven had shifted towards WordPress, so I’m using that now.

Making this page look as much like my old page as possible (with, I hope, some improvements) has been a good opportunity to learn about the software. I started by hacking on what must be the most complicated theme available, K2, which in hindsight was pretty dumb—I’ve pared away a lot its interesting bells and whistled, and added a few of my own.

Each platform has its pros and cons. WordPress has better management of static pages, and seems to have a more active developer community. Movable Type has some nice back-end tools that WordPress either lacks or can only offer via plugins. WP seems to have much cleaner and more effective spam-fighting tools (Spam Karma is pretty amazing). There’s a big conceptual difference between MT templates and WP themes—I’m more comfortable with the template idiom, so dealing with themes is taking some mental adjustment. MT’s tags are atomic—they correspond to a bare chunk of programmatically generated text. With WP, tags are function calls, in many cases producing formatted output with the format determined by an argument in the function. Getting at the atomic unit at all requires delving into the code to see what’s going on.

Somewhat to my chagrin, all my permalinks have changed in this process. And I’ve also lost all my folksonomic tags, but I knew that would happen. Come to think of it, I kinda knew that I’d lose my permalinks. But since the URL format is so very similar, it seems that someone who actually knows what he’d doing could probably write a ModRewrite htaccess doohicky to intercept invalid old URLs and figure out if they are near-misses for valid new URLs and redirect to those. Alas, I am not that person.

Old blog, new domain

I’m back to using Movable Type, although I’m intrigued enough with WordPress that I may continue fidding with it behind the scenes.

One thing that really is new is my domain name—it looks as if that deal is going through. My old e-mail address should continue working for a few months, and there should be redirects for this and a few other subdirectories that should also last for that period, but now would be a good time to update your address book and bookmarks. Wherever you see “”, change it to “” (or “” if you prefer—they both work).

Why 8stars? It’s an obscure visual pun. The Chinese character for rice, 米, looks like an 8-pointed star (in fact, the Japanese nickname for the asterisk is “kome-jirushi,” or “rice-mark”). You can see a stylized version of this character in the header of this blog—I’ve actually been using that mark for some time. I would have registered, but someone else already had. So I went with the plural. is just too damn verbose.

It is with some regret that I part with the old domain name: I’ve had it since 1994, and really thought I’d have it permanently. As silly as it may be, that domain name had become part of my self-image. There’s also a practical reason to regret it: having a durable e-mail address has allowed some people to contact me at that address even after many years of silence. The flipside, of course, is that I get an ungodly amount of spam. So there’s a silver lining. Plus, well, there’s the money. Not enough to retire on, but enough to make a significant difference in my retirement fund, buy a few toys, and go on a trip.

© 2015 Adam Rice

Theme by Anders NorenUp ↑