Creare un tema WordPress da zero è una delle competenze più gratificanti che uno sviluppatore web possa acquisire. Non solo ti permette di avere il pieno controllo sul design e sulle funzionalità del tuo sito, ma ti offre anche una comprensione profonda di come funziona WordPress internamente.

In questa guida ti accompagnerò passo dopo passo nel processo di sviluppo di un tema WordPress funzionale, partendo dalle basi fino ad arrivare alla creazione di un tema completo e professionale.

Perché Creare un Tema WordPress Personalizzato

Prima di immergerci nel codice, è importante capire perché potresti voler creare il tuo tema WordPress invece di utilizzarne uno preesistente.

Un tema personalizzato ti offre:

• Controllo totale sull’aspetto e sul comportamento del sito
• Codice pulito senza funzionalità superflue che rallentano il caricamento
• Possibilità di branding per creare un’identità unica
• Apprendimento approfondito del funzionamento di WordPress
• Manutenzione semplificata perché conosci ogni parte del codice

Se stai cercando di entrare nel mondo dello sviluppo WordPress o vuoi creare un sito web professionale, imparare a sviluppare temi è un investimento che vale sicuramente il tempo dedicato.

Prerequisiti per lo Sviluppo di Temi WordPress

Prima di iniziare, assicurati di avere una buona comprensione dei seguenti concetti:

Competenze Tecniche Necessarie

• HTML e CSS: La base di qualsiasi sito web. Devi sapere come strutturare una pagina e stilizzarla.
• PHP: WordPress è costruito su PHP, quindi una conoscenza base è essenziale per comprendere come funziona il sistema di template.
• JavaScript: Utile per aggiungere interattività, anche se non strettamente necessario per un tema base.

Strumenti di Sviluppo

• Un server locale come XAMPP, MAMP o Local by Flywheel
• Un editor di codice come Visual Studio Code, PhpStorm o Sublime Text
• Un browser moderno con strumenti di sviluppo (Chrome DevTools)
• Accesso a un’installazione WordPress locale

Configurare l’Ambiente di Sviluppo Locale

Il primo passo concreto è configurare un ambiente di sviluppo locale dove poter testare il tuo tema senza compromettere un sito live.

Installare Local by Flywheel

Local è una delle opzioni più semplici per creare un ambiente WordPress locale:

1. Scarica e installa Local dal sito ufficiale
2. Crea un nuovo sito WordPress
3. Assegna un nome al progetto
4. Attendi che l’installazione venga completata
5. Accedi alla bacheca WordPress

Una volta completata l’installazione, avrai un sito WordPress funzionante su cui testare il tuo tema in tempo reale.

Struttura delle Cartelle dei Temi

WordPress cerca i temi in una struttura specifica. I temi si trovano in:

wp-content/themes/nome-del-tuo-tema/

Questa cartella sarà la tua area di lavoro principale. Al suo interno creerai tutti i file necessari per il tuo tema.

Creare i File Essenziali del Tema

Ogni tema WordPress richiede alcuni file fondamentali per funzionare. Iniziamo creando la struttura base.

1. Il File style.css

Il file style.css è il cuore del tuo tema. Non contiene solo CSS, ma anche le informazioni necessarie a WordPress per riconoscere e visualizzare il tema nel pannello di amministrazione.

/
Theme Name: Il Mio Primo Tema
Theme URI: https://esempio.com
Author: Il Tuo Nome
Author URI: https://esempio.com
Description: Un tema WordPress personalizzato creato da zero
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mio-primo-tema
/

Questo commento iniziale è obbligatorio. Senza di esso, WordPress non sarà in grado di riconoscere il tuo tema.

2. Il File functions.php

Il file functions.php è dove definisci le funzionalità del tema, registri script, stili, menu, widget e molto altro.

<?php
// Aggiungiamo il supporto per vari elementi di WordPress
function mio_tema_setup() {
    // Supporto per il titolo del sito
    add_theme_support('title-tag');

    // Supporto per le immagini in evidenza
    add_theme_support('post-thumbnails');

    // Supporto per il logo personalizzato
    add_theme_support('custom-logo');

    // Registriamo un menu di navigazione
    register_nav_menus(array(
        'primary' => __('Menu Principale', 'mio-primo-tema'),
        'footer' => __('Menu Footer', 'mio-primo-tema'),
    ));
}
add_action('after_setup_theme', 'mio_tema_setup');

// Carichiamo gli stili e gli script
function mio_tema_scripts() {
    wp_enqueue_style('mio-tema-style', get_stylesheet_uri());
    wp_enqueue_script('mio-tema-script', get_template_directory_uri() . '/js/main.js', array(), '1.0.0', true);
}
add_action('wp_enqueue_scripts', 'mio_tema_scripts');

3. Il File index.php

Il file index.php è il template di fallback di WordPress. Viene utilizzato quando non esiste un template più specifico per un determinato contenuto.

<?php get_header(); ?>

<main class="site-main">
    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>

        <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
            <header class="entry-header">
                <h2 class="entry-title">
                    <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
                </h2>
                <div class="entry-meta">
                    <span class="posted-on"><?php echo get_the_date(); ?></span>
                </div>
            </header>

            <div class="entry-content">
                <?php the_content(); ?>
            </div>
        </article>

    <?php endwhile; else : ?>
        <p><?php esc_html_e('Nessun contenuto trovato.', 'mio-primo-tema'); ?></p>
    <?php endif; ?>
</main>

<?php get_footer(); ?>

Comprendere la Gerarchia dei Template

WordPress utilizza un sistema di gerarchia dei template per determinare quale file PHP visualizzare per ogni tipo di contenuto. Comprendere questo sistema è fondamentale per creare un tema completo.

Ordine di Priorità dei Template

Ecco l’ordine in cui WordPress cerca i template:

Esempio Pratico: Creare header.php e footer.php

Per evitare di ripetere il codice in ogni template, WordPress permette di creare file parziali riutilizzabili.

header.php

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo('charset'); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<?php wp_body_open(); ?>

<header class="site-header">
    <div class="container">
        <?php if (has_custom_logo()) : ?>
            <?php the_custom_logo(); ?>
        <?php else : ?>
            <h1 class="site-title">
                <a href="<?php echo esc_url(home_url('/')); ?>">
                    <?php bloginfo('name'); ?>
                </a>
            </h1>
        <?php endif; ?>

        <nav class="main-navigation">
            <?php wp_nav_menu(array(
                'theme_location' => 'primary',
                'container' => false,
                'menu_class' => 'nav-menu',
            )); ?>
        </nav>
    </div>
</header>

<main class="site-content">

footer.php

</main>

<footer class="site-footer">
    <div class="container">
        <p>&copy; <?php echo date('Y'); ?> <?php bloginfo('name'); ?>. Tutti i diritti riservati.</p>
        <?php wp_nav_menu(array('theme_location' => 'footer')); ?>
    </div>
</footer>

<?php wp_footer(); ?>
</body>
</html>

Il Loop di WordPress: Cuore del Sistema

Il Loop è il meccanismo fondamentale attraverso cui WordPress recupera e visualizza i contenuti. Comprenderlo è essenziale per qualsiasi sviluppatore di temi.

Struttura Base del Loop

<?php
// Verifichiamo se ci sono post da visualizzare
if (have_posts()) :

    // Iteriamo attraverso ogni post
    while (have_posts()) : the_post();

        // Contenuto del singolo post ?>
        <article id="post-<?php the_ID(); ?>">
            <h2><?php the_title(); ?></h2>
            <div class="post-thumbnail">
                <?php if (has_post_thumbnail()) : ?>
                    <?php the_post_thumbnail('medium'); ?>
                <?php endif; ?>
            </div>
            <div class="post-excerpt">
                <?php the_excerpt(); ?>
            </div>
            <a href="<?php the_permalink(); ?>">Leggi tutto</a>
        </article>
        <?php

    endwhile;

    // Paginazione
    the_posts_pagination();

else :
    // Messaggio se non ci sono post
    echo '<p>Nessun contenuto disponibile.</p>';

endif;
?>

Funzioni Utili all’Interno del Loop

All’interno del Loop hai accesso a numerose funzioni:

• the_title() - Visualizza il titolo del post
• the_content() - Visualizza il contenuto completo
• the_excerpt() - Visualizza un riassunto
• the_permalink() - Restituisce l’URL del post
• the_post_thumbnail() - Visualizza l’immagine in evidenza
• the_date() - Visualizza la data di pubblicazione
• the_author() - Visualizza l’autore
• get_the_category() - Recupera le categorie

Template Parts: Riutilizzare il Codice

I template parts sono frammenti di template che puoi includere in diversi punti del tuo tema. Questo approccio promuove il riutilizzo del codice e la manutenzione più semplice.

Creare Template Parts

Puoi creare template parts per elementi ripetitivi come card di articoli, header di sezioni, o qualsiasi altro componente.

template-parts/content.php

<article id="post-<?php the_ID(); ?>" <?php post_class('article-card'); ?>>
    <?php if (has_post_thumbnail()) : ?>
        <div class="card-image">
            <a href="<?php the_permalink(); ?>">
                <?php the_post_thumbnail('large'); ?>
            </a>
        </div>
    <?php endif; ?>

    <div class="card-content">
        <h3 class="card-title">
            <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
        </h3>

        <div class="card-meta">
            <span class="card-date"><?php echo get_the_date(); ?></span>
            <span class="card-author">di <?php the_author(); ?></span>
        </div>

        <div class="card-excerpt">
            <?php the_excerpt(); ?>
        </div>

        <a href="<?php the_permalink(); ?>" class="card-link">
            Continua a leggere →
        </a>
    </div>
</article>

Includere Template Parts nel Template

<?php get_template_part('template-parts/content', 'page'); ?>

Il secondo parametro (‘page’) permette di specificare un suffisso. WordPress cercherà prima content-page.php e, se non esiste, ricorrerà a content.php.

Aggiungere Stili e Script Correttamente

Un aspetto cruciale dello sviluppo temi è la gestione corretta di CSS e JavaScript. WordPress fornisce un sistema integrato per caricare risorse in modo sicuro e.performante.

Best Practices per CSS e JavaScript

function mio_tema_enqueue_assets() {
    // CSS principale del tema
    wp_enqueue_style(
        'mio-tema-main',
        get_stylesheet_directory_uri() . '/css/main.css',
        array(),
        '1.0.0'
    );

    // Font Google (dipendenza per main.css)
    wp_enqueue_style(
        'google-fonts',
        'https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap',
        array(),
        null
    );

    // JavaScript con dipendenze
    wp_enqueue_script(
        'mio-tema-navigation',
        get_template_directory_uri() . '/js/navigation.js',
        array(),
        '1.0.0',
        true
    );

    // JavaScript condizionale (es. solo per IE)
    wp_enqueue_script(
        'html5shiv',
        'https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js',
        array(),
        '3.7.3',
        false
    );
    wp_script_add_data('html5shiv', 'conditional', 'lt IE 9');
}
add_action('wp_enqueue_scripts', 'mio_tema_enqueue_assets');

Creare il File CSS Principale

css/main.css

/ Reset di base /
 {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/ Variabili CSS /
:root {
    --color-primary: #2563eb;
    --color-secondary: #1e40af;
    --color-text: #1f2937;
    --color-bg: #ffffff;
    --font-main: 'Inter', sans-serif;
    --spacing-md: 1.5rem;
    --spacing-lg: 3rem;
}

/ Stili globali /
body {
    font-family: var(--font-main);
    color: var(--color-text);
    background-color: var(--color-bg);
    line-height: 1.6;
}

/ Container /
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

/ Header /
.site-header {
    padding: var(--spacing-md) 0;
    border-bottom: 1px solid #e5e7eb;
}

.site-header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/ Navigazione /
.nav-menu {
    display: flex;
    list-style: none;
    gap: var(--spacing-md);
}

.nav-menu a {
    text-decoration: none;
    color: var(--color-text);
    transition: color 0.3s ease;
}

.nav-menu a:hover {
    color: var(--color-primary);
}

/ Articoli /
.article-card {
    margin-bottom: var(--spacing-lg);
    padding: var(--spacing-md);
    border-radius: 8px;
    background: #f9fafb;
}

.card-title a {
    text-decoration: none;
    color: var(--color-text);
}

/ Responsive */
@media (max-width: 768px) {
    .site-header .container {
        flex-direction: column;
        gap: var(--spacing-md);
    }

    .nav-menu {
        flex-direction: column;
        align-items: center;
    }
}

Personalizzare il Tema con il Customizer

Il Customizer di WordPress permette agli utenti di modificare aspeketti del tema in tempo reale. Implementare il Customizer rende il tuo tema più flessibile e user-friendly.

Aggiungere Opzioni al Customizer

function mio_tema_customize_register($wp_customize) {
    // Sezione Colori
    $wp_customize->add_section('mio_tema_colors', array(
        'title' => __('Colori del Sito', 'mio-primo-tema'),
        'priority' => 30,
    ));

    // Impostazione colore primario
    $wp_customize->add_setting('primary_color', array(
        'default' => '#2563eb',
        'sanitize_callback' => 'sanitize_hex_color',
    ));

    $wp_customize->add_control(new WP_Customize_Color_Control($wp_customize, 'primary_color', array(
        'label' => __('Colore Primario', 'mio-primo-tema'),
        'section' => 'mio_tema_colors',
        'settings' => 'primary_color',
    )));

    // Sezione Layout
    $wp_customize->add_section('mio_tema_layout', array(
        'title' => __('Layout', 'mio-primo-tema'),
        'priority' => 35,
    ));

    // Impostazione container width
    $wp_customize->add_setting('container_width', array(
        'default' => '1200',
        'sanitize_callback' => 'absint',
    ));

    $wp_customize->add_control('container_width', array(
        'type' => 'number',
        'section' => 'mio_tema_layout',
        'label' => __('Larghezza Container (px)', 'mio-primo-tema'),
        'input_attrs' => array(
            'min' => 800,
            'max' => 1920,
            'step' => 20,
        ),
    ));
}
add_action('customize_register', 'mio_tema_customize_register');

// Applicare le impostazioni nel CSS
function mio_tema_customizer_css() {
    $primary_color = get_theme_mod('primary_color', '#2563eb');
    $container_width = get_theme_mod('container_width', '1200');
    ?>
    <style type="text/css">
        :root {
            --color-primary: <?php echo esc_attr($primary_color); ?>;
            --container-max: <?php echo esc_attr($container_width); ?>px;
        }
    </style>
    <?php
}
add_action('wp_head', 'mio_tema_customizer_css');

Creare Template Specifici

Per un tema completo, dovresti creare template specifici per diversi tipi di contenuto.

Template per Pagine (page.php)

<?php get_header(); ?>

<main class="page-template">
    <?php while (have_posts()) : the_post(); ?>

        <article class="page-content">
            <header class="page-header">
                <h1 class="page-title"><?php the_title(); ?></h1>
            </header>

            <div class="page-body">
                <?php the_content(); ?>
            </div>

            <?php
            // Supporto per la paginazione all'interno del contenuto
            wp_link_pages(array(
                'before' => '<div class="page-links">' . __('Pagine:', 'mio-primo-tema'),
                'after' => '</div>',
            ));
            ?>
        </article>

        <?php
        // Commenti (se abilitati)
        if (comments_open() || get_comments_number()) :
            comments_template();
        endif;
        ?>

    <?php endwhile; ?>
</main>

<?php get_footer(); ?>

Template per Articoli (single.php)

<?php get_header(); ?>

<main class="single-post">
    <?php while (have_posts()) : the_post(); ?>

        <article class="post-single">
            <header class="post-header">
                <?php if (has_post_thumbnail()) : ?>
                    <div class="post-featured-image">
                        <?php the_post_thumbnail('large'); ?>
                    </div>
                <?php endif; ?>

                <h1 class="post-title"><?php the_title(); ?></h1>

                <div class="post-meta">
                    <span class="post-date">
                        <time datetime="<?php echo get_the_date('c'); ?>">
                            <?php echo get_the_date(); ?>
                        </time>
                    </span>
                    <span class="post-author">
                        <?php the_author_posts_link(); ?>
                    </span>
                    <span class="post-categories">
                        <?php the_category(', '); ?>
                    </span>
                </div>
            </header>

            <div class="post-content">
                <?php the_content(); ?>
            </div>

            <footer class="post-footer">
                <?php the_tags('<div class="post-tags"><strong>Tag:</strong> ', ', ', '</div>'); ?>

                <?php get_template_part('template-parts/author', 'bio'); ?>
            </footer>
        </article>

        <nav class="post-navigation">
            <div class="previous-post">
                <?php previous_post_link('%link', '← Articolo precedente'); ?>
            </div>
            <div class="next-post">
                <?php next_post_link('%link', 'Articolo successivo →'); ?>
            </div>
        </nav>

        <?php comments_template(); ?>

    <?php endwhile; ?>
</main>

<?php get_footer(); ?>

Template per Errori 404 (404.php)

<?php get_header(); ?>

<main class="error-404">
    <div class="container">
        <section class="error-404-content">
            <h1 class="error-code">404</h1>
            <h2 class="error-title"><?php esc_html_e('Pagina Non Trovata', 'mio-primo-tema'); ?></h2>
            <p class="error-message">
                <?php esc_html_e('La pagina che stai cercando non esiste o è stata spostata.', 'mio-primo-tema'); ?>
            </p>

            <div class="error-search">
                <h3><?php esc_html_e('Prova a cercare:', 'mio-primo-tema'); ?></h3>
                <?php get_search_form(); ?>
            </div>

            <div class="error-links">
                <a href="<?php echo esc_url(home_url('/')); ?>" class="btn-home">
                    <?php esc_html_e('Torna alla Home', 'mio-primo-tema'); ?>
                </a>
            </div>
        </section>
    </div>
</main>

<?php get_footer(); ?>

Sicurezza e Best Practices

Quando sviluppi un tema WordPress, la sicurezza deve essere sempre una priorità.

Sanitizzazione e Validazione

// Sanitizzazione degli input
$testo = sanitize_text_field($input);
$email = sanitize_email($input);
$url = esc_url($input);
$html = wp_kses_post($input);

// escaping dell'output
echo esc_html($testo);
echo esc_attr($attributo);
echo esc_url($link);
echo wp_kses_post($contenuto_html);

Altre Best Practices

• Non modificare i file core di WordPress
• Usa funzioni WordPress native invece di codice personalizzato quando possibile
• Implementa il supporto per la traduzione usando __() e _e()
• Evita queries personalizzate complesse nel template; usa invece hooks e filtri
• Mantieni il codice modulare usando template parts e funzioni specifiche

Testare e Distribuire il Tema

Prima di rendere disponibile il tuo tema, è essenziale testarlo accuratamente.

Checklist per i Test

• [ ] Il tema si attiva senza errori
• [ ] Tutti i template funzionano correttamente
• [ ] I menu di navigazione sono visualizzati
• [ ] Le immagini in evidenza vengono visualizzate
• [ ] I commenti funzionano
• [ ] La paginazione è corretta
• [ ] Il Customizer funziona
• [ ] Il tema è responsive su diversi dispositivi
• [ ] Non ci sono errori PHP o JavaScript nella console
• [ ] Il tema rispetta gli standard WordPress

Strumenti di Test

• Theme Check: Plugin che verifica la conformità agli standard WordPress
• Query Monitor: Per debuggare query database e performance
• Browser DevTools: Per testare CSS e JavaScript
• Theme Unit Test: Dataset di test per verificare la compatibilità

Creare un tema WordPress da zero richiede un workflow strutturato: definizione requisiti, configurazione ambiente, scrittura codice, test e manutenzione. OpenCode, l'agente AI sviluppato all'interno della piattaforma OpenClaw, automatizza ogni fase di questo processo, consentendoti di partire da un'idea e arrivare a un tema funzionante senza perdere tempo in operazioni ripetitive.

Se vuoi approfondire come mrtux.it utilizza l'intelligenza artificiale per velocizzare lo sviluppo WordPress, abbiamo analizzato nel dettaglio il approccio AI-first per il web design nella nostra guida su web design WordPress con Novamira.ai. Il principio è lo stesso: delegare la generazione boilerplate a un agente, concentrarsi sulla logica applicativa.

Preparazione: requisiti e strumenti necessari

Prima di lanciare OpenCode, verifica di avere tutto il necessario. Un ambiente WordPress pulito, un editor serio (VS Code o PhpStorm), accesso FTP/SFTP al server, e una chiara definizione di cosa deve fare il tema.

Ecco la lista organizzata per categorie:

WordPress.org mette a disposizione la documentazione ufficiale sulla struttura dei temi. È il riferimento primario prima di any altra fonte. Tienila aperta mentre lavori con OpenCode.

Step 1 — Prompt strutturato: dall'idea al brief

Il primo comando che dai a OpenCode imposta il tono di tutto il progetto. Un prompt efficace specifica: funzionalità richieste, design di riferimento, breakpoint responsivi, eventuali plugin da supportare.

# Esempio di prompt iniziale per OpenCode
/create-wordpress-theme name=mytheme domain=mytheme\ndescription=Tema custom per blog personale\nfeatures=post-grid,dark-mode,cookie-banner\nbreakpoints=mobile,tablet,desktop\nplugins=contact-form-7,yoast-seo

OpenCode analizza il brief, predispone la struttura cartelle e genera i file core del tema. Non è magia: è un modello linguistico addestrato sulla documentazione WordPress che risponde in modo contestuale.

Step 2 — Struttura del tema WordPress

Un tema WordPress ben strutturato rispetta lo Standard di WordPress Coding. OpenCode crea automaticamente lo scheletro:

mytheme/
├── style.css              # Header del tema (obbligatorio)
├── functions.php          # Hook, enqueue script, customizer
├── index.php              # Template fallback
├── header.php             # Sezione head e header
├── footer.php             # Footer e script finali
├── singular.php           # Singolo articolo / pagina
├── archive.php            # Lista post
├── search.php             # Risultati ricerca
├── 404.php                # Pagina errore
├── screenshot.png         # Anteprima tema (880×660px)
├── assets/
│   ├── css/
│   │   └── style.css
│   ├── js/
│   │   └── main.js
│   └── images/
└── parts/
    ├── navbar.php
    ├── loop.php
    └── footer-content.php

Ogni file ha un ruolo preciso. OpenCode genera anche theme.json per il Full Site Editing (FSE) se il progetto lo richiede.

Step 3 — Il cuore: functions.php e style.css

Questi due file sono il minimo sindacale per qualsiasi tema WordPress. OpenCode li produce contestualmente al prompt.

style.css — Header del tema

/*
Theme Name: MyTheme
Theme URI: https://example.com/mytheme
Author: Developer Name
Author URI: https://example.com
Description: Tema WordPress custom per blog personale, con dark mode e cookie banner.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.6
Requires PHP: 8.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mytheme
*/

/* === Reset & Base === */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, sans-serif; line-height: 1.6; }

/* === Layout === */
.site-container { max-width: 1200px; margin: 0 auto; padding: 0 1rem; }

functions.php — Setup e hook

<?php
/**
 * MyTheme functions and definitions
 * @link https://developer.wordpress.org/themes/basics/theme-functions/
 */

if ( ! defined( 'ABSPATH' ) ) exit;

/** === Enqueue Scripts e Styles === */
function mytheme_enqueue_assets() {
    wp_enqueue_style( 'mytheme-style', get_stylesheet_uri(), [], wp_get_theme()->get( 'Version' ) );
    wp_enqueue_script( 'mytheme-main', get_template_directory_uri() . '/assets/js/main.js', [], '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_assets' );

/** === Theme Support === */
function mytheme_setup() {
    add_theme_support( 'title-tag' );
    add_theme_support( 'automatic-feed-links' );
    add_theme_support( 'custom-logo' );
    add_theme_support( 'custom-header' );
    add_theme_support( 'custom-background' );
    add_theme_support( 'post-thumbnails' );
    add_theme_support( 'html5', [ 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ] );
}
add_action( 'after_setup_theme', 'mytheme_setup' );

/** === Register Nav Menus === */
function mytheme_menus() {
    register_nav_menus( [
        'primary'   => 'Primary Menu',
        'footer'    => 'Footer Menu',
        'mobile'    => 'Mobile Menu',
    ] );
}
add_action( 'init', 'mytheme_menus' );

Questi snippet sono generati direttamente da OpenCode, ma devi sempre verificare che rispettino lo standard PHP di WordPress e la vostra convenzione di progetto.

Step 4 — WordPress Hook e comportamento runtime

OpenCode conosce la struttura dei hook WordPress (actions e filters). Li utilizza per collegare le funzionalità al core di WordPress senza toccare il CMS.

<?php
// Esempio: aggiungere meta description dinamico via filter hook
function mytheme_meta_description( $description ) {
    if ( is_single() ) {
        $post = get_post( get_queried_object_id() );
        $description = wp_trim_words( $post->post_content, 30, '...' );
    }
    return $description;
}
add_filter( 'rank_math/frontend/description', 'mytheme_meta_description' );

Questo è un pattern comune quando il tema deve integrarsi con plugin SEO come Rank Math. La forza di OpenCode sta nel proporre la struttura corretta del hook, ma sta a te validare che non crei conflitti con altri plugin attivi.

Step 5 — Debug locale con WP-CLI e wp-config.php

Prima di qualsiasi test sul server remoto, lavora in locale. OpenCode può aiutarti anche qui.

# Reset database WordPress in locale (da cartella tema)
wp db reset --yes

# Scaffold utente admin di test
wp user create admin admin@example.com --role=administrator --user_pass=password

# Attivare debug mode da linea di comando
WP_DEBUG=true wp theme activate mytheme

# Genera contenuto di test
wp scaffold post-template --title="Post di test" --count=20

Per attivare la modalità debug in locale, modifica wp-config.php:

// wp-config.php — Debug mode
define( 'WP_DEBUG', true );
define( 'WP_DEBUG_LOG', true );
define( 'WP_DEBUG_DISPLAY', false );
define( 'SCRIPT_DEBUG', true );

Il file wp-config.php non fa parte del tema (è nella root di WordPress), ma è il primo posto dove guardare quando qualcosa non funziona dopo un'attivazione.

Step 6 — Deploy: dal locale alla produzione

Quando il tema è testato e pronto, il deploy segue un flusso prevedibile:

1. Esporta il tema localte tramite FPT o sincronizza via Git.
2. Carica via FTP nella cartella /wp-content/themes/mytheme/ sul server produzione.
3. Attiva dal pannello WordPress: Aspetto → Temi.
4. Verifica che tutti i plugin previsti siano installati e attivi.
5. Query Monitor in produzione per confermare zero errori PHP o SQL.

Se il progetto usa GitHub Actions per il deploy automatico, OpenCode può generare anche la workflow YAML:

# .github/workflows/deploy-theme.yml
name: Deploy Theme
on:
  push:
    branches: [ main ]
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Deploy via RSYNC
        uses: burnett01/rsync-deployments@6.0
        with:
          switches: -avzr --delete
          path: ./mytheme
          remote_path: /var/www/html/wp-content/themes/
          remote_host: ${{ secrets.SSH_HOST }}
          remote_user: ${{ secrets.SSH_USER }}
          remote_key: ${{ secrets.SSH_KEY }}

Questo approccio ti consente di pubblicare il tema su più ambienti senza toccare manualmente i file sul server. Se vuoi un esempio pratico di workflow automatizzato, consulta la repository GitHub di riferimento per lo sviluppo WordPress con CI/CD.

Manutenzione del tema WordPress

Un tema non finisce con il deploy. OpenCode ti accompagna anche nella fase di manutenzione, rispondendo a domande specifiche: aggiungere una nuova area widget, modificare un hook, aggiornare la compatibilità con una nuova versione di WordPress.

# Chiedi a OpenCode di generare un template part aggiuntivo
/generate-theme-part name=newsletter-bar type=partial location=header\ncontent=Campo email con privacy checkbox

La manutenzione regolare include: controllo compatibilità con l'ultimo WordPress release, aggiornamento dipendenze JavaScript, revisione accessibilità (WCAG 2.1), e backup pre-aggiornamento.

Per una panoramica completa su tutti gli strumenti AI disponibili per WordPress, incluidos quelli per la creazione e gestione di plugin, consulta la nostra guida completa su web design WordPress con Novamira.ai, che copre l'intero ecosistema AI-powered per sviluppatori WordPress.

FAQ — Domande frequenti sulla creazione di un tema WordPress con OpenCode

OpenCode sostituisce la conoscenza di PHP e WordPress? No. OpenCode accelera la scrittura del codice ripetitivo, ma devi saper verificare cosa genera. Un tema WordPress funzionante richiede comprensione di template hierarchy, hook system e customizer API. Senza queste basi, il debug diventa cieco.

Posso creare un tema child con OpenCode? Sì. Fornisci il tema parent come riferimento e specifica le modifiche richieste. OpenCode genera il child theme con il minimo indispensabile: style.css, functions.php con parent_theme dichiarato, e eventuali template override.

OpenCode supporta Full Site Editing e block theme? Sì. OpenCode può generare theme.json completo per il Full Site Editing e file templates/*.html basati su blocchi Gutenberg nativi. Tuttavia, per custom block complessi è ancora necessario scrivere JavaScript/React.

Come gestisco la sicurezza del tema generato? Ogni snippet che accetti da OpenCode deve passare un controllo: input sanitizzati con sanitize_text_field(), esc_html(), esc_url(), output escaping con esc_html() e esc_attr(). Non accettare mai codice che inserisce dati utente senza validazione.

Quanto costa usare OpenCode per creare un tema? OpenCode è un agente AI basato su modello linguistico. I costi dipendono dal provider di OpenClaw configurato. Verifica i tuoi limiti con il comando openclaw status per evitare interruzioni durante la generazione di un tema complesso.

Posso usare OpenCode con un team? Sì. Workflow consigliato: prompt iniziale condiviso, revisione del codice generato via pull request su Git, test su ambiente di staging prima del merge su produzione. OpenCode non sostituisce il processo di code review.

Conclusione

Creare un tema WordPress con OpenCode non è un shortcut: è un workflow accelerato che richiede comunque competenza, verifica e manutenzione. Ma la differenza in termini di tempo è concreta. Dove prima scrivevi 20 file a mano, ora hai una base solida da revisionare e personalizzare.

Il vantaggio competitivo reale sta nel fatto che OpenCode ti permette di iterare velocemente su prototipi funzionanti, testare idee di design, e concentrarti sulla logica applicativa che distingue il tuo lavoro da un tema predefinito.

Prova adesso: lancia OpenCode e descrivi il tema che hai in mente. Dal primo prompt alla struttura completa in pochi minuti. Poi tocca a te affinare, testare e deployare.

Hai già usato un agente AI per creare un tema WordPress? Racconta la tua esperienza nei commenti o contattaci per una consulenza sul tuo progetto specifico.