×
×

How to add custom theme settings for Drupal 7

Drupal gives us the ability to change theme settings from the administrative pages. Apart from the Global settings form, each theme has its own settings page.

Navigate to "Appearance" -> "Your theme" > "Settings"

This page has the "Logo Image Settings" and "Shortcut Icon Settings".

Logo Image and Shortcut Icon Settings

You can also add your own fields to this form.

Drupal 7 provides a more easier and flexible way to add your custom settings in the theme settings.

You just need to create a "theme-settings.php" file in your theme folder and write a THEMENAME_form_system_theme_settings_alter(&$form, $form_state) function.

For example, let us add breadcrumb settings to the theme settings.

function MYTHEME_form_system_theme_settings_alter(&$form, $form_state) {
  $form['breadcrumb'] = array(
    '#type' => 'fieldset',
    '#title' => t('Breadcrumb Settings'),
    '#collapsible' => TRUE,
    '#collapsed' => TRUE,
  );

  // Breadcrumb elements
  $form['breadcrumb']['breadcrumb_title'] = array(
    '#type' => 'select',
    '#title' => t('Breadcrumb title'),
    '#description' => t('Do you want to show the title of the page in the breadcrumb?'),
    '#options' => array(
      0 => t('No'),
      1 => t('Yes'),
    ),
    '#default_value' => theme_get_setting('breadcrumb_title'),
  );
}

Check http://api.drupal.org/api/drupal/7 for complete API reference

Breadcrumb settings

theme_get_setting('breadcrumb_title'); 
function MYTHEME_breadcrumb($variables) {
  $breadcrumb = $variables['breadcrumb'];
  if (!empty($breadcrumb)) {
    $output = '<'.OUTTAG.' class="element-invisible">' . t('You are here') . '<!--{cke_protected}{C}%3C!%2D%2D'.OUTTAG.'%2D%2D%3E-->';

    if (theme_get_setting('breadcrumb_title') == 1) { // show the title setting
      $breadcrumb[] = drupal_get_title();
    }

    $output .= '. implode(' » ', $breadcrumb);
    return $output;
  }
}

Note: For setting the default value, you need the following code in your MYTHEME.info file

 settings['breadcrumb_title'] = 1
  1. Create a "theme-settings.php" in your theme folder
  2. Add the following code for the breadcrumb settings
  3. You can check the form in your theme settings page. It will look like this.
  4. You can write the PHP call in any of the .php files in your theme folder.

 

Related Articles:

Services: 
Mobile Theming

Sign up for our weekly newsletter


Comments

  • by Anonymous (not verified)
  • Sun, 02/22/2015 - 10:45

Very good!

  • by Nivas (not verified)
  • Tue, 03/10/2015 - 03:40

Hi,I followed the same setup but I need to add a browse button at the end for uploading image.
below is the code i developed...
THEME-SETTINGS.php i added the below code
-------------------------------------------------------------------
$form['mytheme_settings']['loaderImage'] = array(
'#type' => 'fieldset',
'#title' => t('Loader Icon'),
'#collapsible' => TRUE,
'#collapsed' => FALSE,
);
$form[mythemename_settings']['loaderImage']['loader_img'] = array(
'#type' => 'file',
'#title' => t('Upload Loader Icon Image'),
'#default_value' => theme_get_setting('loader_img','mythemename'),
'#description' => t("Upload your desired loader icon."),
);
THEME.INFO file i added
====================
settings[loader_img] = "loading.gif"
then,I retrieved my value in TEMPLATE.PHP but the value is empty.
<?php print theme_get_setting('loader_img'); ?>

Can u spot me out what is the error I made.
I need to know in which tablename in database,the value of the settings will be stored.
Also,need to know where will be my uploaded file(images) will get stored.(because i checked my entire project but i couldn't find my file).

Any help is really appreciated.Thanks in advance.

Add new comment