You are here

Create your 1st Drupal 8 module


As with Drupal 7, the primary job is to call the module. we'd like to make a machine name which can be used throughout the system. Machine names area unit utilized in functions and strategies in your module. For a lot of info on naming your module, examine [naming and putting your Drupal 8 module] on drupal.org.

I’m attending to decision this module 1st Module with a machine name of first_module.

Create the module folder
In Drupal 7, core modules get in the /modules directory and you ought to place your custom and contrib modules within the sites/all/modules directory or sites/sitename/modules directory. In D8, core modules move into the /core directory therefore you'll be able to place your contrib and custom modules within the /modules directory. I’m attending to stick to the Drupal 7 follow and place them in sites/all/modules.

Create a replacement directory in /sites known as all
Inside all produce a directory modules
Create the directory known as first_module within the all directory
Create a data yaml file
You need to make associate data yaml file to inform Drupal that your module exists. this is often just like making a .info come in Drupal 7.

The file name ought to be the machine name of your module with the .info.yml extension. during this case, it'll be first_module.info.yml.

Create first_module.info.yml within the root of the first_module directory.

 

name: 1st Module
description: associate experimental module to create our 1st Drupal 8 module
package: Custom
type: module
version: 1.0
core: 8.x


More info on .yml files.

Create a .module file
In Drupal 7, the .module is needed notwithstanding it does not contain any code. in Drupal 8, it's nonmandatory. i am attending to produce one which may be used later if you would like to implement hooks.

Create one known as first_module.module within the root of the first_module directory.
Create the src directory
We need to make a directory among the module directory for the controllers, plugins, forms, templates and tests. This directory ought to be known as src, that is brief for supply. this may permit the controller category to autoload, which implies you are doing not ought to expressly embody the category file.

Create a folder within the first_module module folder known as src, that is brief for supply.
Create a basic controller
Controllers do most of the add a typical MVC application. Here area unit the steps to make the fundamental controller for the module:

Create a folder among src known as Controller.
Within the Controller folder, produce a file known as FirstController.php.
In FirstController.php, we'll produce a straightforward “hello world” message in order that we all know it's operating.

 

<?php
/**
 * @file
 * Contains \Drupal\first_module\Controller\FirstController.
 */
 
namespace Drupal\first_module\Controller;
 
use Drupal\Core\Controller\ControllerBase;
 
class FirstController extends ControllerBase {
  public perform content() come array(
      '#type' => 'markup',
      '#markup' => t('Hello world'),
    );
  }
}


Add a route file
The controller we tend to created higher than won't do something at this stage. we'd like to wire it up to a route from the uniform resource locator to the controller so as for it to be dead.

Create a file known as first_module.routing.yml
Add the subsequent code to first_module.routing.yml
first_module.content:


  path: '/first'
  defaults:
    _controller: 'Drupal\first_module\Controller\FirstController::content'
    _title: 'Hello world'
  requirements:
    _permission: 'access content'

 

View the content
If you haven't already done therefore, change the module.

If you currently attend /first, you may see the greeting World message that's being came from the controller.

Create menu link
The route currently works and returns content from the controller. however you’d have to be compelled to apprehend the uniform resource locator so as to succeed in the content. to create this a lot of helpful, we'd like to feature it to Drupal’s menu system. To do that, you would like to make a menu .yml file.

In your module root, produce first_module.links.menu.yml
Add the following:

first_module.admin:
  title: 'First module settings'
  description: 'A basic module to come back greeting world'
  parent: system.admin_config_development
  route_name: first_module.content
  w8: 100


Clear the cache and so you ought to see the menu item underneath configuration -> development.
Click on the menu item and it'll take you to /first.
And that is it, your 1st Drupal 8 module with a menu item that returns something!

A custom block
So far, we've a custom path and menu item that displays a title and string. Let’s do one thing a trifle a lot of exciting and add a custom block to the module.

First, we'd like to make a replacement plugin for the module. Plugins area unit new in Drupal 8 and supply swappable items of practicality.

To get started, produce a replacement directory within the module’s src folder known as Plugin. this is often wherever you'll be able to store all of your plugins for this module.
Then produce a folder known as Block. A block may be a plugin kind.
And within the Block folder, produce a file known as HelloBlock.php.
In that file, we'd like to outline the namespace and sophistication. If you employ associate IDE like PHPStorm, this may be created mechanically.

<?php
 
namespace Drupal\first_module\Plugin\Block;
 
class HelloBlock extends BlockBase 
You need to increase the BlockCase category. To do that, add the subsequent use statement:

use Drupal\Core\Block\BlockBase;

And then modification category HelloBlock to HelloBlock extends BlockBase

 
<?php
 
namespace Drupal\first_module\Plugin\Block;
use Drupal\Core\Block\BlockBase;
 
class HelloBlock extends BlockBase 


Another new conception to Drupal that we'd like to use for the block is Annotations. so as for Drupal to seek out your block code, you would like to implement a code comment in an exceedingly specific approach, known as associate Annotation.

Add the subsequent comment, higher than category HelloBlock extends BlockBase :

/**
 * Provides a 'Hello' Block
 *
 * @Block(
 *   id = "hello_block",
 *   admin_label = @Translation("Hello block"),
 * )
 */


Next, we'd like to inherit docs from the bottom category and add a build technique, which can come back the content of the block.

 

class HelloBlock extends BlockBase 
   */
  public perform build() come array(
      '#markup' => $this->t('Hello, World!'),
   );
  }
}


The full code for HelloBlock.php

<?php
/**
 * @file
 * Contains \Drupal\first_module\Plugin\Block\HelloBlock.
 */
 
namespace Drupal\first_module\Plugin\Block;
use Drupal\Core\Block\BlockBase;
 
/**
 * Provides a 'Hello' Block
 *
 * @Block(
 *   id = "hello_block",
 *   admin_label = @Translation("Hello block"),
 * )
 */
class HelloBlock extends BlockBase 
   */
  public perform build() come array(
      '#markup' => $this->t('Hello, World!'),
    );
  }
 
}


Place block
Next you would like to clear the cache. and so to feature the block to a section, head on over to the blocks admin page. to feature the block to the sidebar 1st region, click on the Place block.

Place a block button

A modal can seem with a listing of obtainable blocks. hunt for greeting to seek out the greeting block you only created. Click the Place block button within the operations column.

Hello block within the block listings

You will then get a set up block kind. Save that.

Configure block kind

Then scroll to the lowest of the blocks layout page and click on save blocks. you ought to currently see the block within the sidebar left of your website.

Hello block within the sidebar

Overview of the file structure
Once you've got completed the higher than steps, you ought to have a file structure that appears like this: