Featured Image Meta

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

banner-meta

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.