Cum creați un child theme în WordPress pas cu pas

Un child theme (temă copil) în WordPress este o temă care moștenește funcționalitățile, designul și codul unei alte teme, numită temă părinte. Child theme-ul vă permite să personalizați aspectul și funcționalitățile website-ului fără a modifica direct fișierele temei originale, asigurând că personalizările dvs. nu vor fi suprascrise la actualizarea temei părinte.

Fără un child theme, orice modificare făcută direct în fișierele temei active va fi pierdută la prima actualizare. Aceasta este una dintre cele mai frecvente greșeli ale proprietarilor de website-uri WordPress care pierd ore de personalizare pentru că nu au folosit un child theme. WordPress încarcă mai întâi fișierele child theme-ului și le completează cu cele din tema părinte pentru orice nu este suprascris.

În acest ghid veți descoperi cum să creați un child theme de la zero, cum să suprascrieți template-urile temei părinte, cum să adăugați funcționalități personalizate și cele mai bune practici pentru dezvoltarea cu child themes în WordPress. Fie că administrați un blog personal sau un magazin WooCommerce, înțelegerea child theme-urilor este esențială pentru orice proprietar de website WordPress care dorește control deplin asupra platformei sale.

Cum creați un child theme în WordPress pas cu pas

Crearea unui child theme necesită doar două fișiere: un fișier style.css cu headerul obligatoriu și un fișier functions.php care încarcă stilurile temei părinte. Procesul este simplu și poate fi completat în mai puțin de 10 minute, fără cunoștințe avansate de programare.

De ce aveți nevoie de un child theme

Înainte de a trece la partea tehnică, este important să înțelegeți de ce un child theme este o necesitate, nu o opțiune. Orice temă WordPress premium sau gratuită poate primi actualizări care aduc corecturi de securitate, îmbunătățiri de performanță sau funcționalități noi. Dacă ați modificat direct fișierele temei, aceste modificări vor fi suprascrise complet la actualizare.

• Personalizări CSS – modificări ale culorilor, fonturilor, spațierilor și layout-ului
• Modificări de template – personalizarea headerului, footerului, paginii de articol sau a listei de produse
• Funcționalități suplimentare – adăugarea de shortcodes, filtre sau acțiuni WordPress personalizate
• Protecția la actualizări – toate modificările rămân intacte când actualizați tema părinte
• Organizare curată – separare clară între codul original al temei și personalizările dvs.
• Debugging simplificat – puteți dezactiva child theme-ul temporar pentru a testa dacă o problemă vine din tema părinte sau din personalizările dvs.

Structura fișierelor unui child theme

Un child theme este un director în wp-content/themes/ care conține cel puțin două fișiere obligatorii. Structura completă poate include orice fișier template pe care doriți să-l suprascrieți din tema părinte:

wp-content/themes/tema-parinte-child/
├── style.css          (obligatoriu - headerul temei)
├── functions.php      (obligatoriu - încarcă stilurile părinte)
├── screenshot.png     (opțional - imaginea temei în admin)
├── single.php         (opțional - suprascrie template articol)
├── page.php           (opțional - suprascrie template pagină)
└── template-parts/
    └── content.php    (opțional - suprascrie parțiale)

Convenția de denumire a directorului este numele directorului temei părinte urmat de -child. De exemplu, dacă tema părinte este Astra (directorul astra), child theme-ul va fi astra-child. Respectați această convenție pentru claritate, deși WordPress nu impune tehnic acest format.

Crearea child theme-ului pas cu pas

Pasul 1 – Creați directorul

Accesați File Manager din cPanel sau conectați-vă prin FTP cu un client precum FileZilla. Navigați la calea public_html/wp-content/themes/ și creați un director nou. Dacă tema dvs. părinte este Flavor, creați directorul flavor-child. Notați exact numele directorului temei părinte, inclusiv literele mici sau majuscule, deoarece aceasta este informație critică pentru pasul următor.

Pasul 2 – Creați fișierul style.css

În directorul child theme-ului, creați fișierul style.css cu headerul WordPress obligatoriu. Fiecare câmp din header are un rol specific:

/*
 Theme Name:   Flavor Child
 Theme URI:    https://exemplu.ro
 Description:  Child theme pentru tema Flavor
 Author:       Numele dvs.
 Author URI:   https://exemplu.ro
 Template:     flavor
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 Text Domain:  flavor-child
*/
/* Stilurile personalizate se adaugă mai jos */

Linia Template este critică – trebuie să conțină exact numele directorului temei părinte (nu numele afișat, ci numele directorului). Verificați numele exact în wp-content/themes/. De exemplu, tema cu numele afișat „Astra” are directorul astra (litere mici), deci Template: astra.

Pasul 3 – Creați fișierul functions.php

Creați fișierul functions.php care încarcă stilurile temei părinte. Acesta este modul corect recomandat de documentația WordPress:

<?php
// Încarcă stilurile temei părinte și ale child theme-ului
function flavor_child_enqueue_styles() {
    $parent_style = 'parent-style';

    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 ),
        wp_get_theme()->get( 'Version' )
    );
}
add_action( 'wp_enqueue_scripts', 'flavor_child_enqueue_styles' );

Funcția get_template_directory_uri() returnează calea temei părinte, iar get_stylesheet_directory_uri() returnează calea child theme-ului. Nu confundați aceste două funcții – greșeala este frecventă și duce la stiluri care nu se încarcă corect.

Pasul 4 – Activați child theme-ul

Din panoul admin WordPress, navigați la Aspect – Teme (Appearance – Themes). Child theme-ul va apărea în lista de teme cu numele pe care l-ați specificat în style.css. Activați-l. Website-ul ar trebui să arate identic cu tema părinte – child theme-ul moștenește totul automat.

Personalizarea stilurilor CSS

Adăugați stilurile personalizate în fișierul style.css al child theme-ului, după comentariul de header. Stilurile din child theme se încarcă după cele din tema părinte, deci le suprascriu automat datorită cascadei CSS:

/* Schimbă culoarea linkurilor */a {
    color: #ccac65;
    text-decoration: none;
}

a:hover {
    color: #01ce4c;
}

/* Personalizează headerul */.site-header {
    background-color: #1b2028;
    padding: 20px 0;
    border-bottom: 3px solid #ccac65;
}

/* Schimbă fontul headingurilor */h1, h2, h3, h4, h5, h6 {
    font-family: 'Georgia', serif;
    font-weight: 700;
}

/* Ascunde sidebar-ul pe pagina de blog */.blog .sidebar {
    display: none;
}

/* Ajustează lățimea containerului principal pe blog */.blog .content-area {
    width: 100%;
}

Suprascrierea template-urilor

Pentru a personaliza structura HTML a unei pagini, copiați fișierul template din tema părinte în child theme și modificați-l. WordPress verifică mai întâi child theme-ul și folosește versiunea găsită acolo.

1. Identificați fișierul template responsabil în tema părinte (de obicei single.php, page.php, sau fișiere din template-parts/)
2. Copiați fișierul în child theme, păstrând aceeași structură de directoare
3. Modificați fișierul copiat după necesități
4. Salvați și verificați rezultatul în browser

# Exemplu: suprascrierea template-ului de articol
# Copiați din:
wp-content/themes/flavor/single.php
# În:
wp-content/themes/flavor-child/single.php

# Copiați din:
wp-content/themes/flavor/template-parts/content.php
# În:
wp-content/themes/flavor-child/template-parts/content.php

Nu copiați toate fișierele temei părinte în child theme. Copiați exclusiv fișierele pe care le modificați. Fișierele necopiate sunt preluate automat din tema părinte.

Adăugarea funcționalităților prin functions.php

Fișierul functions.php al child theme-ului se încarcă înaintea celui al temei părinte, oferindu-vă posibilitatea de a adăuga sau modifica comportamentul WordPress fără a atinge tema originală:

<?php
// Adaugă un shortcode personalizat
function custom_cta_shortcode( $atts, $content = null ) {
    $atts = shortcode_atts( array(
        'culoare' => '#ccac65',
    ), $atts );

    return '<div class="custom-cta" style="border-color:'
        . esc_attr( $atts['culoare'] ) . '">'
        . do_shortcode( $content )
        . '</div>';
}
add_shortcode( 'cta', 'custom_cta_shortcode' );

// Adaugă dimensiune personalizată de imagine
add_image_size( 'blog-thumbnail', 800, 450, true );

// Elimină versiunea WordPress din header (securitate)
remove_action( 'wp_head', 'wp_generator' );

// Adaugă suport pentru meniuri suplimentare
function child_register_menus() {
    register_nav_menus( array(
        'footer-menu' => __( 'Meniu Footer', 'flavor-child' ),
    ) );
}
add_action( 'after_setup_theme', 'child_register_menus' );

Utilizarea hook-urilor WordPress în child theme

Hook-urile WordPress (actions și filters) sunt instrumentele principale pentru modificarea comportamentului platformei fără a edita fișierele core. În child theme puteți supraîncărca sau elimina hook-uri definite în tema părinte:

<?php
// Elimină un element adăugat de tema părinte
remove_action( 'woocommerce_before_shop_loop_item_title',
    'woocommerce_template_loop_product_thumbnail', 10 );

// Modifică numărul de produse per pagină în WooCommerce
add_filter( 'loop_shop_per_page', function( $cols ) {
    return 12;
}, 20 );

// Adaugă text după titlul articolului
add_filter( 'the_title', function( $title, $id ) {
    if ( is_singular() && in_the_loop() ) {
        $title .= ' <span class="title-accent"></span>';
    }
    return $title;
}, 10, 2 );

Greșeli frecvente și cum le evitați

• Template greșit în style.css – valoarea Template trebuie să fie exact numele directorului temei părinte, nu numele afișat. Verificați în File Manager.
• Folosirea @import – folosiți wp_enqueue_style în functions.php, nu @import în CSS. Metoda @import este mai lentă și nu respectă dependențele WordPress.
• Copierea tuturor fișierelor – copiați doar fișierele pe care le modificați. Copierea tuturor fișierelor crează probleme la actualizări și ocupă spațiu inutil.
• Editarea temei părinte – dacă aveți un child theme activ, toate modificările se fac exclusiv în child theme. Niciodată în tema părinte.
• Funcții duplicate – verificați dacă tema părinte folosește function_exists() înainte de a redefini funcții. Funcțiile duplicate provoacă erori PHP fatale.
• Absența tagului PHP de deschidere – fișierul functions.php trebuie să înceapă cu <?php pe prima linie, fără spații sau caractere înaintea lui.

Child themes pentru block themes (Full Site Editing)

Temele bazate pe blocuri (Full Site Editing – FSE), disponibile în WordPress 5.9+, folosesc un sistem ușor diferit. Child theme-ul include un fișier theme.json care suprascrie setările din tema părinte, în loc de functions.php pentru stiluri:

{
    "version": 2,
    "settings": {
        "color": {
            "palette": [
                {
                    "slug": "primary",
                    "color": "#ccac65",
                    "name": "Auriu principal"
                },
                {
                    "slug": "secondary",
                    "color": "#01ce4c",
                    "name": "Verde accent"
                }
            ]
        },
        "typography": {
            "fontSizes": [
                {
                    "slug": "large",
                    "size": "1.5rem",
                    "name": "Mare"
                }
            ]
        }
    }
}

Pentru block themes, template-urile se află în directorul templates/ și sunt fișiere HTML cu blocuri WordPress, nu fișiere PHP tradiționale. Suprascrierea funcționează la fel – copiați fișierul template în child theme și modificați-l.

Testarea și depanarea child theme-ului

După activarea child theme-ului, verificați că totul funcționează corect urmând acești pași:

1. Activați modul debug WordPress adăugând în wp-config.php: define( 'WP_DEBUG', true );
2. Verificați că website-ul arată identic cu tema părinte (înainte de a adăuga modificări)
3. Deschideți DevTools în browser (F12) și verificați că ambele fișiere CSS se încarcă (cel al temei părinte și cel al child theme-ului)
4. Adăugați modificările treptat și verificați după fiecare modificare
5. Dacă apare o eroare PHP, verificați functions.php pentru sintaxă incorectă

Child theme-urile sunt un instrument fundamental în dezvoltarea WordPress. Crearea unuia durează mai puțin de 10 minute și vă protejează personalizările pe termen lung. Indiferent dacă faceți modificări simple de CSS sau personalizări complexe de template-uri, child theme-ul asigură că munca dvs. rămâne intactă prin actualizări și oferă o separare clară între codul temei originale și personalizările dvs.