Creating a Custom-Templated Content Type Page in Drupal 10 (Node Names: About, Services, How-We-Work)

Drupal allows you to create custom content types and assign custom templates to render pages based on that content type. In this tutorial, we’ll show you how to create a custom templated page for a content type, specifically for the nodes with names “About,” “Services,” and “How-We-Work.”

We’ll break down the process into clear steps, from defining the content type to customizing the Twig templates for each specific node. This will give you full control over the appearance of these pages and ensure they are styled and structured as you require.

Step 1: Create a Custom Content Type

Before we create the custom templates, you need to create a custom content type, like “About,” “Services,” and “How-We-Work.” Here’s how you do it:

1. Navigate to the Content Types Configuration:
   • Go to Structure > Content types in the Drupal admin interface.
2. Create a New Content Type:
   • Click on Add content type and create a content type, for example, Custom Page.
   • Name it as needed, such as “About”, “Services”, or “How-We-Work”. Define the fields (e.g., body text, image, etc.) as per your requirements.
3. Manage Content:
   • After creating the content type, go to Content > Add content to create the nodes for “About,” “Services,” and “How-We-Work.”

Step 2: Create Custom Templates for Content Types

In Drupal, you can define templates for specific content types by naming the templates accordingly. We’ll create a template for the Custom Page content type that will apply to specific nodes based on their title.

1. Create the page--[content-type].html.twig Template:To create a custom template for the content type, create a new file called page--custom-page.html.twig. This template will apply to any node of type Custom Page (which you can rename to fit your needs, such as about, services, or how-we-work).Example:
   themes/custom/acesoftech/templates/page--custom-page.html.twig

2. Add the Basic Structure:Here’s an example of a template that will structure the content and display the page with a custom header and footer:
   twig

   <div class="page-wrapper">
<header>
<h1>{{ node.title }}</h1>
</header><main role=”main”>
   <div class=”content-area”>
   {{ content.body }}
   </div>
   </main><footer>
   <p>&copy; {{ “now”|date(“Y”) }} Acesoftech</p>
   </footer>
   </div>

   • node.title: Renders the title of the node.
   • content.body: Renders the body field content for the node (you can adjust this depending on the fields you’ve created).

Step 3: Create Specific Templates for Each Node

While you can use a general content type template like page--custom-page.html.twig, if you want to create specific templates for nodes like “About,” “Services,” and “How-We-Work,” you can create a template for each node individually based on the node’s title or path alias.

1. Create Template for “About” Page:Create a template for the “About” page:
   themes/custom/acesoftech/templates/page--about.html.twig

2. Add the Custom Structure for the “About” Page:Inside the page--about.html.twig, you can structure the page as you like. For example:
   twig

   <div class="about-wrapper">
<header class="about-header">
<h1>{{ node.title }}</h1>
</header><section class=”about-content”>
   <p>{{ content.body }}</p>
   </section><footer class=”about-footer”>
   <p>Learn more about us at Acesoftech.</p>
   </footer>
   </div>

3. Create Template for “Services” Page:Similarly, create a template for the “Services” page:
   themes/custom/acesoftech/templates/page--services.html.twig

4. Add the Custom Structure for the “Services” Page:Example template for the Services page:
   twig

   <div class="services-wrapper">
<header class="services-header">
<h1>{{ node.title }}</h1>
</header><section class=”services-content”>
   <p>{{ content.body }}</p>
   </section><footer class=”services-footer”>
   <p>Our services include web development, digital marketing, and more.</p>
   </footer>
   </div>

5. Create Template for “How-We-Work” Page:Finally, create a template for the “How-We-Work” page:
   themes/custom/acesoftech/templates/page--how-we-work.html.twig

6. Add the Custom Structure for the “How-We-Work” Page:Example template for the How-We-Work page:
   twig

   <div class="how-we-work-wrapper">
<header class="how-we-work-header">
<h1>{{ node.title }}</h1>
</header><section class=”how-we-work-content”>
   <p>{{ content.body }}</p>
   </section><footer class=”how-we-work-footer”>
   <p>Learn about our process and how we deliver quality results.</p>
   </footer>
   </div>

Step 4: Clear Cache to Apply Changes

After creating your custom templates, you will need to clear the cache to ensure the templates are applied to your content. You can do this via the Drupal admin interface or using Drush (if you have it installed).

• Drupal Admin Interface:
  • Go to Configuration > Development > Performance.
  • Click Clear all caches.
• Drush:
  drush cache:rebuild


Step 5: Assign Blocks and Add Content

Now that the templates are in place:

1. Add Blocks:
   • If you want to display additional content in your header or footer, go to Structure > Block Layout and add blocks to the header or footer regions.
2. Create Content:
   • Go to Content > Add content, select the content type (e.g., About, Services, or How-We-Work), and create your pages.

And Finally in your acesoftech.theme you need to ad this code

function acesoftech_theme_suggestions_page_alter(array &$suggestions, array $variables) {
if ($node = \Drupal::routeMatch()->getParameter(‘node’)) {
if ($node instanceof \Drupal\node\NodeInterface) {
if ($node->getType() == ‘page’) {
if ($node->getTitle() == ‘About’) {
$suggestions[] = ‘page__about’;
}
}
}
}
}

Conclusion

By following these steps, you’ve learned how to create custom-templated content type pages for nodes like “About,” “Services,” and “How-We-Work” in Drupal 10. You’ve also seen how to leverage Drupal’s Twig templating system to customize each page individually, based on its node title or alias. This allows for maximum flexibility in designing your site, while also keeping the content modular and easy to manage.

Now you can apply different templates and layouts to each page, ensuring your site has the custom look and feel it needs. If you need to make further adjustments, simply edit the relevant Twig templates or adjust the content in the Drupal admin interface.