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

Search

Page Facebook

Become a patron

If you need some help or you search a Drupal freelancer don't hesitate to contact us.

 

Contact Us

All the content is FREE but I still need your help

 

Become a patreon