6. Theme Architecture

Agent-aware themes can integrate AI capabilities into the user experience through configuration and custom components.

6.1 Agent-Aware Theme Structure

theme/
├── agent/
│   ├── config.json                 # Theme agent configuration
│   ├── prompts/                    # Context-specific system prompts
│   │   ├── homepage.txt
│   │   ├── single-post.txt
│   │   ├── archive.txt
│   │   └── product-page.txt
│   ├── tools/                      # Theme-specific agent tools
│   │   ├── layout-switcher.php
│   │   └── style-adjuster.php
│   └── components/                 # Agent UI components
│       ├── chat-widget.html
│       └── suggestion-panel.html
├── templates/
│   ├── agent-interface.html        # Main agent UI template
│   └── parts/
│       └── agent-trigger.php       # Agent activation button
├── assets/
│   └── js/
│       └── agent-frontend.js       # Frontend agent scripts
├── functions.php
└── style.css

6.2 Theme Agent Configuration (agent/config.json)

{
    "frontend_agent": {
        "enabled": true,
        "position": "bottom-right",
        "trigger": {
            "type": "floating_button",
            "icon": "chat",
            "label": "Need help?"
        },
        "initial_message": "Hi! I can help you navigate this site...",
        "personality": "friendly, professional, concise",
        "capabilities": [
            "search",
            "navigate", 
            "explain",
            "personalize",
            "translate"
        ],
        "allowed_actions": {
            "dom_manipulation": ["highlight", "scroll_to", "expand"],
            "navigation": true,
            "form_assistance": true,
            "content_transformation": ["summarize", "translate"]
        },
        "appearance": {
            "theme": "auto",
            "colors": {
                "primary": "var(--theme-primary)",
                "background": "var(--theme-surface)"
            }
        }
    },
    "content_adaptation": {
        "enabled": true,
        "reading_level_adjustment": true,
        "language_translation": true,
        "accessibility_enhancement": true
    }
}

6.3 Block Editor Agent Integration

import { registerBlockType } from '@wordpress/blocks';
import { useAgentSuggestions } from '@wordpress/agent';

registerBlockType('theme/agent-content', {
    title: 'Agent-Enhanced Content',
    category: 'widgets',
    attributes: {
        baseContent: { type: 'string', default: '' },
        personalizationRules: { type: 'object', default: {} },
        agentInstructions: { type: 'string', default: '' },
        enablePersonalization: { type: 'boolean', default: true }
    },
    
    edit: function Edit({ attributes, setAttributes }) {
        const { suggestions, requestSuggestion } = useAgentSuggestions({
            content: attributes.baseContent,
            context: 'content_improvement'
        });
        
        return (
            <div className="wp-block-agent-content">
                <RichText
                    value={attributes.baseContent}
                    onChange={(content) => setAttributes({ baseContent: content })}
                />
                
                {suggestions.length > 0 && (
                    <AgentSuggestionPanel
                        suggestions={suggestions}
                        onAccept={(suggestion) => {
                            setAttributes({ baseContent: suggestion.content });
                        }}
                    />
                )}
            </div>
        );
    }
});

Related Articles

• Home
• Agent Tools
• 5. Plugin Architecture
• 2. Core Architecture