Installing Orion

Orion installs like any standard WordPress theme. Choose either the dashboard upload method or the ZIP/FTP method — both take under five minutes.

Installation methods

After activation

Layout Options

Orion offers five layout configurations. Each can be set independently for different page types — so your blog archive can have a right sidebar while individual pages use full width.

The five layouts

Per-context layout settings

Four layout dropdowns let you assign different configurations per content type:

Maximum Site Width

The Maximum Site Width slider controls the max-width of page content and the footer. Range: 600px – 2400px, default 1200px. This is a live-preview control — drag the slider and the Customizer preview updates instantly.

Elementor pages always use No Sidebar

If a page was built with Elementor, Orion automatically forces the No Sidebar layout regardless of the Customizer setting. This ensures Elementor's canvas always spans the full content width.

Override layout per page (PHP)

// Force no-sidebar on a specific page slug
add_filter( 'orion_layout', function( $layout ) {
    if ( is_page( 'landing' ) ) {
        return 'no-sidebar';
    }
    return $layout;
} );

Header Styles & Options

Orion provides five distinct header styles plus sticky, transparent, and frosted-glass modes — all with live Customizer preview.

Header styles

Header width

Two controls independently manage header width:

• Header Inner Width — max-width of the logo + navigation area. Range: 600px – 2400px, default 1200px. Live preview.
• Full Width Header — checkbox that removes the max-width constraint entirely so the header stretches edge-to-edge.

Sticky header

Enable Sticky Header to pin the header to the top of the viewport as the user scrolls. Two additional color controls appear when sticky is enabled:

• Sticky Header Background Color — defaults to white.
• Sticky Header Text & Link Color — defaults to dark gray.

Both colors update instantly in the Customizer preview via postMessage.

Transparent header

Enable Transparent Header to overlay the header on top of hero content below it. Best combined with a header image or full-height Elementor hero section.

Glass / frosted effect

The Glass / Frosted Effect applies a backdrop-filter: blur() behind the header, creating a modern frosted-glass look. Works best with a transparent or sticky header so page content is visible behind it.

CTA button (Classic style only)

When the Classic header style is selected, a call-to-action button appears on the right side. All controls are hidden for other header styles.

Header Image Overlay

Set a banner image at Appearance → Customize → Header Image, then use the Header Image Overlay section to control the title, breadcrumbs, and dark overlay that appear on top of it.

Colors & Typography

All color and typography changes preview live in the Customizer without a page reload. Colors use CSS custom properties (--orion-primary, etc.) output as inline styles.

Colors

Go to Orion Theme Options → Colors.

Header, footer, sticky header, and CTA button colors are found in their respective Customizer sections.

Typography

Go to Orion Theme Options → Typography.

Body Font Family

Applied to paragraphs, body copy, and menus. Google Fonts are loaded from the CDN only when selected — system fonts require no network requests.

Heading Font Family

Applied to H1–H6. Leave as "— Same as Body Font —" to keep a unified typeface. When a Google Font is chosen, it's loaded alongside the body font in a single optimized CDN request.

Base Font Size

Range: 12px – 24px, default 16px. Controls the --orion-font-size CSS variable; all other type sizes scale proportionally.

Available fonts

Menus, Widgets & Footer

Menu locations

Orion registers six menu locations. Assign menus at Appearance → Menus.

Widget areas

Go to Appearance → Widgets to manage widget areas.

Footer settings

Go to Orion Theme Options → Footer in the Customizer.

• Footer Copyright Text — Custom HTML/text for the copyright line. Leave blank to use the default.
• Footer Background Color — Default #1e1e1e. Live preview.
• Footer Text Color — Default #cccccc. Live preview.

Blog settings

Go to Orion Theme Options → Blog Settings.

Elementor Integration

Orion is fully compatible with the free version of Elementor. All theme locations are registered automatically, and you can assign Elementor templates to seven theme areas from the Customizer.

Automatic behavior

• All Elementor theme locations are registered on activation via register_all_core_location().
• Pages built with Elementor automatically switch to the No Sidebar layout so your design spans the full content width.
• Elementor scripts and styles are force-enqueued on pages that use template assignments (archive, 404, search) even if the page itself isn't an Elementor post.

Template assignments

Go to Appearance → Customize → Orion Theme Options → Elementor Templates (this section only appears when Elementor is active). Create your templates first under Elementor → Templates, then assign them here.

Page templates

Two Elementor-specific page templates are available when editing any page under Page Attributes → Template:

• Elementor Full Width — Elementor canvas with the theme's header and footer intact.
• Elementor Canvas — Completely blank canvas. No header, footer, or sidebar. Full Elementor control.

WooCommerce Support

Install and activate WooCommerce. Orion detects it automatically and applies proper wrappers, column counts, and toolbar styles. No manual configuration is required.

What Orion handles automatically

• Removes default WooCommerce content wrappers and replaces them with Orion's layout-aware wrappers.
• Shop column count adjusts based on your sidebar layout — 4 columns with no sidebar, 3 with a sidebar active.
• 12 products per page by default.
• Result count and ordering toolbar styled to match the theme.
• WooCommerce page title suppressed to avoid duplication with the Header Image overlay.

Gallery features

Orion declares support for all three WooCommerce gallery features:

• Product Gallery Zoom — hover-to-zoom on product images.
• Product Gallery Lightbox — click-to-enlarge with a lightbox overlay.
• Product Gallery Slider — swipe-through image slider on mobile.

Developer Reference

Action hooks

Orion fires six action hooks at key positions in the page structure. Use them to inject custom HTML, banners, scripts, or rendered Elementor templates.

// Inject a banner strip between the header and content
add_action( 'orion_after_header', function() {
    echo '<div class="promo-bar">Free shipping on orders over $50</div>';
} );

Layout filter

Use the orion_layout filter to override the layout for any request programmatically. Must return one of: no-sidebar, right-sidebar, left-sidebar, double-sidebar, opposing-sidebars.

// Force full-width on a specific page
add_filter( 'orion_layout', function( $layout ) {
    if ( is_page( 'landing' ) ) {
        return 'no-sidebar';
    }
    return $layout;
} );

Page templates

Select a template by editing any page and choosing from Page Attributes → Template.

RTL & translation

Orion includes a rtl.css file that WordPress loads automatically when the site uses a right-to-left language. No configuration needed.

All user-facing strings use WordPress translation functions with the orion text domain. A .pot template file is included in /languages/. Recommended tools:

• Loco Translate — translate directly from the WordPress admin.
• Poedit — open the .pot file, translate, and save .po / .mo files to /languages/.

Orion Core Plugin

The Orion Core plugin is a free companion that adds advanced features on top of the theme. The theme works perfectly without it — the plugin is entirely optional.

Features unlocked by Orion Core

Frequently Asked Questions

How do I create a full-width page?

Edit the page and in the Page Attributes panel set the Template to "Full Width" and save. This overrides the Customizer layout setting for that page only.

How do I change the layout?

Go to Appearance → Customize → Orion Theme Options → Layout. You can set different layouts for the blog/archive, single posts, and static pages. To override on a single post or page, use the orion_layout filter in your child theme.

How do I set menus for the Split header?

Go to Appearance → Menus, create or edit a menu, and assign it to the "Split Header – Left Menu" or "Split Header – Right Menu" location. These locations only appear when the Split style is active in the Customizer.

How do I enable a double sidebar?

In the Customizer, set the layout to "Double Sidebar". Then go to Appearance → Widgets and add widgets to both the Primary Sidebar and Secondary Sidebar.

How do I change the primary color?

Go to Appearance → Customize → Orion Theme Options → Colors → Primary Accent Color. The change previews instantly.

Can I use different fonts for headings and body?

Yes. Go to Typography in the Customizer. Set Body Font Family for paragraphs and menus, then set a different Heading Font Family for H1–H6. Leave Heading Font blank to use the same font as the body.

Do Google Fonts slow down my site?

Orion only loads fonts you actively select — no unused fonts are ever requested. Fonts are loaded with display=swap to prevent invisible text. If you choose System UI as your body font, there are zero external font requests.

Can I use Elementor with this theme?

Yes. Install the free Elementor plugin. Orion registers all Elementor theme locations and automatically switches Elementor-built pages to a full-width layout. You can also assign free Elementor templates to the header, footer, and five other areas from the Customizer.

Does Orion work with WooCommerce?

Yes. Install and activate WooCommerce. Orion detects it automatically and applies the correct wrappers, column counts, and toolbar styles — no configuration needed.

Does Orion support RTL languages?

Yes. Orion includes a rtl.css file that WordPress loads automatically for right-to-left language sites (Arabic, Hebrew, Farsi, etc.).

Is the theme translation-ready?

Yes. All strings use WordPress translation functions with the orion text domain. A .pot template file is included in the /languages/ directory.

What does the Orion Core plugin add?

Popup builder, mega menu, off-canvas side panel, WooCommerce Elementor overrides, quick-start templates, and performance tweaks. The theme works fully without it — the plugin adds optional advanced features.