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

name: Sample Block
type: module
description: 'Example Block for Drupal 8.'
package: Custom
version: 8.x
core: 8.x
dependencies:
  - node
  - block

3. Create sampleblk.module inside sampleblk folder

<?php
/**
 * @file
 */
?>

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)

<?php

/**
 * @file
 */
namespace Drupal\sampleblk\Plugin\Block;

use Drupal\Core\Block\BlockBase;

/**
 * Provides a 'Hello' Block
 * @Block(
 * id = "sample_block",
 * admin_label = @Translation("Sample block"),
 * )
 */
class SampleblkBlock extends BlockBase {
	/**
	 *
	 * {@inheritdoc}
	 *
	 */
	public function build() {
		return array (
			'#type' => 'markup',
      		'#markup' => 'This is sample Block content.',
		);
	}
}

?>

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 : https://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

name: Drupal 8 custom module example
type: module
description: 'Example for Drupal 8 modules.'
package: Custom
version: 8.x
core: 8.x

3. Create example.module inside example folder

<?php
/**
 * @File
 * Example custom module for Drupal 8.
 */
 
/**
 * Implementing hook_menu().
 */
function example_menu() {
  // The paths '/examp' should be same in example.routing.yml.
  $items['/examp'] = array(
    'title' => 'Example page',
    'description' => 'This is a example page from example module.',
    // The name of the route from example.routing.yml
    'route' => 'example.my_page',
  );
  return $items;
}

4. Create example.routing.yml in example folder

example.my_page:
  path: '/examp'
  defaults:
    _controller: '\Drupal\example\Controller\ExampleController::myPage'
    _title: 'My first page in Drupal8'
  requirements: 
    _permission: 'access content'

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’

<?php
/**
 * @file
 */

namespace Drupal\example\Controller;

/**
 * Route responses for the Example module.
 */
class ExampleController {
  /**
   * Returns a simple page.
   *
   * @return array
   *   A simple renderable array.
   */
  public function myPage() {
    $element = array(
      '#markup' => 'Hello world!',
    );
    return $element;
  }
}
?>

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 : https://wiki.workassis.com/drupal-8-creating-custom-block-from-scratch/

Drupal 8 Custom theme folder structure

Minimum requirement

The theme name info yml file

name: The Example
type: theme
description: This is sample theme for Drupal 8 :)
package: custom
core: 8.x
libraries:
  - example/example-css
  - example/example-js  
regions:
  header: Header block
  content: Content block
  footer: Footer block

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

example-css:
  css:
    theme:
      css/style.css: {}
example-js:
  js:
    js/java.js: {}
  dependencies:
    - core/jquery

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

Default theme implementation to display a single page

	<div id="head">{{page.header}}</div>

	<div id="content">{{page.content}}</div>

	<div id="footer">{{page.footer}}</div>

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)