Display a “Pretty” Post Date

On services like Twitter and Facebook you’ll see content that was posted “posted X minutes ago” or “posted X days ago”. I like that. I think it’s bit more personalized than simply using the long form date (e.g. December 27th, 2012).

On one of my sites I know display the post dates as a human time diff (aka, a human readable format) if the post is less than a month old. If it’s older than I month, I use the standard date format selected inside the WordPress dashboard under “Settings > General : Date Format” (in my case Month Day, Year).

The Code Snippet

if ( ! function_exists( 'example_posted_on' ) ) :
/**
 * Prints HTML with meta information for the current post-date/time and author.
 *
 * @since Example 1.0
 */
 
function example_posted_on() {
	$post_date = the_date( 'Y-m-d','','', false );
	$month_ago = date( "Y-m-d", mktime(0,0,0,date("m")-1, date("d"), date("Y")) );
	if ( $post_date > $month_ago ) {
		$post_date = sprintf( __( '%1$s ago', 'example' ), human_time_diff( get_the_time('U'), current_time('timestamp') ) );
	} else {
		$post_date = get_the_date();
	}
	printf( __( 'Posted <time class="entry-date" datetime="%1$s" pubdate>%2$s</time><span class="byline"> by <span class="author vcard">%3$s</span></span>', 'example' ),
		esc_attr( get_the_date( 'c' ) ),
		esc_html( $post_date ),
		esc_html( get_the_author() )
	);
}

endif;

Explanation

Use a Function

Instead of adding this code to each template where I need to display the date, I’ve wrapped it in the function “example_posted_on” so I can reuse and easily update it if needed. Whenever I need to call the date, I just use example_posted_on().

Since this is used in a theme of mine, I’ve wrapped it in a “if ( ! function_exists( ‘example_posted_on’ ) ) :” check so someone can easily override it from a child theme if they need to.

Compare the Timestamps

To check if the date of the post is older than a month, I generate a timestamp to compare with the one from the post:

$month_ago = date( "Y-m-d", mktime(0,0,0,date("m")-1, date("d"), date("Y")) );

You could easily change this to be to any time period you want and compare those timestamps instead.

Make Sure it is Translatable

If you’re wondering why the strings are wrapped in “sprintf” and “printf”, that’s so everything can be translated if someone wants to localize the theme for a different language. Make sure to change the textdomain “example” to whatever you’ve defined as the textdomain in your theme.

Be Careful of Caching

If your site makes use of heavy caching (W3C Total Cache, and/or a good CDN) your post “day” may get stuck for a while. If it’s included as part of a publicly released theme you may want to give users an option to turn it off and use the regular date instead.

Another option (in that case), would be to use javascript to look for the post date, and convert it to a human readable format on front end instead- but that’s probably fodder for another post.

Display the Most Recent Post in Each Category

In Portfolio+ I use a custom post type for portfolio items and a custom taxonomy for portfolio categories. When someone views a portfolio archive page all of the portfolio featured images are displayed, and when someone goes to a portfolio category all the featured images of posts in that category are displayed.

But a common request I’ve had is for a template that displays all the portfolio categories with thumbnail images for each of the categories. This would allow someone to easily link to different sections of their overall portfolio (for instance, “Photography”, “Water Color”, “Sculpture”) rather than having them all show up in one jumble of the main portfolio archive template.

This gets a bit tricky because there is no easy way to associate an image with a taxonomy term (though Michael Field’s Taxonomy Images Plugin has made it work).

I decided the best route would be to just display all of the categories, and use the featured image from the most recent post in each category. This obviously won’t be the perfect solution for everyone (some may want to use a completely different image for the category thumbnail), but for most users I think it works well and is a dynamic way to show off new work. Continue reading

Options Framework + Theme Customizer

One of the great new features in WordPress 3.4 is the Theme Customizer which allows you to modify options for a theme and instantly preview them on the site.

I’d encourage you to try out the Theme Customizer, but first upgrade to the latest version of the Options Framework (1.3). Earlier versions explicitly checked for $_POST[‘update’] in the request before saving anything to the database, which doesn’t allow options set via the Theme Customizer to save properly.


Continue reading

Options Framework Sidebar

The latest version of the Options Framework has a new hook to display content below the options panel. This feature was added thanks to @Satrya, who posted a neat screenshot on GitHub and requested it.

The hook can be used to display any content below the options panel, but one cool use is to add a sidebar with additional information about the theme. Here’s an example:

I added a demo theme of this to the Options Theme Kit if you’re interested to see exactly how it works.

Here’s a slightly simpler example:

add_action('optionsframework_after','exampletheme_options_after', 100);

function exampletheme_options_after() { ?>
    <p>Content after the options panel!</p>
<?php }

Theme Customizer Default Sections

I kept having to hunt through wp-includes/class-wp-customize-manager.php to see what the default sections in the theme customizer were registered as.

To save you the trouble, here they are:

title_tagline

[gist id=”e182d64246dd579b089836cbe4473808″ file=”customizer-default-sections.php” lines=”3-6″ show_line_numbers=”0″]

colors

[gist id=”e182d64246dd579b089836cbe4473808″ file=”customizer-default-sections.php” lines=”8-11″ show_line_numbers=”0″]

header_image

[gist id=”e182d64246dd579b089836cbe4473808″ file=”customizer-default-sections.php” lines=”18-22″ show_line_numbers=”0″]

background_image

[gist id=”e182d64246dd579b089836cbe4473808″ file=”customizer-default-sections.php” lines=”24-28″ show_line_numbers=”0″]

nav

[gist id=”e182d64246dd579b089836cbe4473808″ file=”customizer-default-sections.php” lines=”30-35″ show_line_numbers=”0″]

static_front_page

[gist id=”e182d64246dd579b089836cbe4473808″ file=”customizer-default-sections.php” lines=”37-42″ show_line_numbers=”0″]

If you’re not sure how to add options to these default sections, give Otto’s post a read.

Loading Additional Stylesheets from an Options Panel

A common option in premium WordPress themes is the ability to select different design styles. Even “Twenty Eleven” has the option to use a “Light” or “Dark” color palette.

There are two main ways to apply these styles- either with body classes or by loading in a second stylesheet. This tutorial covers the stylesheet method.

I’m also assuming you’re using the Options Framework (theme or plugin version) to set up your options, though you could likely adapt the code if you are building your own panel from scratch.


Continue reading

Loading Google Fonts from Theme Options

Providing font options in a WordPress theme can be a significant design challenge.

It’s not quite as simple as just outputting a bit of inline CSS for font-family. Every font has unique meanlines and x-heights- so the font size, line heights and paddings for every font selector may need to be adjusted as well. A 1.2 line-height could be perfect in body text for “Helvetica Nueue”, but appear cramped with “Georgia”.

Unless you want to offer hundreds of options so that the user can also adjust these other css properties, it’s probably best to whittle down the font choices to a couple that look really great. I’d recommend adjusting the line heights and sizes automatically when the user makes a switch, which unfortunately, is a ton of extra work.

On a recent project I’ve been working on, I decided it wasn’t worth it. I kept the font face defaults and decided just give the user control over font colors and sizes. However, if you do want to offer your users that option, good on you.

What We’ll Cover

In this tutorial I won’t show how to adjust all the font properties- but I will suggest some ways to set up font options, and conditionally load Google fonts when a user has selected one.

In these examples I assume you’re using the Options Framework (theme or plugin version), but it should be fairly easy to use this code even if you’re building your own options panel from scratch.
Continue reading