View Categories

Customization

1 min read

Table of Contents

All theme settings are located under Appearance → Customize → Sinematik Theme.

Colors #

Sinematik Theme → Colors

Setting Default Description
Primary Color #00d4ff Cyan — links, icons, highlights
Secondary Color #7b61ff Purple — gradients, alternate accents
Accent Color #f59e0b Gold — CTA buttons, important actions

All colors are controlled via CSS custom properties:

--color-primary: #00d4ff;
--color-secondary: #7b61ff;
--color-accent: #f59e0b;

Hero Section #

Sinematik Theme → Hero Section

  • Hero Title — The main headline on the homepage
  • Hero Subtitle — Descriptive text below the title
  • CTA Button Text — Text displayed on the call-to-action button
  • CTA Button Link — URL the button directs to

Statistics #

Sinematik Theme → Statistics

4 statistic pairs (number + label):

# Default Number Default Label
1 250+ Happy Clients
2 500+ Projects Completed
3 10+ Years of Experience
4 99% Client Satisfaction

Contact Information #

Sinematik Theme → Contact Information

  • Address — Displayed in footer and contact page
  • Phone — Clickable phone link
  • Email — Clickable email link
  • Business Hours — Displayed as text

Social Media #

Sinematik Theme → Social Media

  • LinkedIn URL
  • Twitter / X URL
  • GitHub URL
  • Instagram URL

Fields left empty are automatically hidden.

Theme Options #

Sinematik Theme → Theme Options

Setting Default Description
Enable Dark Mode Toggle On Show dark/light mode switch in the navbar
Enable 3D Particle Background On Show the Three.js animated particle system
Enable Cookie Consent Banner Off Display a GDPR-compliant cookie banner
Cookie Banner Text (default text) Custom text for the consent banner

3D Background Advanced Settings #

To modify the Three.js particle system settings, edit the CONFIG object in assets/js/three-scene.js:

const CONFIG = {
    particles: {
        desktop: 900,  // Desktop particle count
        mobile: 300,   // Mobile particle count
        tablet: 500,   // Tablet particle count
    },
    connection: {
        maxDistance: 150, // Connection line distance
        opacity: 0.15,    // Line opacity
    },
    mouse: {
        radius: 200,  // Mouse interaction radius
        force: 0.03,  // Push/pull force
    },
};

Footer Settings #

Sinematik Theme → Footer Settings

  • Footer Column Layout — Choose 2, 3, or 4 widget columns
  • Footer Copyright Text — Custom text. Leave empty to use site name

Add widgets to footer columns via Appearance → Widgets. Only columns with active widgets are displayed. The grid automatically adapts to the number of active columns.

Widget Areas #

Area Location Description
Blog Sidebar Blog pages right panel Search, recent posts, categories, tags
Footer Column 1-4 Footer Configurable 2/3/4-column layout

Custom Widgets #

The theme includes 3 custom widgets available in Appearance → Widgets:

Widget Description
Sinematik About Logo, description, and social links
Sinematik Social Social media icon links
Sinematik CTA Call-to-action button with title and description

Built-in Features #

The following features are included and require no additional configuration:

Feature Description
Breadcrumbs Automatic breadcrumb navigation on all pages with Schema.org markup
Back to Top Floating button appears after scrolling 300px
Reading Progress Bar Gradient progress indicator on single posts
Related Posts Shows 3 related posts from the same category
Author Box Author avatar and bio displayed below posts
Custom Login Page Branded dark login screen matching the theme
Open Graph + Twitter Cards Social sharing meta tags for all pages and posts
Schema.org Structured Data Organization, BreadcrumbList, and Article markup
Pagination Styled numeric pagination on blog and archive pages
Search Results Dedicated search results template with result count
404 Page Enhanced error page with search and popular links

Child Theme Usage #

It is recommended to always use a child theme for customizations:

  1. Copy the sinematik-child/ folder to wp-content/themes/
  2. Activate the child theme
  3. Customize via style.css and functions.php
What are your Feelings
Scroll to Top