How to create theme from scratch in Drupal

This comprehensive guide walks you through creating a custom Drupal theme from scratch, tailored for a property agency. You’ll learn how to turn static HTML into a dynamic, Drupal-powered design that seamlessly integrates headers, footers, main content, navigation, and responsive layouts. The tutorial covers content types, taxonomies, views, blocks, regions, templates, and page design, with practical steps for module generation, content management, and live site styling.

• Project Vision: A Dynamic Property Agency Layout
  • Goal: Convert an existing HTML layout into a Drupal theme that supports dynamic content across headers, footers, and main sections.
  • Key elements: Navigation menus linked to pages, responsive design, and dynamic content blocks.
  • Content strategy: Use Drupal content types and taxonomy to manage sliders, properties, and related content, enabling easy updates and reusability.
• Setting Up Core Content Types and Taxonomies
  • Create essential content types.
  • Slider: For homepage or hero content with fields like image, caption, and call-to-action.
  • Property: Core content type with fields for location, price, total flat space, number of rooms, floor number, and images.
  • Add fields that define your data model:
    • Examples: total_flat_space (numeric), floor_number (integer), number_of_rooms (integer), location (text), price (decimal).
  • Establish taxonomies:
    • Categories to organize properties (e.g., Residential, Commercial, Luxury).
  • Tags for features (e.g., garden, balcony, garage) to enable faceted browsing and filtering.
  • Content creation workflow:
    • Create new property entries, attach relevant images, and assign taxonomy terms for efficient organization and display.
• Generating and Structuring the Theme
  • Theme scaffolding:
    • Use Drupal’s theme generation commands to set up the basic structure, including core templates, styles, and a starter configuration.
    • Name the theme and initialize the basic directory layout (templates, CSS, JS, config).
  • Theme assets management:
    • Organize CSS and JavaScript files for maintainability.
    • Add icons and titles to establish a clear theme structure during early development.
  • Practical tips:
    • Keep the initial structure lean, then progressively add components (regions, templates, and dynamic templates) as you implement features.
• Defining Regions and Page Layout
  • Regions you’ll typically define:
    • Header region: Site header with logo, navigation, and primary search.
    • Hero/Slider region: A prominent area for property or brand sliders.
    • Content region: Main content area for pages, views, and blocks.
    • Sidebar region (optional): For filters, quick facts, or additional navigation.
    • Footer region: Contact info, social links, and legal notices.
  • Template layering:
    • Create page templates (page.html.twig) to control the overall layout.
    • Build region-specific templates (region — header.html.twig, region — footer.html.twig) for consistent structure.
  • Content sections:
    • Featured sections and video sections can be defined as custom blocks or views regions to improve user engagement.
  • Asset inclusion:
    • Include necessary JavaScript and CSS files to support interactive features and responsive behavior.
• Organizing and Optimizing CSS/Components
  • Project cleanup:
    • Remove unused folders and files to simplify the workspace.
    • Ensure CSS and JS assets are correctly referenced in your theme’s libraries.yml.
  • Dynamic templates:
    • Create reusable templates for blocks, views, and content types.
    • Use twig templates with loops and conditionals to render dynamic content.
  • Best practices:
    • Keep CSS modular (components, layout, typography).
    • Use Drupal’s attach/detach patterns for adding assets to specific pages or blocks.
• Implementing a Slider with Custom Module and Views
  • Slider integration workflow:
    • Create a custom module to encapsulate the slider functionality.
    • Build a View to fetch slider content and expose it as a block or page view.
    • Design a template for slider markup (e.g., an HTML structure with slides, captions, and navigation).
  • Dynamic content and templates:
    • Copy the HTML structure into a Twig template and replace static content with dynamic fields.
    • Use Loops to render multiple slides and ensure responsive behavior.
  • Linking to content:
    • Ensure slides can link to relevant property pages or other sections of the site via Drupal paths.
• Creating and Styling Blocks, Static Blocks, and Navigation
  • Static blocks:
    • Create reusable blocks for feature sections (e.g., testimonials, quick contact).
    • Render blocks in specific regions or pages as needed.
  • Navigation and menus:
    • Build primary and secondary menus in Drupal, linking to pages like Home, Properties, About, Contact.
    • Ensure menus are responsive and accessible, with clear ARIA attributes.
  • Iconography and branding:
    • Integrate icons and titles to aid navigation and visual hierarchy.
    • Use scalable icons (SVG) for crisp rendering on all devices.
• Designing a “Best Deals” Custom View and Plugin
  • Custom view:
    • Create a view named “Best Deals” with filters (e.g., price range, location, number of rooms) and fields (image, title, room count).
    • Add contextual filters or exposed filters to enable user customization.
  • Data fields:
    • Include images, room numbers, availability, and related metadata.
  • Plugin integration:
    • Develop a custom plugin to embed the view into the site as a cohesive component (e.g., a block or page component) and to handle any display logic that the view alone cannot cover.
  • UX considerations:
    • Ensure filters are intuitive and the results update smoothly (consider AJAX-based filtering for better UX).
• Template Design and Dynamic Content Rendering
  • HTML-to-template workflow:
    • Copy relevant HTML sections into Twig templates and convert static content into dynamic fields (e.g., property titles, images, prices).
  • Replacing static with dynamic:
    • Replace hard-coded text and assets with Drupal fields (title, image fields, price, location).
  • Data retrieval with loops:
    • Use Twig loops to render multiple items (e.g., property lists, gallery slides) from a data source (views or custom queries).
  • Debugging and refinement:
    • Clear static content, test dynamic rendering, and iterate on markup to ensure clean output.
• Working with Data in Code: Loops, Values, and Templates
  • For-each loops:
    • Use for-each loops to traverse data arrays (e.g., image galleries, feature lists) and render them safely.
  • Data handling:
    • Dump and inspect data during development to verify structure and values.
    • Create variables and fields to organize data access in templates and module files.
  • Field types and rendering:
    • Understand how various field types render in templates; adjust templates to accommodate different field outputs.
• Field Values, Templates, and Dynamic Rendering
  • Loading and passing values:
    • Copy field values into template variables and pass them to render arrays.
  • Template updates:
    • Update templates after loading values to reflect dynamic data in the UI.
  • Rendering multiple elements:
    • Use loops to render collections (slides, properties, features) efficiently and consistently.
• Dynamic Content: Updating Attributes and Paths
  • Dynamic value management:
    • Retrieve and print values such as floor number, total space, and availability.
  • Class and ID consistency:
    • Use stable class names and IDs to ensure CSS and JS selectors operate reliably.
  • Troubleshooting paths:
    • Address image paths and dynamic sections to ensure assets load correctly.
• Troubleshooting, Image Handling, and Page Design Refinements
  • Image loading issues:
    • Diagnose and fix broken images or incorrect paths; reload the page to verify changes.
  • Terminology and data integrity:
    • Adjust term names or taxonomy terms to fix display issues and improve clarity.
  • Expanding sections:
    • Add templates for new sections while keeping content dynamic and reusable.
• Layout Manipulation and Content Organization
  • Structured HTML layout:
    • Define categories, titles, and fields within HTML to keep content organized.
  • Price fields and content types:
    • Add fields for pricing; ensure data is captured in the appropriate content types.
  • Rendering consistency:
    • Troubleshoot rendering issues to maintain a polished design across devices.
• Images, Content Blocks, and Contact Section
  • Image handling and blocks:
    • Integrate images within content blocks with proper CSS classes for layout.
  • Content type reliability:
    • Verify that all required fields exist and render correctly in templates.
  • Contact section:
    • Design a dedicated contact area with a clean layout and, if desired, a form block for user inquiries.
• Customizing a Contact Form and Footer Imagery
  • Contact form customization:
    • Adjust fields, validation, and submission behavior using a block/module approach.
  • Footer imagery:
    • Upload and reference images for the footer to enhance visual appeal.
  • Asset inspection:
    • Use browser tooling to verify asset loading and path correctness.
• Properties Page and Detail Blocks
  • Properties page layout:
    • Focus on the properties section in the overall layout, ensuring a cohesive flow.
  • Detail pages:
    • Create a properties details page with a structured layout for images, specs, and features.
  • Navigation integration:
    • Link property detail pages from the homepage and main navigation for seamless browsing.
• Refresh, Render, and Navigation Linking
  • Block rendering:
    • Ensure homepage blocks and property detail blocks render correctly on both home and detail pages.
  • Block layout management:
    • Fine-tune block placements and visibility to optimize user experience.
  • Navigation connectivity:
    • Link property detail pages to navigation menus to improve accessibility and site flow.

This guide outlines a practical, end-to-end approach to building a Drupal 10 theme from scratch for a property agency. By creating purposeful content types, taxonomies, and views; defining robust regions and templates; and integrating dynamic sliders, best deals sections, and property detail pages, you can deliver a responsive, maintainable, and scalable site. The workflow emphasizes converting static HTML into Drupal templates, managing assets effectively, and ensuring a cohesive, user-friendly experience across devices.