Cum faci un child theme pentru WordPress

Bloguri, site-uri, mai nou shopuri online, o grămadă sunt făcute cu WordPress. Mulți nu sunt fani ai soluției, dar asta și pentru că parte din aceștia sunt doar prea închistați în soluții propii pe care ei le consideră darul divin pentru muritorii de rând, multe dintre ele fiind mai degrabă arhaice sau mult prea pompoase pentru niște cerințe simple.

Scurtă introducere:

Nu zic că WordPress trebuie folosit în orice chestie și sunt 100% de acord că o soluție de la 0, custom made, magia creatorilor reprezintă ceva mult mai profesionist și mult mai după chipul și asemănarea atât a clientului, cât și a celor care lucrează. Dar pentru siteuri de prezentare care să aibă totuși anumite funcționalități nu neapărat super complexe, recomand WordPress și ceva funcții scrise in PHP și JS. Mai jos voi exemplifica:

1. Am avut de făcut la un moment dat un site de prezentare pentru o firmă de transporturi, dar ei doreau și o chestie prin care clienții lor să vadă unde se află anumite mașini care le transportau marfa. Și am făcut un tracker, pe care l-am pus ca un widget pe prima pagină a siteului, iar respectivii puteau vedea unde se afla șoferul introducând un cod personalizat.
2. Recunosc că am furat de la altcineva ideea 🙂 la un site de prezentare făcut tot în WP, am atașat un script custom made și l-am embeduit într-o pagină statică. Introduceai CNPul întrun câmp și vedeai dacă există vreo plângere sau vreo problemă juridică pe numele tău.

Fun fact: Acum câțiva ani buni am făcut un site cu care mapam diferite activități pentru un client. Bugetul pe care lucram era unul foarte în ceață atunci, eu nu aveam experientă foarte multă, așa că am apelat la WordPress,  am folosit un plug-in în care am integrat API-ul de la Google Maps și câteva scripturi costum made. Clientul a fost foarte dezamăgit pentru că folosisem WP, deoarece auzise de la cineva că nu ar fi o soluție viabilă (și niște argumente de doi lei, sincer să fiu). Mi-a spus că îmi dă banii pe ceea ce am lucrat și că a ales o firmă mai mare pentru ce avea nevoie. Evident că nu mi-a dat niciun ban după două luni de muncă și 20 de întâlniri, iar grandioasa firmă a folosit 75% din ceea ce am lucrat eu și a mascat puțin WPul, astfel încât să pară ceva custom made.

Ce înseamnă child theme?

Pentru că am lălăit-o cu povești, vă voi răspunde pe scurt. Ai o temă de WP și îți place foarte mult, mai ales datorită funcționalităților. În special dacă e o temă premium și are tot felul de chestii în care nu vrei să îți bagi nasul. Dar trebuie să faci niște modificări atât ale unor funcții de PHP, dar mai ales multor rânduri din CSS. De obicei intri în functions.php, strici, apoi repari, intri în style.css, urâțești tema. Numai că peste ceva timp apare un update la temă și trebuie să reiei toate modificările din cauza aplicării acestuia.

AȘA CĂ MAI BINE FOLOSEȘTI UN CHILD THEME! Care practic este o tema pe care vrei să o folosești, dar la care adaugi niște overrideuri. Pur și simplu, creezi o temă nouă care va prelua toate caracteristicile necesare, plus modificările aduse de tine, fară a strica tema originală.

Cum se face un child theme?

Vom lua chiar exemplul blogului meu. Eu folosesc tema Writee, pe care o voi folosi până în momentul în care îmi voi face ceva al meu. Și pe viitor doresc să scriu și în engleză, așa că m-am decis să folosesc soluția multisite. Am încercat să folosesc Loco Translate, dar avea doar posibilitatea de traducere a chestiilor din backend. Așa că am lăsat tema principală pentru versiunea în engleză și un child theme pentru versiunea în română.

1. Creezi un folder pentru tema nouă. De obicei, scrii ceva de genul numeletemei-child. La mine este writee-child;
2. Înăuntru creezi două fișiere noi: style.css și functions.php – practic care dau identitatea temei noi;
3. În style.css declari ca la orice temă informațiile necesare. La mine am pus ceva de genul:

   /*
   Theme Name: Writee Child
   Description: Copilu' lui Writee
   Author: Writee
   Template: writee
   */
   

   Este foarte important ce declari la template, acolo practic spui ce parent theme folosești și de unde ar trebui culese resursele necesare.

4.  Deși mulți apoi folosesc @import url pentru a lua stylesheeturile necesare, este mai ușor să intri în functions.php și să declari asta:

   <?php add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' ); function my_theme_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')
       );
   }
   ?>
   

5. Activezi tema din wp-admin
6. Faci ce modificări te taie capul în style.css și functions.php.  De exemplu, mai jos am făcut o modificare pentru butonul magic dedicat celor care pun smântână la pastele Carbonara. Acesta se vedea super rău pe mobil, așa că pentru idul respectiv, am scris asta:

   /*
    Theme Name:   Writee Child 
    Description:  Copilu' lui Writee
    Author:       Writee
    Template:     writee
   */
   
   /*Modificari*/
   
   @media only screen and (max-width: 796px) 
   
   {
       
       #menu-item-33 a {font-size: 12px !important;}
       
   }
   

Apoi dacă vrei să faci modificări în alte fișiere din temă, iei fișierul din tema originală și-l pui în aceeași destinație în child theme, apoi îi aplici modificările dorite.

Cam atât!