Drop Down Menu Indicator

indicator

I think it’s important to give users a visual cue when menu items have a drop down menu.

One way I’ve handled this in the past is to use the Superfish jQuery plugin, which adds a class to any list items with children. This allows them to be styled differently- with a background image of a down arrow (for instance).

menu-example

However, I just saw a new theme released by Paul de Wouters called Spine. Instead of using javascript to apply the class- he uses a custom Walker_Nav_Menu so that the class is added to the markup directly.

I think this is a much better way to do it, and solves an issue I’ve seen in some themes where the menu items shift a bit when the new classes and styling are applied with javascript.
Continue reading

TypeKit Code Snippet

typekit-logo

Assuming you don’t want to use the TypeKit plugin, here’s how to enqueue the scripts directly from your theme:

/**
 * TypeKit Fonts
 *
 * @since Theme 1.0
 */
function theme_typekit() {
    wp_enqueue_script( 'theme_typekit', '//use.typekit.net/xxxxxxx.js');
}
add_action( 'wp_enqueue_scripts', 'theme_typekit' );

function theme_typekit_inline() {
  if ( wp_script_is( 'theme_typekit', 'done' ) ) { ?>
  	<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<?php }
}
add_action( 'wp_head', 'theme_typekit_inline' );

Featured Image Meta

meta-display

I’ve built a couple themes where I’ve needed to give users more control over how the featured image is displayed for individual posts. The obvious place to put these options are in the thumbnail metabox itself.

Display Thumbnail Landscape

meta-banner

In this theme the default display of the thumbnails is a cropped to a square next to the title. But if the user had a large landscape image, they could choose to display it full width instead.

Continue reading

Getting Started With CodeKit + CSS Preprocessors

I experimented with CSS preprocessing today (both LESS and SASS). I have to admit, it was much easier to set up than I thought and really intuitive to use.

To get started, I just downloaded a copy of CodeKit (OSX) and dropped a couple theme directories into it. When that happened, CodeKit started to watch all the LESS and SASS files in those directories- and automatically compiled them into actual CSS files whenever I saved.

To become more familiar with the syntax, I forked a copy of Jared Erickson’s LESS theme on GitHub and made some edits. Then I converted it to SASS syntax. If you’re completely new both SASS and LESS- I think that’s a fun small project to do. Continue reading

Translatable Javascript Strings

I’ve been working on a plugin that needs to update the text of an object via javascript when an element is clicked. Like the rest of my plugin, those strings in the javascript need to be translatable. Thankfully WordPress makes this easy to do.

Original

Let’s say this is the script you are enqueuing:

function prefix_enqueue_custom_script(){
	wp_register_script( 'prefix_custom_script', plugin_dir_url( __FILE__ ) .'js/custom-script.js', array( 'jquery' ) );
        wp_enqueue_script( 'prefix_custom_script' );
}

Translatable

In this custom script there are two strings that should be translatable: “upload” and “remove”. To make this happen we’ll use the wp_localize_script function, which gets hooked onto the script handle:

function prefix_enqueue_custom_script(){
	wp_register_script( 'prefix_custom_script', plugin_dir_url( __FILE__ ) .'js/custom-script.js', array( 'jquery' ) );
        wp_enqueue_script( 'prefix_custom_script' );
        wp_localize_script( 'prefix_custom_script', 'prefix_object_name', array(
		'upload' => __( 'upload', 'textdomain' ),
		'remove' => __( 'remove', 'textdomain' )
	) );
}

Using the Strings

Now in my javascript, instead of simply using the text “upload” and “remove” I’ll use the variables prefix_object_name.upload and prefix_object_name.remove.

Icon Fonts

Overview

This tutorial explains how to output post meta (comments, tags, categories, edit link) and display a small icon before each one using an icon font. Icon fonts are great for this purpose because they can scale to any size, look great on retina devices, have a smaller file size than images, and use a single HTTP request.

Examples

An icon font I particularly like (and use in this demo) is Entypo by Daniel Bruce. There’s over 250 icon glyphs available in the font and the download size is only 19k. But there are a lot of great choices out there to use. (Update: the tags icon is now from FontAwesome) Continue reading

Display a “Pretty” Post Date

calendar

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 my site I now 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

portfolio-screenshot

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

How to Install a Purchased Theme

When you purchase a WordPress theme you’ll generally get a download link for the zip file. To upload this theme to your site involves a couple simple steps.

  1. Log into your WordPress site, and go to “Appearances > Themes” menu item
  2. Click the “Install Themes” tab at the top of that screen
  3. Click the “Upload” submenu, also near the top
  4. Now choose the .zip file that you have of the theme click “Install Now”

A couple notes:

  • If you use WordPress.com, you cannot upload your own themes.
  • If your zip file contains multiple themes, you’ll need to unzip it, and then re-zip each theme individually.
  • Purchase themes only from trusted sources- otherwise you run the risk of getting a hacked version (no fun).