You have a ready design, but integration with October CMS turns into a headache: N+1 queries when displaying records, hydration mismatch when using Vue.js, bloated CSS without tree-shaking. Every second of loading costs money — the first 3 seconds of LCP determine whether the user stays. We develop custom October CMS themes turnkey, solving these problems at the architecture level. 5+ years of experience and 30+ projects in the portfolio are not just numbers, but proven patterns for typical tasks: from blogs to corporate portals. Investment in a custom theme pays off within the first year by reducing server load and decreasing loading time. Our clients save up to 40% on revisions in the first year. Contact us for a consultation on your project.
What problems does a custom October CMS theme solve?
A custom theme eliminates N+1 queries, bloated CSS and JS, and caching issues. We optimize Core Web Vitals: LCP, CLS, INP. The result is 30–50% faster loading than ready-made themes. Additionally, proper Twig caching reduces server response time by 200–400 ms.
How is Vite integrated with October CMS?
Frontend build via Vite provides hot reload, minification, and automatic tree-shaking. The vite-plugin-october-cms-theme plugin integrates directly with the template system, accelerating development by 2–3 times compared to manual builds. Changes appear instantly via HMR, and final files receive hashes for cache invalidation. Compare: without Vite, a rebuild takes 10–15 seconds; with it, less than a second. Time savings on each development cycle is 80–90%, directly impacting the project budget.
npm install vite laravel-vite-plugin What is included in custom theme development?
Custom theme development includes:
- Analysis of the design layout and preparation of the structure
- Creating theme.yaml with form fields for the editor
- Layout of layouts, pages, partials (pixel-perfect, responsive)
- Integration of components (blog, products, forms)
- Build via Vite with HMR, minification, and hashing
- Testing on desktop and mobile (LCP, CLS, INP check)
- Documentation on theme structure and training on component usage
- 1-month warranty support
Cost is calculated individually based on project complexity.
What is inside a custom theme?
A typical custom theme structure for October CMS includes:
- theme.yaml — metadata and form fields
- layouts/ — base templates (default.htm, minimal.htm)
- pages/ — site pages (index, about, blog)
- partials/ — reusable blocks (header, footer, nav, blog/)
- assets/ — styles, scripts, images
# theme.yaml name: My Theme description: Corporate theme for My Site author: My Company homepage: https://mycompany.com code: mytheme form: fields: primary_color: label: Primary Color type: colorpicker default: '#1a56db' logo: label: Site Logo type: mediafinder mode: image Fields from theme.yaml are accessible in the template via this.theme. This allows changing colors, logo, and other parameters without code edits — the editor can customize the appearance independently.
Layout and pages: how it works
The base layout loads styles and scripts, sets meta tags. Fields from this.page are used for unique title, description, and H1. October CMS components, such as blogPosts, automatically fetch records with pagination and caching.
description = "Default Layout" == <!DOCTYPE html> <html lang="{{ this.site.locale ?? 'ru' }}"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title> {% if this.page.meta_title %} {{ this.page.meta_title }} | {{ this.site.name }} {% else %} {{ this.page.title }} | {{ this.site.name }} {% endif %} </title> <meta name="description" content="{{ this.page.meta_description }}"> {% styles %} <link rel="stylesheet" href="{{ 'assets/css/app.css' | theme }}"> </head> <body class="{{ this.page.layout_class }}"> {% partial 'header' %} <main id="main"> {% page %} </main> {% partial 'footer' %} {% scripts %} <script src="{{ 'assets/js/app.js' | theme }}" defer></script> </body> </html> Page with components: blog in 10 minutes
title = "Blog" url = "/blog/:page?" layout = "default" is_hidden = 0 [blogPosts] postsPerPage = 12 sortOrder = "published_at desc" [blogCategories] slug = "{{ :slug }}" == {% set currentPage = this.param.page ?? 1 %} <section class="blog-header"> <h1>{{ this.page.title }}</h1> </section> <section class="blog-content"> <div class="posts-grid"> {% for post in blogPosts %} {% partial 'blog/post-card' post=post %} {% endfor %} </div> <aside class="sidebar"> <h3>Categories</h3> <ul> {% for cat in blogCategories %} <li><a href="{{ cat.url }}">{{ cat.name }} ({{ cat.posts_count }})</a></li> {% endfor %} </ul> </aside> </section> Why a custom theme is faster than a ready-made one?
Ready-made themes often contain excessive code, dead CSS and JS, which slows down loading. A custom theme lacks this: we include only necessary styles and scripts, use tree-shaking, and optimize images. As a result, pages load 30–50% faster.
Build tool comparison: Vite vs Webpack
| Criteria | Vite | Webpack |
|---|---|---|
| Cold start time | < 1 s | 5–10 s |
| Hot module replacement | Instant | 1–3 s delay |
| Tree-shaking | Automatic | Requires configuration |
| Minification | Built-in via esbuild | Via Terser |
| Configuration | Minimal | Complex |
Vite wins in speed and simplicity. We use it by default in our projects, reducing build time by 70%.
Typical mistakes when building on your own
- Ignoring Twig caching — page loads 200–400 ms slower.
- Missing partials for reusable blocks — code duplication and N+1 queries.
- Hand-made build instead of Vite — lengthy development, no tree-shaking.
Our process
- Analysis of the design layout — evaluate complexity, prepare estimate and timeline.
- Create theme.yaml and structure — define form fields, routes.
- Layout layouts, pages, partials — pixel-perfect, responsive.
- Integrate components — configure blog, products, forms.
- Build via Vite — HMR, minification, hashing.
- Test on desktop/mobile — check LCP, CLS, INP.
- Handoff and training — documentation, editor setup.
We use the current version of October CMS and stay updated with releases. Contact us for a consultation on your project. Order a custom theme development with a guaranteed result.