🏋️ Fitness Pro Theme

📖 Introduction

Fitness Pro Theme is a powerful, modern WordPress theme designed specifically for fitness centers, gyms, personal trainers, yoga studios, and health clubs. With over 300+ customization options, this theme gives you complete control over your website's appearance and functionality.

Key Features

Theme Highlights

• Header Customization: 30+ options including colors, typography, sticky header, animations
• Footer Customization: 50+ options with color presets and social media integration
• Home Sections: 15+ customizable sections (Slider, About, Programs, Schedule, etc.)
• Shortcodes: 6 modern shortcodes with 70+ customization options
• Single Templates: Custom post types with 100+ color options
• Blog Layouts: 4 different blog styles with full customization
• Lightbox Gallery: Professional image popup with touch support

⚙️ Installation Guide

Method 1: Upload via WordPress Admin

1. Login to your WordPress admin panel
2. Navigate to Appearance → Themes
3. Click on "Add New" button
4. Click "Upload Theme"
5. Choose the theme ZIP file
6. Click "Install Now"
7. After installation, click "Activate"

Method 2: FTP Upload

1. Unzip the theme package
2. Connect to your server via FTP
3. Navigate to /wp-content/themes/
4. Upload the unzipped theme folder
5. Go to WordPress admin Appearance → Themes
6. Find and activate the theme

Post-Installation Steps

1. Set Permalinks: Go to Settings → Permalinks and set to "Post name"
2. Create Pages: Create Home, About, Services, Contact pages
3. Set Homepage: Go to Settings → Reading and set static homepage
4. Configure Menus: Go to Appearance → Menus and create navigation
5. Add Widgets: Go to Appearance → Widgets and add footer widgets

🎨 WordPress Customizer Guide

The theme provides 300+ customization options accessible through the WordPress Customizer. All changes can be previewed in real-time before publishing.

1. General Configuration

Header Configuration (30+ Options)

Footer Settings (50+ Options)

2. Home Sections

Customize each homepage section individually with dedicated settings:

3. Shortcodes Settings

New dedicated panel for shortcode customization:

4. Single Post Templates

Customization for individual post templates:

• Single Program Template: 20+ color options
• Single Trainer Template: 20+ color options
• Single Pricing Plan: 20+ color options
• Single Transformation: 20+ color options

⚡ Shortcodes Documentation

The theme includes 6 powerful shortcodes with full attribute support for maximum flexibility.

1. [TEAMLIST] - Team Members

Basic Usage:

[TEAMLIST]

With Attributes:

[TEAMLIST count="6" columns="3" style="card"]
[TEAMLIST count="4" columns="2" style="overlay" show_social="yes"]
[TEAMLIST category="trainers" orderby="title" order="ASC"]

Available Attributes:

2. [TESTIMONIALS] - Client Reviews

Basic Usage:

[TESTIMONIALS]

With Attributes:

[TESTIMONIALS count="6" columns="2" style="quote" show_rating="yes"]
[TESTIMONIALS slider="yes" autoplay="yes"]
[TESTIMONIALS category="success-stories"]

Available Attributes:

3. [SERVICES] - Services List

Basic Usage:

[SERVICES]

With Attributes:

[SERVICES count="6" columns="3" style="icon-box"]
[SERVICES show_icon="yes" show_excerpt="yes"]
[SERVICES category="fitness" orderby="title"]

Available Attributes:

4. [FAQS] - FAQ Accordion

Basic Usage:

[FAQS]

With Attributes:

[FAQS count="8" style="accordion" expanded="first"]
[FAQS show_number="yes" columns="2"]

Available Attributes:

5. [PROJECT] - Portfolio

Basic Usage:

[PROJECT]

With Attributes:

[PROJECT count="9" columns="3" lightbox="yes"]
[PROJECT show_category="yes" style="grid"]

Available Attributes:

6. [GALLERY] - Image Gallery with Lightbox

Basic Usage:

[GALLERY]

With Attributes:

[GALLERY count="12" columns="4" lightbox="yes"]
[GALLERY show_title="yes" style="masonry"]

Available Attributes:

🏠 Homepage Sections

Class Schedule Section

Display your weekly class timetable in two modes:

Display Modes:

• Cards Mode: Individual class cards with trainer info
• Table Mode: Traditional weekly timetable grid

Customizer Options:

• Display Mode (Cards/Table)
• Section Padding (Top/Bottom)
• Background Color
• Default class data included

Blog Section (Redesigned)

Modern blog section with 4 layout styles:

Available Styles:

• Card Style: Modern cards with shadows and hover effects
• Minimal Style: Simple, clean layout with borders
• Modern Style: Contemporary design with larger images
• List Style: Horizontal layout (image left, content right)

Customization Options (30+):

• Number of posts (1-24)
• Columns (1, 2, 3, 4)
• Display style
• Order by (Date, Title, Random, Comments)
• Show/Hide: Date, Author, Category, Comments, Excerpt
• Excerpt length control
• Animation effects
• View All button
• 13 color options

Blog Color Options:

🔧 Troubleshooting Guide

Common Issues & Solutions

1. Customizer Changes Not Showing

Solutions:

• Ensure you clicked "Publish" button in customizer
• Clear browser cache (Ctrl+Shift+Delete)
• Hard refresh page (Ctrl+F5)
• Clear WordPress cache if using caching plugin
• Try in incognito/private browsing mode

2. Shortcode Not Displaying

Solutions:

• Check shortcode spelling is correct: [TEAMLIST] (all caps)
• Ensure shortcode file is included in functions.php
• Verify no PHP errors in error log
• Clear cache and refresh

3. Lightbox Not Working

Solutions:

• Ensure lightbox="yes" in shortcode
• Check JavaScript console for errors
• Verify jQuery is loaded
• Check for JavaScript conflicts with plugins
• Try disabling other plugins temporarily

4. Colors Not Applying

Solutions:

• Clear all caches (browser + WordPress)
• Check if using !important in custom CSS
• Verify color settings are published
• Inspect element to check which CSS is applying
• Hard refresh (Ctrl+F5)

5. Mobile Layout Issues

Solutions:

• Clear mobile browser cache
• Check responsive settings in customizer
• Test with Chrome DevTools mobile emulator
• Verify no custom CSS breaking responsive design

6. Font Awesome Icons Not Showing

Solutions:

• Theme uses Font Awesome 4.4.0 - ensure compatibility
• Use Font Awesome 4.x icon classes (e.g., fa-heart)
• Don't use Font Awesome 5+ classes (won't work)
• Check if Font Awesome CSS is loading

Performance Optimization

Speed Up Your Site:

1. Use Caching Plugin: WP Super Cache or W3 Total Cache
2. Optimize Images: Use Smush or ShortPixel
3. Enable Lazy Loading: Built-in WordPress or plugin
4. Minify CSS/JS: Use Autoptimize plugin
5. Use CDN: Cloudflare or similar

Browser Compatibility

📞 Support & Resources

Getting Help

Before Requesting Support:

1. Check this documentation thoroughly
2. Search WordPress support forums
3. Clear all caches and test again
4. Disable plugins to check for conflicts
5. Test with default WordPress theme to isolate issue

Useful Resources

• WordPress Codex: https://codex.wordpress.org/
• WordPress Support: https://wordpress.org/support/
• Font Awesome 4.4 Icons: https://fontawesome.com/v4/icons/
• Lightbox2 Docs: https://lokeshdhakar.com/projects/lightbox2/

Recommended Plugins

Theme File Structure

company-profile-pro/
├── css/                    (Original stylesheets)
├── css-new/               (New modern CSS)
│   ├── fitness-style.css
│   ├── shortcodes-modern.css
│   └── templete.css
├── inc/                   (Theme functions)
│   ├── homeSettings/      (Section customizers)
│   ├── singleSettings/    (Single templates)
│   ├── generalSttings/    (General settings)
│   ├── shortcodes-redesigned.php
│   ├── style.php          (Dynamic CSS)
│   └── lz-customizer.php
├── template-parts/        (Section templates)
│   ├── section-slider.php
│   ├── section-blog.php
│   ├── section-schedule.php
│   └── ... (other sections)
├── images/                (Theme images)
├── js/                    (JavaScript files)
├── functions.php          (Main functions)
├── header.php
├── footer.php
├── style.css
└── screenshot.png

Custom Post Types

🚀 Quick Start Guide

5-Minute Setup

Step 1: Install & Activate (2 minutes)

1. Upload and activate theme
2. Go to Settings → Permalinks and click Save

Step 2: Create Pages (2 minutes)

1. Create a new page called "Home" (leave it blank)
2. Go to Settings → Reading
3. Set "A static page" as homepage
4. Select "Home" page as homepage

Step 3: Basic Customization (1 minute)

1. Go to Appearance → Customize
2. Update Site Identity (logo, title)
3. Configure Header Settings (phone, email)
4. Click Publish

Recommended Next Steps

1. Configure Home Sections: Enable/disable sections you need
2. Add Content: Create posts in custom post types
3. Customize Colors: Match your brand colors
4. Add Shortcodes: Use in pages where needed
5. Configure Footer: Add widgets and social links
6. Test Responsive: Check mobile view

⚡ Advanced Features

1. Color Customization System

The theme features an advanced color customization system with 100+ color options:

Global Colors:

• Primary template color
• Link colors and hover states
• Global text colors

Section-Specific Colors:

• Each home section has dedicated color options
• Header: 25+ colors
• Footer: 25+ colors
• Blog: 13 colors
• Shortcodes: 30+ colors
• Single templates: 80+ colors

2. Lightbox Integration

Professional Lightbox2 integration for gallery and project shortcodes:

Features:

• Click-to-view fullscreen images
• Keyboard navigation (Arrow keys, ESC)
• Touch/swipe gestures on mobile
• Image counter ("Image 1 of 12")
• Image captions/titles
• Next/Previous buttons
• Auto-loads only when shortcode present

Configuration:

// Auto-configured in theme
lightbox.option({
    'resizeDuration': 200,
    'wrapAround': true,
    'albumLabel': 'Image %1 of %2',
    'fadeDuration': 300,
    'showImageNumberLabel': true
});

3. Animation System

Powered by WOW.js for smooth scroll animations:

Available Animations:

• fadeIn, fadeInUp, fadeInDown, fadeInLeft, fadeInRight
• zoomIn, zoomInUp, zoomInDown
• bounceIn, bounceInUp, bounceInDown
• slideInUp, slideInDown, slideInLeft, slideInRight

Usage in Shortcodes:

[TEAMLIST animation="fadeInUp"]
[SERVICES animation="zoomIn"]
[TESTIMONIALS animation="bounceIn"]

4. Responsive Design

Theme is fully responsive with mobile-first approach:

📋 Complete Customizer Reference

All Customizer Panels & Sections

General Configuration Panel

Home Sections Panel

Shortcodes Settings Panel (NEW)

Single Post Settings Panel

• Single Program: 20+ color options for background, title, content, CTA, benefits
• Single Trainer: 20+ color options for profile layout
• Single Pricing Plan: 20+ color options for pricing details
• Single Transformation: 20+ color options for story display

❓ Frequently Asked Questions

Q: How do I change the logo?

A: Go to Appearance → Customize → Site Identity and upload your logo image.

Q: Can I disable sections I don't need?

A: Yes! Each section has a "Disable Section" toggle in its customizer settings.

Q: How do I add social media links?

A: Go to Appearance → Customize → Footer Settings → Footer Social Media Options

Q: Can I change the number of blog posts?

A: Yes! Go to Appearance → Customize → Home Sections → Blog Section and adjust "Number of Posts"

Q: How do I use shortcodes?

A: Simply add shortcode to any page/post content:

[TEAMLIST]
[SERVICES count="6" columns="3"]
[GALLERY lightbox="yes"]

Q: Can I change colors without coding?

A: Absolutely! All 100+ colors can be changed via Customizer using color pickers.

Q: Is the theme mobile-friendly?

A: Yes! Fully responsive and optimized for all devices including touch gestures.

Q: Do I need to install any plugins?

A: Not required, but recommended: Contact Form 7 for forms, Yoast SEO for SEO.

Q: How do I enable/disable sticky header?

A: Go to Appearance → Customize → Header Configuration → Special Effects

Q: Can I import demo content?

A: Theme includes default/placeholder content that displays automatically when no posts exist.

Q: How do I change footer color scheme?

A: Go to Footer Settings → Color Preset and choose from 4 pre-made schemes, or customize individually.

🙏 Credits & Licenses

Third-Party Libraries

Fonts

• Google Fonts: Roboto, Oswald (SIL Open Font License)

Base Theme

Original Theme: Favor Premium
Modified & Enhanced: Extensive customization, redesigned sections, new shortcodes, color system

📝 Changelog

Version 2.0.0 - Enhanced Edition (October 2024)

Major Updates:

• ✅ Header Customization: Added 30+ customization options
• ✅ Footer Customization: Added 50+ options with color presets
• ✅ Shortcodes Redesigned: All 6 shortcodes completely rebuilt with modern layouts
• ✅ Attributes Support: Added 50+ shortcode attributes for flexibility
• ✅ Blog Section: Redesigned with 4 layout styles and 30+ options
• ✅ Lightbox Integration: Professional image popup for gallery & projects
• ✅ Color System: 100+ color options across all sections
• ✅ Schedule Section: Fixed Font Awesome icons, added default data
• ✅ Single Templates: 100+ color options for custom post types
• ✅ Performance: Optimized CSS, better code structure

New Files Added:

• inc/shortcodes-redesigned.php - Modern shortcodes (1,184 lines)
• css-new/shortcodes-modern.css - Modern styling (1,000+ lines)
• inc/homeSettings/shortcodes-customizer.php - Shortcode options (800+ lines)
• inc/homeSettings/header-customizer.php - Header options (320+ lines)

Files Modified:

• template-parts/section-blog.php - Redesigned blog section
• template-parts/section-schedule.php - Fixed icons & defaults
• inc/homeSettings/blog-customizer.php - Enhanced options
• inc/generalSttings/general-section.php - Cleaned up footer settings
• inc/style.php - Added 500+ lines of dynamic CSS
• functions.php - Added shortcodes include, CSS enqueue

Bug Fixes:

• ✅ Fixed Font Awesome 5 to 4.4.0 compatibility in schedule section
• ✅ Fixed customizer preview refresh issues
• ✅ Fixed undefined variable errors in header CSS
• ✅ Fixed CSS variable typo (::root to :root)
• ✅ Fixed schedule display mode inconsistency
• ✅ Fixed empty table cells in schedule

Total Additions:

• New Code: 5,000+ lines
• Customizer Options: 200+ new settings
• Color Options: 80+ new color pickers
• Documentation: Complete HTML guide

💡 Tips & Best Practices

Design Tips

1. Color Consistency: Use 2-3 main colors throughout site
2. Brand Colors: Set your primary color in customizer first
3. Contrast: Ensure text is readable on backgrounds
4. White Space: Don't overcrowd - use proper spacing
5. Mobile First: Always test mobile view

Performance Tips

1. Optimize Images: Compress before uploading
2. Limit Posts: Don't show 50 posts on homepage
3. Use Caching: Install caching plugin
4. Lazy Load: Enable for images
5. CDN: Use for static files

SEO Tips

1. Permalinks: Set to "Post name" structure
2. Meta Descriptions: Use Yoast SEO plugin
3. Alt Text: Add to all images
4. Headings: Use proper H1, H2, H3 hierarchy
5. Content: Write quality, original content

Security Best Practices

1. Keep Updated: Update WordPress, theme, plugins
2. Strong Passwords: Use complex passwords
3. Backup Regularly: Use backup plugin
4. Security Plugin: Install Wordfence or similar
5. SSL Certificate: Use HTTPS