Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I'm tryin to use this accordion script in my WP: http://www.armagost.com/zaccordion/

Problem is that on a standalone html/php file it works well but once pasted in my header.php file there's no way to make it work. I tried also including it with <?php require_once("example.php") ?> but no success.

You can see my header.php file here: http://pastebin.com/SrkmWxp1

Thanks for your help.

share|improve this question
    
also, the example page here: pastebin.com/yEdnTPW4 –  l736k Apr 27 '13 at 8:28
    
looks like its working.. –  Sisir Apr 27 '13 at 8:34
    
i assure you it's not working...i display all the static picture columned instead of the accordion as per the script... –  l736k Apr 27 '13 at 8:43
add comment

2 Answers

up vote 1 down vote accepted

You seem to still be having issues, what i'd do to avoid having all that code clutter the header is setup a bunch of enqueues, but handle the html5 js inside the print scripts action along with the appropriate conditional comments(there's no proper way to do this with the enqueue system).

First the HTML5 js, outright just print the conditional logic and script tag(it's an appropriate action for this kind of thing).

add_action( 'wp_print_scripts', 'do_print_html5js' );

function do_print_html5js() {
    echo '<!--[if lt IE 9]>' . "\n";
    echo '<script type="text/javascript" src="'.get_stylesheet_directory_uri().'/js/html5.js"></script>' . "\n";
    echo '<![endif]-->' . "\n";
}

Notes: Although to be honest, the above part isn't necessary at all and you could leave it in the header file, the TwentyThirteen theme just does that, i'd just personally avoid the extra clutter.

Then fire off your enqueues for the accordian, using the dependencies parameter to indicate to each script what other script or scripts it depends upon. I referenced the internal jQuery to, there's no need to fetch that externally.

add_action( 'wp_enqueue_scripts', 'register_and_enqueue_scripts' );

function register_and_enqueue_scripts() {
    wp_enqueue_script( 'jquery-easing', 'http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js', array('jquery'), false );
    wp_enqueue_script( 'jquery-zaccordian', get_stylesheet_directory_uri() . '/js/jquery.zaccordion.js', array( 'jquery-easing'), false );
    wp_enqueue_script( 'my-zaccordian', get_stylesheet_directory_uri() . '/js/myaccordion.js', array('jquery-zaccordian'), false );
    wp_enqueue_style( 'slidemenucss', get_stylesheet_directory_uri() . '/css/slidemenu.css', array(), false );
}

Move your jQuery code that creates the accordian into a seperate file, and adjust the file name in the above enqueue, myaccordion.js as needed.

I tested the above code before posting this answer, here's the test HTML code i plonked in my header.php file and the jQuery used to create the accordian.

header.php - html (just the important bit)

<ol id="example1">
    <li><img src="<?php echo get_stylesheet_directory_uri(); ?>/images/myimage.png" alt="" /></li>
    <li><img src="<?php echo get_stylesheet_directory_uri(); ?>/images/myimage.png" alt="" /></li>
    <li><img src="<?php echo get_stylesheet_directory_uri(); ?>/images/myimage.png" alt="" /></li>
    <li><img src="<?php echo get_stylesheet_directory_uri(); ?>/images/myimage.png" alt="" /></li>
</ol>

myaccordion.js

jQuery(document).ready(function($) {
    $("#example1").zAccordion({
        easing: "easeOutBounce",
        height: "150px",
        slideWidth: "600px",
        width: "900px"
    });
});

Hope that helps and keeps your header file a little cleaner.. ;)

share|improve this answer
    
hi, thanks! your solution for sure makes my header cleaner!! unfortunatly the issue remains: the images gets loaded in a row and then after a couple of seconds they move into the accordition... –  l736k Apr 30 '13 at 11:02
    
Maybe that's because you don't have the accompanying CSS the author is using to offset the accordion until it's loaded, the author has used additional CSS on his own site but doesn't include any with the download. Here's a temp pastebin of his stylesheet but unminified, just pick out what you need from it(ie. the accordion stuff). –  t31os Apr 30 '13 at 11:34
    
i took a look at those lines but they're really too much... you can have a preview of the website here if you don't mind taking a look at it is.gd/FsEAV7 try also with different browsers –  l736k Apr 30 '13 at 21:51
    
Looks fine to me.. FF, IE, Chrome and Opera. Maybe you have something in cache that's causing an issue? –  t31os Apr 30 '13 at 21:59
    
i tried again now and it's showing correctly...but in local all the browser shows the issue...this is strange!! –  l736k May 2 '13 at 8:05
show 2 more comments

Looking at your code again. Here is what i think

Change This:

<script src="js/jquery.zaccordion.js"></script>

                <script type="text/javascript">
                        $(document).ready(function() {
                                $("#example11").zAccordion({
                                        easing: "easeOutBounce",
                                        height: "150px",
                                        slideWidth: "600px",
                                        width: "900px"
                                });
                        });
                </script>

To This:

Assuming you have the accordion script on your theme directory. You can't use relative url inside wordpress. You have to use full URL.

<script src="<?php echo get_stylesheet_directory_uri(); ?>/js/jquery.zaccordion.js"></script>

                <script type="text/javascript">
                        jQuery(document).ready(function($) { // using jQuery instead of $ and passing $
                                $("#example11").zAccordion({
                                        easing: "easeOutBounce",
                                        height: "150px",
                                        slideWidth: "600px",
                                        width: "900px"
                                });
                        });
                </script>

Doing It Right:

Code I show is just how to get it working. You shouldn't add scripts on header at all. Use wp_register_script(). Then enqueue it using wp_enqueue_script(). All script should be loaded into footer area.

More On How to Use jQuery with Wordpress

http://www.ericmmartin.com/5-tips-for-using-jquery-with-wordpress/

share|improve this answer
    
of course i wasn't using relative URLs but <?php echo get_stylesheet_directory_uri(); ?> in the header.php (as you can see in pastebin link). the relative URL is only in the original script file. i will try add the jQuery in the way you suggested and let you know if it works or not. –  l736k Apr 27 '13 at 10:18
    
You should use get_stylesheet_directory_uri() in the example, else the example fails in the case of a child theme. It would also be nice and i'd consider the answer better if it provided an example of loading scripts the WP way. –  t31os Apr 27 '13 at 10:28
    
i tried using the script in the link you posted into the functions.php but it didn't work so i put the call directly in the header even if it's not the correct way to do it. the script is not loading correctly: i get the images columned for a couple of seconds and then they automatically goes in their place in the accordion...is this because of a delay in the load of the script? –  l736k Apr 27 '13 at 10:29
    
yes.. looks like it. how much is the script size? –  Sisir Apr 27 '13 at 12:49
    
@Sisir jquery.zaccordion.min.js is 12kb and jquery.zaccordion.js is 22kb but the same happens with another script i found that is only 1kb so i don't think it's a problem of heavy weight of the script –  l736k Apr 30 '13 at 10:49
show 3 more comments

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.