Adding a drop down to Page Attributes
John Mc By - John Mc

Adding a drop down to Page Attributes

We helped a client who’s theme worked by adding tabs to the parent page for each child page. This worked well and looked great, except they wanted the ability to add certain pages without creating the tabs. They did still need the parent / child relationship to keep the bread crumbs working correctly.

Adding a drop down to Page Attributes 1

The solution here was to add in drop down under Page Attributes (it could just as easily have been adding a check box under the Page Attributes).

The WordPress Action Hook for Page Attributes

WordPress has an action hook for hooking into the page attributes section,

page_attributes_misc_attributes. This hook passes a single argument, $post. To use it do the following:
 
function skip_tab_drop_down ( $post )
{
	echo 'adding my stuff here';
}
add_action( 'page_attributes_misc_attributes', 'skip_tab_drop_down', 10, 1 );

The Custom Function to add Page Attributes

We now have our bare-bones structure to add functionality to the Page Attributes section of our WordPress editor. To add our actual content we checked what the HTML looks like an existing setting by viewing the source code.

Its essentially a P tag with a class of post-attributes-label-wrapper which wraps a label, followed by some form control. As we wanted a drop down with two values  our code to create the drop down in WordPress Page Attributes section looked like this:

function skip_tab_drop_down ( $post )
{
	echo '<p class="post-attributes-label-wrapper">';
        echo '<label class="post-attributes-label" for="wp_create_tab">Create Tab</label>';
        echo '</p>';


        echo '<select name="wpt_create_tab" id="wp_create_tab">';
        echo '<option value="no">Create a Tab</option>';
        echo '<option value="yes">Yes</option>';
        echo '<option value="no">No</option>';
        echo '<select>';
}
add_action( 'page_attributes_misc_attributes', 'skip_tab_drop_down', 10, 1 );

Saving the value

We now have the drop down appearing in our Page Attributes section in WordPress and looking like this:

Custom Drop Down in WordPress Page Attributes

The problem is that this will NOT save the values you select here. To do that you have to hook into the save_posts action hook and save the value yourself.

function save_custom_page_attributes( $post_id )
{
        // don't do anything is this is an auto save, not all 
        // data that we need is populated
	if ( defined('DOING_AUTOSAVE') && DOING_AUTOSAVE ) {
		return;
	}

        // don't do anything is this is an auto save, not all 
        // data that we need is populated
	if ( defined('DOING_AJAX') && DOING_AJAX ) {
		return;          
	}

	$createTab = "no";
	if ( isset( $_REQUEST["wpt_create_tab"] ) && esc_attr( $_REQUEST["wpt_create_tab"] ) == "yes" ) {
		$createTab = "yes";
	}

	save_post_meta( $post_id, "wpt_create_tab", $createTab );
}
add_action( 'save_post', 'save_custom_page_attributes', 10, 1);

The function above fires on a save event and checks to see that its not an auto save or ajax event. This is important because not all posted data is set so if you don’t exit you’ll end up with values which are not correct.

We then check if our post field exists and if it does we save it to post meta…

This leads us to one more change we need to make to our function to add the drop down. We have to check for the existence of this post meta so that we can display the last saved value.

We check for the value in post_meta and if it exists we display it in our drop down. The complete code to add a custom drop down to WordPress Page Attributes and to save the value looks like this:


/**
 * Adds a custom drop down to Page Attributes
 * 
 * param object $post The post object
 * 
 * return null
 */
function skip_tab_drop_down ( $post )
{
	$createTab = get_post_meta( $post->ID, "wpt_create_tab", true );

	echo '<p class="post-attributes-label-wrapper">';
	echo '<label class="post-attributes-label" for="wp_create_tab">Create Tab</label>';
	echo '</p>';

	echo '<select name="wpt_create_tab" id="wp_create_tab">';
	echo '<option value="">Create a Tab</option>';
	echo '<option value="yes" '.( ( $createTab == 'yes' )? ' selected':'' ).'>Yes</option>';
	echo '<option value="no" '.( ( $createTab == 'no' )? ' selected':'' ).'>No</option>';
	echo '<select>';
}
add_action( 'page_attributes_misc_attributes', 'skip_tab_drop_down', 10, 1 );

/**
 * Saves the value of our custom drop down to post meta
 * 
 * param object $post The post object
 * 
 * return null
 */
function save_custom_page_attributes( $post_id )
{

	if ( defined('DOING_AUTOSAVE') && DOING_AUTOSAVE ) {
		return;
	}

	if ( defined('DOING_AJAX') && DOING_AJAX ) {
		return;          
	}

	$createTab = "no";
	if ( isset( $_REQUEST["wpt_create_tab"] ) && esc_attr( $_REQUEST["wpt_create_tab"] ) == "yes" ) {
		$createTab = "yes";
	}

	update_post_meta( $post_id, "wpt_create_tab", $createTab );
}
add_action( 'save_post', 'save_custom_page_attributes', 10, 1);

Share:

0 Comments

Leave a Comment

Your email address will not be published. Required fields are marked *