SastraPro Theme Configuration

Complete guide to configure the SastraPro theme after installing it on your WordPress website.

Explore Directly in Customizer

All theme settings are available in the Customizer (Appearance → Customize → Theme Options). Each option includes a brief description, so you can explore and experiment without reading this guide. This page serves as additional reference if you need more detailed explanations.

Configuration List

Setting	Description
Demo Import	Install demo content with one click
Header	Sticky header, menu alignment, dark mode toggle
Colors & Typography	Color presets, fonts
Layout	Content width, sidebar position
Homepage Hero	Featured posts (up to 3, auto slider) or custom content
Editor's Pick	Curated posts section
Archive & Index	Grid layout, pagination
Single Post	Featured image, related posts
Table of Contents	Auto-generated TOC
Reading Progress Bar	Reading progress indicator
Syntax Highlighting	Code syntax highlighting
Share Buttons	Social media share buttons
Social Icons	Social media links
Advertisements	AdSense placement
Custom Scripts	Google Analytics, GTM, tracking codes
Footer	Copyright, footer widgets
SEO	Meta description, schema
Cookie Consent	Cookie consent banner
Import / Export Settings	Back up and migrate theme settings

Demo Import

The fastest way to make your website look exactly like the theme demo — sample content, widgets, menus, and all Customizer settings are applied automatically. (Available since version 1.2.8)

Import Steps

After activating the theme, a notice appears with an Install One Click Demo Import button — click it to install the free plugin (or install it manually from Plugins → Add New)
Go to Appearance → Import Demo Data
Click the import button on the SastraPro Demo card
Wait for the process to finish (a few minutes, as demo images are downloaded)

Once finished, the theme automatically applies Customizer settings, assigns menu locations, sets the hero and Editor's Pick posts, and configures the homepage post count — no extra manual steps.

Plugin Can Be Removed

After the import completes, the One Click Demo Import plugin can be deactivated or deleted — it does not affect the imported result.

Accessing Theme Settings

Login to your WordPress Dashboard
Go to Appearance → Customize
Select the Theme Options panel

Real-time Preview

Every change you make will be instantly visible in the preview panel on the right.

Settings for the website header appearance.

Option	Function	Default
Sticky Header	Header stays visible when scrolling	On
Hide on Scroll Down	Header hides when scrolling down, shows when scrolling up	Off
Menu Alignment	Horizontal alignment of the main navigation: Left, Center, Right	Left
Show Site Tagline	Display tagline in header	On
Enable Dark Mode	Show dark mode toggle button	On

How to Configure

Go to Customize → Theme Options → Header
Enable or disable options as needed
Click Publish to save

Colors & Typography

Color Presets

SastraPro provides 14 color presets optimized for both light and dark mode:

Slate Pro (default)
Default Light
Default Dark
Ocean Blue
Forest Green
Warm Terracotta
Midnight
Blush Rose
Sage Green
Plum Purple
Coffee Brown
Indigo Night
Sand Beige
Crimson

How to Select a Preset

Go to Customize → Theme Options → Colors
Select a preset from the Color Preset dropdown
Click Publish

Custom Colors

If presets don't suit your needs, you can set colors manually:

Option	Function
Background Color	Background color
Text Color	Main text color
Accent Color	Accent color (links, buttons)
Border Color	Border line color
Surface Color	Card/box surface color
Muted Text Color	Secondary text color

Typography

Option	Choices
Body Font	10 choices: System Default, Inter, Open Sans, Roboto, Lato, Merriweather, Lora, Playfair Display, Poppins, Source Sans Pro
Heading Font	Same 10 choices as Body Font
Font Size	Adjustable per element
Line Height	Line spacing

Self-hosted Fonts

All fonts (except System Default) are served directly from the theme — no external requests to Google Fonts, privacy-friendly and GDPR-compliant.

Layout

Page structure settings.

Option	Choices	Default
Container Width	960px - 1400px	1200px
Sidebar Position	None, Left, Right	Right
Back to Top Button	Show/Hide	Show

How to Configure

Go to Customize → Theme Options → Layout
Use the slider to adjust container width
Select sidebar position or disable it
Click Publish

No Sidebar Layout

Select Sidebar Position: None for a modern full-width appearance.

Full Width Page Template

For specific pages that need full width (landing pages, sales pages), use the bundled template:

Edit the desired page
In the Page panel (right side of the editor), under Template, select SastraPro Full Width
Update the page

Homepage Hero

Hero section at the top of the homepage with image and gradient overlay.

Hero Modes

Mode	Description
Featured Post	Displays up to 3 featured posts — automatically becomes a slider when more than one is selected
Custom Hero	Custom content: heading, subheading, button, and background image
No Hero	Disables hero section

Using Featured Post

Go to Customize → Theme Options → Homepage Hero
Select Hero Mode: Featured Post
In Featured Posts, choose up to 3 posts from the dropdown
Arrange the order with the ▲▼ buttons on the selected-post list — this becomes the slide order
Click Publish

Option	Function
Badge Text	Change the featured badge label (default: "Featured")
Thumbnail Style	Image display style: wide, stacked, compact, or no image
Text Alignment	Left, center, or right
Slider Autoplay	Slides change automatically (with interval setting)
Slider Dots	Show slider navigation dots

Default

If no post is selected, the system will display the latest post. The slider is only active when more than one post is selected.

Using Custom Hero

Select Hero Mode: Custom Hero
Fill in the available fields: Heading, Subheading, Button Text, and Button URL
Choose a Hero Image as the background (optional)
Fine-tune the appearance: Overlay (dark layer opacity), background Blur, Text Color (light/dark), and Alignment
Click Publish

Editor's Pick

Curated posts section displayed on the homepage with 2-column layout.

Option	Function
Enable Section	Enable/disable section
Section Title	Section heading (default: "Editor's Pick")
Post Selection	Select posts to display (maximum 5)
Display Order	Post display order

Layout

Left Column: First post with large thumbnail (vertical card)
Right Column: Posts 2-5 with small thumbnails (horizontal cards)
Mobile: Single column, all horizontal

Order Options

Option	Description
Custom	Order follows your selected-post list — arrange with the ▲▼ buttons
Date (Newest)	Newest to oldest
Date (Oldest)	Oldest to newest
Title (A-Z)	Alphabetically A-Z
Title (Z-A)	Alphabetically Z-A
Comment Count	Most comments first
Random	Random order

How to Configure

Go to Customize → Theme Options → Editor's Pick
Enable Enable Section
Choose posts from the Select Posts dropdown (maximum 5)
Arrange the order with the ▲▼ buttons next to each selected post (available since version 1.2.8; make sure Display Order = Custom)
Click Publish

Archive & Index

Settings for archive, category, and tag pages.

Grid Layout

Option	Display
1 Column	Horizontal cards (image left, text right)
2 Columns	2-column grid
3 Columns	3-column grid

Pagination

Type	Function
Numbered	Navigation with page numbers
Load More	Button to load more posts (AJAX)
Infinite Scroll	Auto-loads on scroll

Post Meta

Choose information displayed on each post card:

Author
Date (publication date)
Reading Time (estimated read time)
Comment Count

Single Post

Settings for individual post pages.

Featured Image

Option	Function	Default
Show Featured Image	Display featured image	On
Featured Image Ratio	Image ratio: 21:9 (Ultrawide), 16:9 (Widescreen), 4:3 (Standard), Original (Auto)	21:9

Displays related articles based on categories and tags.

Option	Function	Default
Related Posts Count	Number of related posts (0-6)	3

Disable Related Posts

Set Related Posts Count to 0 to hide the section.

Post Meta

Choose information to display:

Author Info (author name and bio)
Publication Date
Modified Date
Reading Time
Category Tags

Reading Experience Features

Feature	Function
Reading Progress Bar	Visual progress bar while reading
Table of Contents	Auto-generated from headings
Code Syntax Highlighting	Code syntax highlighting
Share Buttons	Social media share buttons
Post Navigation	Links to previous/next posts

Table of Contents is automatically generated from headings (H2, H3, H4, H5, H6) in posts.

How to Enable

Go to Customize → Theme Options → Single Post
Scroll to Reading Experience section
Enable Table of Contents
Click Publish

TOC Settings

Option	Default	Description
Position	Sidebar	TOC position: sidebar or before content
Min Headings	3	Minimum headings to show TOC
Collapsible	Off	Can be collapsed/expanded
Sticky	On	TOC follows scroll in sidebar

Features

Active Highlight: TOC highlights the heading currently being read
Smooth Scroll: Clicking TOC item scrolls smoothly to heading
Nested List: H3 headings become sub-items of H2, etc.

Reading Progress Bar

Visual bar at the top of the page showing article reading progress.

How to Enable

Go to Customize → Theme Options → Single Post
Scroll to Reading Experience section
Enable Reading Progress Bar
Click Publish

How It Works

Bar appears at the very top of the page
Bar color follows the theme's accent color
Progress is calculated based on scroll position relative to article length
Automatically adjusts when window is resized

Syntax Highlighting

Code syntax highlighting feature using Prism.js with autoloader — all programming languages are supported, and only the languages in use are loaded.

How to Enable

Go to Customize → Theme Options → Single Post
Scroll to Reading Experience section
Check Code Syntax Highlighting
Click Publish

How to Use

To enable syntax highlighting, add a language comment on the first line of the code block:

JavaScript:

// lang: javascript
function hello() {
  console.log("Hello World!");
}

PHP:

// lang: php
<?php
function hello() {
    echo "Hello World!";
}

Python:

# lang: python
def hello():
    print("Hello World!")

CSS:

/* lang: css */
.button {
  background: #0f172a;
  color: #ffffff;
}

HTML:

<!-- lang: html -->
<div class="container">
  <h1>Hello World</h1>
</div>

Bash/Shell:

# lang: bash
npm install
npm run build

Supported Comment Formats

Format	Example
`// lang: [language]`	`// lang: javascript`
`// language: [language]`	`// language: php`
`# lang: [language]`	`# lang: python`
`/* lang: [language] */`	`/* lang: css */`
`<!-- lang: [language] -->`	`<!-- lang: html -->`

Language Aliases

Alias	Language
`js`	javascript
`ts`	typescript
`py`	python
`rb`	ruby
`sh`, `shell`	bash
`yml`	yaml
`html`, `xml`, `htm`	markup

Supported Languages

Web: HTML, CSS, JavaScript, TypeScript, JSON, XML, YAML
Backend: PHP, Python, Ruby, Java, Go, Rust, C, C++, C#
Database: SQL, GraphQL
Shell: Bash, PowerShell
Others: Markdown, Docker, Kotlin, Swift, Dart

Syntax Highlighting Features

Line Numbers: Automatic line numbers
Copy Button: Copy button in top right corner (appears on hover)
Dark Mode: Colors adjust to light/dark theme
On-demand Loading: Only loads languages that are needed

Without Language Hint

If there's no // lang: comment, code blocks will display without highlighting (plain text with theme styling).

Buttons to share articles to various social media platforms.

Supported Platforms

Facebook
Twitter/X
LinkedIn
Pinterest
WhatsApp
Telegram
Email
Copy Link

How to Enable

Go to Customize → Theme Options → Single Post
Scroll to Reading Experience section
Enable Share Buttons
Click Publish

How It Works

Buttons appear at the end of article (before related posts)
Clicking a button opens a share popup
"Copy Link" copies the article URL to clipboard

Display links to your social media accounts in header and footer.

Supported Platforms

16 platforms: Facebook, X (Twitter), Instagram, YouTube, LinkedIn, TikTok, Pinterest, Threads, Discord, GitHub, Telegram, WhatsApp, Mastodon, Bluesky, Email, RSS Feed.

How to Configure

Go to Customize → Theme Options → Social Icons
Enter the full URL for each platform
Leave the field empty if you don't want to display it
Click Publish

Full URL Required

Make sure to enter the full URL including https://. Example: https://facebook.com/username

Settings for ad placement (Google AdSense or other ad networks).

Option	Function
Enable Advertisements	Enable ads feature
In-Content Ad Code	Ad code that appears within content
Show Ad After Paragraph	Ad position (after paragraph N)
After Content Ad Code	Ad code after content ends

How to Set Up Ads

Go to Customize → Theme Options → Advertisements
Enable Enable Advertisements
Paste your AdSense code in the appropriate field
Set in-content ad position (default: after paragraph 3)
Click Publish

Ad Performance

Position after paragraph 2 or 3 typically provides the best CTR without disrupting the reading experience.

Custom Scripts

Place tracking codes such as Google Analytics, Google Tag Manager, or site verification scripts.

Option	Function
Header Scripts	Code inserted before `</head>`
Footer Scripts	Code inserted before `</body>`

How to Set Up

Go to Customize → Theme Options → Custom Scripts
Paste the code (including <script> tags) into the appropriate field
Click Publish

Administrators Only

For security, only users with full capabilities (administrators) can save scripts in these fields.

Website footer area settings.

Option	Function
Before Footer Widgets	HTML content above footer widgets
Copyright Text	Copyright text (supports placeholders)
Show Social Icons	Display social icons in footer
Footer Widget Columns	Number of widget columns (1-4)

Copyright Placeholders

Use placeholders for dynamic data:

{year} - Current year
{site} - Website name

Go to Appearance → Widgets
Add widgets to Footer 1, Footer 2, etc.
Active columns correspond to Customizer settings

SEO

Search engine optimization settings.

Feature	Description
Auto Meta Description	Generated from excerpt or content (160 characters)
Meta Keywords	Automatically from tags and categories
Open Graph	og:title, og:image, og:description for sharing
Twitter Cards	summary_large_image format
JSON-LD Schema	Article schema with author info
Canonical URL	With pagination handling
Meta Robots	noindex for 404, search, date archives

How to Configure

Go to Customize → Theme Options → SEO
Enable desired features
Click Publish

SEO Plugins

If you use SEO plugins like Yoast, Rank Math, All in One SEO, SEOPress, or The SEO Framework, the theme will automatically disable duplicate SEO features to avoid conflicts.

Cookie consent banner for GDPR compliance.

Option	Function
Enable Cookie Consent	Enable consent banner
Cookie Message	Message to display

How to Enable

Go to Customize → Theme Options → Privacy & Cookie Consent
Enable Enable Cookie Consent Banner
Customize the message if needed
Click Publish

How It Works

Banner appears at the bottom of the page for new visitors
Visitors can click Accept or Decline
Choice is saved for 365 days
Banner won't appear again after choosing

Import / Export Settings

Back up all theme settings or migrate them to another website. (Available since version 1.2.7)

Export

Go to Customize → Theme Options → Import / Export
Check the sections you want to export (or all of them)
Click Export — a JSON file will be downloaded

Import

On the destination website (with SastraPro active), open the same section
Select the exported JSON file
Check the sections you want to apply
Click Import

Sensitive Settings

Sections containing scripts or ad codes are specially marked in the export list. Double-check before sharing an export file — make sure your Analytics/AdSense IDs don't end up on someone else's website.

Location	Position
Primary Menu	Main menu in header
Footer Menu	Menu in footer area

Go to Appearance → Menus
Click Create a new menu
Name your menu
Add items (Pages, Posts, Categories, Custom Links)
Check menu location under Menu Settings
Click Save Menu

SastraPro has several widget areas:

Area	Location
Sidebar	Sidebar next to content
Footer 1-4	Footer widget areas (columns configurable)

How to Add Widgets

Go to Appearance → Widgets
Select a widget area
Click + to add a widget
Choose the desired widget
Configure widget settings
Widgets save automatically

Dark Mode

SastraPro supports dark mode with features:

Manual Toggle - Button in header to switch modes
System Preference - Automatically follows OS settings
Persistent - User choice saved in browser (localStorage)

Enable/Disable Toggle

Go to Customize → Theme Options → Header
Toggle the Enable Dark Mode option
Click Publish

Customizing Dark Mode Colors

Dark mode colors can be customized:

Go to Customize → Theme Options → Colors
Select a preset that already has dark mode colors
Or set manually in Dark Mode Colors section

Breadcrumbs

Breadcrumb navigation with Schema.org markup for SEO.

How It Works

Breadcrumbs automatically appear on post, page, category, tag, and archive pages
Format: Home → Category → Post Title
Uses Schema.org BreadcrumbList markup

Author Bio

Author information box that appears at the end of articles.

How to Enable

Go to Customize → Theme Options → Single Post
Enable Show Author Bio
Click Publish

Information Displayed

Avatar (from Gravatar)
Author name
Bio (from WordPress user profile)
Link to author archive page

SastraPro Theme Configuration ​

Configuration List ​

Demo Import ​

Import Steps ​

Accessing Theme Settings ​

Header ​

How to Configure ​

Colors & Typography ​

Color Presets ​

How to Select a Preset ​

Custom Colors ​

Typography ​

Layout ​

How to Configure ​

Full Width Page Template ​

Homepage Hero ​

Hero Modes ​

Using Featured Post ​

Using Custom Hero ​

Editor's Pick ​

Layout ​

Order Options ​

How to Configure ​

Archive & Index ​

Grid Layout ​

Pagination ​

Post Meta ​

Single Post ​

Featured Image ​

Related Posts ​

Post Meta ​

Reading Experience Features ​

Table of Contents ​

How to Enable ​

TOC Settings ​

Features ​

Reading Progress Bar ​

How to Enable ​

How It Works ​

Syntax Highlighting ​

How to Enable ​

How to Use ​

Supported Comment Formats ​

Language Aliases ​

Supported Languages ​

Syntax Highlighting Features ​

Share Buttons ​

Supported Platforms ​

How to Enable ​

How It Works ​

Social Icons ​

Supported Platforms ​

How to Configure ​

Advertisements ​

How to Set Up Ads ​

Custom Scripts ​

How to Set Up ​

Footer ​

Copyright Placeholders ​

Footer Widgets ​

SEO ​

How to Configure ​

Cookie Consent ​

How to Enable ​

How It Works ​

Import / Export Settings ​

Export ​

Import ​

Navigation Menu ​

Menu Locations ​

How to Create a Menu ​

Widget Areas ​

How to Add Widgets ​

Dark Mode ​

Enable/Disable Toggle ​

Customizing Dark Mode Colors ​

Breadcrumbs ​

How It Works ​

Author Bio ​

How to Enable ​

SastraPro Theme Configuration

Configuration List

Demo Import

Import Steps

Accessing Theme Settings

Header

How to Configure

Colors & Typography

Color Presets

How to Select a Preset

Custom Colors

Typography

Layout

How to Configure

Full Width Page Template

Homepage Hero

Hero Modes

Using Featured Post

Using Custom Hero

Editor's Pick

Layout

Order Options

How to Configure

Archive & Index

Grid Layout

Pagination

Post Meta

Single Post

Featured Image

Related Posts

Post Meta

Reading Experience Features

Table of Contents

How to Enable

TOC Settings

Features

Reading Progress Bar

How to Enable

How It Works

Syntax Highlighting

How to Enable

How to Use

Supported Comment Formats

Language Aliases

Supported Languages

Syntax Highlighting Features

Share Buttons

Supported Platforms

How to Enable

How It Works

Social Icons

Supported Platforms

How to Configure

Advertisements

How to Set Up Ads

Custom Scripts

How to Set Up

Footer

Copyright Placeholders

Footer Widgets

SEO

How to Configure

Cookie Consent

How to Enable

How It Works

Import / Export Settings

Export

Import

Navigation Menu

Menu Locations

How to Create a Menu

Widget Areas

How to Add Widgets

Dark Mode

Enable/Disable Toggle

Customizing Dark Mode Colors

Breadcrumbs

How It Works

Author Bio

How to Enable