1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

[Docs] How to Make a Theme Settings Page

Discussion in 'Design and Layout' started by Nick, Jan 20, 2010.

  1. Nick

    Nick Well-Known Member

    I've finished working on theme settings pages and wanted to give you a preview of what they can do and how easy they are to make.

    This example uses an unfinished theme which I'm working on called "Bars". I've given it that name because you can easily enable, disable and switch sidebars. First, let's look at the Theme Settings page for Bars:


    You can see that all the themes in your themes folder are listed in the sidebar, with the currently active theme marked "current". The settings page itself is very simple, but it does show a few details about the theme, including a link to the author's own website. How these settings pages looks is up to the theme designer, as we'll see further down.

    Here's Bars with both sidebars disabled:


    Right sidebar enabled:


    Left sidebar enabled:


    Both sidebars enabled:


    So how's it done?

    The index.php file

    First, the theme details added to the top of the settings page are drawn from the comment block at the top of the theme's index.php file:

     * name: Bars
     * description: Flexible two or three column theme
     * version: 0.1
     * author: Nick Ramsay
     * authorurl: http://hotarucms.org/member.php?1-Nick
     * etc...
    To hide or display sidebars, the index.php file does these things:

    1. It gets the current settings:

    // get settings:
    $bars $h->getThemeSettings();
    2. It sets up some variables to determine the width of each enabled block, and the number for each widget block.

    3. It includes a few conditions around each sidebar to determine whether to show it or not.

    I'll spare you the details on those for now.

    The settings.php file

    The settings page needs a new template file called settings.php. Here is the full code that generates the page in the first screen shot above:

    // If the form has been submitted, save the data...
    if ($h->cage->post->getAlpha('submitted') == 'true')

    $bars['left'] = ($h->cage->post->keyExists('left_bar')) ? 'checked' '';
    $bars['right'] = ($h->cage->post->keyExists('right_bar')) ? 'checked' '';
    $h->showMessage('Settings updated''green');

    // If the user wants to revert to the defaults...
    if ($h->cage->get->getAlpha('reset') == 'true')

    $bars $h->getThemeSettings($theme'default');
    $h->showMessage('Reverted to default settings''green');

    // Default settings:
    $defaults['left'] = '';
    $defaults['right'] = 'checked';

    // Get settings from database if they exist...
    $bars $h->getThemeSettings($theme);
    if (!
    $bars) { 
    $h->updateThemeSettings($defaults'bars''both');     // inserts settings for the first time
    $bars $defaults;                                      // use the defaults

    <form name='theme_settings_form' action='<?php echo BASEURL?>admin_index.php?page=theme_settings&amp;theme=<?php echo $theme?>' method='post'>

    <p><input type='checkbox' name='left_bar' value='left_bar' <?php echo $bars['left']; ?>>&nbsp;&nbsp;Enable left sidebar</p>
    <p><input type='checkbox' name='right_bar' value='right_bar' <?php echo $bars['right']; ?>>&nbsp;&nbsp;Enable right sidebar</p>
    <br />
    <input type='hidden' name='submitted' value='true' />
    <input type='submit' value='<?php echo $h->lang["main_form_save"]; ?>' />
    <input type='hidden' name='csrf' value='<?php echo $h->csrfToken?>' />

    <br />
    <a href="<?php echo BASEURL?>admin_index.php?page=theme_settings&amp;theme=<?php echo $theme?>&amp;reset=true">Revert to <?php echo make_name($theme'-'); ?> default settings</a>
    So all this is done and finished and will probably be in the next version of Hotaru. Hopefully it's not too complicated. I think giving theme designers the ability to add settings pages to their themes should make things very interesting. :D[​IMG]

Share This Page