Menu Icon Close Menu Icon
Cart

Welcome to the Sophia Theme Documentation!

Thank you for choosing the Sophia theme for your WordPress site.

Whether you’re using the free Sophia Lite or paid Sophia Pro, this guide will walk you through the steps to install and customize the theme, ensuring a smooth and successful setup.

Please note that some sections in this documentation may only apply to Sophia Pro, but we’ve included comprehensive coverage of all features to help you get the most out of Sophia.

Getting Support

Need help? Our support team is available through our support portal with responses typically within 24 hours on business days.

On weekends or holidays, responses may take longer, but we will assist you as soon as possible. Feel free to reach out with any questions or issues, we’re always ready to help!

Theme Installation

Install the Sophia theme just like any other WordPress theme. You can upload the ZIP file directly from your WordPress dashboard and activate it in a few simple steps.

Installing Sophia Theme

  1. Log in to your account.
  2. Navigate to the Downloads section. You will see the Sophia Pro theme and click on Download to get a compressed sophia-pro.zip theme file on your computer.
  3. Log in to the WordPress admin panel.
  4. Go to Appearance > Themes and click on the Add New button, at the top of the screen.
  5. In the Add Themes screen, click on Upload Theme.
  6. Click on Choose File, and then browse for the compressed sophia-pro.zip theme file on your computer.
  7. Click on Install Now to start the installation.
  8. After the installation is done, click on the Activate button.

Demo Content Import

Follow these simple steps to recreate the Sophia Pro demo layout.

Go to Appearance > Demo Import in your WordPress dashboard to access this page.

  1. Install WooCommerce (Optional) If you want to use the demo products, install WooCommerce before importing. You can skip this step if you don’t need an online store.
  2. Download the demo content file Click the Download XML File button and save this file to your computer – you’ll upload it in step 4.
  3. Install WordPress Importer plugin Click the Install Plugin button. This official WordPress plugin handles the import process safely. Delete it after the demo import is complete.
  4. Import the demo content Click Go to WordPress Importer. Upload the XML file you downloaded in step 2. Make sure to check “Download and import file attachments” to get all images.

Child Theme Information

A child theme is not required for Sophia Pro since it’s a block theme.

Block themes store customizations in the database rather than in theme files, so your customizations will be preserved when the theme updates.

All template modifications made through the Site Editor are automatically protected from theme updates.

Updating Your Theme

To receive notifications for new versions and streamline the update process, we recommend staying current with the latest theme features and security improvements through your account dashboard.

Theme Customization

The Sophia theme is built for effortless customization. Open the Site Editor to adjust colors, fonts, and layouts, or mix and match pre-designed patterns to create a unique look that reflects your brand.

Using the WordPress Block Editor

Sophia Pro is a block-based theme designed to work seamlessly with the WordPress Block Editor (Gutenberg). It offers a smooth and intuitive experience without the need for third-party page builders. The Block Editor allows you to create and customize content easily using blocks for text, images, videos, and more.

If you’re new to the WordPress Block Editor, you can explore its basic features and usage in the official WordPress Block Editor Documentation.

Homepage & Blog Setup

Homepage Configuration

Your theme includes a dedicated front-page.html block template that automatically displays as your site’s homepage.
No configuration in Settings → Reading is required.

To customize your homepage content:

  1. Go to Appearance → Editor (Site Editor).
  2. In the left panel, open Templates → Front Page.
  3. Edit the layout and content using the block editor.
  4. Click Save to apply your changes.

Your customized Front Page will appear automatically on your site’s homepage, regardless of your Reading settings.

Video Tutorial: Customizing Your Homepage Layout

Blog Page Setup

If you want a separate page to display your blog posts, you have two options:

Option 1: Use the Blog Template (Recommended)

  1. Go to Pages → Add New.
  2. Name your page Blog (or any title you prefer).
  3. In the Page Settings sidebar, open the Template dropdown.
  4. Select Blog Left Sidebar, Blog Right Sidebar, or Default Blog (depending on your theme’s templates).
  5. Click Publish.

Your blog posts will now display automatically using the selected blog template — no Reading settings required.

Video Tutorial: Setting Up Your Blog Page

Option 2: Assign a Blog Page Using Reading Settings

If you prefer to use WordPress’s classic Reading Settings:

  1. Go to Settings → Reading.
  2. Under Your homepage displays, select A static page.
  3. Leave the Homepage field blank (your theme’s front-page.html handles this automatically).
  4. From the Posts page dropdown, choose your Blog page.
  5. Click Save Changes.

Your blog posts will now appear on the Blog page using your theme’s home.html or index.html template.

Important Notes

  • Block themes automatically handle front pages via templates — manual Reading settings are optional.
  • The Front Page template takes priority over other templates for your homepage.
  • The Posts Page (Blog) will use the first matching template: home.html, index.html, or a custom page template if assigned.

Site Logo Setup

Follow these steps to set up your site logo using the Site Editor:

  1. Open the Site Editor: While viewing any page on your site, ensure you are logged in with the admin bar enabled. In the admin bar at the top of the screen, click the Edit Site button.
  2. Locate the Site Logo Block: Once in the Site Editor, find the Site Logo block within the template you’re editing. This block is usually located in the header area.
  3. Upload or Select Your Logo: Click on the Site Logo block to upload a new logo or select one from your media library. Ensure the logo is appropriately sized and formatted.
  4. Save Your Changes: After setting up your logo, click Save in the top-right corner to apply the changes across your site.

Fallback Logo Feature

Sophia Pro includes an intelligent fallback logo system that automatically displays a default Sophia Pro logo when no custom logo is uploaded. This ensures your site always looks professional, even during initial setup.

How it works:

  • Automatic Display: If no custom logo is set, the theme automatically shows a styled fallback logo
  • Smart Detection: The system checks if a custom logo exists before showing the fallback
  • Seamless Integration: The fallback logo uses the same styling and positioning as custom logos
  • Easy Replacement: Once you upload your own logo, the fallback automatically disappears

Benefits:

  • Professional Appearance: Your site looks complete even without a custom logo
  • Consistent Branding: Maintains visual consistency during development
  • User-Friendly: No broken or missing logo areas
  • Flexible Design: Fallback logo adapts to your site’s color scheme

To replace the fallback logo, simply upload your own logo following the steps above, and your custom logo will automatically replace the fallback logo across your entire site.

Assigning a Page Template

Video Tutorial: Assigning a Page Template (About Page Example)

In this tutorial, we’ll walk you through two different methods for building an About Us page, one quick method using Starter Patterns, and a second approach using the WordPress Patterns library.

Important: To avoid duplicate titles, we recommend selecting the “No Title” page template. This removes the default WordPress title that appears above your content, ensuring only the title from your page template shows.

Navigation Setup

Setting up your site’s navigation is essential for helping visitors navigate through your content:

  1. Locate the Navigation Block: Within the Site Editor, find the Navigation block, usually located in the header area of your template.
  2. Create a New Menu: Click on the Create a new menu link within the Navigation block.
  3. Add Menu Items: Begin adding menu items by clicking the + icon. You can add links to pages, posts, categories, or custom URLs.
  4. Save Your Changes: Once you’ve finished, click Save in the top-right corner to apply the changes to your site.

Video Tutorial: Editing Your Header and Footer Navigation

Site Header Setup

To update or change your site’s header template:

  1. Open the List View Panel: Ensure you are in the Site Editor. Open the List View panel on the left side of the editor.
  2. Select the Header Block: In the List View panel, locate and click the header block.
  3. Choose a New Header Template: In the Block settings panel, expand the Design option group to reveal available templates and choose the template you want to apply.
  4. Save Your Changes: Click Save in the top-right corner to apply the changes.

Accessing The Site Editor

The Site Editor is your main tool for customizing your Sophia Pro theme. Here’s how to access it:

  • From the Admin Bar: While viewing any page on your site, click the Edit Site button in the admin bar at the top.
  • From the Dashboard: Navigate to Appearance > Editor in your WordPress admin dashboard.
  • Direct Access: You can also access specific templates by going to Appearance > Editor > Templates and selecting the template you want to edit.

Returning To The Dashboard

To return to your WordPress dashboard from the Site Editor:

  • Click the WordPress logo in the top-left corner of the Site Editor.
  • Alternatively, click the Back to Dashboard link if available.
  • You can also navigate directly by typing your site URL followed by /wp-admin/ in your browser.

Accessing the Templates Using Site Editor

Templates control the layout and design of different page types on your site:

  1. Open Site Editor: Navigate to Appearance > Editor.
  2. Browse Templates: Click on Templates in the left sidebar to see all available templates.
  3. Select a Template: Click on any template to edit it (Homepage, Single Post, Page, etc.).
  4. Preview Templates: Hover over templates to see a preview before editing.

Editing the Front Page Using The Site Editor

Customize your homepage to make a great first impression:

  1. Access Front Page Template: Go to Appearance > Editor > Templates > Front Page.
  2. Edit Content: Click on any block to edit text, images, or other content.
  3. Add New Blocks: Use the + button to add new content blocks.
  4. Rearrange Sections: Drag and drop blocks to reorder sections.
  5. Save Changes: Click Save to apply your changes.

Accessing the Template Parts Using Site Editor

Template parts are reusable components like headers and footers:

  1. Open Site Editor: Navigate to Appearance > Editor.
  2. Browse Template Parts: Click on Template Parts in the left sidebar.
  3. Edit Parts: Select Header, Footer, or other template parts to customize them.
  4. Global Changes: Changes to template parts apply across your entire site.

Editing The Header Using The Site Editor

Customize your site’s header area:

  1. Access Header: Go to Appearance > Editor > Template Parts > Header.
  2. Edit Logo: Click on the site logo to upload your own logo.
  3. Modify Navigation: Edit menu items, add new pages, or change menu styling.
  4. Adjust Layout: Change header layout, colors, or spacing.
  5. Save Changes: Click Save to apply changes site-wide.

Editing Footer Using The Site Editor

Customize your site’s footer area:

  1. Access Footer: Go to Appearance > Editor > Template Parts > Footer.
  2. Edit Content: Modify footer text, copyright information, or contact details.
  3. Add Elements: Include social media icons, additional menus, or widgets.
  4. Style Footer: Adjust colors, typography, and layout.
  5. Save Changes: Click Save to apply changes across your site.

Where to Add Custom CSS

Page Customization

Customize Blog Pages

Blog Index Page

  1. Open the Site Editor: While viewing the blog index page, click the Edit Site button in the admin bar.
  2. Alternatively: Navigate to Appearance > Editor > Templates > Blog Home.
  3. Choose Layout: Select from available blog layout templates.
  4. Customize Display: Adjust post excerpts, featured images, and metadata display.
  5. Save Changes: Click Save to apply your blog customizations.

Single Blog Posts

  1. Open the Site Editor: While viewing a blog post, click the Edit Site button.
  2. Alternatively: Navigate to Appearance > Editor > Templates > Single Post.
  3. Customize Layout: Adjust post title, content, author info, and related posts.
  4. Add Elements: Include social sharing, comments, or newsletter signup.
  5. Save Changes: Click Save to apply to all blog posts.

Blog Archive Pages

  1. Access Archives: Navigate to Appearance > Editor > Templates > Archive.
  2. Customize Layout: Adjust how category and tag pages display posts.
  3. Add Descriptions: Include category descriptions or custom content.
  4. Save Changes: Click Save to apply archive customizations.

Customize Regular Pages

Standard Pages

  1. Edit Page Template: Navigate to Appearance > Editor > Templates > Page.
  2. Customize Layout: Adjust page title, content area, and sidebar options.
  3. Add Elements: Include contact forms, testimonials, or call-to-action sections.
  4. Save Changes: Click Save to apply to all standard pages.

Specific Page Customization

  1. Edit Individual Pages: Go to Pages > All Pages and select a specific page.
  2. Change Template: In the page editor, select Template and choose a different template.
  3. Custom Content: Add unique content blocks specific to that page.
  4. Update: Click Update to save page-specific changes.

Using Different Templates for Specific Pages

Create unique layouts for different types of content:

Create Custom Templates

  1. Open Site Editor: Navigate to Appearance > Editor.
  2. Add Template: Click Templates > Add New Template.
  3. Choose Type: Select Custom Template and give it a descriptive name.
  4. Design Layout: Add blocks and customize the layout for specific needs.
  5. Save Template: Click Save to create your custom template.

Assign Templates to Pages

  1. Edit Page: Go to Pages > All Pages and select the page.
  2. Template Settings: In the page editor, find the Template option.
  3. Select Template: Choose your custom template from the dropdown.
  4. Update Page: Click Update to apply the new template.

Video Tutorial: Resetting a Page Template to Theme Default

Pre-built Custom Templates

Sophia Pro includes specialized templates for different business needs:

  • Service Page: Optimized for showcasing individual services with pricing and booking options
  • About Page: Perfect for team introductions and company story presentations
  • Contact Page: Includes contact forms, location maps, and business information
  • Landing Page: Conversion-focused design without header and footer distractions
  • Portfolio Page: Designed for showcasing work samples and case studies
  • Testimonials Page: Dedicated layout for customer reviews and success stories

Using Different Templates for Specific Posts/Pages

Assign Templates to Blog Posts

  • Edit Post: Go to Posts > All Posts and select the post
  • Template Settings: In the post editor, find the Template option
  • Select Template: Choose your custom template from the dropdown
  • Update Post: Click Update to apply the new template

WooCommerce Setup

Shop Page Customization

If you’re selling products or services, customize your shop page:

  1. Access Shop Template: Navigate to Appearance > Editor > Templates > Product Catalog.
  2. Customize Layout: Adjust product grid, filters, and sorting options.
  3. Add Content: Include shop banners, promotional sections, or featured products.
  4. Style Products: Customize product card design and hover effects.
  5. Save Changes: Click Save to apply shop customizations.

Product Pages

Single Product Pages

  1. Edit Product Template: Navigate to Appearance > Editor > Templates > Single Product.
  2. Customize Layout: Adjust product images, descriptions, and purchase buttons.
  3. Add Elements: Include related products, reviews, or additional information tabs.
  4. Save Changes: Apply to all product pages.

Video Tutorial: Customizing Your Product Detail Page

Product Category Pages

  1. Access Category Template: Navigate to Appearance > Editor > Templates > Product Category.
  2. Customize Display: Adjust how products are shown within categories.
  3. Add Category Info: Include category descriptions and promotional content.
  4. Save Changes: Apply to all category pages.

Blocks

Adding Block In The Block Editor (Page/Post)

Learn how to add and customize blocks in your content:

  1. Open Editor: Edit any page or post to access the block editor.
  2. Add Blocks: Click the + button to browse available blocks.
  3. Search Blocks: Use the search function to find specific block types.
  4. Insert Blocks: Click on any block to add it to your content.
  5. Customize Blocks: Use the block settings panel to adjust appearance and functionality.

Common Block Types

  • Paragraph: For text content
  • Heading: For titles and headings
  • Image: For photos and graphics
  • Button: For calls-to-action
  • Columns: For multi-column layouts
  • Group: For organizing related content

Navigation Block (Site Navigation Menu)

Create and customize your site’s main navigation:

  1. Add Navigation Block: In the Site Editor, add a Navigation block to your header.
  2. Create Menu: Click Create navigation menu to start building your menu.
  3. Add Menu Items: Use the + button to add pages, posts, or custom links.
  4. Customize Appearance: Adjust menu styling, colors, and layout.
  5. Save Menu: Save your navigation changes.

Navigation Features

  • Dropdown Menus: Create multi-level menu structures
  • Mobile Menu: Responsive menu that works on all devices
  • Custom Links: Add external links or anchor links
  • Menu Styling: Customize colors, fonts, and spacing

Social Icons Block (Social Media Menu)

Add social media links to your site:

  1. Add Social Icons Block: Use the + button to add Social Icons block.
  2. Choose Platforms: Select from available social media platforms.
  3. Add Links: Enter your social media profile URLs.
  4. Customize Appearance: Adjust icon size, color, and layout.
  5. Position Block: Place in header, footer, or content areas.

Supported Platforms

Facebook, Twitter, Instagram, LinkedIn, YouTube, TikTok, Pinterest, Snapchat, WhatsApp, and many more popular platforms.

Patterns

Sophia Pro Block Patterns

Sophia Pro includes professionally designed patterns for common business needs:

Heading Patterns

  • Heading with Central Semicircle and Three Circles Four circular image frames – one large semicircle center with three smaller circles. Images automatically clip to shape.
  • Heading with Central Masked and Three Circles Three circular side images plus one center position for custom shapes (stars, hearts, hexagons, etc.). Create custom shapes in design software and upload as PNG or SVG.
  • Heading with Single Image Single full-width image header. Perfect for hero sections and page banners.

Adding Sophia Pro Theme Patterns

Access and use the built-in theme patterns:

  1. Open Block Editor: Edit any page, post, or template.
  2. Access Patterns: Click the + button and select the Patterns tab.
  3. Browse Categories: Look for “Sophia Pro” or business-specific pattern categories.
  4. Preview Patterns: Hover over patterns to see a preview.
  5. Insert Pattern: Click on any pattern to add it to your content.

Steps to Use Patterns

Video Tutorial: Adding Patterns and Blocks to Your Page

Follow these steps to effectively use patterns in your design:

  1. Plan Your Layout: Decide what type of content you want to display.
  2. Select Appropriate Pattern: Choose a pattern that matches your content type.
  3. Insert Pattern: Add the pattern to your page or template.
  4. Customize Content: Replace placeholder text and images with your own content.
  5. Adjust Styling: Modify colors, fonts, and spacing to match your brand.
  6. Test Responsiveness: Preview on different devices to ensure proper display.

Pattern Customization Tips

  • Replace Images: Upload your own high-quality images
  • Update Text: Write compelling copy that speaks to your audience
  • Brand Colors: Apply your brand colors consistently
  • Call-to-Actions: Include clear next steps for visitors
  • Contact Information: Keep all contact details up-to-date

Video Tutorial: Reordering Patterns on Your Page

Template Customization

Template Customization Quick Guide

Sophia Pro includes templates optimized for different business types and page purposes. Navigate to Appearance > Editor > Templates to view and edit all available templates.

Template Editing Process

  1. Access Templates: Navigate to Appearance > Editor > Templates.
  2. Select Template: Click on the template you want to customize.
  3. Edit Layout: Modify blocks, add content, or change design.
  4. Preview Changes: Use the preview function to see changes before saving.
  5. Save Template: Click Save to apply changes.

Available Templates Reference

Sophia Pro includes 32 professionally designed templates for different page types and layouts:

General Templates

  • index.html – Default fallback template for all content types with sidebar on left
  • front-page.html – Custom homepage template with business-focused sections
  • home.html – Alternative homepage template
  • 404.html – Custom error page for missing content with search functionality
  • search.html – Search results page with custom search interface

Page Templates

  • page.html – Standard page template with medium width, no sidebar
  • page-no-title.html – Page template without title display
  • blank.html – Completely blank page (no header, footer, or styling)
  • single-page-no-sidebar.html – Page without sidebar, medium width
  • single-page-no-sidebar-full-width.html – Full width page without sidebar
  • single-page-sidebar-on-left.html – Page with 27% sidebar on left, 73% content on right
  • single-page-sidebar-on-right.html – Page with 73% content on left, 27% sidebar on right

Blog Post Templates

  • single.html – Default single post template with author card, comments, and navigation
  • single-post-no-sidebar.html – Blog post without sidebar
  • single-post-no-sidebar-full-width.html – Full width blog post without sidebar
  • single-post-sidebar-on-left.html – Blog post with 27% sidebar on left, 73% content on right
  • single-post-sidebar-on-right.html – Blog post with 73% content on left, 27% sidebar on right

Blog Archive Templates

  • blog.html – Blog index page with sidebar on left
  • blog-no-sidebar.html – Blog archive without sidebar
  • blog-no-sidebar-full-width.html – Full width blog archive without sidebar
  • blog-sidebar-on-right.html – Blog archive with 73% posts on left, 27% sidebar on right
  • archive.html – Category, tag, and date archive pages with custom heading
  • author.html – Author archive page with author bio card

WooCommerce Templates

Product Archive Templates:

  • archive-product.html – Main product archive with popup sidebar and filter button
  • archive-product-sidebar-on-left.html – Product archive with 23% sidebar on left, 73% products on right (3 columns)
  • archive-product-sidebar-on-right.html – Product archive with 73% products on left, 23% sidebar on right (3 columns)

Product & Shopping Templates:

  • single-product.html – Individual product page with gallery, details, and related products
  • cart.html – Shopping cart page with cart items, totals, and cross-sells
  • checkout.html – Checkout page with billing, shipping, and payment forms (no header/footer)
  • order-confirmation.html – Order confirmation page showing order details and addresses
  • page-my-account.html – Customer account page with login form and image

Template Parts Reference

Template parts are reusable components that appear across multiple templates. Access them at Appearance > Editor > Template Parts.

Core Template Parts

  • header.html – Main site header with logo and navigation
  • footer.html – Site footer with four columns and default sections
  • sidebar.html – Standard sidebar for blog posts and pages
  • page-content.html – Reusable page content structure with title and featured image
  • post-content.html – Blog post content structure including category, title, meta, featured image, content, author card, navigation, and comments

WooCommerce Template Parts

  • product-collection.html – Main product grid (4 columns, 12 products per page) with pagination
  • all-products.html – Product collection layout (4 columns, 12 products per page)
  • all-products-three-col.html – Product collection layout (3 columns, 9 products per page)
  • product-template.html – Individual product card design with image, price, title, summary, and add to cart button
  • sidebar-products.html – Product filter sidebar for shop pages

Template Parts Usage

Template parts are automatically included in templates but can be customized globally:

  1. Edit Template Part: Go to Appearance > Editor > Template Parts
  2. Select Part: Choose the template part you want to edit (Header, Footer, Sidebar, etc.)
  3. Make Changes: Modify the design, content, or layout
  4. Save: Click Save to apply changes across all templates using that part

Benefits of Template Parts:

  • Consistency: Changes apply everywhere the part is used
  • Efficiency: Edit once, update everywhere
  • Flexibility: Mix and match parts to create custom templates

Theme Global Style Setup

Configure global styles to maintain consistency across your site:

Accessing Global Styles

  1. Open Site Editor: Navigate to Appearance > Editor.
  2. Click Styles: Click the Styles button (circle icon) at the top-right.
  3. Browse Options: Explore different style categories.

Style Categories

Colors

  • Brand Colors: Set primary and secondary brand colors
  • Text Colors: Configure heading and body text colors
  • Background Colors: Set page and section backgrounds
  • Accent Colors: Define button and link colors

Typography

  • Font Families: Choose fonts for headings and body text
  • Font Sizes: Set consistent sizing across your site
  • Line Height: Adjust text spacing for readability
  • Letter Spacing: Fine-tune text appearance

Layout

  • Container Width: Set maximum content width
  • Spacing: Configure padding and margins
  • Border Radius: Set rounded corner styles
  • Shadows: Add depth with shadow effects

Style Variations

Sophia Pro includes 6 professionally designed color schemes that you can switch between instantly. Each variation maintains the same layout and typography while applying a cohesive color palette throughout your site.

Available Style Variations:

  1. Default: Classic tan and brown tones for spa and wellness businesses
    • Warm, inviting atmosphere with soft peach and tan brown accents
    • Perfect for: Beauty salons, spas, wellness centers
  2. Blue: Professional blue tones for medical and corporate sites
    • Clean, trustworthy appearance with soft blue backgrounds
    • Perfect for: Medical clinics, dental offices, professional services
  3. Coffee: Rich brown and cream tones for warm, welcoming sites
    • Earthy, comfortable feel with coffee-inspired colors
    • Perfect for: Lifestyle businesses, coaching, consulting
  4. Forest: Natural green tones for eco-friendly and wellness brands
  5. Orange : Energetic orange accents for modern, vibrant businesses
    • Bold, contemporary look with warm orange highlights
    • Perfect for: Fitness studios, modern salons, creative agencies
  6. Purple: Elegant purple tones for luxury and premium services
    • Sophisticated, upscale feel with lavender and plum accents
    • Perfect for: High-end salons, luxury spas, premium services
  7. Sage: Soft sage green for calming, natural aesthetics
    • Serene, balanced appearance with muted green tones
    • Perfect for: Meditation centers, yoga studios, natural wellness

How to Switch Style Variations:

  1. Open the Site Editor: Navigate to Appearance > Editor
  2. Click the Styles button (circle icon) in the top-right corner
  3. Browse the available style variations in the sidebar
  4. Click on any variation to preview it instantly
  5. Click Save to apply the new color scheme to your entire site

Video Tutorial: Switching Between Color Style Variations

Customizing Style Variations:

Each style variation can be further customized:

  • Override individual colors while keeping the overall palette
  • Adjust typography independently
  • Modify spacing and layout settings
  • Create your own custom variation based on any existing style

Applying Global Styles

  1. Select Style Elements: Choose what you want to customize.
  2. Make Adjustments: Modify colors, fonts, or spacing.
  3. Preview Changes: See how changes affect your site.
  4. Save Styles: Click Save to apply globally.

Performance & Support

Performance Optimization

Sophia Pro is built for speed and optimal performance:

Built-in Optimizations

  • Clean Code: Efficient, lightweight code structure
  • Mobile-First Design: Responsive design that works on all devices
  • Fast Loading: Optimized theme files for quick page loads
  • SEO-Friendly: Proper heading structure and semantic markup
  • Accessibility: WCAG compliant design elements

Performance Tips

  • Optimize Images: Use appropriately sized, compressed images
  • Choose Quality Hosting: Select a reliable hosting provider
  • Use Caching: Install a caching plugin for faster load times
  • Minimize Plugins: Only use necessary plugins
  • Regular Updates: Keep WordPress, theme, and plugins updated

SEO Best Practices

  • Proper Headings: Use heading hierarchy (H1, H2, H3)
  • Alt Text: Add descriptive alt text to all images
  • Meta Descriptions: Write compelling page descriptions
  • Internal Linking: Link between related pages on your site

Font Configuration

Preferred Font Choice

The designer’s preferred typeface for this theme is Switzer, as it best complements the overall style and visual balance of the design.

However, due to licensing restrictions, the Switzer font files are not bundled with the theme. You can still enjoy this font by downloading it for free from the official source and installing it manually.

Download Switzer Font →

If Switzer is not installed on your site, the theme will automatically fall back to system fonts (Apple system font, Segoe UI, Helvetica, sans-serif) to maintain a clean and consistent appearance.

Installation Instructions

  1. Visit the Fontshare Switzer page
  2. Download the font files
  3. Once downloaded, navigate to the Web folder in the extracted files
  4. Locate the Switzer-Variable.woff2 file
  5. Upload this file to your website at: /wp-content/uploads/fonts/Switzer-Variable.woff2
    • Use FTP, cPanel File Manager, or WordPress file manager
    • Create the fonts folder if it doesn’t exist
  6. The font will automatically load on your site

Important: Do NOT upload via Site Editor > Styles > Typography as this will create a separate “Switzer Variable” font that won’t integrate with the theme’s design. Use the manual upload method above for proper integration.

Troubleshooting

  • Ensure file path is exactly: /wp-content/uploads/fonts/Switzer-Variable.woff2
  • Check folder permissions (755 recommended)
  • Clear cache if using caching plugins
  • Verify the file name matches exactly (case-sensitive)

Need Help?

Visit our support portal or check the knowledge base for additional tutorials and troubleshooting guides. We’re here to help you create a stunning professional website that grows with your business!