FreneticFocus WordPress Theme

A modern, responsive WordPress theme designed for FreneticFocus - a comprehensive management consulting company specializing in digital literacy, operational efficiency, and transformational change management.

Project Overview

Purpose & Goals

FreneticFocus is a custom WordPress theme built to showcase comprehensive management services with a focus on:

Digital Literacy Enhancement: Helping organizations navigate the digital transformation landscape
Operational Efficiency: Streamlining business processes and workflows
Change Management: Facilitating smooth transitions during organizational changes
Customer Experience Mapping: Optimizing user journeys and touchpoints
Microsoft 365 Adoption: Accelerating productivity through modern collaboration tools

Target Audience

This theme serves management consultants, business coaches, and professional service providers who need a clean, professional online presence to showcase their expertise and services.

Project Objectives

As a junior developer working on this project, my main goals were to:

Create a fully responsive, mobile-first WordPress theme
Implement a modular CSS architecture for maintainability
Build customizable sections through WordPress Customizer
Ensure optimal performance and accessibility
Provide seamless integration with WordPress ecosystem
Deploy a production-ready solution on DigitalOcean

Features

Design & User Experience

Responsive Design: Mobile-first approach with breakpoints for all device sizes
Modern Aesthetics: Clean, professional design with animated gradients and smooth transitions
Interactive Elements: Animated buttons, hover effects, and scroll-based navigation
Accessibility: WCAG 2.1 compliant with semantic HTML and proper ARIA labels
Performance Optimized: Modular CSS loading and optimized assets

WordPress Integration

Custom Post Types: Services post type with custom fields and taxonomy
Customizer Integration: Extensive customization options without code editing
Widget Areas: Header, sidebar, and footer widget support
Navigation Menus: Primary and footer menu locations
SEO Ready: Proper heading structure and semantic markup
Contact Form 7: Integrated contact form functionality

Page Templates

Front Page: Hero section, services overview, about preview, and CTA
Services Page: Detailed service descriptions with interactive navigation
About Page: Company information and team presentation
Contact Page: Contact form and business information
Single Service: Individual service detail pages
Custom Templates: Flexible page templates for various content types

Visual Elements

Animated Gradients: Dynamic background animations
Sticky Navigation: Header that adapts on scroll
Smooth Scrolling: Enhanced user experience with smooth page transitions
Interactive Buttons: Engaging call-to-action elements
Image Optimization: Responsive images with proper scaling

Technology Stack

Core Technologies

WordPress: 5.9+ (Content Management System)
PHP: 7.4+ (Server-side scripting)
MySQL: 5.6+ (Database management)
HTML5: Semantic markup structure
CSS3: Modern styling with animations and responsive design
JavaScript: ES6+ for interactive functionality

Development Tools

XAMPP: Local development environment
Git: Version control system
WordPress Customizer: Theme customization interface
Contact Form 7: Form handling plugin

Frontend Libraries

Google Fonts: Poppins (sans-serif) and Lora (serif) typography
CSS Grid & Flexbox: Modern layout systems
CSS Custom Properties: Dynamic styling variables

Local Development Setup

Prerequisites

Before setting up the project locally, ensure you have:

XAMPP (Apache, MySQL, PHP) installed
Git for version control
Code editor (VS Code recommended)
Modern web browser for testing

XAMPP Configuration

Install XAMPP

# Download XAMPP from https://www.apachefriends.org/
# Install with default settings

Start Services
- Open XAMPP Control Panel
- Start Apache and MySQL services
- Verify services are running (green status indicators)

Database Setup

-- Access phpMyAdmin at http://localhost/phpmyadmin
-- Create new database named 'freneticfocus'
CREATE DATABASE freneticfocus;

Project Installation

Clone the Repository

cd C:\xampp\htdocs
git clone [repository-url] FreneticFocus
cd FreneticFocus

WordPress Configuration

# Copy wp-config-sample.php to wp-config.php
copy wp-config-sample.php wp-config.php

Database Configuration

// Edit wp-config.php with database credentials
define('DB_NAME', 'freneticfocus');
define('DB_USER', 'root');
define('DB_PASSWORD', '');
define('DB_HOST', 'localhost');

WordPress Installation
- Navigate to http://localhost/FreneticFocus
- Complete WordPress installation wizard
- Create admin account
Theme Activation
- Go to WordPress Admin → Appearance → Themes
- Activate "FreneticFocus" theme
- Configure theme settings via Customizer

Local Development Workflow

# Navigate to theme directory
cd C:\xampp\htdocs\FreneticFocus\wp-content\themes\freneticfocus-theme

# Make changes to theme files
# CSS files are in /assets/css/
# JavaScript files are in /js/
# PHP templates are in root theme directory

# Test changes at http://localhost/FreneticFocus

XAMPP Advantages for This Project

Zero Configuration: No complex server setup required
Complete Stack: Apache, MySQL, PHP, and phpMyAdmin included
Windows Integration: Seamless development on Windows environment
Development Tools: Built-in database management and file access
Port Management: Easy switching between different projects
Debugging Support: Error logging and PHP debugging capabilities

Deployment

DigitalOcean Deployment Strategy

The project is deployed on DigitalOcean using a LAMP stack droplet for optimal performance and scalability.

Pre-deployment Preparation

Code Optimization

# Minify CSS files
# Optimize images
# Remove development files (.git, .gitignore)
# Update file permissions

Database Export

# Export database from local XAMPP
# Use phpMyAdmin or command line
mysqldump -u root freneticfocus > freneticfocus.sql

DigitalOcean Setup Process

Droplet Creation
- Selected Ubuntu 20.04 LTS droplet
- Configured LAMP stack (Linux, Apache, MySQL, PHP)
- Set up SSH access and security settings
- Configured firewall rules for HTTP/HTTPS traffic

Server Configuration

# Connect via SSH
ssh root@your-server-ip

# Update system packages
apt update && apt upgrade -y

# Install required PHP extensions
apt install php-mysql php-gd php-curl php-mbstring

# Configure Apache virtual host
nano /etc/apache2/sites-available/freneticfocus.conf

WordPress Deployment

# Upload files via SCP or FTP
scp -r FreneticFocus/ root@your-server-ip:/var/www/html/

# Set proper permissions
chown -R www-data:www-data /var/www/html/FreneticFocus
chmod -R 755 /var/www/html/FreneticFocus

Database Migration

# Import database to production
mysql -u username -p freneticfocus < freneticfocus.sql

# Update wp-config.php with production credentials
# Update site URLs in database

Production Optimizations

SSL Certificate: Implemented Let's Encrypt for HTTPS
Caching: Enabled Apache mod_expires and gzip compression
CDN Integration: Optional CloudFlare setup for global delivery
Backup Strategy: Automated daily backups of files and database
Monitoring: Server monitoring and uptime tracking

Why DigitalOcean?

Performance: SSD-based droplets for fast loading times
Scalability: Easy vertical and horizontal scaling options
Cost-Effective: Predictable pricing with no hidden costs
Developer-Friendly: Excellent documentation and community support
Reliability: 99.99% uptime SLA with global data centers
Security: Built-in DDoS protection and firewall management

Project Structure

freneticfocus-theme/
├── 📄 style.css                 # Theme identification and base styles
├── 📄 functions.php             # Theme functionality and hooks
├── 📄 index.php                 # Default template fallback
├── 📄 front-page.php           # Homepage template
├── 📄 header.php               # Site header template
├── 📄 footer.php               # Site footer template
├── 📄 page.php                 # Default page template
├── 📄 page-about.php           # About page template
├── 📄 page-contact.php         # Contact page template
├── 📄 page-services.php        # Services page template
├── 📄 single-service.php       # Individual service template
├── 📄 archive-service.php      # Services archive template
├── 📄 template-services.php    # Services page template
├── 📁 assets/
│   ├── 📁 css/                 # Organized stylesheet files
│   │   ├── 📄 base.css         # Core styling and layout
│   │   ├── 📄 front-page.css   # Homepage specific styles
│   │   ├── 📄 services.css     # Services page styles
│   │   ├── 📄 about.css        # About page styles
│   │   ├── 📄 contact.css      # Contact page styles
│   │   ├── 📄 navigation.css   # Header and menu styles
│   │   ├── 📄 footer.css       # Footer styling
│   │   ├── 📄 animated-buttons.css  # Button animations
│   │   ├── 📄 animated-gradient.css # Background animations
│   │   └── 📄 single-service.css    # Individual service styles
│   └── 📁 images/              # Theme images and assets
├── 📁 js/
│   ├── 📄 main.js              # Core JavaScript functionality
│   ├── 📄 header.js            # Header scroll behavior
│   └── 📄 services.js          # Services page interactions
├── 📁 inc/
│   ├── 📄 customizer.php       # WordPress Customizer settings
│   ├── 📄 template-tags.php    # Custom template functions
│   ├── 📄 link-helper.php      # URL helper functions
│   └── 📄 kirki-config.php     # Kirki framework integration
├── 📁 template-parts/          # Reusable template components
├── 📄 .gitignore               # Git ignore rules
└── 📄 README.md                # Project documentation

File Organization Philosophy

Modular CSS Architecture

The CSS is organized into specific files based on functionality rather than one monolithic stylesheet:

Component-based: Each major section has its own CSS file
Performance: Only load styles needed for specific pages
Maintainability: Easier to locate and modify specific styles
Scalability: Simple to add new components without conflicts

Template Hierarchy

Following WordPress best practices for template organization:

Specific to General: Most specific templates load first
Fallback System: Graceful degradation if specific templates don't exist
DRY Principle: Shared functionality in template parts and includes

Design Philosophy

Visual Design Principles

Modern Minimalism

The design embraces clean, uncluttered layouts that prioritize content readability and user focus. This approach ensures that visitors can quickly understand the services offered without being overwhelmed by visual noise.

Professional Aesthetic

Color scheme and typography choices reflect the consulting industry's need for trustworthiness and expertise:

Typography: Poppins for headings (modern, professional) and Lora for body text (readable, friendly)
Color Palette: Neutral tones with strategic accent colors for calls-to-action
Spacing: Generous whitespace to create breathing room and hierarchy

Mobile-First Approach

Every design decision prioritizes mobile users first, then enhances for larger screens:

Touch-Friendly: Button sizes and spacing optimized for finger navigation
Performance: Optimized images and efficient CSS for mobile networks
Readability: Font sizes and contrast ratios meet accessibility standards

User Experience Strategy

Information Architecture

Content is structured to guide users through a logical journey:

Hero Section: Immediate value proposition
Services Overview: Quick scan of offerings
About Preview: Trust-building content
Contact CTA: Clear next steps

Interaction Design

Subtle animations and transitions enhance the user experience without being distracting:

Hover States: Provide visual feedback for interactive elements
Scroll Animations: Create engagement without slowing down the experience
Loading States: Smooth transitions between page states

Accessibility Focus

Design decisions prioritize inclusivity:

Color Contrast: WCAG AA compliant contrast ratios
Keyboard Navigation: All interactive elements accessible via keyboard
Screen Readers: Semantic HTML and proper ARIA labels
Motion Sensitivity: Respects user preferences for reduced motion

Technical Design Decisions

Performance-First CSS

CSS architecture prioritizes loading speed and maintainability:

/* Critical CSS inlined in header */
/* Non-critical CSS loaded conditionally */
/* Animations use transform and opacity for 60fps performance */

Responsive Breakpoints

Carefully chosen breakpoints based on content needs rather than device sizes:

Mobile: 320px - 768px (touch-first navigation)
Tablet: 768px - 1024px (hybrid navigation)
Desktop: 1024px+ (full feature set)

Progressive Enhancement

Features are built in layers, ensuring core functionality works everywhere:

Base Layer: HTML content accessible to all
Enhancement Layer: CSS styling for visual presentation
Interaction Layer: JavaScript for enhanced interactions

Customization

WordPress Customizer Integration

The theme provides extensive customization options through the WordPress Customizer, organized into logical sections:

Hero Section Customization

// Customizable elements:
- Background image upload
- Hero title and subtitle text
- Call-to-action button text and URL
- Overlay opacity and color

Service Section Management

// Each service includes:
- Service title and description
- Feature list (bullet points)
- Service image upload
- Custom icons (Unicode support)
- Individual service pages

Contact Information

// Customizable contact details:
- Business address
- Phone number and email
- Social media links
- Contact form integration
- Office hours display

Customizer Code Example

// Hero section customizer settings
$wp_customize->add_section('freneticfocus_hero_section', array(
    'title' => __('Hero Section', 'freneticfocus'),
    'priority' => 30,
));

$wp_customize->add_setting('hero_title', array(
    'default' => 'Comprehensive Management Services',
    'sanitize_callback' => 'sanitize_text_field',
));

$wp_customize->add_control('hero_title', array(
    'label' => __('Hero Title', 'freneticfocus'),
    'section' => 'freneticfocus_hero_section',
    'type' => 'text',
));

Custom Post Types

Services Post Type

// Registration in functions.php
register_post_type('service', array(
    'public' => true,
    'has_archive' => true,
    'supports' => array('title', 'editor', 'thumbnail'),
    'menu_icon' => 'dashicons-businessman',
));

Advanced Customization

For developers who need to extend the theme further:

Adding New Page Templates

// Create new template file: page-custom.php
// Add custom template name in file header
<?php
/*
Template Name: Custom Page
*/

Custom CSS Variables

:root {
    --primary-color: #007cba;
    --secondary-color: #f8f8f5;
    --text-color: #333;
    --header-height: 80px;
}

Child Theme Support

The theme is built to support child themes for safe customization:

// child-theme/functions.php
function child_theme_styles() {
    wp_enqueue_style('parent-style', 
        get_template_directory_uri() . '/style.css');
    wp_enqueue_style('child-style', 
        get_stylesheet_directory_uri() . '/style.css',
        array('parent-style'));
}
add_action('wp_enqueue_scripts', 'child_theme_styles');

Performance

Optimization Strategies

CSS Performance

Modular Loading: Only load CSS files needed for current page
Critical CSS: Inline critical styles to prevent render-blocking
Minification: Compressed CSS files for production
Unused CSS Removal: Regular audits to remove unused styles

JavaScript Optimization

Conditional Loading: Scripts load only when needed
Modern ES6+: Efficient, modern JavaScript syntax
Event Delegation: Efficient event handling for dynamic content
Lazy Loading: Images and non-critical content load as needed

Image Optimization

Responsive Images: Multiple sizes for different screen densities
Modern Formats: WebP support with fallbacks
Compression: Optimized file sizes without quality loss
Lazy Loading: Images load as they enter viewport

Performance Metrics

Target performance benchmarks:

First Contentful Paint: < 1.5 seconds
Largest Contentful Paint: < 2.5 seconds
Cumulative Layout Shift: < 0.1
First Input Delay: < 100 milliseconds

Database Optimization

// Efficient database queries
function freneticfocus_get_services($limit = 6) {
    return new WP_Query(array(
        'post_type' => 'service',
        'posts_per_page' => $limit,
        'meta_key' => 'featured',
        'orderby' => 'menu_order',
        'order' => 'ASC'
    ));
}

Browser Support

Supported Browsers

Desktop Browsers

Chrome: 90+ (full support)
Firefox: 88+ (full support)
Safari: 14+ (full support)
Edge: 90+ (full support)

Mobile Browsers

Chrome Mobile: 90+ (full support)
Safari iOS: 14+ (full support)
Samsung Internet: 14+ (full support)
Firefox Mobile: 88+ (full support)

Progressive Enhancement

The theme is built with progressive enhancement in mind:

Base Level: Semantic HTML works in all browsers
Enhanced Level: CSS Grid and Flexbox for modern browsers
Advanced Level: CSS animations and JavaScript interactions

Fallback Strategies

/* CSS Grid with Flexbox fallback */
.services-grid {
    display: flex;
    flex-wrap: wrap;
}

@supports (display: grid) {
    .services-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }
}

Recommended Plugins

Essential Plugins

Contact Form 7 (Required)
- Purpose: Contact form functionality
- Integration: Built-in styling and customizer support
Yoast SEO (Recommended)
- Purpose: Search engine optimization
- Benefits: Enhanced meta tags and sitemap generation
W3 Total Cache (Recommended)
- Purpose: Performance optimization
- Benefits: Page caching and CSS/JS minification

Optional Enhancements

Advanced Custom Fields (Optional)
- Purpose: Additional custom fields for services
- Use case: Extended service information
Elementor Page Builder (Optional)
- Purpose: Drag-and-drop page building
- Compatibility: Theme templates work with Elementor
WP Rocket (Alternative to W3TC)
- Purpose: Premium caching solution
- Benefits: Advanced performance optimizations

Contributing

Development Guidelines

Code Standards

Follow WordPress Coding Standards
Use semantic HTML5 elements
Write accessible CSS and JavaScript
Include proper documentation

Git Workflow

# Create feature branch
git checkout -b feature/new-feature

# Make changes and commit
git add .
git commit -m "Add new feature: description"

# Push to remote
git push origin feature/new-feature

# Create pull request

CSS Guidelines

/* Use BEM methodology for class naming */
.service-card {}
.service-card__title {}
.service-card__description {}
.service-card--featured {}

/* Comment complex styles */
/* This creates a sticky header that appears on scroll */
.header--sticky {
    position: fixed;
    top: 0;
    transform: translateY(-100%);
    transition: transform 0.3s ease;
}

PHP Guidelines

// Use proper WordPress hooks
function freneticfocus_custom_function() {
    // Function logic here
}
add_action('wp_head', 'freneticfocus_custom_function');

// Sanitize all user inputs
$clean_input = sanitize_text_field($_POST['input']);

// Use proper escaping for output
echo esc_html($variable);

Testing Checklist

Before submitting contributions:

Test on multiple browsers
Verify mobile responsiveness
Check accessibility with screen reader
Validate HTML markup
Test with WordPress debugging enabled
Verify customizer functionality
Test contact form submission

📄 License

This theme is licensed under the GNU General Public License v2 or later.

FreneticFocus WordPress Theme
Copyright (C) 2025 FreneticFocus

This program is free software; you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation; either version 2 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.

Credits & Acknowledgments

Fonts

Poppins: Google Fonts (SIL Open Font License)
Lora: Google Fonts (SIL Open Font License)

Development Tools

WordPress: Content Management System
XAMPP: Local development environment
DigitalOcean: Hosting and deployment platform
Git: Version control system

Learning Resources

WordPress Codex and Developer Documentation
CSS-Tricks for modern CSS techniques
MDN Web Docs for JavaScript reference
DigitalOcean Community tutorials

Special Thanks

WordPress community for extensive documentation
Open source contributors for tools and libraries
Design inspiration from modern consulting websites

Support & Contact

For technical support, customization requests, or general inquiries about the FreneticFocus theme:

Theme Support: [Contact Form on Website]
Documentation: This README file
WordPress Support: [WordPress.org Support Forums]
Code Issues: [Project Repository Issues]

Last Updated: June 2025
Theme Version: 1.0.0
WordPress Compatibility: 5.9+
PHP Compatibility: 7.4+

This README was written from the perspective of a junior developer documenting their first major WordPress theme project, emphasizing learning experiences and technical growth while maintaining professional standards.

Name		Name	Last commit message	Last commit date
Latest commit History 7 Commits
assets		assets
inc		inc
js		js
template-parts		template-parts
.gitignore		.gitignore
.htaccess-template		.htaccess-template
README.md		README.md
archive-service.php		archive-service.php
footer.php		footer.php
front-page.php		front-page.php
functions.php		functions.php
header.php		header.php
index.php		index.php
page-about.php		page-about.php
page-contact.php		page-contact.php
page-services.php		page-services.php
page.php		page.php
single-service.php		single-service.php
style.css		style.css
template-services.php		template-services.php

Lochy2000/Frenetic-Focus

Folders and files

Latest commit

History

Repository files navigation

FreneticFocus WordPress Theme

Table of Contents

Project Overview

Purpose & Goals

Target Audience

Project Objectives

Features

Design & User Experience

WordPress Integration

Page Templates

Visual Elements

Technology Stack

Core Technologies

Development Tools

Frontend Libraries

Local Development Setup

Prerequisites

XAMPP Configuration

Project Installation

Local Development Workflow

XAMPP Advantages for This Project

Deployment

DigitalOcean Deployment Strategy

Pre-deployment Preparation

DigitalOcean Setup Process

Production Optimizations

Why DigitalOcean?

Project Structure

File Organization Philosophy

Modular CSS Architecture

Template Hierarchy

Design Philosophy

Visual Design Principles

Modern Minimalism

Professional Aesthetic

Mobile-First Approach

User Experience Strategy

Information Architecture

Interaction Design

Accessibility Focus

Technical Design Decisions

Performance-First CSS

Responsive Breakpoints

Progressive Enhancement

Customization

WordPress Customizer Integration

Hero Section Customization

Service Section Management

Contact Information

Customizer Code Example

Custom Post Types

Services Post Type

Advanced Customization

Adding New Page Templates

Custom CSS Variables

Child Theme Support

Performance

Optimization Strategies

CSS Performance

JavaScript Optimization

Image Optimization

Performance Metrics

Database Optimization

Browser Support

Supported Browsers

Desktop Browsers

Mobile Browsers

Progressive Enhancement

Fallback Strategies

Recommended Plugins

Essential Plugins

Optional Enhancements

Contributing

Development Guidelines

Code Standards

Packages