By Eduard Pochtar


2014-12-21 07:20:36 8 Comments

Is there any way to make a custom page.html.twig template in Drupal 8?

By default, Drupal generates some suggestions, but I'm looking for something like page--node--content-type.html.twig.

5 comments

@Mattias Axelsson 2016-01-11 00:55:59

This code from Jeff Burnz (https://www.drupal.org/node/2521876#comment-10684366) solved it for me. It also places the suggestion above page--node so the capability to override with page--node--% and page--node--[id] remains.

<?php
function THEME_NAME_theme_suggestions_page_alter(array &$suggestions, array $variables) {
  // Add content type suggestions.
  if ($node = \Drupal::request()->attributes->get('node')) {
    array_splice($suggestions, 1, 0, 'page__' . $node->getType());
  }
}
?>

@Jeff Burnz 2016-01-26 00:53:37

\Drupal::request()->attributes->get('node') and \Drupal::routeMatch()->getParameter('node') both return the node object, I'm not sure if one is quicker or more recommended than the other.

@Jeff Burnz 2016-01-26 02:00:07

And heres the answer: drupal.org/node/2295317 reading the patch all requests for the node object were converted to routeMatch :)

@Berdir 2014-12-21 22:01:24

You are looking for hook_theme_suggestions_HOOK_alter().

HOOK is the name of the template, in your case, page. You should be able to add the following to your theme in the .theme file.

In there, do something like this:

function yourtheme_theme_suggestions_page_alter(array &$suggestions, array $variables) {
  if ($node = \Drupal::routeMatch()->getParameter('node')) {
    $suggestions[] = 'page__node__' . $node->getType();
  }
}

@Eduard Pochtar 2014-12-23 21:06:25

i'm sorry but didn't work.

@Eduard Pochtar 2014-12-24 08:12:43

i have found one solution (workaround) may be not the best but at list it works. if i add these lines "if ($node = \Drupal::routeMatch()->getParameter('node')) { $suggestions[] = $prefix . $delimiter . $node->getType(); }" to core theme.inc file in 'theme_get_suggestions' than it will work and even generates comments on debug mode! how can i add to theme file to make it work.

@Berdir 2014-12-27 15:56:02

I noticed that I didn't change HOOK to page in my example, if you didn't change that then that would explain why it didn't work. If you did, post your code, otherwise we can't help.

@Cottser 2015-02-21 01:45:21

hook_theme_suggestions_HOOK() is not invoked for themes: "This hook allows the module implementing hook_theme() for a theme hook to provide alternative theme function or template name suggestions. This hook is only invoked for the first module implementing hook_theme() for a theme hook." Other than that, fantastic answer. I made the necessary edits.

@Berdir 2015-02-21 09:52:06

@Cottser: You are half-correct :) It is not called for themes, correct (which IMHO is a bug, like a few other hooks that themes should be able to implement), but it is called for a all modules: github.com/drupal/drupal/blob/8.0.x/core/lib/Drupal/Core/The‌​me/…, thats a normal hook invocation, for all modules. So the documentation is wrong. But thanks for the edit!

@Cottser 2015-02-21 14:08:48

@Berdir: Oh you're right, it's been too long. drupal.org/node/1751194#comment-7778323 I'll open an issue to fix the docs.

@Cottser 2015-02-21 14:14:33

I missed the comment edit window :( docs issue: drupal.org/node/2430909

@Baud 2016-07-16 11:29:25

Worked for me, and I have to say that this function is called from my theme

@Axel Briche 2014-12-21 19:25:57

Your file name is bad, rename page.htm.twig to page.html.twig

After for clear your cache during page refresh, enable an use settings.local.php file inside your installation, on linux by example, copy and rename the example file to the good location with this command:

cp /sites/example.settings.local.php /sites/default/settings.local.php

Uncomment this lines inside your settings.php :

 if (file_exists(__DIR__ . '/settings.local.php')) {
     include __DIR__ . '/settings.local.php';
 }

And inside /sites/default/services.yml use this value:

debug: true

Inside settings.local.php, uncomment this line :

$settings['cache']['bins']['render'] = 'cache.backend.null';

Because Drupal say

Do not use this setting until after the site is installed.

Now, your environment is ready, you can create theme and modules, but if you add a template file, you need to clear the cache manually :)

Note: don't use this configuration in production (bad performances for user/server).

@kiamlaluno 2014-12-27 17:57:06

The OP wants to use page--node--[content-type].html.twig instead of page.html-twig Drupal 8 uses.

@Cottser 2015-02-21 01:38:59

Regarding the Twig settings in services.yml, auto_reload is already enabled when you enable debug, and I have yet to see any value in disabling the Twig cache. Disabling the Twig cache makes it harder to debug compiled templates and I have not seen any benefits so far in enabling it. I would say the vast majority of folks will do great by only enabling debug.

@rpayanm 2015-02-18 17:56:38

It's like:

  • node--[content-type].html.twig ex: node--article.html.twig
  • node--[content-type]--[display-format].html.twig, ex: node--article--full.html.twig

Here the screenshot of template suggestion:

enter image description here

@Eduard Pochtar 2015-03-22 19:11:14

it's not a page.html.twig template.

@Alexei Rayu 2016-01-23 15:53:26

The question was about page templates.

@Yusef Mohamadi 2014-12-21 08:28:39

it is ok ,according to drupal 8 theme api the template file for page is page.html.twig, may be you did not clear cache.

@kiamlaluno 2014-12-21 11:11:33

The OP wants to create a custom template file for a page basing on the content type of the node being shown. The question is not "Why isn't Drupal 8 using page.html.twig?"

@Eduard Pochtar 2014-12-21 16:51:46

drupal 8 default suggestions are: * page--node--2.html.twig * page--node--%.html.twig * page--node.html.twig * page.html.twig but i would like to make custom page.html.twig for example page--node--article.html.twig where article is content(node) type name. if i just add this file to my theme it won't work. this page--node--article.html.twig or this page--article.html.twig doesn't work.

Related Questions

Sponsored Content

3 Answered Questions

[SOLVED] Adding template suggestion for twig based on page and content type

  • 2018-12-20 11:31:01
  • webmaster pf
  • 341 View
  • 0 Score
  • 3 Answer
  • Tags:   8 theming

1 Answered Questions

Preview template for node with custom template?

  • 2018-08-07 19:23:37
  • JOakland
  • 310 View
  • 1 Score
  • 1 Answer
  • Tags:   8 theming

2 Answered Questions

[SOLVED] Page template for custom form

  • 2013-03-30 06:44:15
  • LWal
  • 2897 View
  • 0 Score
  • 2 Answer
  • Tags:   7 theming

1 Answered Questions

[SOLVED] Use custom module template for content type page?

  • 2016-10-12 19:07:29
  • Joren
  • 754 View
  • 1 Score
  • 1 Answer
  • Tags:   7 theming

1 Answered Questions

[SOLVED] Include a part template on specific node page

  • 2016-04-19 00:56:15
  • barrakuda
  • 162 View
  • 0 Score
  • 1 Answer
  • Tags:   theming 8

3 Answered Questions

[SOLVED] Custom page template for specific node - template inheritance

  • 2014-11-11 03:00:32
  • barrakuda
  • 4332 View
  • 1 Score
  • 3 Answer
  • Tags:   7 theming nodes

2 Answered Questions

[SOLVED] Display content type through custom template

  • 2013-10-06 09:20:45
  • Potney Switters
  • 700 View
  • 0 Score
  • 2 Answer
  • Tags:   theming hooks nodes

2 Answered Questions

[SOLVED] making a custom page template

  • 2012-12-17 07:02:13
  • jsalita
  • 10115 View
  • 1 Score
  • 2 Answer
  • Tags:   theming 7

1 Answered Questions

[SOLVED] How to create a custom content-type with template for an "empty" page

  • 2011-11-28 12:30:24
  • Whiskey
  • 572 View
  • 1 Score
  • 1 Answer
  • Tags:   7 theming

Sponsored Content