Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

Adding tabs to a pre-written custom fields script. Hack Job! WordPress



I’ve been using this awesome custom fields script that replaces the existing custom fields interface. The script works perfectly fine, however after X amount of fields, the interface tends to look convoluted.

<strong>Source:</strong> [[LINK href=""]][[/LINK]]

I have no problem implementing the fields, however adding my own PHP / CSS / JS to modify the interface has proven to be quite frustrating.

Been toying with the idea of creating open / closed DIV’s within the arrays, sort of like manageable spacers.


"name" => "div-open",
"title" => "classname",
"description" => "Adds <div="classname">",
"type" => "div-open",
"scope" => array( "page" ),
"capability" => "edit_pages"

Then you could separate the arrays into ‘tabs’ wherever you see fit. Obviously, the array would be fake just to embed a div and echo the class name.


case "div-open": {
' <div=" . $customField[ 'title' ] .'">' ;

The problems I’ve been having is finding a simple CSS / JS tab script that would integrate nicely within this hack concept…

Anyone want to give it a shot?

Answers (2)


John Cotton answers:

Might this work?

Take a look at this code sample from jQuery UI:
$(function() {
$( "#tabs" ).tabs();

<div id="tabs">
<li><a href="#tabs-1">Nunc tincidunt</a></li>
<li><a href="#tabs-2">Proin dolor</a></li>
<li><a href="#tabs-3">Aenean lacinia</a></li>
<div id="tabs-1">
<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus.s.</p>
<div id="tabs-2">
<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante.</p>
<div id="tabs-3">
<p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti..</p>
<p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, sempe</p>

All the meta-boxes (ie custom codes, excerpts, comments etc and any you add) are a div and have a class of postbox.

It wouldn't take too much jQuery to get an array of those elements and move them all (or the ones you want) inside some JS-added HTML ('<div id="tabs"></div>'). Use another jQuery array to pull the h3 titles from each of those meta boxes and - hey presto - you've got your UL list of tab titles and you're away.

I've not got time to code it right now, but I don't think it would be difficult.




Sébastien | French WordpressDesigner answers:

Clean up the editing pages in the administration panel by turning all of the modules and meta box's into dynamic javascript tabs.
[[LINK href=""]][[/LINK]]

<strong>EDIT :</strong> have you try this plugin ?

West Coast Design Co. comments:

Did you read my post? lol