3CWebDev / custom-theme-admin-settings

Files and instructions for adding social media URL configuration options to your (sub)theme

These instructions will help with setting up configuration options in the theme admin section of your theme. Always be sure to use a custom or sub theme, never make changes to a contrib.

Step 1 - theme-settings.php

Create or update the theme-settings.php file in your theme's root directory.

Add HOOK_form_system_theme_settings_alter(), where HOOK is the name of your theme.

→ more info for function hook_form_system_theme_settings_alter() on api.drupal.org

Add required form fields to function. Use Drupal Form API (FAPI) for field specs.

IMPORTANT: Be sure to and the 'use' for the following class to your theme-settings.php file

use Drupal\Core\Form\FormStateInterface;

Step 2 - THEME_NAME.theme

Now we want to pulling theme settings we just created and set some variable values.

Add or update the THEME_NAME.theme file in your theme's root directory.

Add or update the function THEME_NAME_preprocess_page(&$variables) where THEME_NAME is the name of your theme.

→ more info for function hook_form_system_theme_settings_alter() on api.drupal.org

Step 3 - page.html.twig

Now let's do something cool with the variables!

Look at the attached page.html.twig file for an example of how to dynamically output the social media links.

The attached example used Font Awesome fonts for rendering the icons. You can use images (sprites) or any other method that you'd like.

Step 4 - Theme the output as needed :)

The attached _social.scss file and rendedered (social.css) files are examples of theming the icon output.