Assignment Overview

Your task is to create two comprehensive diagrams that will serve as reference materials for WordPress development: one showing the WordPress file structure and another illustrating the template hierarchy.

Deliverables

Grading Rubric

Recommended Tools & Resources

Diagramming Tools:

• Draw.io- Free online diagramming
• Lucidchart- Professional diagrams
• Mermaid Live Editor- Code-based diagrams
• Figma- Design and prototyping
• Excalidraw- Hand-drawn style diagrams

Reference Documentation:

• Official Template Hierarchy Documentation
• Organizing Theme Files
• Interactive Template Hierarchy
• WordPress Files Reference

Code Examples:

// Example: Creating an interactive file tree
class FileTreeExplorer {
    constructor(containerId) {
        this.container = document.getElementById(containerId);
        this.fileStructure = this.getWordPressStructure();
        this.render();
    }
    
    getWordPressStructure() {
        return {
            'wordpress': {
                type: 'folder',
                children: {
                    'wp-admin': {
                        type: 'folder',
                        description: 'WordPress admin area files',
                        children: {
                            'admin.php': {
                                type: 'file',
                                description: 'Main admin bootstrap file'
                            },
                            'admin-ajax.php': {
                                type: 'file',
                                description: 'Handles AJAX requests'
                            }
                        }
                    },
                    'wp-content': {
                        type: 'folder',
                        description: 'User content directory',
                        children: {
                            'themes': {
                                type: 'folder',
                                description: 'WordPress themes',
                                children: {}
                            },
                            'plugins': {
                                type: 'folder',
                                description: 'WordPress plugins',
                                children: {}
                            }
                        }
                    }
                }
            }
        };
    }
    
    render() {
        const html = this.renderNode(this.fileStructure);
        this.container.innerHTML = html;
        this.attachEventListeners();
    }
    
    renderNode(node, level = 0) {
        let html = '';
        for (const [name, data] of Object.entries(node)) {
            const indent = '  '.repeat(level);
            const icon = data.type === 'folder' ? '📁' : '📄';
            html += `
                <div class="tree-item" data-level="${level}">
                    ${indent}${icon} ${name}
                    ${data.description ? `<span class="description">${data.description}</span>` : ''}
                    ${data.children ? this.renderNode(data.children, level + 1) : ''}
                </div>
            `;
        }
        return html;
    }
    
    attachEventListeners() {
        // Add click handlers for expanding/collapsing
        this.container.querySelectorAll('.tree-item').forEach(item => {
            item.addEventListener('click', (e) => {
                e.stopPropagation();
                item.classList.toggle('expanded');
            });
        });
    }
}

// Initialize the explorer
new FileTreeExplorer('wordpress-structure');

<?php
// Example: Template Hierarchy Resolver
class TemplateHierarchyResolver {
    
    public function get_template_hierarchy($query_type, $specifics = array()) {
        $templates = array();
        
        switch ($query_type) {
            case 'single_post':
                $post_type = $specifics['post_type'] ?? 'post';
                $post_slug = $specifics['slug'] ?? '';
                
                if ($post_type === 'post') {
                    if ($post_slug) {
                        $templates[] = "single-post-{$post_slug}.php";
                    }
                    $templates[] = 'single-post.php';
                }
                
                $templates[] = "single-{$post_type}.php";
                $templates[] = 'single.php';
                $templates[] = 'singular.php';
                break;
                
            case 'category':
                $slug = $specifics['slug'] ?? '';
                $id = $specifics['id'] ?? '';
                
                if ($slug) {
                    $templates[] = "category-{$slug}.php";
                }
                if ($id) {
                    $templates[] = "category-{$id}.php";
                }
                $templates[] = 'category.php';
                $templates[] = 'archive.php';
                break;
                
            case 'page':
                $slug = $specifics['slug'] ?? '';
                $id = $specifics['id'] ?? '';
                $template = $specifics['template'] ?? '';
                
                if ($template) {
                    $templates[] = $template;
                }
                if ($slug) {
                    $templates[] = "page-{$slug}.php";
                }
                if ($id) {
                    $templates[] = "page-{$id}.php";
                }
                $templates[] = 'page.php';
                $templates[] = 'singular.php';
                break;
        }
        
        // Always fall back to index.php
        $templates[] = 'index.php';
        
        return $templates;
    }
    
    public function visualize_hierarchy($templates) {
        echo '<div class="template-hierarchy">';
        foreach ($templates as $priority => $template) {
            $exists = file_exists(get_template_directory() . '/' . $template);
            $class = $exists ? 'exists' : 'missing';
            echo sprintf(
                '<div class="template-item %s">
                    <span class="priority">%d</span>
                    <span class="filename">%s</span>
                    <span class="status">%s</span>
                </div>',
                $class,
                $priority + 1,
                $template,
                $exists ? '✓' : '✗'
            );
        }
        echo '</div>';
    }
}

// Usage
$resolver = new TemplateHierarchyResolver();
$hierarchy = $resolver->get_template_hierarchy('single_post', [
    'post_type' => 'post',
    'slug' => 'hello-world'
]);
$resolver->visualize_hierarchy($hierarchy);
?>

Pro Tips for Success

Final Submission Checklist

Need Help?