Using Chosen for a replacement taxonomy metabox

08 Jan 2012 at 15:49

Helen

Admin • Taxonomies • UI

Tags:

5 Comments

If you’ve ever created many taxonomies for a post type, you know that the add/edit screen can get very unwieldy with all of those metaboxes, especially with hierarchical taxonomies. And then sometimes you have something that is a taxonomy but doesn’t need items added very often, especially in client work where there are often predetermined options that may occasionally be added to by the client, which can be done in the taxonomy’s admin screen.

This is where we can use Chosen, a JS plugin to make multi-selects much more user-friendly, and just so happens to blend right in to the WordPress admin. You can take multiple taxonomies and put them into a single metabox. It’s not limited to taxonomies, either – you can use it for post meta (custom fields) as well. I’ve used it to select taxonomy terms for which a post is “essential” – optgroups came in very handy there. I actually would love to see tag selection look and behave more like this in core, but there would be more work to be done for adding new terms.

The basic idea is that you enqueue the script and style on the appropriate admin page (NOT all admin pages) and then initialize the field(s) based on a class or ID. I usually just put the initialize right in the metabox itself, but you could always be clean and put it in the admin_head if you want. From there, you show all terms in the taxonomy in a select field (including empties) and use the nifty selected() function to show which ones are associated with the current post. When saving, it’s as easy as wp_set_post_terms() after the usual checks for nonce, etc. You’ll also want to hide the original taxonomy metabox(es) as well, of course.

Full Github Gist:

Continue reading →

The perks of contributing

09 Dec 2011 at 17:39

Helen

Contributing

Tags:

10 Comments

Behold this glorious little section of the WordPress 3.3 credits page:

WordPress 3.3 Recent Rockstars

I’m never in anything for the recognition or glory, but I have to admit: this is pretty exciting. As of this writing, WordPress powers 15.7% of the top million websites and at least 22% of all new active websites in the US. That is a mind-blowing number of times that the faces and names on the credits page might be seen, even given that it’s buried a little in the admin.

In 3.2 I was among the list of names under Core Contributors, which was more than enough for me, but this is kind of like a promotion for me in the (very awesome) WordPress community. I get a little bit of community time within my job at 10up and have been meeting some really cool people, like Chexee, above. I’m extremely busy these days, between continuing to play piano (performance in a week!) and all this work, but I feel very satisfied. I’ve been doing a lot with UI bits; notable in this release is semi-responsive work on the themes screens and the About/post-Update page. I also did a fair bit of color scheme, RTL, and IE work toward the end, as they tend to get neglected. That said, I love front-end and UI work, but being more of a developer than a designer, I feel like it’s important to both learn and contribute as much as possible in all ways, so I’m continuing to dive into the WordPress codebase as a whole and get more confident tracing and patching things. I also find myself helping out in IRC or the forums here and there and do a little bit of ticket watching and cleanup on Trac. Speaking of Trac… once 3.3 gets out the door, I need to start hassling somebody about whether or not that little reskinning project of mine is going to go anywhere.

Here’s to the imminent release of 3.3 and more amazing things in 3.4 and beyond! And here’s a full screenshot of the credits page (as of just now), because everybody involved deserves credit. Whenever you update to 3.3, make sure to check out http://yourdomain.com/wp-admin/credits.php. And please please please, do the update.

WordPress 3.3 Credits

Blue Admin Bar 1.0

10 Nov 2011 at 15:33

Helen

Plugins

Tags:

5 Comments

When we were making mockups for the refreshed admin bar in 3.3, I created a blue version to mix things up and ended up really liking it (yes, this line appears in the plugin’s readme). So, I decided to make a plugin for it for you all to enjoy that has slightly different versions for 3.3 (currently in beta) and pre-3.3 versions with the admin bar. I am currently using it on my local development sites so that I know where I am, but it’s also really pretty with the blue admin theme. I plan to add RTL support sometime in the near future.

Available in the WordPress plugin repository: http://wordpress.org/extend/plugins/blue-admin-bar/

Screenshots

3.3, gray admin theme, dashboard

3.3, gray admin theme, dashboard

3.3, gray admin theme, add post

3.3, gray admin theme, add post

3.3, blue admin theme, dashboard

3.3, blue admin theme, dashboard

3.3, blue admin theme, add post

3.3, blue admin theme, add post

3.3, Twenty Eleven

3.3, Twenty Eleven

3.2.1, gray admin theme, dashboard

3.2.1, gray admin theme, dashboard

3.2.1, gray admin theme, add post

3.2.1, gray admin theme, add post

3.2.1, blue admin theme, dashboard

3.2.1, blue admin theme, dashboard

3.2.1, blue admin theme, add post

3.2.1, blue admin theme, add post

3.2.1, Twenty Ten

3.2.1, Twenty Ten

Contributing!!

14 Sep 2011 at 11:25

Helen

Contributing

1 Comment

Back in July at WordCamp Boston, I met some of the core WordPress developers and other important folks and was told I should watch the responsive admin ticket. So, I did, finally managed to remember to get on IRC for a UI team meeting, and got assigned things to do. I started off with making tables work better at smaller screen sizes, but it ended up being pretty much for mobile only, which is now punted to 3.4. But then I got plugin and theme screens on Tuesday to work on, so that I did and, along with an old ticket of mine, I had 3 patches committed in 3 days! Those would be changesets [18666], [18670], and [18673]. The first two are one-liners, but it doesn’t matter – contributing is awesome, and if you can do it, you should! Everybody I’ve interacted with has been very friendly and helpful, and there’s nothing better than really understanding just what it is that you’re using every day.

This has also inspired me to keep a running list of my contributions in the sidebar. Let’s see what I can find :)

Customizing the special multisite dashboards

01 Aug 2011 at 15:56

Helen

Actions • Admin • Multisite

5 Comments

Edit (9/8/2011): This used to global $wp_meta_boxes and then unset() things from the array. NO MORE. Now we’ll do it the WordPress Way™ with remove_meta_box().

There are plenty of resources out there on customizing the usual WordPress Dashboard widgets, but not a whole lot (or maybe even anything beyond Xref) on the two additional screens WordPress multisite introduces: the Network Admin screen, available to superadmins, and the Global Dashboard screen, which is seen by users who have an account but are not assigned to a site or sites*. The hooks for these screens are wp_network_dashboard_setup and wp_user_dashboard_setup, respectively.

To clear out the Network Admin Dashboard (remove or comment out the lines for ones you do want to keep):

add_action('wp_network_dashboard_setup', 'hhs_remove_network_dashboard_widgets' );
function hhs_remove_network_dashboard_widgets() {
 	remove_meta_box ( 'network_dashboard_right_now', 'dashboard-network', 'normal' ); // Right Now
 	remove_meta_box ( 'dashboard_plugins', 'dashboard-network', 'normal' ); // Plugins
 	remove_meta_box ( 'dashboard_primary', 'dashboard-network', 'side' ); // WordPress Blog
 	remove_meta_box ( 'dashboard_secondary', 'dashboard-network', 'side' ); // Other WordPress News
}

To clear out the Global Dashboard:

add_action('wp_user_dashboard_setup', 'hhs_remove_user_dashboard_widgets' );
function hhs_remove_user_dashboard_widgets() {
 	remove_meta_box ( 'dashboard_primary', 'dashboard-user', 'normal' ); //WordPress Blog
 	remove_meta_box ( 'dashboard_secondary', 'dashboard-user', 'normal' ); //Other WordPress News
}

* In case you’re wondering how a user ends up logged in but not belonging to a site: sometimes you might bulk add users, especially when using another authentication system, or you might have materials available to anybody who’s logged into the network but doesn’t necessarily have to belong to a site. I’ve got a custom dashboard widget (using the same wp_user_dashboard_setup hook) for Eastman’s Global Dashboard to hopefully un-confuse users (yes, the ghost of George Eastman is logged in).

Eastman Global Dashboard Widget

Really Simple Gallery Widget 1.1

13 Jun 2011 at 23:20

Helen

Plugins

22 Comments

After several months of a severe reduction in the amount of “free” time I have, I finally managed to sit down and finish an update to the Really Simple Gallery Widget plugin. This update adds the ability to choose to use images from the entire media library and/or view only the images attached to the post/page being viewed. It also has some cleaner and safer HTML and should have a better memory footprint (not that it was a hog to begin with). Available in the WordPress plugin repository now.

* Download Really Simple Gallery Widget 1.1 *

Styling the Really Simple Gallery Widget

27 Feb 2011 at 01:49

Helen

CSS • Plugins

2 Comments

The Really Simple Gallery Widget has some very light CSS selectors in the HTML for you to apply your styles to. They amount to this: there is an outer div with the class “rsgallery”, each image is given a class of “rsg_image”, and captions are given a class of “rsg_caption”. There are no current plans attach stylesheets, but some better structure and/or options for classes may be provided in a future version.

Examples:

/* Add some space (20 pixels in this example) under each image */
.rsg_image { margin-bottom:20px; }
/* Add a border that changes when moused over
Important: don't forget that you need to add double the width of the border to the image width to get the total */
a .rsg_image { border:1px solid #00F; }
a:hover .rsg_image { border: 1px solid #F00; }
/* Create a grid of images - will not work with captions in the current version. Adjust the margins to fit in the width of the widget area - there will be leftover margin on some sides
Be careful - the floating may cause your layout to behave strangely, especially anything that follows the gallery widget */
.rsg_image { float:left; margin:0 20px 20px 0; }

To add CSS to a theme that you can’t edit, try using the the Simpler CSS plugin. Remember that if you edit a CSS file in a downloaded theme like Twenty Ten, it will probably get overwritten if you upgrade the theme in the future. Make a child theme instead.

Showing other image sizes in the Media Gallery dialog

24 Feb 2011 at 15:28

Helen

Filters • Media Gallery

9 Comments

As I was developing the Really Simple Gallery Widget, I started defining more custom image sizes and was irritated to find that they didn’t show in the Media Gallery dialog, even though they were being generated. So, what’s a girl to do except fix that? I noticed that the Max Image Size Control plugin did add the sizes, so I looked inside the plugin to see how that was happening. Turns out there’s a not very well-known filter “attachment_fields_to_edit” which allowed me to do just what I needed to. Unfortunately, it doesn’t look too pretty because each of the items just floats to the left and they are not of consistent heights, but it works for what I need it to do. To use, just add the following to your functions.php or your plugin file.

/**
 * Add intermediate image sizes to media gallery modal dialog
 */

function image_sizes_attachment_fields_to_edit( $form_fields, $post ) {
	if ( !is_array( $imagedata = wp_get_attachment_metadata( $post->ID ) ) )
		return $form_fields;

	if ( is_array($imagedata['sizes']) ) :
		foreach ( $imagedata['sizes'] as $size => $val ) :
			if ( $size != 'thumbnail' && $size != 'medium' && $size != 'large' ) :
				$css_id = "image-size-{$size}-{$post->ID}";
				$html .= '<div class="image-size-item"><input type="radio" name="attachments['.$post->ID.'][image-size]" id="'.$css_id.'" value="'.$size.'" />';
				$html .= '<label for="'.$css_id.'">'.$size.'</label>';
				$html .= ' <label for="'.$css_id.'" class="help">'.sprintf( __("(%d&nbsp;&times;&nbsp;%d)"), $val['width'], $val['height'] ). '</label>';
				$html .= '</div>';
			endif;
		endforeach;
	endif;

	$form_fields['image-size']['html'] .= $html;
	return $form_fields;
}
add_filter( 'attachment_fields_to_edit', 'image_sizes_attachment_fields_to_edit', 100, 2 );

In action:

Intermediate sizes in the WordPress Media Gallery dialog

Resources:

Really Simple Gallery Widget

27 Jan 2011 at 14:11

Helen

Plugins

Tags: ,

20 Comments

Yes, it’s yet another plugin born out of a specific work request that seems usable by the general public. We’ve got some pages that function as photo galleries and we like to show said photos in the sidebar in a random order with a link to an anchor on the gallery page or showing the full-size image in a Shadowbox overlay. Turns out that the built-in gallery shortcode doesn’t actually do random (as far as I could tell) and shows captions by default and all kinds of things that just weren’t working for me (or the people I report to). I looked through and tried out a pretty ridiculous number of plugins, many of which required the use of separate galleries or new posts of a custom post type, and none of which did what I needed them to do – just use the built-in attachment functionality.

So, I wrote a widget and then made it into a plugin that does more than what I originally needed. A couple examples:

Available shortly now in the WordPress plugin repository: http://wordpress.org/extend/plugins/really-simple-gallery-widget/. Here’s all the stuff from the readme file:

Really Simple Gallery Widget

Donate link: http://www.helenhousandi.com/wordpress/donate/
Tags: gallery, widget
Requires at least: 2.8
Tested up to: 3.1

Simple widget for displaying images attached to a specific post or page.

Description

Really Simple Gallery Widget adds a widget to display images that are attached to a post or page, no extra uploading or creating custom post types required. Especially helpful if you create photo gallery pages using the built-in WordPress gallery and just want to be able to display those images in a widget area.

Features

  • Add as many widgets as you want, wherever you want
  • Select a number of images
  • Select any registered size in WordPress
  • Display the images in ascending, descending, or random order
  • Show or hide captions
  • Link the images to the original file, post, anchor in the post, attachment page, or nothing
  • Add a prefix to the link and image title (appears as a tooltip)
  • Use a rel attribute for the link – great for lightboxes

Installation

Really Simple Gallery Widget is most easily installed automatically via the Plugins tab in your blog administration panel. Go to Appearance -> Widgets to set one or more widgets up.

Manual Installation

  1. Upload the really-simple-gallery-widget folder to the /wp-content/plugins/ directory
  2. Activate the plugin through the ‘Plugins’ menu in WordPress
  3. Head over to Appearance -> Widgets to set up one or more Really Simple Gallery Widgets

Frequently Asked Questions

How do I get the ID for the post or page?
The easiest way is to mouseover or click an edit link for the post or page in question. The ID number will appear in the URL; e.g. http://yoursite.com/wp-admin/post.php?post=41&action=edit indicates that the ID of the post or page you want to reference is 41.

Why is the anchor link not working?
The anchor link relies on the ID that WordPress automatically generates when you insert an image with a caption. If you inserted the image manually or without a caption, the anchor won’t jump you to the spot in the page. The ability to specify an anchor may be added at a later time, or you can just add the ID (attachment_##) to the img tag.

I selected a registered size but the images are showing up huge or in the wrong size.
The images may be missing the thumbnails of that size and by default will pull the full size image instead. Try using Viper007Bond’s fantastic Regenerate Thumbnails plugin to create new versions for any new or changed image sizes.

Screenshots

Really Simple Gallery Widget options

Widget options

Sample display with prefixed title showing

Sample display with prefixed title showing

Changelog

1.0

  • First version

Hide Admin Bar Search is now in the WordPress Plugin Directory

18 Jan 2011 at 11:22

Helen

Plugins

Tags: ,

No Comments

Woohoo, 1.0! Basically the same as my earlier post, with a little cleanup and some readme.txt action: http://wordpress.org/extend/plugins/hide-admin-bar-search/

Fresh from the readme:

Hide Admin Bar Search

Contributors: helenyhou
Tags: admin bar
Requires at least: 3.1
Tested up to: 3.1

Small plugin to hide the search box in the admin bar in both dashboard and site views.

Description

Hide Admin Bar Search is a small plugin that hides the search box in the 3.1 admin bar in both the dashboard and front-end site views. Useful for those who are not using the built-in WordPress search in the usual way or anybody who wants a more minimal admin bar.

Installation

Hide Admin Bar Search is most easily installed automatically via the Plugins tab in your blog administration panel. Activate to hide the search box – no settings required.

Manual Installation
  1. Upload the `hide-admin-bar-search` folder to the `/wp-content/plugins/` directory
  2. Activate the plugin through the ‘Plugins’ menu in WordPress
  3. Enjoy your cleaner admin bar

Frequently Asked Questions

Why would I want to do this?

The admin bar search uses the default WordPress search. If you are not using that search, or if you just want the admin bar to be more minimal, this is for you.

Can I choose to show the search box in the dashboard or site view?

Not at this time – this plugin is meant to be as simple as possible.

Changelog

1.0
  • First version
← Older Entries