Making the WordPress Parent Page Select Box More Manageable

Published by John on December 8, 2012 Under Wordpress

One WordPress feature that I find myself using often is the Parent/Child relationship when creating pages. This lets you specify that a page should be a subpage of a specific page and can be found in the “Attributes” box.

This feature can be very useful when organizing a site into various sections. For example, if you wanted to add a page for each service your business provides, you could set them all to be children of your main services page. Then, you can take advantage of the wp-list-pages function to display a nice interior page menu.

However, when your titles end up a bit too long or are working with a bunch of pages, the parent select box can become difficult to manage.

Small Improvement to the Parent Page Select Box

To make the parent select box a little more manageable, at least when I am developing, I put together a quick wordpress plugin to turn this box into a select 2 box. I think in the future I might expand it to be a bit more flexible, but right now it works well enough for testing/development now.

You can download the wordpress plugin here: KCR Select 2 Admin Pages

Upload it to your plugins folder and activate it, it is called “KCR Select 2 Admin Pages.”

What it Does

Ever since I tried out the select2 jQuery plugin, which can be used to search and work with select boxes, I have been hooked. It is similar to the Chosen plugin, making select boxes easier to work with. You can check it out on github here, including seeing some more options and a lot of cool features.

After including the select2 resource files, this plugin adds a quick check into the admin footer section. It searches for a select box with an id of “parent_id”, which is the id of the select box used on the edit page. If found, it converts it to a very basic select2 box:

<script type='text/javascript'>	
	
		var parent_id = jQuery('select#parent_id');
		
		if(!jQuery.isEmptyObject(parent_id))
			parent_id.select2({width:'100%'});				
	
		</script>

This could, of course, be made more efficient and flexible in regards to the javascript and the way resource files are included. It could also cause problems if you are using another plugin that uses or styles select2 boxesc. So, you should use caution before using this in production.

However, it is a really quick and easy way to working with child/parent pages a lot more manageable!

2 Comments |