How to add in Drupal 8 a custom (suggestion) page template based on content types : page--(content type name).html.twig?

This was exactly the thing I was looking for. Copy paste and it worked. Thank you

Thank you!

Thanks a lot

I use a different method, however the main difference with my code is that I use array_splice to place the suggestion one above page--node, this preserves the capability to override with page--node--% and page--node--[id]. Your suggestion will always take precedence because you have pushed it onto the array.

If I put them both in you can see this in the suggestions list:

1. page--node
2. page--node--page (my method)
3. page--node--%
4. page--node--24
5. page--page (your method)

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__' . $node->getType());
  }
}

It works perfectly! Thank you!

Thank you!

Thank you!

Hi everyone, I'm new with drupal 8 and i would like to know how to overridinde node--(type).html.twig.

whene im using the Available variables like:

{{ label }} or {{ content.field_example }} i have an additional html conent that i dont need, i juste want the value.

someone could help me please.

thanks!

Though I'm new to drupal, I couldn't get this to work. Is there anything I'm doing wrong?

Though I spent time trying to figure it out. My major mistake was I was saving it as theme_name.theme.php (initially as theme_name.theme.inc). Thanks all d same

+1 from me. It works like a charm.

when i'm using this method, somehow the page doesn't load javascript from core

This is my first time messing with templates in general, and based on the comments above it's probably me doing something wrong.

First I created a content type. "adventures" the I created a template for it. "page--adventures.html.twig". After creating both I added the following to my .theme file:

/**
* Implements hook_theme_suggestions_HOOK_alter().
*/
function bootstrap_subtheme_theme_suggestions_page_alter(array &$suggestions, array $variables) {

if ($node = \Drupal::routeMatch()->getParameter('adventures')) {
$content_type = $node->bundle();
$suggestions[] = 'page__adventures'.$content_type;
}
}

Nothing seems to change. The content type still used the original template. Any suggestions? Thanks in advance! It's been driving me insane.

I noticed that in 8.3 the node id and revision id are both strings if you're viewing a revision. In order to get the full entity so I could get the bundle value I needed. This was how the code evolved. I'm sure there are better ways but this got me there.

  $node     = \Drupal::routeMatch()->getParameter('node');
  $revision = \Drupal::routeMatch()->getRawParameter('node_revision');


  //revision IDs are strings and node ids are strings when a revision is loaded.
  //node parameters loaded by getParameter are objects and the bundle can be accessed normally.
  if ($node) {
    if ($revision) {
      $revised_node = \Drupal::entityTypeManager()
                             ->getStorage('node')
                             ->loadRevision($revision);

      $content_type = $revised_node->bundle();
    }
    else {
      $content_type = $node->bundle();
    }

    $suggestions[] = 'page__' . $content_type;
  }

Hi, i am new to drupal8.
I am wondering that how to add node edit form template.

It works great.

Thanks!

In what file should I add the code? and should the functions be called somewhere?

I have an
THEME_NAME.theme.yml
THEME_NAME.module

??

// Thomas

And I want to add below twig templates based on content type, How to ?

1. html.twig
2. html--article.html.twig
3. html--blog.html.twig
...

Dear all, I am newer to drupal and doing my first website.
I enabled twig debug but its not showing correct page suggestions for basic pages.
It is showing page suggestions with page title for my event page.(I used views to create this page)

But its showing page suggestions without title for services page (its a basic page)

Any one can help me?

I can't seem to get it to work.  I'm using

function mytheme_theme_suggestions_block_alter(array &$suggestions, array $variables) {
        $suggestions[] = 'wide_grid_block';
}

and wide_grid_block.html.twig exists in the templates folder and even appears in the list of suggested files in debug but it's not used. 

Hi, I have used this above code for Implements hook_theme_suggestions_HOOK_alter(). After that I was trying to add the field value through twig like {content.field_product_price} on the page--mypage.html.twig, its not giving the output. Please advise me how to get the custom field value. Even I have added another field(type is image/file) i.e. field_prod_image, then How will I get the image link ???

Thanks inadvance :-)

Hi, similar approach but I need it for a custom form that is build in a custom module. There's no content-type created just a multi-step form in a custom module. I need to make a custom twig template for the form and the fields. How can I do that?

My custom module name is: nemo and custom theme name is: nemo_theme

Thanks.

function hook_theme_suggestions_HOOK_alter(array &$suggestions, array $variables)
{
    $node = \Drupal::request()->get('node_preview') ?: \Drupal::request()->get('node');
    if (!empty($node)) {
        $suggestions[] = 'page__' . $node->getType();
    }
}

I came across this issue recently, and upon doing some digging, found another solution, thanks to BeFused at this link:

/**
 * Implements hook_theme_suggestions_page_alter().
 */
function example_theme_suggestions_page_alter(array &$suggestions, array $variables) {
  if ($node = \Drupal::routeMatch()->getParameter('node')) {
    $suggestions[] = 'page__' . $node->bundle();
  }
}

Is there any way to create a theme suggestion for page.html.twig for custom view modes?

/**
 * Implements hook_theme_suggestions_HOOK_alter().
 */
function THEME_NAME_theme_suggestions_page_alter(array &$suggestions, array $variables) {

  if ($node = \Drupal::routeMatch()->getParameter('node')) {
    $content_type = $node->bundle();
    $view_mode = $node->view_mode()  ##<-- how do you get view_mode here??
    $suggestions[] = 'page__' . $content_type . '__' . $view_mode;
  }
}

function sphynx_theme_suggestions_node_alter(array &$suggestions, array $variables) {

$suggestions[] = 'node__helloo';

}

twig template name will be node--helloo.html.twig