jQuery UI confusion

  • I’m attempting to create an accordion dropdown menu in a right sidebar. Currently, the left sidebar of the site is the main navigation and uses the Design Chemical plugin for the accordion UI: https://www.designchemical.com/blog/index.php/wordpress-plugins/wordpress-plugin-jquery-vertical-accordion-menu-widget/

    I thought I could leverage this plugin for the right sidebar accordion menu I need to create, but this new menu is going to be dynamic (will be populated by months, years links from DB posts for news archive). The plugin requires you create a custom menu on the dashboard, so the dynamic requirements need me to look in another direction.

    The style of the new accordion will also be different. So I thought it would be fairly easy to use the jQuery UI accordion function. However, if I enqueue the accordion script, I’m not seeing the CSS or JS in the page source. Here’s my script in functions.php:

    function load_accordion() {
        wp_enqueue_script('jquery-ui-accordion');
	wp_enqueue_script(
		'custom-accordion',
		get_stylesheet_directory_uri() . '/js/site-accordion.js',
		array( 'jquery' )
	);
}

    Any ideas on what I might be doing wrong?

Viewing 5 replies - 1 through 5 (of 5 total)

  • You’ve just missed the last step – hooking into an action to fire your function. Try adding something like:

    add_action('wp_enqueue_scripts', 'load_accordion');

    The only other comment I have is that load_accordion is a bit generic and might create a conflict in the future. If it was me, I’d have called the function something (hopefully) more unique like my_custom_load_accordion.

    Thread Starter the_enn

    (@the_enn)

    Thanks, I added the action hook and you are right, that renaming the function should be more specific.

    If I reload the page and look at the page source, I see a reference to the google link for the UI. Is this the library that’s loaded when queueing the accordion UI?

    https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js?ver=1.8.21

    However, I don’t see a UI CSS file listed in the source. Should I see that?

    I think the plugin above uses some accordion UI CSS as well that I’m not sure if it will be conflicting or not, or if this plugin loads jquery functions on its own. Perhaps I should disable the plugin and reload the page in development to see what libraries are loaded?

    Is this the library that’s loaded when queueing the accordion UI?

    No. That’s probably added by a plugin or something else in your theme.

    I don’t see a UI CSS file listed in the source

    Why are you looking for a .css file?

    Thread Starter the_enn

    (@the_enn)

    Doesn’t there need to be jquery .css for the Accordion styles?

    Not always. It depends upon what your .js accordion script uses. Generally speaking, these scripts tend to target existing classes or ids and apply inline style using show() or hide().

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘jQuery UI confusion’ is closed to new replies.