Post Formats and Custom Meta Boxes Visibility

[update]
Looks like I’ll have to do a follow-up to adapt this to WordPress 3.6. The interface and Post Format handling is changing to this:
new post formats in WP 36


The other day I read a nice article (which I cannot find right now) about the use of Post Formats and the need to show different editing elements according to each format. If it’s a URL, show only a couple of meta boxes. If it’s an Image, just the Featured Image box. Et cetera.

Searching for said article before writing this post, found this tutorial from WPTuts+ (which I haven’t read yet) and this Q&A, coincidentally by our kaiser.

And just found this excellent post: Re-thinking WordPress Post Format UI – An Exercise

The bottom line is simply firing a first jQuery event when the page loads and then listen to the changes in the Post Format select radio buttons. Here, everything is wrapped in a plugin and uses admin_print_scripts with wp_localize_script to send our parameters to the Javascript file. As usual, the initial plugin template is toscho’s Plugin Class Demo.

This example plays with all the default items of the edit screen (title, content and all the meta boxes except Publish and Post Formats). To use it together with your Custom Meta Boxes or with Advanced Custom Fields, for example, simply add/adjust the relevant IDs.
The following class properties have to be manually set for each site/theme configuration. These properties are the ones localized for the JS file:

Plugin file


/**
 * Plugin Name: Post Formats and Meta Boxes Visibility
 * Description: Show and hide Meta Boxes based on the current selected Post Format
 * Plugin URI:  http://wpkrauts.com/2013/post-formats-and-custom-meta-boxes-visibility/
 * Version:     2013.05.14
 * Author:      Rodolfo Buaiz
 * Author URI:  http://rodbuaiz.com
 * License:     GPLv3
 */

if( is_admin() )
{
	add_action(
		'plugins_loaded',
		array ( B5F_Post_Formats::get_instance(), 'plugin_setup' )
	);
}	

class B5F_Post_Formats
{
	/**
	 * Plugin instance.
	 * @type object
	 */
	protected static $instance = NULL;

	/**
	 * URL to this plugin's directory.
	 * @type string
	 */
	public $plugin_url = '';

	/**
	 * Post Format and corresponding visible DIVs
	 * Formated for jQuery
	 * @type array
	 */
	public $formats_and_divs = array(
		 'standard'     => "#postexcerpt, #postdivrich"
		,'aside'  	=> "#titlediv, #categorydiv"
		,'chat' 	=> "#trackbacksdiv, #postcustom"
		,'gallery'      => "#commentstatusdiv"
		,'image' 	=> "#commentsdiv"
		,'link' 	=> "#slugdiv"
		,'quote' 	=> "#authordiv"
		,'status' 	=> "#revisionsdiv"
		,'video' 	=> "#postimagediv"
		,'audio' 	=> "#tagsdiv-post_tag"
	);

	/**
	 * The first radio input of the list has value of 0 (zero), unlike the rest
	 *
	 * When using default post formats, "standard" is the first one
	 * Adjust this when using custom set ups
	 * Haven't found a JS solution, see: http://stackoverflow.com/q/4491272
	 *
	 * @type string
	 */
	public $first_radio_button = "standard";
	
	/**
	 * Access this plugin’s working instance
	 *
	 * @wp-hook plugins_loaded
	 * @since   2012.09.13
	 * @return  object of this class
	 */
	public static function get_instance()
	{
		NULL === self::$instance and self::$instance = new self;
		return self::$instance;
	}

	/**
	 * Used for regular plugin work.
	 *
	 * @wp-hook plugins_loaded
	 * @since   2012.09.10
	 * @return  void
	 */
	public function plugin_setup()
	{
		$this->plugin_url    = plugins_url( '/', __FILE__ );

		global $pagenow;
		$hooks = array( 'post.php', 'post-new.php' );
		if( !in_array( $pagenow, $hooks ) )
			return;
				
		add_action( 'admin_enqueue_scripts', array( $this, 'enqueue_script' ) );
	}

	/**
	 * Constructor. Intentionally left empty and public.
	 *
	 * @see plugin_setup()
	 * @since 2012.09.12
	 */
	public function __construct() {}

	/**
	 * Javascript enqueue and localization
	 *
	 * @since 2013.05.14
	 */
	public function enqueue_script()
	{
		wp_enqueue_script( 
			 'post-formats' 
			, $this->plugin_url . 'pf-and-mb.js'
			, array( 'jquery' )
			, null
			, true
		);

	    wp_localize_script( 
			 'post-formats' 
			,'pfs' 
			,array( 
				 'formats'  => $this->formats_and_divs
				,'first_radio' => $this->first_radio_button
			) 
		);
	}
}

Javascript file


jQuery(document).ready(function($) 
{  
	// START UP
	show_hide_post_format_divs( $('#post-formats-select input[type="radio"]:checked').val() );

	// LIVE CHANGES
	$('#post-formats-select input[type="radio"]')
		.live( 'change', function(){ show_hide_post_format_divs( $(this).val() ); } );

	// DO HIDE/SHOW
	function show_hide_post_format_divs( val )
	{
		// WORKAROUND FOR FIRST BUTTON
		if( val === '0' )
			val = pfs.first_radio;
		
		for( var prop in pfs.formats )
		{
			// Current post format
			if( prop == val )
				$( pfs.formats[prop] ).show();
			// All others
			else 
				$( pfs.formats[prop] ).hide();	
		}
	}
});

This is my first post in this house. Warm thanks to Thomaz and Kaiser for the invitation to participate :)

Author:

Suffering as a COBOL corporate programmer when, in 1991, a Commodore Amiga changed it all. WordPress plays a similar role since '09. in_array( Photography, Homebrew beers, Forests'n'rivers )

Find Rodolfo Buaiz on ⁠, ⁠, ⁠, and .

1 Comment

  1. Elle – 21.12.2013 14:35

    just curious, how would I add this to my theme directly instead of as a plugin?

    Reply

Leave a Reply

Your email address will not be published.