How to Create a Drupal 8 module

In this tutorial I am going to teach you how to create a Drupal 8 module

First you need to create a folder with your module name under the modules/custom folder

Then you need to create a file that contain information about your module, here is a sample content

name: Commerce Amazon Slider
description: Provides custom product slider that looks and behaves like the Amazon slider
type: module
package: Commerce Custom
  - commerce:commerce
core: 8.x

If you navigate to you should find your new module listed, enable your module and follow through with the tutorial to add features to your module

To include javascript and css files in your module you need to create a yourmodulename.libraries.yml file, here is an example

    js/commerce_amazon_slider.js: {}
    - core/jquery
    - core/drupalSettings
      css/commerce_amazon_slider.css: {}

If your module will require specific permissions you can create a yourmodulename.permissions.yml file, here is an example

administer commerce_amazon_slider:
  title: 'Administer Commerce Amazon Slider'
  description: 'View, edit and update Commerce Amazon Slider configurations'

After clearing your cache, You should then see your permissions listed under

To create a configuration form you first need to create a route for the form, you do that by adding a your_module_name.routing.yml file, here is an example

  path: '/admin/commerce/config/commerce-amazon-slider/configure-slider-settings'
    _form:  '\Drupal\commerce_amazon_slider\Controller\ConfigureSliderSettingsForm'
    _title: 'Configure Amazon Slider Settings'
    _permission: 'administer commerce_amazon_slider'

Then you need to create the Form class under modules/custom/your_module_name/src/Controller/FormClassName.php, The file name and class name should match the entries added in your .routing.yml file, like the following example


namespace Drupal\commerce_amazon_slider\Controller;

use Drupal\Core\Form\FormBase;
use Drupal\Core\Form\FormStateInterface;

class ConfigureSliderSettingsForm extends FormBase
    public function getFormId()
        return 'commerce_amazon_slider_slider_settings_form';

    public function buildForm(array $form, FormStateInterface $form_state)

        return $form;

    public function submitForm(array &$form, FormStateInterface $form_state)

To add a link to the menu for the form route, you need to create a file like the following example

  title: Configure Amazon Slider Settings
  parent: commerce.store_configuration
  description: ''
  route_name: commerce_amazon_slider.configure_slider_settings
  weight: -30

After Clearing your cache, you should see your menu link listed as follows

Then to make the form functional we need to add form fields and save the data on form submit, the code will be modified as follows

public function buildForm(array $form, FormStateInterface $form_state)
   $form['show_on_pages'] = [
      '#type' => 'textarea',
      '#title' => $this->t('Show the Slider on the following pages'),
      '#description' => $this->t('Enter the path of the pages you want the slider to render on, each path on a separate line'),
      '#default_value' => $this->config('commerce_amazon_slider.settings')->get('show_on_pages'),

   $form['actions'] = [
      '#type' => 'actions',

   $form['actions']['submit'] = [
      '#type' => 'submit',
      '#value' => $this->t('Save Settings'),

   return $form;

public function submitForm(array &$form, FormStateInterface $form_state)
   $show_on_pages = $form_state->getValue('show_on_pages');
   \Drupal::configFactory()->getEditable('commerce_amazon_slider.settings')->set('show_on_pages', $show_on_pages)->save();

Then when you navigate to the form from your link you should see the following page, and when you save the values are updated in the form

Thank you and looking forward to help you do more with Drupal

Share this post