Cara Mudah Membuat Child Theme Wordpress Twenty Twenty

JagoTekno.com - Jika anda membuat blog menggunakan Wordpress, anda harus tahu tentang cara membuat child theme.

Kenapa?

Dengan menggunakan child theme ketika mendapatkan update theme, hasil edit theme dan css yang pernah dibuat tidak akan hilang.

Tahu sendiri kan bagaimana ribetnya kalau harus menulis satu per satu kode css dan file php theme wordpress yang sudah disetting untuk blog kita.

Jadi dengan child theme, tidak perlu lagi memikirkan hal-hal itu. Hanya fokus pada konten blog supaya dapat ranking.

Jika anda belajar menggunakan wordpress, theme yang biasa didapatkan adalah twenty twenty.

Tampilannya sederhana dan minimalis.

Secara umum untuk membuat child theme kita hanya butuh 2 file yaitu

style.css
functions.php

Silahkan buat 2 file ini di menggunakan VSCode atau text editor anda lalu pasang dengan kode berikut ini.

Style.css

Pada file style.css, isi dengan kode ini

/*
  Theme Name: Twenty Twenty Child
  Template: twentytwenty
  Version: 1.0
  Description: Child theme created by JagoTekno
  Author: wordpress team
  Author URI: https://wordpress.org
  License: GNU General Public License v2 or later
  License URL:https://www.gnu.org/licenses/gpl-2.0.html
*/

/* ----------------------------------------------------------------------------
*  Twenty Twenty Child Style.css styles begin here!
* ------------------------------------------------------------------------- */

Css Tambahan

Supaya tampilannya sedikit berbeda dengan tampilan bawaan, saya tambahkan kode css ini.

.powered-by-wordpress, .post-meta .meta-wrapper {display:none;}

@media screen and (min-width: 769px){
.home .featured-media, .archive .featured-media {
    width: 29%;
    display: inline-block;
    float: left;
	  margin-left: 2em;
	}
}

pre.wp-block-code {
    background: #222;
    color: #fff;
}

Functions.php

Untuk file functions.php isi dengan kode ini :

<?php

/**
 * Fires when scripts and styles are enqueued.
 * 
 * Enqueue parent styles and child theme style / scripts
 * wp_enqueue_scripts is the proper hook to use when enqueuing
 * scripts and styles that are meant to appear on the front end.
 * Despite the name, it is used for enqueuing both scripts and styles.
 * 
 * @author      My Web SOS      <contact@mywebsos.com>
 * @author      Thomas LIBERATO <thomas-liberato.fr>
 * @since       1.0
 * @see         https://developer.wordpress.org/reference/hooks/wp_enqueue_scripts/
 */
add_action( 'wp_enqueue_scripts', 'my_web_sos_wp_enqueue_scripts' );
function my_web_sos_wp_enqueue_scripts() {

    // Parent style id - replace your child theme name
    $parent_style = 'my-web-sos-parent-style';
    
    // Enqueue Parent theme's style
    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );

    // Enqueue Child theme's style 
    wp_enqueue_style( 'my-web-sos-child-style', get_stylesheet_directory_uri() . '/style.css', array( $parent_style ) );

    // Enqueue Child theme's script, jika mau menambahkan file js, buat juga file main.js di /assets/scripts/
    // wp_enqueue_style( 'my-web-sos-child-script', get_stylesheet_directory_uri() . '/assets/scripts/main.js' ); 
}


// Start editing your function.php file

Setelah itu compress 2 file tersebut ke dalam file .zip kemudian upload sebagai theme.

Tampilan » Tema » Tambah Baru » Unggah Tema

Pilih file .zip yang sudah dibuat lalu set child theme yang sudah dibuat.