WordPress.org

1. dickkirkland
   Member
   Posted 1 year ago #

   Hello all,

   I've been reading over all of the "enqueue" implementation information on the codex, but still can't seem to get a basic accordion working in a sidebar.

   I've broken the parts of the implementation into the enqueue, actual script, and html/php that I'm trying to modify below.

   Any advice on this issue would be greatly appreciated. I have a feeling I'm missing a step, or something small. Thanks in advance for reviewing.

   ENQUEUE FUNCTIONS (to call jQuery from within WordPress)

   <?php
   if ( !is_admin() ) { // instruction to only load if it is not the admin area
      // register your script location, dependencies and version
      wp_register_script('dkBlogAccordion',
          get_bloginfo('template_directory') . '/scripts/dkBlogAccordion.js',
          array('jquery', 'jquery-ui-core'));
      // enqueue the script
      wp_enqueue_script('dkBlogAccordion');
   }
   ?>

   ACTUAL SCRIPT (dkBlogAccordion.js)

   jQuery(document).ready(function() {
       jQuery("#sidebar-pages").accordion({ header: "h4" }, { collapsible: "true" }, { active: "false" });
     });

   HTML & PHP IN SIDEBAR.PHP FILE (I'm trying to apply jQuery to)

   <div id="sidebar-pages">
       <h4><?php _e('Support Pages'); ?></h4>
           <ul>
           <?php wp_list_pages('sort_column=menu_order&hierarchical=0&include=2,29,84&title_li='); ?>
           </ul>
   
        <h4><?php _e('Support Posts'); ?></h4>
            <ul>
            <?php wp_list_categories('orderby=name&include=32,46&title_li='); ?>
             </ul>
   </div>

2. esmi
   Theme Diva & Forum Moderator
   Posted 1 year ago #

   Try adding the following to your theme's functions.php file:

   if ( !function_exists( 'init_accordian' ) ) :
   function init_accordian() {
       wp_enqueue_script('dkBlogAccordion',
       get_bloginfo('template_directory') . '/scripts/dkBlogAccordion.js',
       array('jquery', 'jquery-ui-core'));
   }
   endif;
   if( !is_admin() ) add_action('init', 'init_accordian');

3. dickkirkland
   Member
   Posted 1 year ago #

   Hi esmi,

   Thanks for your offer of help.
   Unfortunately, this threw a parse error and broke the blog.

   Since I first wrote the post, I consulted with another friend who ran tests remotely and they were able to produce the jQuery accordion using independent wp_enqueue calls to the libraries on the google CDN, while still calling the custom script afterwards, like so...
   

   <?php wp_enqueue_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js');
   ?>
   <?php wp_enqueue_script('jquery-ui-core', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.3/jquery-ui.min.js');
   ?>
   <?php wp_enqueue_script('dkBlogAccordion', get_bloginfo('template_directory') . '/scripts/dkBlogAccordion.js');
   ?>

   I still can not achieve what I thought was supposed to be really simple.

   Let me know if you have any other insight on the issue.

   Firefox Web Developer toolbar produces the following error...

   jQuery("#sidebar-pages").accordion is not a function

   which makes me think the ui-core is not being called on or loaded properly.

   Any further ideas?

   Thanks in advance.
   Sincerely,
   Dick

4. dickkirkland
   Member
   Posted 1 year ago #

   UPDATE/FIX:

   Seems as if calling the enqueues in this sequence works...

   <?php
   wp_enqueue_script('jquery-1-4-2', 'http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js');
   
   wp_enqueue_script('jquery-ui-core-1-8-3', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.3/jquery-ui.min.js');
   
   wp_enqueue_script('dkBlogAccordion', get_bloginfo('template_directory') . '/scripts/dkBlogAccordion.js');
   ?>

   There seems to be a missing accordion function/scripting in the ui-core.js file that comes with version 3.0.1 of WordPress.

   There may have also been some confusion in the calling of handles, as you can see the ones that are now called are not the ones that WP understands as listed in the end of the codex document here...
   Included libraries and understood handles
   Seems like there are so many blogs out there describing enqueues for widgets and functionality that are for jquery ui tabs and galleries, but maybe the accordion is just not as widely used. This widget should still be included in the ui-core.js file that is packaged with WordPress. Maybe I'll put this in the "ideas" forum with a link to this headache.

   Thanks for reading. I hope this helps someone out.
   Special thanks to teamcolab.com for the fix on this code.

5. vaa
   Member
   Posted 1 year ago #

   Hello,
   I have been trying to insert scriptocean Javascript menu into sidebar.php. Not having any knowledge in php etc does not help. You seem to understand the problem. Please halp if you can (I also have to be told wich file exaclty I have to copy/paste bits of the code.... yes its that bad...)

   I want to have two scriptocean menus, which were created in scriptocean software (non wordpress trial version is here http://www.yourcapitaldesigns.com/lambre). The js code has all the titles etc. it is not linked to any wordpress pages or categories I could call with wp_list_pages or other functions. I thought WP will display my js menu and then I will link the menu to what I need.

   How can I call my js file in sidebar.php if my menu is not supposed to display not pages nor categories but another set of links?

   here is js code (acac1.js).

   [Large code excerpt removed by moderator per forum rules. Please use the pastebin for all large code excerpts. It works better anyway.]

   Maybe there is another way to acheive the same result?

   thank you for your time

6. dickkirkland
   Member
   Posted 1 year ago #

   vaa,
   I'm not familiar with scriptocean software.
   The results I have shown above are dealing with the jQuery UI libraries for menuing.
   This is a way to build JavaScript menuing from a library that is open source and completely customizeable.
   If you're familiar with jQuery at all, you will find the manipulation of the library easy, but you can always pick it up by reading the documentation on it.
   Also, keep in mind there are numerous ways to implement such a menuing system. I just used the jQuery UI as it is easy to customize and maintain. With any menuing solution that uses JS, there are certain calls that have to be made in a certain order on your dynamic web pages. Sometimes JS library calls are handled by a default library that exists within your WordPress installation. Overiding these JS library calls with something of your own is what "enqueue scripts" are for. If you are not familiar with how to implement JS on web pages, please see a reference for such, as this is key in performing the task you would like to do. I hope this helps some.

Topic Closed

This topic has been closed to new replies.