0

As a plugin developer, it's important to make sure the Dashboard has the same look-and-feel as the rest of the native components of WordPress to provide a better User Experience.

For my plugin, I want to implement an accordion in my settings page. From reading this article and using wp_enqueue_script() function, it looks like this is possible by doing the following:

<?php
wp_enqueue_script( 'jquery-ui-accordion' );
?>
<script type="text/javascript">
jQuery(function($){
    $(".accordion").accordion({ header: "h3" });
    $(".accordion").last().accordion("option", "icons", false);
});
</script>

<div class="accordion">
    <div>
        <h3><a href="#">First</a></h3>
        <div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
    </div>
    <div>
        <h3><a href="#">Second</a></h3>
        <div>Phasellus mattis tincidunt nibh.</div>
    </div>
    <div>
        <h3><a href="#">Third</a></h3>
        <div>Nam dui erat, auctor a, dignissim quis.</div>
    </div>
</div>
<?php

Result

Accordion Example

This was taken from the WordPress Admin Pattern Library plugin that I found on GitHub. Yet, in their demo, the accordion example looks like the following:

Expected Result

The repo looks like it hasn't been maintained and it seems that this is a styling issue. Is there another function that I need to run such as wp_enqueue_style() that is natively built in in order to get the proper styling for the accordion?

2

Here's how I do it for my plugin/options page (which is inside a class, thus the $this-> construct):

/* enqueue our css */
public function enqueue_options_style( $hook ) {
    if( $hook == $this->admin_page )
        wp_enqueue_style( 'my-options', '/some-directory/my-options.css', false, $this->version );  // only present for our plugin's settings page
}

$this->admin_page is the slug returned from prior options page init:

$this->admin_page = add_menu_page( __( 'Settings' ), __( 'Settings' ), 'some-user-capability', 'my-options', array( &$this, 'display_page' ), 'dashicons-my-icon' );

and, the call to enqueue the options style is hooked thusly:

add_action( 'admin_enqueue_scripts', array( &$this, 'enqueue_options_style' ), 10, 1 );     // add the css we need for our options settings page

Now, it's just a matter of constructing that my-options.css file, with the appropriate markup for your .accordion h3 element.

  • So it looks like by default that the CSS styling isn't native in WordPress' UI. – Ethan Jinks O'Sullivan Sep 8 '16 at 17:12
  • grep 'accordion'...WP only ships with the .js they leave the styling up to us. – C C Sep 8 '16 at 17:18
  • Thanks for clarifying and showing your setup, this helps. – Ethan Jinks O'Sullivan Sep 8 '16 at 21:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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