AI Reading
Quick summary of this article
This guide shows how to create unique page layouts in Drupal 11 for specific pages like About, Services, and Contact—without building a custom content type. By using Twig templates and a small PHP function, you can style individual pages based on their exact titles.
- Create five standard "Basic page" nodes with exact titles: About, Services, How-We-Work, Careers, and Contact.
- Add custom Twig template files (e.g.,
page--about.html.twig) to your theme's templates folder, using a simple HTML structure with placeholders like{{ node.title }}and{{ content.body }}. - Edit your theme's
.themefile to add a function that maps each page title to its template suggestion, using underscores for spaces and dashes (e.g.,how-we-workbecomeshow_we_work). - Clear Drupal's cache via the admin interface (Configuration > Development > Performance) or by running
drush cache:rebuildto activate the new templates. - This approach is ideal for static pages needing distinct designs, keeping everything lightweight without extra content types.
How to Create Custom Page Templates for Specific Pages in Drupal Without a Content Type
Drupal’s flexible theming system allows you to load unique Twig templates for individual pages based on their titles or paths—without needing a custom content type. In this guide, you’ll learn how to create custom Twig templates for five specific pages: **About**, **Services**, **How-We-Work**, **Careers**, and **Contact**.
Step 1: Create the Pages
- Navigate to Content:
- Go to Content > Add content.
- Use the Default “Basic page” Content Type:
- Create five pages with titles exactly as follows: About, Services, How-We-Work, Careers, and Contact.
Step 2: Create Specific Templates for Each Page
- Create Twig Template Files:In your custom theme folder, create the following template files:
themes/custom/acesoftech/templates/page--about.html.twig themes/custom/acesoftech/templates/page--services.html.twig themes/custom/acesoftech/templates/page--how-we-work.html.twig themes/custom/acesoftech/templates/page--careers.html.twig themes/custom/acesoftech/templates/page--contact.html.twig - Add Template Content:Here’s an example structure you can use and customize:
<div class="custom-page-wrapper"> <header class="page-header"> <h1>{{ node.title }}</h1> </header> <main class="page-body"> {{ content.body }} </main> <footer class="page-footer"> <p>© {{ "now"|date("Y") }} Acesoftech</p> </footer> </div>Repeat this structure for each of the five templates and customize as needed.
Step 3: Alter Theme Suggestions Based on Page Title
Open your acesoftech.theme file and add this code to dynamically assign custom Twig templates based on node title:
function acesoftech_theme_suggestions_page_alter(array &$suggestions, array $variables) {
if ($node = \Drupal::routeMatch()->getParameter('node')) {
if ($node instanceof \Drupal\node\NodeInterface) {
$title = strtolower($node->getTitle());
switch ($title) {
case 'about':
$suggestions[] = 'page__about';
break;
case 'services':
$suggestions[] = 'page__services';
break;
case 'how-we-work':
$suggestions[] = 'page__how_we_work';
break;
case 'careers':
$suggestions[] = 'page__careers';
break;
case 'contact':
$suggestions[] = 'page__contact';
break;
}
}
}
}
> ⚠️ Make sure to replace spaces and dashes with underscores (`how-we-work` becomes `how_we_work`) in template file names.
Step 4: Clear Drupal Cache
For Drupal to detect your new templates:
- Via Admin UI: Go to Configuration > Development > Performance and click Clear all caches.
- Via Drush: Run the following command in terminal:
drush cache:rebuild
Conclusion
You now know how to create custom Twig templates for individual pages like “About”, “Services”, “How-We-Work”, “Careers”, and “Contact” using only their node titles—no need for a custom content type. This approach is perfect for static pages that need unique layouts, while keeping everything lightweight and simple.