How to Override and Create a Custom Node Edit Form for Each Content Type in the Solo Theme
In the Solo theme, the default node add/edit form is rendered using the following template:
solo/templates/admin/node-edit-form.html.twigThis template is applied to all content types when creating or editing nodes. If you'd like to customize the layout globally for all node types, you can:
- Copy the template to your sub-theme:
themes/custom/your_subtheme/templates/admin/node-edit-form.html.twig - Modify the HTML structure or layout classes as needed.
Creating a Per-Content-Type Node Edit Template
If you need a custom layout or field arrangement for a specific content type such as Article, follow the steps below.
Step 1: Download the Latest Dev Version of Solo
Make sure you are using the latest development version of the Solo theme, which includes support for node_edit_form theme hook suggestions.
Step 2: Copy the Default Template
Copy the base node edit template:
solo/templates/admin/node-edit-form.html.twigRename and place it in your sub-theme using the following format:
node-edit-form--article.html.twigThis template will be used only when editing or creating Article nodes.
Step 3: Print Fields Individually
Inside your custom template, you can render individual fields manually. Here's a basic example:
{{ form.title }}
{{ form.body }}
{{ form|without('title', 'body', 'advanced', 'footer', 'actions') }}Important: Any field you render explicitly (like form.title or form.body) must be excluded from the form|without() list to prevent duplicate rendering.
Step 4: Discover Available Fields
To see all available fields in the node form, add the following to your Twig template during development:
<pre>{{ dump(form) }}</pre>This will display the full structure of the form in the HTML source, allowing you to identify field names for manual rendering.
Example Template Structure
{# node-edit-form--article.html.twig #}
{{ attach_library('solo/solo-node-edit-form') }}
<div class="layout-node-form solo-clear">
<div class="layout-region layout-region-node-main solo-padding">
{{ form.title }}
{{ form.body }}
{{ form|without('title', 'body', 'advanced', 'footer', 'actions') }}
</div>
<div class="layout-region layout-region-node-secondary solo-padding">
{{ form.advanced }}
</div>
<div class="layout-region layout-region-node-footer solo-padding">
{{ form.footer }}
{{ form.actions }}
</div>
</div>Summary
- To globally customize the node edit form, override
node-edit-form.html.twig. - To customize per content type, use
node-edit-form--[bundle].html.twig. - Render specific fields directly and exclude them from the
form|without()fallback. - Use
dump(form)to discover field names and structure during development.
This workflow gives you full control over the structure, grouping, and layout of the node edit form for each content type in your Solo-based sub-theme.
Note:
This article was created in response to Drupal.org issue #3536537, which discussed the need for per-content-type customization of the node edit form in the Solo theme. The solution documented here is now available in the latest development release of the theme.