I pulled this together with help from the amazing community that exists around web.dev. The solution is from: a comment at a blog.  After digging for awhile I finally found this and it worked like a charm.

So here is how we do this:

 

First you need Jquery, and Jquery UI with tabs.  I also included “fade” support but you can customize your own build.  From there, simply implement the tabs as is clearly outlined in the docs.

Next is the magic:

$('#tabs-set').tabs({
 'select': function(){$(this).index($(document.location.hash));},
 'load': function(event, ui){document.location.hash = ui.panel.id;},
 selected: -1
 });

This in its simplest form allows you to link to a given tab from outside the page.  A good use case is a homepage slider that needs to link to different areas of a sub page.  The url for this is: http://domain.com/page#tabid.

I built this into a WP install and it works great.

NOTE: selected: -1 simply hides all tabs on page load.  For my specific instance this was important. Many others won’t need this.

We needed to implement this for our great client Seattleite.com.  We built a Events system for them using custom post types (CPT) but needed to create a date based archive so that someone could click on a calendar day and be taken to that day and see all events for that day.  This solution is geared around an events custom post type but could work with many other types, using the post-date instead of a custom field. Continue reading “WordPress 3 custom post type date based archive” »