Please Disable Your Browser Adblock Extension for our site and Refresh This Page!

our ads are user friendly, we do not serve popup ads. We serve responsible ads!

Refresh Page
Skip to main content
On . By CodimTh
Category:

In Drupal each theme has its own settings page at admin/appearance/settings/themeName. This page has a form with standard settings like “Logo image settings” ,“Shortcut icon settings”, "fonts", "styles" for example.

In Drupal 8, themes can modify the entire theme settings form by adding a PHP function to either the THEMENAME.theme file or to a theme-settings.php file.

In one of those files, a theme should use THEMENAME_form_system_theme_settings_alter(&$form, $form_state) hook function.

Create theme settings

 

Example How to add custom setting "logo footer":

<?php
/**
 * @file
 * Theme settings in this file.
 */
/**
 * Implements hook_form_system_theme_settings_alter().
 */

function mytheme_form_system_theme_settings_alter(&$form, $form_state)
{


    $form['logo_footer'] = array(
        '#title' => t('Logo Footer'),
        '#description' => t('This Is Logo Footer: png|jpg|jpeg'),
        '#type' => 'managed_file',
        '#upload_location' => 'public://logo-footer/',
        '#upload_validators' => array(
            'file_validate_extensions' => array('png jpg jpeg'),
        ),
        '#default_value' => theme_get_setting('logo_footer'),
    );
}

 

To see the custom settings go to  admin/appearance/settings/themeName:

How to create theme settings in Drupal 8


 

Note that theme authors can create complex, dynamic forms using advanced Forms API (auto-completion, collapsible fieldsets.)

 

to use a setting in a Twig file, we'll  add a new variable to the Twig file by adding it with a preprocess function in your THEMENAME.theme file.

For example, to add our logo_footer setting to the page.html.twig file, add this to the mytheme.theme file:

 

<?php

/**
 * Implements hook_preprocess_page().
 */
function mytheme_preprocess_page(&$variables)
{
    $fid = theme_get_setting('logo_footer');
    if (!empty($fid)) {
        $file = File::load($fid[0]);
    }
    if (!empty($file)) {
        $variables['logo_footer'] = $file->url();
    } else {
        $variables['logo_footer'] = '/themes/custom/zaanouni/assets/images/logo-white.png';
    }

}


Then in the page.html.twig file, you can access logo_footer like any normal Twig variable:

<a href="{{ path('<front>') }}">
    <img src="{{ logo_footer }}" alt="{{ 'Home'|t }}" class="img-fluid img_footer">
</a>

 

How make default value for Theme Settings


1.Create mytheme.settings.yml in mytheme/config/install.

2.Create a line for each setting.

logo_footer : "/themes/custom/mytheme/assets/images/logo-footer.png"

 

 

Conclusion:

  • By leveraging custom theme settings, themers can create a variety of controls to help site builders customize their sites.
  • I hope you found this article useful. let me know if you have any questions and I’ll be happy to answer them.

 

Comments

Add new comment

Restricted HTML

Riadh Rahmi

Senior Web Developer (Drupal & Laravel)

I am a senior web developer, I have experience in planning and developing large scale dynamic web applications especially in Drupal and Laravel.

Web Posts

Search

Page Facebook