I made custom page template Which displays all the subpages of the 1st level pages in tabs with nested accordions with second level subpages. Here is my page : http://avgustin.dn.ua/en/menu/
Because of this problem - jquery ui accordions within tabs I can't use plugin JQuery UI because it initialize tabs before accordions by default. So I add jquery manualy like so (I edit that like in folowing advice in function.php):
function my_enqueue_jquery_ui() {
wp_enqueue_script( 'jquery-ui-1.8.2', '/wp-content/themes/papyrus/js/jquery-1.8.2.js', '1.8.2', array( 'jquery' ) );
}
function my_enqueue_jquery_ui2() {
wp_enqueue_script( 'jquery-ui-1.9.1.custom', '/wp-content/themes/papyrus/js/jquery-ui-1.9.1.custom.js', '1.9.1', array( 'jquery' ) );
}
add_action('wp_enqueue_scripts', 'my_enqueue_jquery_ui');
add_action('wp_enqueue_scripts', 'my_enqueue_jquery_ui2');
and than initialize accordions before tabs
jQuery(document).ready(function($) {
<?php
foreach( $mypages as $page ) {
$content = $page->post_content;
if ( ! $content ) // Check for empty page
continue;?>
$("#accordion<?php echo $page->ID ?>").accordion({collapsible: true, active: -10 });
<?php
}
?>
$("#tabs").tabs();
});
Everything works fine until I activate any plugin that uses jquery, for example flash gallery. How can I add custom jquery support to page template in the rigth way. Is it real to make universal working page template with jquery, that can be used whith any template without modifications? Help me please! Here is the complete code
<?php
/*
Template Name: Menu_page
*/
?><?php get_header(); ?>
<div id="content">
<div class="entry"/>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="post" id="post-<?php the_ID(); ?>">
<h2><?php the_title(); ?></h2>
<div class="post-content">
<?php
$mypages = get_pages( array( 'child_of' => $post->ID, 'sort_column' => 'post_date', 'sort_order' => 'desc', 'parent' => $post->ID) );?>
<div id="tabs">
<ul>
<?php
foreach( $mypages as $page ) {
$content = $page->post_content;
if ( ! $content ) // Check for empty page
continue;
$content = apply_filters( 'the_content', $content );
?>
<li><a href="#tab<?php echo $page->ID ?>"><?php echo $page->post_title; ?></a></li>
<?php
}?>
</ul>
<?php
foreach( $mypages as $page ) {
$content = $page->post_content;
if ( ! $content ) // Check for empty page
continue;
$content = apply_filters( 'the_content', $content );
?>
<div id="tab<?php echo $page->ID ?>">
<?php echo $content;?>
<div id="accordion<?php echo $page->ID ?>">
<?php
$mypages2 = get_pages( array( 'child_of' => $page->ID, 'sort_column' => 'menu_order', 'sort_order' => 'asc', 'parent' => $page->ID) );
foreach( $mypages2 as $page2 ) {
$content2 = $page2->post_content;
if ( ! $content2 ) // Check for empty page
continue;
$content2 = apply_filters( 'the_content', $content2 );?>
<h3><a href="#"><?php echo $page2->post_title; ?></a></h3>
<div>
<?php echo $content2;?>
</div>
<?php }?>
</div>
</div>
<?php
}?></div>
<script>
jQuery(document).ready(function($) {
<?php
foreach( $mypages as $page ) {
$content = $page->post_content;
if ( ! $content ) // Check for empty page
continue;?>
$("#accordion<?php echo $page->ID ?>").accordion({collapsible: true, active: -10 });
<?php
}
?>
$("#tabs").tabs();
});
</script>
<?php the_content('<p class="serif">Читать полностью »</p>'); ?>
<?php link_pages('<p><strong>Страницы:</strong> ', '</p>', 'number'); ?>
</div>
</div>
<?php endwhile; endif; ?>
</div>
</div><!--/content -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>
When I activate other plugin (flash galery) in source code in chrome I see:
<script type='text/javascript' src='http://avgustin.dn.ua/wp-includes/js/jquery/jquery.js?ver=1.7.2'></script>
after my lines with jquery initialize. And so my jquery does not work :(
