What’s included

A map of everything inside the vara-saas folder, so you know what you downloaded and where things live.

Top-level PHP templates

File	Renders	Used when
`functions.php`	No output — theme setup, assets, features	Always
`header.php`	Document head, `<body>`, site header, opens `<main>`	Most pages
`footer.php`	Closes `<main>`, site footer, `wp_footer()`	Most pages
`front-page.php`	Your homepage — blog mode, builder mode, or default sections	The front page
`home.php`	Blog index — hero, featured post, card grid, pagination	The posts page
`single.php`	A single post — byline, table of contents, tags, related posts, comments	Single posts
`page.php`	A static page, with optional breadcrumbs and sidebar	Static pages
`archive.php`	Category, tag, author, and date archives	Archives
`search.php`	Search results	Search
`404.php`	Not-found page with a search form	Missing URLs
`index.php`	Minimal fallback	When nothing else matches
`comments.php`	Comment list and comment form	When comments are open
`searchform.php`	Styled search form	Everywhere WordPress calls `get_search_form()`
`sidebar.php`	The sidebar wrapper and its widgets	Sidebar layouts
`template-page-builder.php`	Bare full-width content canvas	Pages assigned to it
`style.css`	Theme header and the light-mode CSS token definitions	Always
`theme.json`	Block editor palette, fonts, sizes, and content width	Block editor
`rtl.css`	Right-to-left overrides for Arabic and Hebrew	RTL locales
`screenshot.png`	The theme preview image on WordPress.org	—

style.css is not your stylesheet. In this theme it mainly hosts the design token definitions under :root. The real component styles live in assets/css/screen.css. This is a deliberate arrangement — see How the theme works.

`template-parts/` — reusable components

Structure

File	Purpose
`head.php`	Doctype, `<head>`, font preloads, and an inline script that prevents a flash of the wrong colour theme
`header-nav.php`	The standalone site header — logo, menu, theme toggle, CTA buttons
`footer-widgets.php`	Footer grid with brand, contact, social icons, copyright, and link columns

Blog

File	Purpose
`blog-hero.php`	Blog hero with title, subtitle, search form, and category pills
`content-blog-card.php`	Standard post card
`content-blog-featured.php`	Large two-column featured card
`content-aside.php`	Compact card for posts using the aside format

Default front-page sections

These render only when your homepage is not built with a page builder.

File	Section
`section-hero.php`	Hero with overline, headline, two CTAs, and a stat card
`section-features.php`	Four feature cards
`section-testimonials.php`	Testimonial cards
`section-pricing.php`	Pricing tiers
`section-cta.php`	Closing call to action
`section-blog-preview.php`	Your three most recent posts

`inc/` — theme logic

customizer.php

The entire Customizer registration: one panel, seven sections, around sixty settings, three custom control classes (a stepper, a toggle, and a social icon picker), and eight sanitizer callbacks.

elementor-setup.php

Elementor integration — brand colors and typography written into the Elementor Kit, a programmatic homepage layout builder, and Elementor cache management.

plugins.php

The setup wizard page, the plugin install and demo import AJAX endpoints, detection of required plugins, and the lifecycle management for theme-created pages and menus.

demo-import.php

Reads the bundled Elementor JSON files and applies them to pages. Deliberately small — the admin interface for this lives in plugins.php.

`assets/` — front-end files

Stylesheets

File	Size	Loaded on
`css/screen.css`	~61 KB	Every page — the main component styles
`css/single-blog.css`	~47 KB	Singular views only
`css/blog-index.css`	~15 KB	Blog home, archives, search only
`css/portfolio-and-theme.css`	~20 KB	Every page
`css/dynamic-vars.css`	Small	Every page — carries logo width rules
`css/local-fonts.css`	Small	Every page — self-hosted fonts
`css/editor-style.css`	Small	Block editor only
`css/customizer.css`	Small	Customizer preview and control panels

JavaScript

File	Purpose
`js/main.js`	Navigation — nested dropdowns, viewport-edge flipping, overflow detection, keyboard and outside-click close
`js/theme-toggle.js`	Light/dark mode with persistence
`js/animations.js`	Scroll-to-top button and conic-gradient border effects
`js/single-toc.js`	Table-of-contents active-heading highlighting, offset for the admin bar
`js/customizer.js`	Live preview updates inside the Customizer
`js/customizer-controls.js`	Stepper and social icon control behaviour

Fonts

fonts/inter/inter-latin.woff2 — self-hosted
fonts/jetbrains-mono/jetbrains-mono-latin.woff2 — self-hosted
fonts/fontawesome/ — Font Awesome 6.5.1, including five webfont families

No file in assets/fonts/ is fetched from a third party. The theme makes zero external requests by default. See Performance.

`elementor-templates/` — demo layouts

Raw Elementor page documents used by the one-click demo import.

File	Target page	Approx. size
`home.json`	Home	~83 KB
`about.json`	About	~29 KB
`services.json`	Services	~40 KB
`contact.json`	Contact	~12 KB

These are not registered in Elementor’s own template library. They are read directly and written into the target page’s Elementor data during import. See Demo pages.

`languages/`

File	Contents
`vara-saas.pot`	Translation template — currently incomplete
`ar.po` / `ar.mo`	Arabic translation source and compiled catalogue

The bundled .pot contains only a small fraction of the theme’s translatable strings. It is regenerated periodically and is not a complete catalogue. If you are translating the theme professionally, regenerate it first with wp i18n make-pot . languages/vara-saas.pot.

Development files (not needed at runtime)

These are in the download but you will not need them.

Item	Purpose
`composer.json`	Declares the coding standards used during development
`composer.lock`	Pinned versions of those development dependencies
`vendor/`	PHP_CodeSniffer and the WordPress Coding Standards — development only
`phpcs.xml.dist`	The ruleset used for code quality checks

vendor/ does not need to be on your server. If you are packaging the theme for distribution, exclude vendor/ and composer.lock. They exist only so the codebase can be linted against the WordPress coding standards.

How the theme works

The architecture behind these files.

Template files

Which template renders what, and how to override it.

Introduction

Getting started

Customization

Whats included

What’s included

Top-level PHP templates

`template-parts/` — reusable components

`inc/` — theme logic

customizer.php

elementor-setup.php

plugins.php

demo-import.php

`assets/` — front-end files

Stylesheets

JavaScript

Fonts

`elementor-templates/` — demo layouts

`languages/`

Development files (not needed at runtime)

How the theme works

Template files

​What’s included

​Top-level PHP templates

​template-parts/ — reusable components

​inc/ — theme logic

customizer.php

elementor-setup.php

plugins.php

demo-import.php

​assets/ — front-end files

​Stylesheets

​JavaScript

​Fonts

​elementor-templates/ — demo layouts

​languages/

​Development files (not needed at runtime)

​Related

How the theme works

Template files

What’s included

Top-level PHP templates

`template-parts/` — reusable components

`inc/` — theme logic

`assets/` — front-end files

Stylesheets

JavaScript

Fonts

`elementor-templates/` — demo layouts

`languages/`

Development files (not needed at runtime)

Related