✅ Theme Testing Checklist

Comprehensive testing guide for WordPress themes

Ensure quality, compatibility, and professional standards

Learning Objectives

Understand comprehensive theme testing requirements
Test functionality across different scenarios
Ensure browser and device compatibility
Validate code and markup
Test performance and optimization
Verify security measures
Check accessibility compliance
Use testing tools effectively

Why Comprehensive Testing Matters

Thorough testing ensures your theme works reliably across all environments, provides excellent user experience, and meets professional standards.

Testing Objectives

Functionality: All features work as expected
Compatibility: Works across browsers and devices
Performance: Fast loading and efficient
Security: No vulnerabilities
Accessibility: Usable by everyone
Standards: Follows WordPress guidelines

🔧 Core Functionality Testing

Theme activates without errors CRITICAL
All template files load correctly CRITICAL
Homepage displays properly CRITICAL
Blog posts display correctly CRITICAL
Pages render properly CRITICAL
Archives work (category, tag, date, author) HIGH
Search functionality works HIGH
404 page displays correctly HIGH
Comments system functions properly MEDIUM
Pagination works correctly HIGH
Navigation menus function properly CRITICAL
Widget areas display correctly HIGH
Custom post types display (if applicable) HIGH
Custom taxonomies work (if applicable) MEDIUM
Theme Customizer options work HIGH
All theme options save correctly CRITICAL

📝 Content Display Testing

Long post titles display correctly HIGH
Posts without featured images work HIGH
Various post formats display properly MEDIUM
Sticky posts are highlighted MEDIUM
Excerpts display correctly HIGH
Read more links work HIGH
Gutenberg blocks render correctly CRITICAL
Classic editor content displays properly HIGH
Embeds work (YouTube, Twitter, etc.) MEDIUM
Galleries display correctly MEDIUM
Audio/Video players work LOW
Tables display properly MEDIUM
Lists format correctly HIGH
Blockquotes style properly MEDIUM
Code blocks display correctly LOW

🌐 Browser Compatibility Testing

Browser	Version	Desktop	Mobile	Notes
Chrome	Latest 2	✓ Pass	✓ Pass	Full support
Firefox	Latest 2	✓ Pass	✓ Pass	Full support
Safari	Latest 2	✓ Pass	✓ Pass	iOS testing required
Edge	Latest 2	✓ Pass	⚠ Partial	Minor layout issues
Opera	Latest	✓ Pass	-	Optional

Layout renders correctly in all browsers CRITICAL
CSS animations work properly LOW
JavaScript functions correctly CRITICAL
Forms submit properly HIGH
Media queries work CRITICAL
Fonts display correctly HIGH
No console errors HIGH

📱 Responsive Design Testing

Mobile menu works correctly CRITICAL
Content is readable on mobile CRITICAL
Images scale properly HIGH
Touch targets are adequate size HIGH
Horizontal scrolling is avoided CRITICAL
Forms are usable on mobile HIGH
Tables are responsive MEDIUM
Video embeds are responsive MEDIUM
Sidebar collapses properly HIGH
Footer stacks correctly MEDIUM

Device Testing Breakpoints

Mobile: 320px, 375px, 414px
Tablet: 768px, 1024px
Desktop: 1280px, 1440px, 1920px
Large: 2560px+

⚡ Performance Testing

PageSpeed Insights score > 90 HIGH
GTmetrix grade A or B HIGH
First Contentful Paint < 2s HIGH
Time to Interactive < 3.5s HIGH
Total page size < 2MB MEDIUM
HTTP requests < 50 MEDIUM
Images are optimized HIGH
CSS/JS are minified HIGH
Browser caching is enabled MEDIUM
Gzip compression works MEDIUM

🔒 Security Testing

Data is properly escaped CRITICAL
User input is sanitized CRITICAL
Nonces are used for forms CRITICAL
SQL queries use prepared statements CRITICAL
File uploads are validated HIGH
No hardcoded credentials CRITICAL
Capability checks are in place CRITICAL
No PHP errors or warnings HIGH
Theme Check plugin passes HIGH
No malicious code detected CRITICAL

♿ Accessibility Testing

Keyboard navigation works CRITICAL
Skip links are present HIGH
ARIA labels are correct HIGH
Color contrast meets WCAG AA HIGH
Images have alt text CRITICAL
Forms have proper labels CRITICAL
Focus indicators are visible HIGH
Screen reader compatible HIGH
Heading hierarchy is correct HIGH
Links have descriptive text MEDIUM

🔌 Plugin Compatibility Testing

WooCommerce compatibility HIGH
Contact Form 7 works MEDIUM
Yoast SEO compatibility HIGH
Jetpack features work MEDIUM
WPML/Polylang compatible MEDIUM
Caching plugins work HIGH
Security plugins compatible HIGH
Backup plugins function MEDIUM
Gallery plugins work LOW
Social sharing plugins LOW

Essential Testing Tools

Code Validation

Performance Testing

Browser Testing

Accessibility Testing

Security Testing

Content Testing

Automated Testing Setup

PHPUnit Tests

<?php
// tests/test-theme-functions.php
class ThemeFunctionsTest extends WP_UnitTestCase {
    
    public function setUp() {
        parent::setUp();
        switch_theme('my-theme');
    }
    
    public function test_theme_setup() {
        $this->assertTrue(function_exists('my_theme_setup'));
        $this->assertTrue(current_theme_supports('post-thumbnails'));
        $this->assertTrue(current_theme_supports('custom-logo'));
    }
    
    public function test_scripts_enqueued() {
        do_action('wp_enqueue_scripts');
        $this->assertTrue(wp_script_is('my-theme-script', 'enqueued'));
        $this->assertTrue(wp_style_is('my-theme-style', 'enqueued'));
    }
    
    public function test_menus_registered() {
        $menus = get_registered_nav_menus();
        $this->assertArrayHasKey('primary', $menus);
        $this->assertArrayHasKey('footer', $menus);
    }
    
    public function test_widget_areas() {
        global $wp_registered_sidebars;
        $this->assertArrayHasKey('sidebar-1', $wp_registered_sidebars);
        $this->assertArrayHasKey('footer-widgets', $wp_registered_sidebars);
    }
}

JavaScript Testing with Jest

// tests/navigation.test.js
describe('Navigation Menu', () => {
    beforeEach(() => {
        document.body.innerHTML = `
            <nav class="main-navigation">
                <button class="menu-toggle">Menu</button>
                <ul class="nav-menu">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                </ul>
            </nav>
        `;
        require('../src/js/navigation');
    });
    
    test('Toggle menu visibility', () => {
        const button = document.querySelector('.menu-toggle');
        const menu = document.querySelector('.nav-menu');
        
        button.click();
        expect(menu.classList.contains('toggled')).toBe(true);
        
        button.click();
        expect(menu.classList.contains('toggled')).toBe(false);
    });
    
    test('Aria attributes update', () => {
        const button = document.querySelector('.menu-toggle');
        
        button.click();
        expect(button.getAttribute('aria-expanded')).toBe('true');
        
        button.click();
        expect(button.getAttribute('aria-expanded')).toBe('false');
    });
});

End-to-End Testing with Cypress

// cypress/integration/theme.spec.js
describe('Theme E2E Tests', () => {
    beforeEach(() => {
        cy.visit('/');
    });
    
    it('Homepage loads correctly', () => {
        cy.get('.site-header').should('be.visible');
        cy.get('.site-content').should('be.visible');
        cy.get('.site-footer').should('be.visible');
    });
    
    it('Navigation menu works', () => {
        cy.get('.menu-toggle').click();
        cy.get('.nav-menu').should('have.class', 'toggled');
        cy.get('.nav-menu a').first().click();
        cy.url().should('include', '/about');
    });
    
    it('Search functionality', () => {
        cy.get('.search-toggle').click();
        cy.get('.search-field').type('test{enter}');
        cy.url().should('include', '?s=test');
        cy.get('.search-results').should('exist');
    });
    
    it('Responsive design', () => {
        // Mobile
        cy.viewport(375, 667);
        cy.get('.menu-toggle').should('be.visible');
        
        // Tablet
        cy.viewport(768, 1024);
        cy.get('.sidebar').should('be.visible');
        
        // Desktop
        cy.viewport(1920, 1080);
        cy.get('.menu-toggle').should('not.be.visible');
    });
});

🚀 Pre-Launch Final Checklist

All functionality tests pass CRITICAL
Browser compatibility verified CRITICAL
Mobile responsiveness confirmed CRITICAL
Performance optimized HIGH
Security vulnerabilities fixed CRITICAL
Accessibility standards met HIGH
SEO requirements fulfilled HIGH
Documentation complete HIGH
License information included CRITICAL
Screenshot added (1200x900px) HIGH
Theme version updated HIGH
Changelog updated MEDIUM
Demo content prepared MEDIUM
Support information added MEDIUM
Final backup created CRITICAL

Testing Best Practices

Testing Strategy

Test early and often: Don't wait until the end
Automate repetitive tests: Save time and ensure consistency
Test edge cases: Empty states, long content, special characters
Real device testing: Don't rely only on emulators
User testing: Get feedback from actual users
Document issues: Track and prioritize bugs
Regression testing: Re-test after fixes
Cross-functional testing: Test interactions between features

Always test with WP_DEBUG enabled to catch PHP notices and warnings that might not be visible in production mode.

Create a testing checklist template that you can reuse for all your theme projects. Update it as you learn from each project.

Practice Exercise

💻

Complete Theme Testing

Thoroughly test your theme using this checklist:

Run Theme Check plugin
Import WordPress test data
Test all template files
Check responsive design
Test in 3+ browsers
Run performance tests
Validate HTML/CSS
Test accessibility
Check plugin compatibility
Document all issues found

PHP WordPress Development

Course Progress