Come utilizzare jQuery UI tabs in una pagina WordPress?

Voglio utilizzare le schede jQuery UI nelle mie pagine WordPress 3.1.4. Scrivo tutorial di programmazione per un pubblico VB .NET ma mi piace fornire anche il codice sorgente in C#, e vorrei usare le schede per permettere ai lettori di passare tra i due. Probabilmente potrei crearle da solo dato il tempo, ma questo doveva essere un progetto per "imparare cose su jQuery". Si sta rivelando più un progetto "WTF WordPress". Sono appena funzionale in JS e sto cercando di migliorare. Non sono un guru di WP, e non voglio imparare più di quello che mi serve al momento.

Ho una pagina che non è altro che un copia/incolla della demo di jQuery UI Tabs. Non funziona; la lista e tutti i div sono visibili e non ci sono vere e proprie schede. So che questo è perché ho bisogno di qualche CSS, ma è qui che mi sono esaurito. Non sono più sicuro che avere il CSS lo farebbe funzionare, e non so nemmeno come capire se è il CSS, il mio JS o il mio WP il problema. Fino a quando non ho iniziato questo progetto il mio blog "funzionava e basta" ed è così che mi piacciono le cose non-lavoro.

La prima cosa che ho provato è stata mettere il CDN di Google per jQuery nel mio header.php del tema. Potevo far funzionare gli alert, ma qualsiasi cosa facessi le schede non comparivano. (Ora so che è perché apparentemente avevo bisogno di qualche CSS. Grazie per non menzionarlo, documentazione jQuery!) Così ho iniziato a fare qualche ricerca e ho capito che WP carica jQuery, come molti plugin (anche se sto usando solo Spam Karma e Askimet.) Aveva senso che forse caricare il jQuery di Google causasse qualche confusione. Dopo qualche ricerca, ho trovato diversi siti che suggerivano di mettere wp_enqueue_script() nel mio header. La documentazione elencava un sacco di script, così ho aggiunto "jquery", "jquery-ui-core", e "jquery-ui-tabs". Posso vedere un tag script che carica jQuery (versione 1.4.4...) nel mio header, ma gli altri tag sembrano non avere effetto. Capisco che è caricato in modalità "no conflict" quindi usi "jQuery()" quando normalmente useresti "$()". Posso far funzionare gli alert ma non le schede. Di nuovo, sono sospettoso perché non sembra che la mia pagina stia cercando di caricare jQuery UI. Probabilmente non importerebbe perché non sono sicuro che WP abbia il CSS giusto. Ho visto alcune pagine che suggeriscono di dover caricare jQuery UI nel footer della pagina, altre che dicono che devo aggiungere alcune cose che non capisco a functions.php, e un paio di altre soluzioni da articoli troppo vecchi per fidarsi. Non so cosa provare dopo.

Se facessi qualche lavoro per capire di quale CSS ho bisogno (grazie ancora, "documentazione" jQuery!) potrei far funzionare le schede su un file locale. In WP, sto usando il tema TwentyTen; le mie uniche modifiche sono state aggiungere gli script di SyntaxHighlighter (che disabiliterò se qualcuno mi dice che sono abbastanza vicino da farle funzionare e che potrebbero essere il problema). Ho appena aggiornato a WP 3.1.4 oggi. Ecco il contenuto dei file rilevanti, puoi vedere il sorgente per vedere come appare l'HTML:

header.php

<?php wp_enqueue_script("jquery"); ?>
<?php wp_enqueue_script("jquery-ui-core"); ?>
<?php wp_enqueue_script("jquery-ui-tabs"); ?>
<script type="text/javascript" src="http://www.owenpellegrin.com/blog/highlight/scripts/shCore.js"></script>
<script type="text/javascript" src="http://www.owenpellegrin.com/blog/highlight/scripts/shBrushCSharp.js"></script>
<script type="text/javascript" src="http://www.owenpellegrin.com/blog/highlight/scripts/shBrushVb.js"></script>
<script type="text/javascript" src="http://www.owenpellegrin.com/blog/highlight/scripts/shBrushXml.js"></script>
<link type="text/css" rel="stylesheet" href="http://www.owenpellegrin.com/blog/highlight/styles/shCore.css"/>
<link type="text/css" rel="stylesheet" href="http://www.owenpellegrin.com/blog/highlight/styles/shThemeDefault.css"/>
<script type="text/javascript">
    SyntaxHighlighter.all();
</script>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<title><?php
(... il resto del default header.php di TwentyTen ...)

la pagina collegata

<script>
jQuery("document").ready(function() {
    jQuery( "#tabs" ).tabs();
});
</script>

<div id="tabs">
    <ul>
        <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>
    </ul>
    <div id="tabs-1">
        <p>Contenuto scheda 1.</p>
    </div>
    <div id="tabs-2">
        <p>Contenuto scheda 2</p>
    </div>
    <div id="tabs-3">
        <p>Contenuto scheda 3</p>
    </div>
</div>

Ho aggiunto la chiamata ready() perché ero curioso se forse il codice della demo non stesse eseguendo. Ho anche provato questa variante del codice senza successo:

jQuery("document").ready(function() {
    jQuery( "#tabs" ).tabs();
});

Cosa mi manca?