Drupal

How to Create a Custom “News” Content Type and Template in Drupal 11

How to Create a Custom “News” Content Type in Drupal and Load a Separate Template

In this tutorial, we’ll walk you through creating a custom content type called “News” in Drupal 10 and applying a separate Twig template just for it. This is ideal for building a custom design or layout specifically for your news section.


Step 1: Create the “News” Content Type

  1. Go to: Structure > Content types
  2. Click: Add content type
  3. Enter the name: News
  4. Add Fields: Add fields like Body, Image, Category, etc., as per your requirements.
  5. Save the content type.

Now, go to Content > Add content and create a few news articles using this content type.


Step 2: Create a Twig Template for the “News” Content Type

Drupal loads templates based on naming conventions. To load a custom page template for all nodes of type news, create a Twig file in your theme:

themes/custom/yourtheme/templates/page--node--news.html.twig

Inside this file, you can define your custom HTML structure. Example:

<div class="news-wrapper">
  <header class="news-header">
    <h1>{{ node.title }}</h1>
  </header>

  <main class="news-body">
    {{ content.body }}
  </main>

  <footer class="news-footer">
    <p>&copy; {{ "now"|date("Y") }} Acesoftech News Desk</p>
  </footer>
</div>

This template will automatically be used for any node of content type news.


Step 3: Clear Cache to Activate Template

  • Via Admin UI: Go to Configuration > Development > Performance and click Clear all caches.
  • Via Drush: Run the following command:
    drush cache:rebuild

Optional: Load a Different Template for Specific News Articles

If you want to load a special template for an individual news article (like “Breaking News”), add this to your theme’s .theme file:

function yourtheme_theme_suggestions_page_alter(array &$suggestions, array $variables) {
  if ($node = \Drupal::routeMatch()->getParameter('node')) {
    if ($node instanceof \Drupal\node\NodeInterface) {
      if ($node->getType() == 'news') {
        $title = strtolower(str_replace(' ', '_', $node->getTitle()));
        $suggestions[] = 'page__' . $title;
      }
    }
  }
}

This will let you use:

themes/custom/yourtheme/templates/page--breaking_news.html.twig

…for a node titled “Breaking News.”


Conclusion

By creating a separate content type and Twig template for “News”, you gain full control over how your news articles are displayed. You can use this technique to build beautifully customized layouts that are completely independent of other pages on your site.

Use this approach to improve the user experience, maintain design consistency, and better organize your content in Drupal.

Leave a Reply

Your email address will not be published. Required fields are marked *