LiteFrame CMS Documentation

Lightweight PHP/MySQL content management system built for speed, SEO, and simplicity.

LiteFrame is a single-file admin CMS designed for agencies and developers who need fast sites without framework overhead. It runs on any PHP 8.1+ / MySQL environment — no Composer, no Node, no build step.

Key Features

Single-file admin (admin/index.php) — entire CMS in one entry point
Visual editor with fullscreen mode — edit text, images, links, headings inline
Blog system with categories, tags, custom card templates
SEO suite — scoring, 404 monitoring, redirects, schema builder
SearchLab — competitor auditing, AI meta generation, bulk SEO editing
BuildLab AI — content generation via Anthropic/OpenAI/Google APIs
HTML site importer — import any static site and manage it in LiteFrame
Role-based access (Owner/Editor)
Backup/restore, export, auto-update system
Built-in analytics, form handling, lead capture
Auto-generated sitemap.xml, robots.txt, llms.txt

Installation

Upload the LiteFrame files to your web root on any cPanel/Apache server with PHP 8.1+ and MySQL.

Upload and extract the ZIP to your site's document root
Navigate to yourdomain.com/install.php
Enter your MySQL database credentials, admin username, and password
Click Install — the database tables are created and your admin account is set up
Delete install.php after installation
Access the admin at yourdomain.com/admin

Requirements: PHP 8.1+, MySQL 5.7+, Apache with mod_rewrite enabled. Works on any standard cPanel shared hosting.

Importing a Site

LiteFrame can import any static HTML site. Navigate to Import in the admin sidebar.

ZIP Structure Requirements

/index.html          ← homepage (becomes slug "home")
/about.html          ← standard pages at root
/services.html
/contact.html
/style.css           ← single CSS file at root
/main.js             ← JS at root (optional)
/images/             ← all images in one folder
/blog/               ← blog posts in subfolder
  post-one.html
  post-two.html

HTML Rules for Clean Import

Every page must be a complete HTML document with <!DOCTYPE html>, <head>, <body>
Use the same header/footer on every page — the importer detects shared top/bottom elements
All internal links use root-relative paths: href="/about" not href="about.html"
All image paths reference the images folder: src="/images/photo.jpg"
No inline <style> tags in the body — put all CSS in style.css
No inline <script> in the body — put all JS in separate files
Use semantic HTML: <section>, <nav>, <footer>

Import Process

Upload ZIP — the scanner detects all HTML files, CSS, JS, images, fonts
Configure folders — assign each folder as Standard, Blog, Landing, SEO, or Skip
Header/Footer extraction — the importer identifies shared elements across pages and saves them as templates
CSS/JS placement — choose where each JS file loads (head, body, skip)
Import — pages are created, images are uploaded to media library, paths are rewritten

Tip: The importer extracts dates from <time datetime="..."> tags and article:published_time meta tags. Include these in your HTML for proper blog dates.

File Structure

File	Purpose
`admin/index.php`	Admin entry point — all routes, sidebar, role-based access
`admin/inc/*.php`	Module files — editor, blog, settings, SEO, etc.
`config.php`	Database credentials, auth helpers, timezone, role functions
`index.php`	Front-end renderer — routing, page output, shortcodes
`api.php`	REST API — form submissions, analytics, content API
`.htaccess`	Apache rewrite rules, security headers, caching, bot blocking
`public/assets/admin.css`	Admin panel stylesheet
`public/uploads/`	User-uploaded media files
`style.css`	Site CSS (created by import or added manually)

Pages & Content Types

LiteFrame has 4 built-in content types plus support for custom types.

Type	URL Pattern	Use Case
Standard	`/slug`	Regular pages — about, services, contact
Blog	`/blog/slug`	Blog posts with categories, tags, dates
Landing	`/slug`	Marketing landing pages
SEO	`/slug`	AI-generated SEO pages

Custom Content Types

Go to Content → Content Types tab to add custom types with their own URL prefixes. Example: type services with prefix services routes as /services/page-slug.

Changing Content Types

Every page has a Type dropdown in the editor publish bar. Change a standard page to a blog post (or vice versa) and save — it moves to the new content type immediately. Bulk type changes are available in the Content Bulk Editor.

Page Editor

The editor has a publish bar at the top with Type, Status, Template, Sort Order, Nav toggle, and Listing toggle.

Editor Tabs

Content — HTML code editor + Visual Edit button for fullscreen visual editing
SEO — Meta title, description, keywords, featured image, excerpt, CTA text, robots meta
Schema — JSON-LD schema builder with 11 types (Owner only)
CSS — Page-specific CSS (Owner only)
JS — Page-specific JavaScript (Owner only)

Blog-Specific Fields

When a page is set to Blog type, additional fields appear: Categories (multi-select), Tags (type-ahead with badges), Published Date, Author, and Comments toggle.

Card CTA Text

The Card CTA Text field sets unique link text for blog cards via the {{cta_text}} token. Each post should have different CTA text to avoid duplicate link rel SEO issues. Example: "Read about conversion optimization" instead of generic "Read more" on every card.

Visual Editor

Click Visual Edit on any page to enter fullscreen visual editing mode. The admin chrome disappears and you edit the live page directly.

Toolbar

The top bar has: Visual/Code mode switch, device preview (Desktop/Tablet/Mobile), page title, Media library button, Save, Close.

What You Can Do

Edit text — click any heading, paragraph, button, link to edit inline
Change headings — select text, use the Tag dropdown to change H1-H5 or P. Preserves all existing styles and attributes.
Format text — Bold, Italic, Underline via the floating bar that appears on text selection
Add/edit links — select text, click Link, enter URL in the inline dialog (no browser prompts)
Swap images — click any image to open the media library picker
Align text — Left, Center, Right buttons in the formatting bar
Move sections — click a section to select it, use ↑↓ buttons to reorder
Duplicate/Delete sections — Dup and Del buttons on the section bar
Switch to Code — toggle to a fullscreen dark code editor, content syncs between modes

Keyboard Shortcuts

Shortcut	Action
`Ctrl/Cmd + S`	Save
`Escape`	Close (with unsaved changes warning)

Blog System

The blog system lives under Blog in the sidebar with tabs for Posts, Categories, Tags, Comments, Bulk Editor, and Cards/Layout.

Blog URL Structure

Blog posts route as /[prefix]/[slug]. The prefix defaults to blog but can be changed in Blog → Cards → Blog URL Prefix. Category pages: /[prefix]/category/[slug]. Tag pages: /[prefix]/tag/[slug].

Categories & Tags

Categories support hierarchy (parent categories). Tags are flat. Both can be managed in their respective tabs or assigned per-post in the editor. The blog bulk editor supports multi-select categories and type-ahead tag entry with badge removal.

Comments

Built-in comment system with moderation options: approve first comment, approve all, or auto-approve. Threaded replies supported. Close comments after X days. CAPTCHA integration (Turnstile or reCAPTCHA) available in Settings.

Read Time

Automatically calculated at 200 words per minute from the post content. Available as the {{read_time}} token in card templates. Outputs like "3 min read".

Blog Card Templates

Customize how blog posts appear in feeds. Go to Blog → Cards to edit the card template HTML.

Available Tokens

Token	Output
`{{url}}`	Full post URL
`{{title}}`	Post title (site name suffix auto-stripped)
`{{excerpt}}`	Post excerpt (or auto-generated from content)
`{{image}}`	Featured image URL
`{{date}}`	Published date formatted as "Jan 15, 2026"
`{{author}}`	Author name
`{{slug}}`	Post slug
`{{read_time}}`	Calculated read time ("3 min read")
`{{cta_text}}`	Custom CTA link text per post (for unique link rels)
`{{categories}}`	Category badges (rendered as spans, safe inside links)
`{{tags}}`	Tag badges (rendered as spans, safe inside links)
`{{meta}}`	Combined date · author · read time line

Conditional Sections

Wrap content in {{#token}}...{{/token}} to show it only when the token has a value:

{{#image}}<img src="{{image}}" alt="{{title}}">{{/image}}

Layout Settings

Configure columns (2/3/4), posts per page, grid gap, and grid CSS class in Blog → Cards.

Shortcodes

Paste these into any page content. They render dynamically on the front end.

Blog

Shortcode	Description
`[blog-feed]`	All published blog posts
`[blog-feed limit="6" columns="3"]`	6 posts in 3-column grid
`[blog-feed category_id="1" paginate="true"]`	Posts from category 1 with pagination
`[blog-categories]`	List of all categories
`[blog-tags]`	List of all tags
`{{blog_recent:6}}`	Legacy: 6 most recent posts

Pages & Forms

Shortcode	Description
`[page-list type="services" limit="6"]`	List pages of a content type
`[form name="contact"]`	Render a form by name
`[form id="3"]`	Render a form by ID

Payments (Stripe)

Shortcode	Description
`[stripe-button price="price_xxx" label="Buy Now"]`	Checkout button
`[stripe-pricing]`	Pricing table
`[stripe-portal]`	Customer portal link

Navigation

Shortcode	Description
`{{nav}}`	Auto-generated navigation from published pages
`{{navigation class="main-nav"}}`	Navigation with custom CSS class

Page Templates

Each page has a Template dropdown in the publish bar.

Template	Behavior
Default	Header + content + footer, all CSS/JS auto-linked
Full Width	Same as default but no max-width container
Self-Contained	Content only — no header/footer, CSS/JS still linked
Blank	No header, no footer, no global CSS — just your content in a basic HTML shell
Raw HTML	Content IS the entire HTML document. You control everything.

Media Library

Upload images, SVGs, and documents. Access from Media in the sidebar, from the editor's featured image field, from the visual editor's Media button, or from bulk editors.

Uploads go to /public/uploads/. PHP execution is blocked in the uploads directory for security. SVG uploads are validated against an allowlist of safe MIME types.

Code (Header/Footer/CSS)

Owner-only section for editing the site's template code.

Header HTML — shared across all pages. Wrap your <nav> here. Visual Edit button opens an iframe editor.
Footer HTML — shared footer. Same visual edit option.
Global CSS — injected as <style id="global-css"> or linked as /style.css if the file exists
Head Scripts — injected in <head> on every page (analytics, fonts, etc.)
Body Scripts — injected before </body> on every page

Block Editor

An alpha feature (enable in Settings → Controls). Scans your imported pages and catalogs reusable sections — hero blocks, CTAs, testimonials, feature grids, etc.

Go to Blocks and click "Rescan All Pages" to detect sections. The scanner detects <section> tags, semantic elements, and any substantial <div> containing headings, images, or multiple paragraphs.

SEO Suite

Every page gets an SEO score (0-100) based on ~20 checks:

Title length, meta description length
Focus keyword in title, slug, H1, content, and keyword density
Heading hierarchy (H1 exists, proper nesting)
Image alt text coverage
Internal links, schema markup, featured image
Paragraph length and URL length
Readability: Flesch reading ease, sentence length

The SEO sidebar in the editor shows real-time scoring, SERP preview, and internal link suggestions.

SearchLab

Advanced SEO tooling under SearchLab in the sidebar.

Competitor Audit

Enter a competitor URL → LiteFrame fetches the page, parses the DOM, and generates a structural teardown: word count, heading tree, sections, schema types, internal/external links, images, page size. Generate a blueprint page that matches the competitor's structure.

Bulk SEO Editor

Edit meta titles, descriptions, focus keywords, and robots meta across ALL pages in one table. Each row shows the page's SEO score. AI ✦ button generates meta descriptions per page. "AI Fill Empty ✦" fills all pages missing descriptions.

404 Monitor & Redirects

All 404s are logged automatically. Bot scanner noise (wp-admin, .env, etc.) is filtered out. Create redirects from the 404 log with one click. Redirects are checked before 404 handling on every page load.

Schema Builder

The Schema tab in the editor provides a visual builder for 11 schema types:

FAQ, HowTo, Product, Event, Recipe, Video, Breadcrumbs, Local Business, Article, SoftwareApplication, Service

Auto-Detect scans your content for patterns (question headings → FAQ, YouTube embeds → Video, cooking terms → Recipe). Generate builds valid JSON-LD. Validate checks required fields and links to Google's Rich Results Test.

Blog posts automatically get Article schema if no custom schema is set.

Sitemap, Robots, LLMS

Auto-generated from your published pages, no configuration needed:

URL	Content
`/sitemap.xml`	XML sitemap with all published pages and last-modified dates
`/robots.txt`	Standard robots.txt with sitemap and llms.txt references
`/llms.txt`	AI-friendly site summary — title, description, URL for each page
`/llms-full.txt`	Full text content of every page (for AI training/indexing)

Auto-Generated Meta

Every page automatically gets: canonical URL, og:type (article for blog, website for others), og:url, og:title, og:site_name, og:description, og:image, twitter:card, and robots meta if set.

PageSpeed

Dashboard widget shows Google PageSpeed Insights scores. Add your PageSpeed API key in Settings → General. Click "Scan Now" for fresh results. History tracked for 90 days.

Automatic Performance Optimization

The renderer automatically optimizes every page:

First image gets fetchpriority="high" for faster LCP
All other images get loading="lazy"
All images get decoding="async"
Malformed double query strings on image URLs are fixed
Font preconnect hints added for Google Fonts
GZIP compression, browser caching, and ETags configured in .htaccess

Analytics

Built-in lightweight analytics that tracks page views, time on page, and scroll depth. No external scripts. Data is stored in your own database.

The analytics pixel fires on visibilitychange and pagehide events using navigator.sendBeacon — zero impact on page performance. Automatically disabled for logged-in admins.

BuildLab AI

AI-powered content assistant. Supports Anthropic (Claude), OpenAI (GPT), and Google (Gemini) — configure in Settings → AI.

BuildLab uses streaming SSE for real-time chat. The AI job queue runs API calls in background workers so the site isn't blocked during generation.

AI SEO Generator

Bulk-generate SEO pages from keyword/location variations. Navigate to SearchLab → SEO Generator.

Enter a base topic and page type (location, service, keyword, custom)
Add variations — one per line (cities, services, keywords)
Set a slug prefix and optional style notes
Generate — each page is created with unique content, proper headings, and CTA sections
Review, edit titles/slugs/descriptions, then save as draft or publish

The generator reads your site's CSS classes and page structure to match the existing design.

AI Meta Descriptions

In SearchLab → Bulk SEO, each page row has an "AI ✦" button that generates a meta description from the page title and content. "AI Fill Empty ✦" fills all pages missing descriptions in sequence.

AI requests use the async job queue — they don't block the site while generating.

Settings

Settings → General covers: Site Name, Canonical Domain, Timezone, PageSpeed API Key, AI Provider/Keys/Models.

Settings → Controls toggles features on/off: Content, Blog, Media, Leads, Analytics, Transactions, Forms, AI, SEO Generator, Code, Block Editor.

Settings → Security covers: 2FA, auto-login tokens, CAPTCHA provider configuration.

Settings → Users manages admin accounts and roles.

Users & Roles

Role	Access
Owner	Full access — settings, code, templates, import, export, backup, update, user management
Editor	Content only — pages, blog, media, leads, analytics. Cannot access code, settings, or system tools. CSS/JS/Schema tabs hidden in editor.

Security

LiteFrame includes comprehensive security hardening:

HSTS — 1 year with includeSubDomains
CSP — restrictive Content Security Policy header
Upload protection — PHP execution blocked in uploads directory
Prepared statements — all database queries use parameterized queries
CSRF tokens — on all forms and AJAX endpoints
Session regeneration — on all login paths
Bot scanner blocking — .htaccess blocks WordPress probes, .env, .git, phpMyAdmin, and common exploit paths with 403
404 filtering — bot scanner paths filtered from 404 log
SSRF protection — competitor audit blocks private/reserved IPs
SVG validation — restricted MIME allowlist for SVG uploads

Backup & Restore

Navigate to System → Backup.

Backup Types

Full Backup — all database tables, all files, all uploads
Content Only — pages, settings, categories, tags, revisions. No uploads. Recovers header/footer from settings.

Pre-restore snapshots are created automatically before every restore. Backup list shows version, type, and local timestamp.

Forms & Leads

LiteFrame automatically intercepts all <form method="POST"> submissions on the front end. No configuration needed — just put an HTML form on your page.

Submissions are captured as leads with auto-detected name, email, phone, and message fields. View leads in the Leads section. Build forms visually in the Forms section with the drag-and-drop form builder.

Add data-no-intercept to any form to bypass the interceptor.

Transactions

Stripe integration for payments. Configure Stripe keys in Settings. Use shortcodes to add checkout buttons, pricing tables, and customer portals to any page.

Export

Export your site as static HTML files. Navigate to Import/Export → Export. The export includes all published pages as HTML files, CSS, JS, and optionally all uploaded media. An export-manifest.txt lists every exported page.

API

LiteFrame provides a REST API at /api/. Authentication via X-API-KEY header.

Endpoint	Method	Description
`/api/pages`	GET	List published pages
`/api/page/{slug}`	GET	Get single page by slug
`/api/form`	POST	Submit a form (auto-intercepted)
`/api/analytics`	POST	Analytics beacon (auto-fired)

HTML Output Rules for AI-Generated Sites

When using AI to generate a site for LiteFrame import, follow these rules:

Every page: complete HTML document with <!DOCTYPE html>, <head>, <body>
Single style.css at root, linked in every page
Root-relative paths: href="/about" not href="about.html"
Images in /images/ folder, referenced as /images/filename.ext
No .html extensions in links
No inline <style> or <script> in body
Same header/footer on every page
Semantic HTML: <section>, <nav>, <footer>
Include alt on every <img>
JavaScript in separate files, no JS in <head>

Frequently Asked Questions

What hosting does LiteFrame require?

Any shared hosting with PHP 8.1+ and MySQL 5.7+. Designed specifically for cPanel/Apache environments on providers like Liquid Web, SiteGround, A2 Hosting, etc. No Node.js, Docker, or special server configuration needed.

How do I add a blog feed to a page?

Edit the page content and add the shortcode [blog-feed]. Customize with attributes: [blog-feed limit="6" columns="3" paginate="true"]. Filter by category: [blog-feed category_id="2"].

Why are my blog cards showing "No posts found"?

The blog feed only shows pages with page_mode='blog' and status='published'. Check that your posts are set to Blog type and Published status. You can change content types in the editor's Type dropdown or the bulk editor.

How do I make each blog card link unique for SEO?

Set the Card CTA Text field on each post (in the editor's SEO tab or the blog bulk editor). Use the {{cta_text}} token in your card template. Each post gets a unique anchor text instead of repeated "Read more" links.

My imported site is missing styles

Check if /style.css loads in the browser (view source, click the link). If the CSS is in the database but not rendering, update to the latest version — an older version had a skip logic bug that blocked inline CSS output. Also check for duplicate CSS files in /public/.

Can I use LiteFrame for multiple sites?

Yes. Each cPanel account gets its own LiteFrame installation. The Ops Panel (separate product) manages provisioning across multiple servers.

How does the AI not block the site?

AI requests use an async job queue. The browser submits a request, gets a job ID back immediately (~50ms), then polls every 1.5 seconds. The actual API call runs in a background PHP worker that closes its HTTP connection before processing. Zero impact on other visitors.

What's the difference between Visual Edit and the code editor?

The code editor shows raw HTML. The visual editor loads the live page in a fullscreen iframe where you edit text, images, and structure directly. They sync — changes in one mode appear in the other. Use visual for content tweaks, code for structural changes.

How do I add a contact form?

Either build one in the Forms section and embed it with [form name="contact"], or just put a regular HTML <form method="POST"> on any page. LiteFrame's form interceptor automatically captures submissions as leads.

What are llms.txt files?

A standard for making your site's content available to AI systems. /llms.txt provides a structured summary (title + description per page). /llms-full.txt includes full text content. Referenced in robots.txt for AI crawlers to discover.

How do categories and tags work in card templates?

Use {{categories}} and {{tags}} tokens. They render as styled <span> badges (not links) so they're safe inside card <a> wrappers without causing HTML nesting issues.

Can I change a page from Standard to Blog?

Yes. Open the page editor, change the Type dropdown from Standard to Blog, and save. The page immediately moves to the blog system with access to categories, tags, and blog-specific features.

How do I back up before an update?

Go to System → Backup → Create Full Backup. A pre-restore snapshot is also created automatically before every restore operation. Backups include database dumps and all files.

What security headers does LiteFrame set?

HSTS (1 year), Content-Security-Policy, Referrer-Policy (strict-origin-when-cross-origin), Permissions-Policy, X-Content-Type-Options (nosniff), and X-Frame-Options (SAMEORIGIN). Bot scanner paths return 403 at the Apache level before PHP runs.

Why do some 404s not appear in the monitor?

Bot scanner noise is filtered out automatically. Requests to WordPress paths (/wp-admin, /wp-login), development files (.env, .git), database tools (/phpmyadmin), and common exploit paths are blocked at .htaccess and excluded from the 404 log.