Additional Fields for Soliloquy Images

So… I was asked to convert an HTML template into a a WordPress page template, and it has two sliders. A friend of mine recommended me to use Soliloquy, which is a very nice plugin. However, since I didn’t want to mess with the markup and styling, I opted to only use Soliloquy’s backend.

Now, the markup contains an additional text which is not suitable for the existing image fields (title, alt, caption, etc), so I needed to add an additional field to the image meta frame, and here’s how I did it:

<?php
/**
 * Add extra custom fields to slideshow images
 */
function _my_soliloquy_slide_source_field( $id, $data, $post_id ) {
	$source = ! empty( $data['source'] ) ? $data['source'] : '';
	?>
		<tr id="soliloquy-source-box-<?php echo esc_attr( $id ) ?>" valign="middle">
			<th scope="row"><label for="soliloquy-source-<?php echo esc_attr( $id ) ?>"><?php _e( 'Source', 'mytheme' ); ?></label></th>
			<td>
				<input id="soliloquy-source-<?php echo esc_attr( $id ) ?>" class="soliloquy-source" type="text" name="_soliloquy[meta_source]" value="<?php echo esc_attr( $source ); ?>" data-soliloquy-meta="source" />
			</td>
		</tr>
	<?php
}
add_action( 'soliloquy_after_image_meta_settings', '_my_soliloquy_slide_source_field', 1, 3 );

/**
 * Save slideshow images's extra custom fields
 */
function _my_soliloquy_ajax_save_meta( $slider_data, $meta, $attach_id, $post_id ) {
	if ( ! empty( $meta['source'] ) ) {
		$slider_data['slider'][ $attach_id ]['source'] = sanitize_text_field( $meta['source'] );
	}
	else {
		unset( $slider_data['slider'][ $attach_id ]['source'] );
	}

	return $slider_data;
}
add_action( 'soliloquy_ajax_save_meta', '_my_soliloquy_ajax_save_meta', 10, 4 );

_sol_slider_data now contains the source field’s value.

Custom byline markup for Co-Authors Plus

Co-Authors Plus is a nice plugin for assigning multiple authors to posts. However, I find its template tag for displaying byline rather limiting because sometimes we want to use fancy markup for the byline (think of avatars, publish/modification dates, etc). You can use the code below as the base for your theme’s byline markup (in this example, we’re overriding twentyfourteen_posted_on()):

function twentyfourteen_posted_on() {
	if ( is_sticky() && is_home() && ! is_paged() ) {
		echo '<span class="featured-post">' . __( 'Sticky', 'twentyfourteen' ) . '</span>';
	}

	// Set up and print post meta information.
	printf( '<span class="entry-date"><a href="%1$s" rel="bookmark"><time class="entry-date" datetime="%2$s">%3$s</time></a></span>',
		esc_url( get_permalink() ),
		esc_attr( get_the_date( 'c' ) ),
		esc_html( get_the_date() )
	);

	// get the co-authors
	if ( function_exists( 'get_coauthors' ) ) {
		$authors = get_coauthors();
	}

	// Fallback to WP users
	if ( empty( $authors ) || ! is_array( $authors ) ) {
		$authors = array( get_userdata( get_the_author_meta( 'ID' ) ) );
	}

	foreach ( $authors as $author ) {
		$_args = apply_filters(
			'coauthors_posts_link',
			array( 'href' => get_author_posts_url( intval( $author->ID ), $author->user_nicename ) )
		);

		printf(
			'<span class="byline"><span class="author vcard"><a class="url fn n" href="%1$s" rel="author">%2$s</a></span></span>',
			esc_url( $_args['href'] ),
			esc_html( $author->display_name )
		);
	}
}

“So how do I display the avatars” you ask? Add the following code to your theme’s functions.php file and use it to get the avatar image instead of the default get_avatar():

/**
 * Wrapper for get_avatar
 *
 * @param mixed  $user    User object, ID or email
 * @param int    $size    Avatar size
 * @param string $default Default avatar image
 * @param string $alt     Alt text
 */
function kucrut_get_avatar( $user, $size = 33, $default = '', $alt = false ) {
	if ( is_object( $user ) && function_exists( 'coauthors_get_avatar' ) ) {
		return coauthors_get_avatar( $user, $size, $default, $alt );
	}
	else {
		return get_avatar( $user, $size, $default, $alt );
	}
}

Settings Page Meta Boxes

For a while now I’ve been slowly ripping off functionalities from KC Settings to make it more modular. Today, I’m releasing a helper plugin for you theme/plugin developers out there. This plugin should speed up your development time when creating a settings page for your plugin/theme.

I’m not sure if I’ll be releasing this plugin on WPORG. For now, you can clone/download it from GitHub.

Widget Attributes

A while ago, I wrote about how you can add custom classes to your widgets. I’ve also created a plugin that’s available in WPORG but haven’t been updated in a while.

I’m announcing a new plugin, Widget Attributes, that you can use to add custom attributes to your widgets. Currently, it only supports the ID and classes and maybe will support adding custom attributes in the future. For now, you can download it from here. I’m submitting this plugin to WPORG and will retire the old one (I don’t like the name) and will update this post once it’s approved.

Update
The plugin is now live!

KC Media Enhancements

Not so long ago I’ve blogged about adding some enhancements to WordPress media management, such as inserting images with custom sizes into post and setting terms for the attachments along with individual plugins for each functionality. When I released the KC Widget Enhancements plugin, I thought I should combine those plugins into one package too. So now I present it: KC Media Enhancements.

Update
The plugin is now hosted at WordPress Plugin repo. Enjoy 🙂

This plugin currently provides you with the two functionalities mentioned above which you can enable/disable easily if you have KC Settings plugin installed. You can also modify the options using the available kcme_options filter (please read the FAQ section in the readme.txt file on how to do this).

The plugin is currently hosted at GitHub and will always be updated there, but it’s also in the process of approval to be hosted at WordPress plugin repo and I will update this post as soon as it’s approved and hosted there.

Enjoy the plugin and feel free to leave a comment/bug report/ideas in the comments section below 🙂

KC Widget Enhancements

As I promised when I wrote the functions for adding custom classes for WordPress widgets, I’m now announcing the release of KC Widget Enhancements. This plugin provides the ability to set custom classes and ID for any widgets, not just the built-in ones, but also widgets that comes with installed plugins/themes.

Update:
This plugin is now hosted at WordPress plugin repo so you can install it directly from the admin dashboard.

Currently there are three components, but I designed this plugin to be extendable so it should be easy to add more in the future:

  • Custom widget ID
  • Custom widget classes
  • Enable shortcode on text widgets

If you have idea on how to enhance the widgets even more, please don’t hesitate to leave a comment below. I may add them in the next versions.

To get the most of this plugin, I highly suggest the use of KC Settings together with this plugin so you can enable/disable the components easily. Or if you prefer to do it the geeky way, please read FAQ section in the readme.txt file.

You can download this plugin from here or clone/fork it from github. I’ll update this post when it’s available on WordPress’ plugins repo.

Notes:
As reported by Ed Nailor, the custom ID/classes won’t get printed if you’re using Widget Logic plugin, because it overrides the default callback for each widget.

Insert Image with Custom Size into Post

Since version 2.9, WordPress provided a new function, add_image_size() to define additional image sizes along with the three default sizes: Thumbnail, Medium and Large. After defining the additional sizes, we can use them in our themes either using the_post_thumbnail(), wp_get_attachment_image(), or any other functions that suit your needs.

Update
I’ve created a plugin for this so you won’t need to edit your theme/plugin files anymore 🙂 Download it from WordPress plugins repo.

function my_insert_custom_image_sizes( $sizes ) {
  global $_wp_additional_image_sizes;
  if ( empty($_wp_additional_image_sizes) )
    return $sizes;

  foreach ( $_wp_additional_image_sizes as $id => $data ) {
    if ( !isset($sizes[$id]) )
      $sizes[$id] = ucfirst( str_replace( '-', ' ', $id ) );
  }

  return $sizes;
}
add_filter( 'image_size_names_choose', 'my_insert_custom_image_sizes' );

The result

Note: The new code is adapted from here.

Temporary Fix for Regenerate Thumbnails 2.0.3

I was building a WordPress a theme, and I needed to rebuild the post attachment thumbnails. As usual, I used Alex’ amazing Regenerate Thumbnails plugin. Upon clicking the button, I got nothing. No progressbar, nothing. I checked the attachment directory and found that the thumbnails weren’t rebuilt.

So I looked at Firebug console and found an error thrown, $.widget is not a function and I realized that I was using the trunk version of WordPress. It throws an error because WordPress just got its jQuery and jQuery UI scripts updated to the latest versions. Also, the ‘widget’ part of jQuery UI is now has its own handler, ‘jquery-ui-widget‘ while previously it was part of ‘jquery-ui-core‘ (I believe).

The fix is easy, you can follow these steps:

  1. Download the newest jQuery UI bundle and unpack it.
  2. Copy the new jquery.ui.progressbar.js (located in the development-bundle/ui/ directory) into the Regenerate Thumbnails plugin directory (wp-content/plugins/regenerate-thumbnails/jquery-ui/).
  3. Open the plugin script (regenerate-thumbnails.php) with your favorite editor and replace line 59 with this:
    wp_enqueue_script(
        'jquery-ui-progressbar', 
        plugins_url( 'jquery-ui/jquery.ui.progressbar.js', __FILE__ ),
        array('jquery-ui-core', 'jquery-ui-widget'),
        '1.8.5'
    );
  4. Now you can rebuild your thumbnails.

Because this problem only occur when running the trunk version of WordPress, I don’t think the plugin needs to be updated (yet). I’m sure Alex will update it when WordPress 3.1 come out and I’ll be sure to remind him. He usually responds quickly, so no need to worry 🙂