Drupal 8 Creating custom Block steps

Costume Module file structure (My Drupal version 8.1.2)

1. Create a folder under ‘/modules/’ for this explanation I am creating a ‘sampleblk’ (this is our module folder) folder inside module folder

2. Create module info file ‘sampleblk.info.yml’ inside sampleblk folder

3. Create sampleblk.module inside sampleblk folder

4. Create src folder and create Plugin folder inside ‘src’ and create Block folder inside ‘src\Plugin\’ folder and create SampleblkBlock.php filde (full path : modules\sampleblk\src\Plugin\Block\SampleblkBlock.php)

Here in the comment section adding some annotation @block don’t remove it  it is required. Read more about annotation

1. ‘id’  = This property in the annotation defines the unique, machine readable ID of your block.

2. ‘admin_label’  = This annotation defines the human readable name of the block that will be used when displaying your block in the admin interface.

5. Install the new module from admin

6. clear the cache

7. Add your new block (I am just adding the new block to sidebar)

8. Check the effect

Github : https://github.com/bikeshm/drupal-8-block-sample1

Check this post alos : http://wiki.workassis.com/drupal-8-creating-custom-module-from-scratch/

‘Drupal 8 Creating custom module steps

Costume Module file structure (My Drupal version 8.1.2)

1. Create a folder under ‘/modules/’ for this explanation I am creating a ‘example’ (this is our module folder) folder inside module folder

2. Create module info file ‘example.info.yml’ inside example folder

3. Create example.module inside example folder

4. Create example.routing.yml in example folder

The path: ‘/examp’ begin with 2 space catheters. Here we are defining the end point (http://localhost/examp [ I am using ‘localhost’ for development])

5. Create controller:- for creating controller first we need to create an ‘src’ folder inside example folder inside src folder create a ‘Controller’ folder and inside it create ExampleController.php

the controller full path will be like this ‘modules/example/src/Controller/ExampleController.php’

6. Install the new module from admin

7. Open your favorite internet browser  hit your example URL (in my case :  http://localhost/examp) you can see the generated page

GitHub : https://github.com/bikeshm/drupal-8-module-sample1

Check how to create a custom block : http://wiki.workassis.com/drupal-8-creating-custom-block-from-scratch/

Drupal 8 Custom theme folder structure

Minimum requirement

The theme name info yml file

careful about the spacess

Example 1 :  ‘<space><space>–<space>example/example-css’  (insted of example-css you can give any name but you need to specify same in theme libraries yml file)

Example 2 : ‘<space><space>header:<space>Header block’ here after ‘:<space>’ space is not mandatory

Theme name library yml file (Ref : drupal.org)

Here we will define the actual path of the css and java script file

page.html.twig (ref: drupal.org)

Default theme implementation to display a single page

You can see a screenshot.png file in the theme folder (inside example folder) this image is used to display the theme image in admin panel

You can write your own css file and js file, and also you can create your own favicon.ico, logo.png that are i am not adding here .

*Note:- If your file changes (eg:-css and js or other fildes) are not reflecting in browser do clear cache (login to your admin area configuration->Development->Performance->Clear all caches)

🙂