Joshua Lynch

There are many posts on the interwebs about how to use the WordPress Settings API to create theme options for your WP project. If you find these all too intimidating and time-consuming, there are a number of plugins and scripts to make the task easier:

WordPress AdminPage Class

I have used Markus Thömmes’ WordPress AdminPage Class for a few projects. Back when I needed it, it was the most attractive alternative I could find to building my own page from scratch.

The AdminPage Class was easy to implement. Following the documentation, you simply include the script in your functions.php file and then pass arguments for a variety of objects. You can see an example in my Design Presenter theme functions file.

The script supports the following headings and fields with styles true to the WordPress admin:

• Headings
• Subheadings
• Paragraphs
• Inputs
• Textareas
• Checkboxes
• Radiobuttons
• Dropdowns
• Uploaders
• Sliders
• Datepickers

There are a few caveats though: The class has not been updated since 2010 (but it is still functional with WP 3.3.1), it doesn’t pass the Theme-Check plugin so a theme using it will probably not pass theme review to appear in the official Theme Directory, and it’s $8 or $40 depending on the license you purchase.

AdminPage Class

Options Framework Plugin

If spending money is not an option or you need more complex setting types (like image radio buttons or a color picker), then the Options Framework Plugin might do the trick. This popular plugin is available for download from the official Plugin Directory and a theme containing examples of using each option type is available from the plugin author, Devin Price.

Though I’ve yet to use the Options Framework Plugin on a production project, based on recent tinkering it provides a solid foundation for creating functional and attractive theme options pages. It’s also been forked into Jeff Parsons’ Theme Options Panel Framework, which was last updated 11 months ago so I would stick with the more frequently updated Options Framework Plugin.

Options Framework Plugin

NHP Theme Options Framework

NHP Theme Options Framework by Lee Mason includes built-in validation, custom error and warning handling, and tons of field types. It’s well documented and each function and action may be hooked and customized. The framework’s default styles and tabbed interface look great.

I have not yet used NHP Theme Options Framework, but it’s at the top of my list to use for my next project that will require a nice theme options page.

NHP Theme Options Framework

ProPanel WordPress Theme Options Panel

I almost excluded ProPanel WordPress Theme Options Panel from this post because its authors consistently ignore the camelCase P in WordPress while somehow camelCasing their framework’s name, ProPanel

But if support and easy implementation are important to you, then ProPanel might be worth the $15 regular license or $75 extended license because the framework is backed by TrueThemes support, which includes video instructions on initial setup. TrueThemes’ responses in the CodeCanyon comments are noticeably fast.

ProPanel includes image radio buttons and a color picker that its competition on CodeCanyon, AdminPage Class, doesn’t offer but lacks the sliders (nice for letting users choose from a range of values), datepickers and visual editor textareas that AdminPage Class supports.

ProPanel

CheezCap – Cheezburger Custom Administration Panel

I almost didn’t include the Cheezburger Network’s CheezCap framework because it’s very basic and a bit dated (last updated April 2011). However, I think it’s worth a mention because the creators of Lolcats were generous enough to release their options framework under the GNU GPL v2, and it was one of the first theme options frameworks I can remember being released. Like many of the frameworks, you simply require the framework file in your functions.php, and then build options. Compared to the rest of the frameworks in this post, the types of fields offered by CheezCap are very limited:

• Boolean Option (true/false dropdown)
• Text field
• Dropdown

While simple, CheezCap obviously gets the job done on a network of high traffic sites!

CheezCap

The UpThemes Framework

Last but not least is the popular UpThemes Framework, which UpThemes uses on its own beautiful themes. This framework includes prebuilt managers for executing options developers frequently include in their themes anyway:

• An image manager for uploading and resizing logos and background images
• A typography manager for using Google Web Fonts (I’m a big fan of that on this very blog—its type is entirely set by Google.)
• A layout manager for making page templating more accessible to end users
• An SEO manager for title tags and keywords (Use WordPress SEO by Yoast instead.)
• A color manager for adjusting color schemes.

The framework also has the nifty ability to export/import options so users can easily transfer or back up their settings.

Not only is the UpThemes Framework free and easy to implement in your theme, it’s licensed with the GNU GPL v2 and working examples are bountiful.

UpThemes Framework

The End?

I’ve done my best to find viable WordPress theme options plugins and frameworks on Google and in my gargantuan WordPress development bookmarks folder, but if I missed your favorite, please let me know in the comments so I can take a look and add it!

Update

A few days after I published this, Otto on WordPress published a tutorial on using the Theme Customizer, which will be released with WordPress 3.4 before the end of the year. It’s great to see the Settings API expanded upon with a slick options interface. Check out this video for a sneak peek:

Coming soon: A post on advanced custom fields plugins and frameworks for WordPress.

Recently I was working on a WordPress theme where I wanted to be able to display a list of posts from a custom post type (specifically a milestones post type) that shared the same custom taxonomy value (in this case, a project ID) as the current post.

Not being a programmer, I struggled for far too long to write a buggy and obese query that would never do. After extensive searching, I came across Automattician Michael Fields’ solution on WP Questions. Since it wasn’t the easiest thing to find, I’m sharing it here with comments for easy adaptation to your purposes:

<?php

/* $projects is a variable you can change to something more suitable throughout */

/* project_id is the name of the custom taxonomy */

$projects = get_the_terms( get_the_ID(), 'project_id' );

if ( ! is_wp_error( $projects ) && is_array( $projects ) ) {

$term = array_shift( $projects );

/* $milestones is a variable you can change to something more suitable throughout */

$milestones = null;

if ( isset( $term->slug ) && isset( $term->taxonomy ) ) {

$milestones = get_posts( array(

'term' => $term->slug,

'taxonomy' => $term->taxonomy,

// Enter your custom post type slug below

'post_type' => 'pplan_milestones',

'orderby' => 'menu_order',

'order' => 'asc',

'numberposts' => '0', // 0 will show all results

'post_status' => 'publish',

) );

}

// Loop over all posts of the CPT and display them

if ( $milestones ) {

$_post = $post;

print '<ul>';

foreach ( (array) $milestones as $post ) {

setup_postdata( $post );

/* Write whatever output you want here. This just returns a simple unordered list. */

the_title( '<li><a href="' . esc_url( get_permalink() ) . '">', '</a></li>>' );

}

print '<ul>';

$post = $_post;

}

}

?>

Matt Mullenwegg’s State of the Word address this weekend at WordCamp San Francisco shared some impressive numbers about WordPress. For instance, 14.7 percent of the top million websites in the world use WordPress.

Matt’s presentation also revealed numbers from a survey of 18,000 WP users, including that 92 percent of those surveyed use WordPress as a CMS.

It turns out presidential candidates use WordPress as a CMS too.

While browsing the 2012 Republican candidates, I noticed WordPress is the CMS of choice for presidential campaign websites (six out of the 10 declared Republican candidates) and every single candidate is using an open source content management system (Drupal powers the rest).

Maybe there is hope for us after all…

Michele Bachmann – WordPress

The U.S. Representative from Minnesota and winner of the Ames Straw Poll sports a rather garish WordPress-powered site.

Herman Cain – WordPress

The former CEO of Godfather’s simple but elegant website is powered by WordPress.

Gary Johnson – WordPress

The former governor of New Mexico’s presidential campaign website and blog is powered by WordPress. Interestingly enough, net neutrality is a prominent and important issue to Gary Johnson.

Ron Paul – WordPress

Ron Paul is back again, and his classy campaign site stands out in a good way from his rivals’ websites.

Rick Perry – WordPress

Rick Perry is almost as good-looking as his WordPress campaign website.

Buddy Roemer – WordPress

Buddy Roemer’s campaign website is powered by WordPress and focuses on conversation with users via its “Talk to Buddy” Q&A section.

Mitt Romney – Drupal

Drupal is the platform of choice for Mitt Romney’s sharp website.

Rick Santorum – Drupal

Rick Santorum’s Drupal site has a unique right-side vertical navigation and full-width layout.

Newt Gingrich – Drupal

Newt.org is built on Drupal.

Jon Huntsman – Drupal

Jon Huntsman’s Drupal campaign website is notable for its poor quality and amateurish design in comparison to the other candidates.

White House – Drupal

Alright, it’s not a campaign website (though at the moment its homepage content resembles one), but its worth noting Barack Obama’s technology team brought open source to whitehouse.gov.

Meanwhile, I must admit I’m not sure what Obama’s barackobama.com uses for content management. At one time, his site used Movable Type, but I don’t think that is the case anymore. If you know, please do tell!

While HTML5′s specification won’t be finalized for more than three years (check out Is HTML5 Ready Yet? for the countdown and take a look at the source code), news organizations have been experimenting with it for awhile now. Besides making their videos iPad friendly, quite a few media giants have made standalone HTML5 projects.

These projects tend to mimic tablet-like experiences with horizontal grid layouts and large clickable blocks. This is for good reason, given that publishers could save a lot of money developing just one HTML5 site for mobile rather than a bunch of native apps, which haven’t been very lucrative yet. But for now, Google’s mighty Chrome browser (what every journalist should use—more on this in a later post) delivers the best HTML5 experience.

While these experiments are all strikingly refreshing ways to read online, they don’t seem to have much attention from their creators or readers. I’m curious how many people visit publishers’ HTML5 projects over their standard homepages.

Here are 10 HTML5 projects worth a peek:

1. New York Times Skimmer

The Gray Lady’s HTML5 site delivers a surprisingly print edition-like experience, with stories wrapping in three columns complete with indents and the occasional display ad. Click on the Customize button for some delightful layout options, or learn the easy keyboard shortcuts for quick browsing. Try as I might, I still prefer visiting that classic homepage or coming to articles via Twitter. For those looking for a pleasant way around The Times’ paywall, the Skimmer will not attack you once you hit 20 stories in a month.

2. AP Timeline Reader

The Associated Press’ HTML5 Reader has a nifty feature that allows you to skim through and save the stories you want to read in the queue. The page layout is a horizontal timeline of recent days with stories mapped along it. You can add and remove stories from classic sections like Politics and Sports by toggling their tabs on the left. The AP’s Reader makes heavy use of transitions and animations in the interface for a flashy—and gaudy—reading experience and also fails to generate links to stories, making it impossible to share stories from this interface. Dumb.

3. NPR HTML5 Web App

National Public Radio’s Web App separates content into three rows with sliders for finding more stories. Like AP’s Timeline Reader, NPR’s HTML5 site allows you to add stories to a playlist where they’ll play one after the other. While you’re listening to some stories, you can enjoy reading news briefs inside a very minimal reading window, again sliding between panes for more stories.

4. USA Today Optimus

You gotta love what news organizations are dubbing their HTML5 projects. USA Today takes the award for best name with “Optimus.” Optimus fits quite a few stories in its layout with a vertical scrollbar and less negative space than most other HTML5 news projects, but it cleans out the clutter well on single article pages for a more pleasant reading experience. Optimus will notably take much longer on initial load than the other sites on this list.

5. Huffington Post NewsGlide

HuffPo’s NewsGlide is stunning. Not because it’s the best HTML5 news site in existence, but I never saw it coming from the queen of clutter and 84px Arial headlines. NewsGlide doesn’t default to a fullscreen article view, but you won’t regret turning it on in the Customize menu. Always looking to generate conversation, The Post stands out for keeping its comments inside its HTML5 experience along with promient share buttons.

6. Salon Grid

Salon’s Grid appropriately displays stories in a simple grid, with checkboxes to toggle what content appears in the boxes. There is quite a bit of horizontal scroll involved, but where Salon really loses is in its article view. Once you click on a story, the article box that pops up feels like an afterthought and requires a lot of scrolling to to get through a piece. Also, who dumps Flash ads inside their HTML5 web app?

7. Sports Illustrated Snapshot

Snapshot is perhaps the most complex of the HTML5 sites on this list. It allows you to connect via Facebook or Google account and add your own teams to the interface. It also achieves its basic purpose well—displaying great photos large and without distraction. And yes, the swimsuit models make an appearance.

8. ABC News iPad Optimized

I don’t know why, but to visit ABC News’ HTML5 version you must visit it from Safari on your iPad. I don’t own one, and had to use a cross-browser testing site to even view the project. Maybe someone with an iPad will tell us how it is.

9. Center for Public Integrity Looting the Seas Series

The Center for Public Integrity gets an honorable mention for its small HTML5 project Looting the Seas, built by Treesaver. This is a very simple and nice way to read in-depth online reporting that I would like to see more news organizations utilize on a project by project basis.

10. News 21 Behind Bars Microsite

News 21 at UC Berkeley makes the list for its Executing Abbott microsite, which allows you to research San Francisco Examiner archives, photos and an original video and encourages the reader to deliver a verdict for Burton Abbott at the end. It’s another neat example of interactive story-telling for an in-depth series.

If you think I’ve missed some cool HTML5 projects, share them in the comments.

WordPress is not a catch-all solution for news organization’s websites, but it is an excellent candidate to power small projects or microsites dedicated to big stories.

For an example of an excellent news microsite, one needs not look any further than the Pittsburgh Post-Gazette’s Pipeline, which was profiled by Justin Ellis over on Nieman Lab. Pipeline is powered by Joomla, but could have just as easily (or easier) have been powered by WP.

The microsite format allows the Post-Gazette to gain an intensely interested audience like a blog does. The content is more engaging than typical stories, and because the focus on Marcellus Shale developments is pure throughout, readers are less likely to be deterred by other content they find irrelevant. The format also encourages contributions from collaborating hyperlocal publications and readers themselves.

WordPress offers the ability to build a network of these sites simply and quickly, with plugins contributing added extra functionality when necessary.

Though not news oriented, my WordPress theme Design Presenter is an example of using WP on a project/web app basis. The end result displays web design image drafts like they would appear in a browser fully developed. When I started the project, I didn’t know I would use WordPress, but did know that it fit some of my technical requirements. WP also met my general requirements:

• Rapid design and development
• A solid framework to build on top of
• Reliable updates and documentation
• No cost besides my time
• A community that might appreciate the project

These aren’t exactly rare general requirements. Have you used WordPress for a unique project or microsite?

The other night as I went to bed with my Xoom tablet in hand, I also picked up my smartphone and my Kindle. For a moment, these consumption devices were all stacked neatly on my nightstand, ready for my final quiet hours of feed reading, tweet scanning and book reading.

As I looked at that marvelous stack of gadgets, It hit me that as much as I enjoy those devices, they’ve been sucking my production in many areas of life dry.

For instance, they played a part in why I haven’t posted to this blog in 69 days.

To clarify, I’m not talking about productivity but creation of my own work (whether it’s photos, WordPress themes, blog posts or a garden).

These consumption tools are mostly productive because they do enable me to learn tons on a daily basis. They provide avenues to connect with others and share snippets of what I’m thinking or reading too. But it’s so easy to get lost in consuming information from them while producing very little of anything that’s my own, whether digitally or physically.

I’m still looking for a tool/service/method that allows me to get the most out of media while managing my time so that I create things too. So far a variety of services and tools have only sucked me deeper into trivial details I never would have thought twice about before.

Are you struggling to create in this consumption-heavy world? Worse yet, are we discouraging creating with consumption culture?

I just read with interest Zachary Sniderman’s Mashable post about homeless people in New York City tweeting via an initiative called Underheard in New York, a neat idea brought to life by three interns at BBH New York.

It got me thinking about how journalists and news organizations use social media in their storytelling: They tend to keep the keys.

What I mean by this is that journalists using social media usually treat it as a tool to spread and source their stories. But ultimately, they don’t hand any level of access—the keys,  so to speak—over to their sources.

For example, in the same vein as Underheard in NY, a reporter covering homelessness could distribute to their primary sources cheap prepaid cellphones and teach them how to tweet their story. Suddenly, the source has been given the platform and knowledge to share their own experiences. These tweets could be curated in a way that gives them more exposure and helps the storytellers gain a following.

To take it one step further—what if a reporter were to give a source in a human interest or community-oriented series the keys to their Twitter account for a day? Or access to a blog on their news website?

I know, it’s risky; I can hear my old journalism professors groaning with concern. Journalists, so used to being the ones who carefully craft a story to be fair and informative, want to be the gatekeepers.

But wouldn’t access to a Twitter account, a camera or a blog be an excellent contribution to the rest of a news package (say an in-depth story with a video and photos), not to mention drive reader engagement to new levels?

Ultimately, news media are always trying to use social media to drive more traffic and build a wider reach (aka to try to crawl out of the red into the black).

With careful discretion, giving the keys to sources would be a more meaningful way to tell a story and make an impact in the lives of readers and storytellers.

I can think of at least one series in which my alma mater Seattle University was key in producing that while innovative, could have benefited from this approach.

I’d love to hear of any recent examples of a reporter or news outlet taking such an open social media approach, truly becoming storytelling enablers.

P.S. I can’t resist mentioning that Underheard in New York’s website is powered by WordPress.

Daniel Reimold of College Media Matters predicts a lot of student newspapers will be leaving College Media Network and its College Publisher platform after the new ownership announced licensing fees begin this year. And I hope he’s right.

The overwhelming majority of those who leave, I much more cowardly predict, will be examining and choosing WordPress as their alternative.  For those thinking about the switch, here’s  some advice from a recently graduated two-year college newspaper editor-in-chief:

Make this an opportunity to do something truly meaningful

Don’t just look at this as an inconvenient platform change. This is a chance to do something truly significant for your school, your media organization and, most importantly, yourself as a developing journalist or professional.

Been dreading moving to a truly online-first publishing model? Now is the time to do it. While you’re creating your new platform, do it intentionally. Utilize the wonderful library of WordPress plugins, including editorial-specific ones like Edit Flow, to redefine how you produce news.

Forget having an online editor who shovels stories from the web to a CMS and tweets a little bit. Get your entire staff involved. Give everyone some sort of access to your WordPress setup, and train them in using it. If they haven’t already, teach everyone some HTML and some CSS.

Yes, these are monumental tasks. But leave a legacy, and learn a lot in the process.

Ditch the print product

Say goodbye to ink-stained fingers! It seems drastic, but it’s time student newspapers have future-focused newsrooms. College campuses serve as a bubble, and lots of students still seem to enjoy picking up the print edition. But that doesn’t mean the print paper is still worth producing.

The print edition is a legacy cost taxing your news operation. It takes tremendous amounts of time and energy to produce. It costs significantly more to publish; my college newspaper could have saved more than $30,000 in just printing costs by publishing online only (not to mention man hours, page designer positions, in-office printing expenses, newsstands, distributors, loads of sleep, etc.).

In comparison, a WordPress-powered site could be run on a few thousand a year; imagine committing a full $30,000 as a student organization to innovating via your website, social media and mobile devices. The tablet is going to hit college campuses in a big way, and student “newspapers” have an opportunity to be ready for it. Or they can keep dishing out dead trees.

Most importantly, there is not much to be learned for you as a college journalist in the print publishing process. Don’t waste your time laying out print pages and learning InDesign. Instead, learn as much as you can about publishing on the web, and you’ll be prepared for much more than disappearing traditional journalism jobs. What’s more, make a name for yourself as a student journalist innovating online, and I guarantee their will be interest and opportunity come graduation.

For college papers that rely heavily on print advertising revenues right now, this may not be possible. But their counterparts that have a good chunk of reliable school funding have no excuse.

Maybe I’m nuts—I’m curious what others think.

Don’t use an existing WordPress theme

One of my biggest regrets as editor-in-chief was never reaching out to computer science students at school. I’m sure we could have hired some developers to do some great work for us. And though I was capable of developing a theme for the paper to use (and did, over spring “break,” for our blog), I was usually overwhelmed as it was managing the newsroom and, in retrospect, wasting my time on the print product.

If you’re moving to WordPress, seek out students or WordPress consultants who might be able to develop custom plugins and themes for you.

Existing WordPress themes suitable for a student newspaper are few enough to begin with, already in use lots of places and just look cheap. They’re also not made for your newsroom and audience.

Don’t want to start from scratch? Build a child theme off of a theme framework or a well-developed and documented theme.

Look elsewhere than CMN for hosted WordPress solution

Bryan Murley interviewed Rusty Lewis of CMN on Innovation in College Media and learned that the provider plans to charge $4,500 in “licensing fees” for “support related to CMN services related to server environment operation, DNS services and integration of CMN plug-ins.” Beyond that, it will be $150 an hour for support on parts of the platform CMN didn’t create.

I’m not convinced that CMN’s hosting or plugins are worth that. There are plenty of WordPress-specific or VPS hosting services that are totally suitable for your newspaper for much less.

What’s more, there are lots of freelance WordPress developers and consultants who could even be contracted for less than $150 an hour. You could probably pay a student developer $10 an hour because the experience will be worth it for them.

So much support already exists online that a college newspaper with a couple of WordPress-savvy students and perhaps a consultant will be just fine innovating for less.

Ask those who have gone before you

Don’t be afraid to reach out to those who have already made the decision to innovate with WordPress. I’m sure they’ll have good advice.

Also look for college pubs doing a great job with WordPress. A couple that stand out to me are Reese News at the University of North Carolina (hope to post about that project soon) and The Daily Cougar at the University of Houston.

I was recently asked how you can display the time a story or post was updated in a WordPress theme, like what you see when major outlets cover a breaking and rapidly evolving news story. Suggestions I’ve heard before—and quite often, the instant reaction of WordPress users—is to look for a plugin or utilize custom fields.

But neither method is the best way to do it. Using core WordPress functions and template tags, you can change any of your theme’s templates to display when a post was last updated or the “time ago” date, which has become popular through the real-time web and services like Facebook and Twitter.

Updated date and time

The core WordPress function for displaying the last time a post or page was updated is the_modified_time() (or the_modified_date() for that matter). To show when your post was last updated, you simply need to insert this code inside The Loop of your theme wherever you would like it:

<?php the_modified_time('g:i a'); ?>

Just add a little bit of text before it, like “Updated” and style it, and you’ve got the last time a post was updated displaying in “Updated Hour:Minute am/pm” format. Of course, you can modify this in all sorts of ways with the function reference as a guide.

Human time distance or “time ago”

You can just as simply display how long ago it was that a post or comment was published with the human_time_diff() WordPress function, as seen on The New York Times’ website in breaking coverage of the shooting of Rep. Gabrielle Giffords:

This bit of code will display for users how long ago a post was published when dropped into your templates:

<?php echo human_time_diff(get_the_time('U'),
current_time('timestamp')) . ' ago'; ?>