how to customize site to look like demo

Step-by-Step Guide to Mimic the StreamKing Demo Style on Your Existing WordPress Site

This guide builds on the previous overview but dives deeper based on Sonaar’s official documentation, knowledge base articles, and theme-specific features. Since you want to avoid full demo imports (which typically overwrite pages, posts, and settings via tools like One-Click Demo Import or Tools > Demo Content Install), we’ll focus on manual setup, selective imports of Elementor templates/kits/blocks, and customization. This preserves your existing content while replicating the demo’s modern, dark-themed podcast/streaming layout with audio players, grids, heroes, and continuous playback.

StreamKing is a demo built on Sonaar’s core theme framework (often called “Sonaar” or integrated with MP3 Audio Player Pro). It emphasizes audio streaming (e.g., podcasts, radio), Elementor for page building, and widgets for players. You’ll need:

Prerequisites: WordPress 6.0+, PHP 7.4+, and sufficient server resources (e.g., max_execution_time 300+ for imports). Ensure your site has no conflicts from other themes/plugins—deactivate them temporarily if needed.
Required Plugins: Elementor (free; Pro for advanced kits), MP3 Audio Player by Sonaar (free; Pro for waveforms, sticky players, etc.), Essential Addons for Elementor (optional for extra widgets), and any others prompted by the theme.
License: Activate your Sonaar theme and MP3 Player Pro licenses for access to premium kits, blocks, and updates. Go to your Sonaar account at sonaar.io/login > My Account > Downloads to get files/keys.
Tools: Use Elementor’s drag-and-drop editor, the Customizer (Appearance > Customize), and Theme Options (WP-Admin > Sonaar or similar).

If you encounter issues (e.g., CORS errors for audio playback), refer to Sonaar’s troubleshooting docs like “Audio Not Playing? Read This” for server config fixes.

Step 1: Install and Activate the Theme (Without Demo Content)

Upload and Install: Download the theme ZIP from sonaar.io (e.g., sonaar.zip or streamking-specific if available; StreamKing is often bundled in their multi-demo theme). Go to WP-Admin > Appearance > Themes > Add New > Upload Theme > Select the ZIP > Install Now.
Activate: Once installed, activate the theme. This switches your site to the Sonaar framework without importing any content.
Child Theme (Recommended for Customizations): To safely modify code without losing changes on updates:
Download the child theme ZIP (sonaar-child.zip) from your Sonaar account.
Go to Appearance > Themes > Add New > Upload > Select sonaar-child.zip > Install > Activate.
This inherits all parent theme styles but allows custom CSS/PHP edits in the child theme’s style.css or functions.php.
Avoid Demo Import: Do not go to Appearance > Demo Content Install or Tools > Demo Content Install—these import full demos like StreamKing, which could overwrite your posts/pages. Instead, we’ll build manually.

Step 2: Install and Activate Required Plugins

Go to WP-Admin > Appearance > Install Plugins (or Sonaar > Required Plugins if available).
Install and activate:
Elementor: Core for page building. If you have Pro ($49/year), it unlocks template kits, popups, and dynamic content.
MP3 Audio Player by Sonaar: Essential for audio streaming. Pro version ($49+) adds waveforms, spectrum analyzers, continuous playback, and shortcode builders.
Elementor Sonaar Addon (if prompted): Enhances Elementor with Sonaar-specific widgets (e.g., audio players, playlists).
Sonaar Importer (srp-importer.zip): Download from your account, upload via Plugins > Add New > Upload Plugin. This enables selective kit imports.
Others: Contact Form 7 (for subscribe forms), Mailchimp for WP (for newsletters), Yoast SEO (for podcast feeds).
Activate Licenses:
For Sonaar Theme: WP-Admin > Sonaar > License Key > Enter your key.
For MP3 Player Pro: WP-Admin > MP3 Player > License Key.
For Elementor Pro: WP-Admin > Elementor > License.
Update Everything: Go to Dashboard > Updates to ensure all are current (e.g., Sonaar 4.19+ adds translation options and fixes).

Step 3: Configure Global Theme Options and Customizer

Theme Options Panel (WP-Admin > Sonaar or Theme Options):
General Settings: Enable podcast mode if focused on episodes (adds custom post types for episodes). Set site layout to full-width for the demo’s immersive feel.
Colors & Typography: Mimic StreamKing’s dark mode—set background to #000000 or #1a1a1a, text to #ffffff, accents to #00bfff (blue) or #ff00ff (purple) for buttons/links. Use Google Fonts like Poppins (headings: bold, 48px+) and Roboto (body: 16px).
Audio Player Globals: Enable sticky footer player for continuous playback (plays across pages). Customize waveform height (e.g., 100px), colors (match theme accents), and features like download buttons, spectrum analyzer (real-time visuals), or Icecast/Shoutcast integration for live streams.
Header & Footer: Enable sticky header. Add logo (upload via Customizer), social icons, and menu. For footer, add widget areas for copyright, subscribe forms, and recent episodes.
Translations: In newer versions (4.19+), translate strings like “Play Now” directly here without plugins.
Performance: Enable lazy loading for images/audio to match demo’s smooth scrolling.
WordPress Customizer (Appearance > Customize):
Site Identity: Upload logo, set favicon.
Menus: Create primary menu (Appearance > Menus) with links to Home, Episodes, About, Contact. Assign to header.
Homepage Settings: Set a static front page (e.g., your existing home) or create a new blank page for building.
Additional CSS: Add custom styles, e.g., for parallax backgrounds: .hero-section { background-attachment: fixed; }.
Test Audio Setup: Create a test MP3 Player post (WP-Admin > MP3 Player > Add New). Add tracks (local MP3/M4A or external like Libsyn/Acast/Amazon S3). Supported providers include Icecast, Shoutcast—configure URLs in the post fields.

Step 4: Import Individual Elementor Kits, Templates, or Blocks (Selective, Non-Destructive)

Sonaar provides 100+ modular blocks and 40+ layouts via their Elementor Addons/Templates Kit (available with Pro licenses; download from account). This lets you import pieces without full demo overwrite.

Download Kits: From sonaar.io/login > My Account > Downloads, get the Elementor Kit ZIP (e.g., for Audience/Rebirth or 100+ Pack; StreamKing elements are similar—heroes, grids, players).
Install Importer if Needed: If not already, upload srp-importer.zip via Plugins > Add New.
Import Templates:
Go to WP-Admin > Templates > Saved Templates > Import Templates (top-right button).
Upload the JSON/ZIP file from the kit. Select specific files if the ZIP contains multiples (e.g., hero.json, episode-grid.json).
Imported items appear in your Templates library, categorized (e.g., Headers, Sections, Pages, Blocks).
Use on Pages:
Edit your existing homepage (Pages > Edit > Edit with Elementor).
Click the folder icon in the editor to access “My Templates” or “Blocks.”
Insert individual blocks: e.g., Drag a “Podcast Hero” block (full-width banner with play button, waveform, episode title), “Episode Grid” (masonry layout for recent podcasts), “Subscribe Section” (form with Mailchimp integration), or “About Block” (text + image).
Customize each: Right-click > Edit > Adjust styles (background gradients: #000 to #333, animations: fade-in, responsive: mobile-first).
For audio: Use the “MP3 Audio Player” widget (in Elementor search). Link to your MP3 Player posts for playlists.
Pro Tip: If kits aren’t importing, check for Elementor Pro activation. For StreamKing-specific styles, inspect the demo (right-click > Inspect) for HEX colors/fonts and apply manually in Elementor.
Alternative: Shortcode Builder for Players: If not using Elementor, go to WP-Admin > MP3 Player > Shortcode Player Builder. Design players (e.g., with waveforms, tracks from posts), generate shortcode, and paste into pages/posts.

Step 5: Build/Replicate Key Page Sections Manually

Using Elementor on your pages, mirror the demo structure:

Hero Section: Add a full-screen section with background image (podcast art), overlay text (large heading, subtitle), and embedded audio player widget. Enable parallax scrolling in section settings.
Episodes/Playlists: Use grid widget (Essential Addons or Sonaar). Query your existing posts or new MP3 Player entries. Add filters (e.g., via ACF if advanced—see Sonaar docs on “How to use Filters Widget using ACF”).
About/Team: Inner sections with columns: Image left, bio right. Use animations for entry.
Subscribe/CTA: Integrate Mailchimp form (see “How to use the newsletter form” doc: Get API key from Mailchimp > Extras > API Keys, paste in theme options).
Footer Player: Enable in theme options for site-wide sticky audio (continues playing episodes).
Podcast Feeds: For SEO/ syndication, use categories/tags; integrate with Apple Podcasts/Spotify via RSS in MP3 Player settings.
Unique Features: Add continuous playback (theme options), real-time spectrum (player settings), or live streaming (Icecast URL in player widget).

Step 6: Fine-Tune, Test, and Troubleshoot

Visual Matching: Preview the demo at sonaar.io/demos/?theme=StreamKing. Use browser inspector for exact styles (e.g., button radius: 50px).
Responsiveness: In Elementor, switch to mobile view; adjust padding/margins.
Audio Testing: Play tracks—ensure no CORS issues (serve from same domain or configure .htaccess: Header set Access-Control-Allow-Origin "*").
Performance: Use plugins like WP Rocket for caching; regenerate waveforms if needed (MP3 Player > Settings > Regenerate Peaks).
Updates & Backups: Backup your site before changes (e.g., via UpdraftPlus). Update theme/plugins regularly.
If Stuck: Check Sonaar docs for specifics (e.g., “How to Configure the Sticky Player,” “Waveform & Peaks Generation”). Contact support with license for custom help ($49 for installation service).

This setup should get your site ~90% matching the demo in 1-2 hours, depending on complexity. If you need video tutorials, search YouTube for “Sonaar theme setup” (e.g., installing without demo). Let me know if a specific section needs more detail!