Drupal 8

Drupal 8 Creating custom block from scratch

Drupal 8 Creating custom Block steps

Costume Module file structure (My Drupal version 8.1.2)

drupal 8 custom block structure

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.

drupal 8 block installation

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)

drupal 8 place block

8. Check the effect

drupal8block

 

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

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

By bm on June 16, 2016 | Drupal 8 | A comment?

Drupal 8 Creating custom module from scratch

‘Drupal 8 Creating custom module steps

Costume Module file structure (My Drupal version 8.1.2)

drupal 8 custome module structure

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

drupal 8 module installation

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

drupal 8 module 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/

 

By bm on June 15, 2016 | Drupal 8 | A comment?

Drupal 8 custom theme from scratch

Drupal 8 Custom theme folder structure

drupalcustomtheme

Minimum requirement

drupalcustomtheme-min

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

drupal-8-exampletheme

Keys (ref:-drupal.org)

The following keys provide meta-data about your theme, and define some of the basic functionality.

  • name: Fluffiness (eg:-The Example)
    Required. The human readable name will appear on the Appearance page, where you can activate your theme.
  • description:(eg:- This is sample theme for Drupal 8 :) ).
    Required. The description is also displayed on the Appearance page.
  • type: theme
    Required. The type key indicates the type of extension, e.g. module, theme or profile. For themes this should always be set to “theme”.
  • core: 8.x
    Required. The core key specifies the version of Drupal core that your theme is compatible with.
  • The libraries key can be used to add asset libraries — which can contain both CSS and JS assets — to all pages where the theme is active.
  • Regions are declared as children of the regions key. Note that region keys are not preceded by a dash. You are required to have a content region.

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

drupal-8-exampletheme

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)

 

🙂

By bm on June 13, 2016 | Drupal 8 | A comment?