Theme Options Page – Collapsible Sections

  • I am creating an Option Page for my Theme, and there are a large number of options. To prevent the page from being super long, I would like to use collapsible sections. I have seen a number of options pages out there, but I want the style and functionality of what WordPress does with its own pages.

    Does anyone know how to implement the collapsible handle sections that are used in WordPress into an Options page? I have located code that seems to be the triggers, but I am missing something:

    <div id="sectionA" class="postbox" >
<div class="handlediv" title="Click to toggle"><br /></div>
<h3 class='hndle'><span>Section Label</span></h3>
<div class="inside">
  The Options Info here
</div>
</div>

    But when I use this code, I don’t even get the full styling that you find with the native WP admin pages.

    Any help, or links to examples, would be GREATLY appreciated!
    Thanks
    Ed

Viewing 9 replies - 1 through 9 (of 9 total)
  • Alwyn Botha

    (@123milliseconds)

    What about the spectacular JS accordion

    https://docs.jquery.com/UI/Accordion

    Thread Starter Ed N.

    (@enailor)

    @123milliseconds:
    If I can’t find out how to replicate the methods WP is using, I may have to use something like that. I just don’t want to add yet another script to the interface, and by duplicating the WP method I can keep my theme looking and feeling more like the overall experience of WP.

    So basically, I want to be able to take the methods used for sections like “Custom Fields” and replicate that on my own theme options page… it shouldn’t be that hard, should it?

    Alwyn Botha

    (@123milliseconds)

    Download some of the current most popular themes at WP

    I did some time ago and most of them have tabbed or accordian interafaces in their options pages; see how they do it; until someone else here posts the exact answer

    Thread Starter Ed N.

    (@enailor)

    I just downloaded Justin Tadlock’s framework theme (hybrid) and he is doing what I want on his options page, using the add_meta_box function. I am not sure if this would work for me though. While I said I was setting up an Options Page for a theme, this is not entirely true. I am actually setting up my own Options Page that will be universal between my themes. This will contain information such as client phone numbers and email address, etc that will be used in various places in each of the themes I am developing for this series. This way, when the client switches themes, some of these basic elements will remain regardless of the theme.

    I will look to see if I can use the add_meta_box function; however, I have been using the register_setting function up until now.

    Any additional information on how to add these collapsible boxes would be appreciated!

    Thanks,
    Ed

    You should use the plugin Options-Tree

    https://www.ads-software.com/extend/plugins/option-tree/

    You may find this tutorial helpful:

    Incorporating the Settings API in WordPress Themes

    Of interest to the OP, I discuss how to incorporated Tabbed Theme Settings pages, which emulate WordPress’ core handling of Tabbed options pages.

    (If anything in it is unhelpful, or you still have questions, please let me know, so that I can improve it.)

    Thread Starter Ed N.

    (@enailor)

    @steven Jones:
    I am looking for more of a standard “cross theme” Options Page. Using the register_setting function allows me to store actual settings in the WP database that can be called from any theme if the theme uses the proper code (fairly simple to add). This plugin is more of a theme only type of thing.. but looks intriguing.

    @chip Bennett:
    Holy Cow! That is definitely an in depth tutorial… will need to dive into that one when I have more time. All in all, I may settle for that type of tab setup, as it does still closely fit with the basic WP admin styles.

    Thread Starter Ed N.

    (@enailor)

    I still think there has to be a simple way to add this functionality. Possibly as simple as just adding or calling the right scripts/css, with the proper structure of the sections… I guess that is the stuff I am just not seeing (yeah, I may be blind). Just have not seen that anywhere and not having much luck Googling… may be using the wrong “specific” terms!

    @enailor – he doesn’t use collapsible sections (tabs instead) but Devin Price has built a kickass options plugin that you can use with any theme:

    https://wptheming.com/2011/05/options-framework-0-6/

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Theme Options Page – Collapsible Sections’ is closed to new replies.