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
Header	Sticky header, dark mode toggle
Colors & Typography	Color presets, fonts
Layout	Content width, sidebar position
Homepage Hero	Featured post 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
Footer	Copyright, footer widgets
SEO	Meta description, schema
Cookie Consent	Cookie consent banner

---

Accessing Theme Settings

1. Login to your WordPress Dashboard
2. Go to Appearance → Customize
3. Select the Theme Options panel

Real-time Preview

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

---

Header

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
Show Site Tagline	Display tagline in header	On
Enable Dark Mode	Show dark mode toggle button	On

How to Configure

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

---

Colors & Typography

Color Presets

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

• Slate Pro (default)
• Ocean Blue
• Forest Green
• Sunset Orange
• Berry Purple
• Rose Pink
• Midnight
• Minimal

How to Select a Preset

1. Go to Customize → Theme Options → Colors
2. Select a preset from the Color Preset dropdown
3. 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	System, Inter, Merriweather
Heading Font	System, Inter, Merriweather
Font Size	Adjustable per element
Line Height	Line spacing

---

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

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

No Sidebar Layout

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

---

Homepage Hero

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

Hero Modes

Mode	Description
Featured Post	Displays one featured post in large size
Custom Hero	Custom HTML content you create
No Hero	Disables hero section

Using Featured Post

1. Go to Customize → Theme Options → Homepage Hero
2. Select Hero Mode: Featured Post
3. Choose a post from the Featured Post dropdown
4. Click Publish

Default

If no post is selected, the system will display the latest post.

Using Custom Hero

1. Select Hero Mode: Custom Hero
2. Enter HTML code in the Custom Hero Content textarea
3. 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 as arranged in Customizer
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

1. Go to Customize → Theme Options → Editor's Pick
2. Enable Enable Section
3. Click Select Posts to choose posts
4. Set display order
5. 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

Related Posts

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

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

How to Enable

1. Go to Customize → Theme Options → Single Post
2. Scroll to Reading Experience section
3. Enable Table of Contents
4. 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

1. Go to Customize → Theme Options → Single Post
2. Scroll to Reading Experience section
3. Enable Reading Progress Bar
4. 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 for 18+ programming languages.

How to Enable

1. Go to Customize → Theme Options → Single Post
2. Scroll to Reading Experience section
3. Check Code Syntax Highlighting
4. 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).

---

Share Buttons

Buttons to share articles to various social media platforms.

Supported Platforms

• Facebook
• Twitter/X
• LinkedIn
• WhatsApp
• Telegram
• Copy Link

How to Enable

1. Go to Customize → Theme Options → Single Post
2. Scroll to Reading Experience section
3. Enable Share Buttons
4. 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

---

Social Icons

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

Supported Platforms

Facebook, X (Twitter), Instagram, YouTube, LinkedIn, TikTok, Pinterest, GitHub, Dribbble, Behance, Discord, Telegram, WhatsApp, Email, RSS Feed.

How to Configure

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

Full URL Required

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

---

Advertisements

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

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

Ad Performance

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

---

Footer

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

Example: Copyright © {year} {site}. All rights reserved.

Footer Widgets

1. Go to Appearance → Widgets
2. Add widgets to Footer 1, Footer 2, etc.
3. 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

1. Go to Customize → Theme Options → SEO
2. Enable desired features
3. 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

Cookie consent banner for GDPR compliance.

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

How to Enable

1. Go to Customize → Theme Options → Privacy & Cookie Consent
2. Enable Enable Cookie Consent Banner
3. Customize the message if needed
4. 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

---

Navigation Menu

Menu Locations

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

How to Create a Menu

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

---

Widget Areas

SastraPro has several widget areas:

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

How to Add Widgets

1. Go to Appearance → Widgets
2. Select a widget area
3. Click + to add a widget
4. Choose the desired widget
5. Configure widget settings
6. 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

1. Go to Customize → Theme Options → Header
2. Toggle the Enable Dark Mode option
3. Click Publish

Customizing Dark Mode Colors

Dark mode colors can be customized:

1. Go to Customize → Theme Options → Colors
2. Select a preset that already has dark mode colors
3. 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

1. Go to Customize → Theme Options → Single Post
2. Enable Show Author Bio
3. Click Publish

Information Displayed

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