How to roll up options in WordPress admin

I’ve had some difficulty in the last couple of months adding jQuery in to my widget form in the admin area (for ThinkTwit), especially with adding functionality that will let me roll up a group of settings to make it easier for the user to edit them as there are so many. It turned out that this was due to objects being loaded after the page has loaded (see issue and solution).

Having got past this issue, I decided to remove the workaround that I had implemented and have another go at implementing an accordion. My initial thought was to use the jQuery accordion but I noticed on the API page that you can’t use it if you want more than one group open at a time. Instead I borrowed some alternative code from it and was able to implement it as below:

<div class="accordion">
	<h3 class="head" style="background: #F1F1F1 url(images/arrows.png) no-repeat right 4px; padding: 4px; border: 1px solid #DFDFDF;">General Settings</h3>
	<div>
		// Put your inputs here
	</div>
</div>

<script type="text/javascript">
	<?php $id = explode("-", $this->get_field_id("widget_id")); ?>
	jQuery(document).ready(function($) {
		// Add accordion functionality
		$('div[id$="{your-widget-name}- "] .accordion .head').click(function() {
			$(this).next().toggle('slow');
			return false;
		}).next().hide();
	});
</script>

Of course, the first line after the script is getting a reference to your widget id – in this case it is used within the form() function but there are other ways to get it.

I hope this comes in use to someone as I know that people regularly land on my site looking in to adding jQuery in to their admin pages.

About Stephen Pickett


Stephen Pickett is a programmer, IT strategist, project manager, RightNow and telephony expert, information security specialist, all-round geek. He is currently Professional Services Director at Connect Assist, a social business that helps charities and public services improve quality, efficiency and customer engagement through the provision of helpline services and CRM systems.

Stephen is based in south Wales and attended Cardiff University to study Computer Science, in which he achieved a 2:1 grading. He has previously worked for Think Consulting Solutions, the leading voice on not-for-profit fundraising, Fujitsu Services and Sony Manufacturing UK as a software developer.

Stephen is the developer of ThinkTwit, a WordPress plugin that allows you to display multiple Twitter feeds within a blog.

Leave a Reply