Theme Development

Create custom themes for Scriptlog with Bootstrap, template functions, and comprehensive asset management.

Theme Directory Structure

Themes are located in public/themes/. Each theme has its own directory with templates, functions, and assets.

                            TEXT
                            directory structure
                        

public/themes/your-theme/
├── theme.ini              # Theme metadata
├── functions.php          # Template functions
├── header.php            # Site header
├── footer.php            # Site footer
├── home.php              # Homepage template
├── single.php            # Single post view
├── page.php              # Static page template
├── category.php          # Category archive
├── tag.php               # Tag archive
├── archive.php           # Monthly archive
├── archives.php          # Archive index
├── blog.php              # Blog listing
├── sidebar.php           # Sidebar widgets
├── comment.php           # Comment display
├── privacy.php           # Privacy policy
├── 404.php               # Error page
├── cookie-consent.php    # GDPR banner
├── download.php          # Download page
├── index.php             # Entry point
├── lang/                 # Translations
│   └── en.json
└── assets/               # CSS, JS, images
    ├── css/
    ├── js/
    ├── vendor/
    ├── fonts/
    └── img/

Theme Configuration (theme.ini)

Every theme requires a theme.ini file with metadata:

                            INI
                            theme.ini
                        

[info]
theme_name = Your Theme Name
theme_designer = Designer Name
theme_description = Description of your theme
theme_directory = your-theme

Core Template Files

header.php

Site header with navigation, meta tags, and asset loading. Includes:

HTML doctype with language attributes
Meta tags (viewport, charset, SEO)
RSS and Atom feed links
Stylesheet links
Schema.org markup
Navigation menu

footer.php

Site footer with scripts, copyright, and cookie consent. Includes:

Copyright notice
JavaScript assets
GDPR cookie consent banner

functions.php

Template functions and helpers. Provides:

Translation functions (t(), __())
Model initialization
Post retrieval functions
Navigation functions
Utility functions

Template Functions

i18n Functions

                            PHP
                            i18n functions
                        

// Translate a string
t('Hello World');

// Get current locale
get_locale();

// Check RTL support
is_rtl();

// Get HTML direction attribute
get_html_dir();

// Language switcher
language_switcher($args);

Post Retrieval Functions

                            PHP
                            post functions
                        

// Featured posts
featured_post();

// Get slideshow posts
get_slideshow($limit);

// Latest posts
latest_posts($limit, $position);

// Posts by archive
posts_by_archive($values);

// Posts by tag
posts_by_tag($tag);

// Posts by category
posts_by_category($topicId);

// Search by tag
searching_by_tag($tag);

// Retrieve single post
retrieve_detail_post($id);

// Get page
retrieve_page($arg, $rewrite);

Image Display System

Scriptlog provides responsive images with WebP support and automatic fallback.

Image Functions

                            PHP
                            image functions
                        

// Featured image
invoke_frontimg(string $filename, bool $thumb = true): string

// Responsive image with WebP
invoke_responsive_image(
    string $filename,
    string $size = 'thumbnail',
    bool $thumb = true,
    string $alt = '',
    string $class = 'img-fluid',
    bool $fetchpriority = false
): string

// Hero/LCP image
invoke_hero_image(string $filename, string $alt = ''): string

Image Sizes

Size	Dimensions	Folder	Prefix
`thumbnail`	640 x 450	`small/`	`small_`
`medium`	730 x 486	`medium/`	`medium_`
`large`	1200 x 630	`large/`	`large_`

Asset Management

Active Theme Assets

Asset	Location
Main CSS	`assets/css/style.sea.min.css`
Nav CSS	`assets/css/sina-nav.min.css`
Front JS	`assets/js/front.min.js`
Nav JS	`assets/js/sina-nav.min.js`
Bootstrap	`assets/vendor/bootstrap/css/bootstrap.min.css`
Font Awesome	`assets/vendor/font-awesome/css/font-awesome.min.css`

Asset Minification

Use the minification script before deployment:

                            BASH
                            command
                        

php tmp/minify.php

This generates minified .min.css and .min.js files from source files.

RTL Support

Scriptlog supports RTL languages (Arabic, Hebrew, etc.) through automatic detection:

                            TEXT
                            RTL assets
                        

// Theme includes RTL assets when needed:
// assets/css/rtl.css
// assets/js/rtl.js

Creating Custom Themes

Follow these steps to create your own custom theme:

Directory Structure

Create public/themes/your-theme/ with all required files.

Theme Configuration

Add theme.ini with metadata, name, and description.

Core Templates

Build header.php, footer.php, and page templates.

Theme Functions

Add functions.php with template helpers and model initialization.

Assets

Place CSS, JS, and images in assets/ directory.

Activate

Upload and activate through Settings → Themes in admin panel.

Best Practices

Follow these guidelines for maintainable and professional themes:

Template Structure

Use call_theme_header() and call_theme_footer() for consistent layout across all pages.

i18n Ready

Always use translation functions (t(), __()) for user-facing strings to support multiple languages.

Responsive Images

Use invoke_responsive_image() for featured images with WebP support and automatic fallback.

Clean Templates

Keep templates clean - separate PHP logic into functions.php and use template tags in view files.

Performance

Minify CSS/JS before deployment using the built-in minification script.

RTL Support

Test RTL layouts for RTL language support. Use is_rtl() function and include RTL CSS assets.