Cara Buat Child Theme Untuk Twenty Ten

Salam dan hai,

Saya akan menunjukkan cara membuat child theme untuk Twenty Ten.

1. Mula-mula, buat satu folder di dekstop dan namakan folder itu sebagai ABC.
2. Buka folder ABC itu dan buat file style.css.
3. Buka style.css dan copy code di bawah ini dan paste ke dalam style.css.

/*
Theme Name: ABC
Description: Child theme for the Twenty Ten theme
Author: Nama anda
Template: twentyten
*/

4. Berdasarkan code di atas, code di atas adalah code paling asas untuk child theme untuk berfungsi terutamanya “template: twenty ten”, jika tidak child theme tidak berfungsi. Theme Name boleh diubah mengikut selera anda. Nama folder juga mestilah sama mengikut Theme Name. Dalam Theme Anak Child Theme Twenty Ten , saya namakan folder dan Theme Name sebagai Anak.

5. Seterusnya, kita akan import style.css dari parent theme iaitu theme Twenty Ten. Fungsi import adalah supaya child theme mewarisi ciri-ciri parent theme. Copy code di bawah ini dan paste selepas code yang ditunjuk pada cara no 3.

@import url("../twentyten/style.css");

6. Baiklah, anda sudah siap child theme dari segi teknikal tetapi belum sedia untuk digunakan. Selebihnya adalah mengubah style.css dengan meletakkan beberapa code css. Berikut adalah code css yang saya gunakan dalam style.css dalam child theme yang saya buat iaitu Theme Anak Child Theme Twenty Ten :

Besarkan Tajuk Blog menjadi 1.5 kali ganda
Yang ini membesarkan size font Tajuk Blog pada header menjadi 1.5 kali ganda

#site-title a {
font-size:150%		/* Besarkan Tajuk Blog menjadi 1.5 kali ganda*/
}

Ubah Font Menu menjadi HURUF BESAR

#access {
font-variant:small-caps;	/* Ubah Font Menu menjadi HURUF BESAR */
} 

Buat kotak untuk meta description dan taksonomi entri

.entry-meta {
padding:4px 0 4px 20px;
background-color:#F8F8F8; border: solid 1px #A0A0A0;	/* Buat kotak untuk meta description entri */
}
.entry-utility {
padding:4px 0 4px 20px;
background-color:#C0C0C0; border: solid 1px #A0A0A0;	/* Buat kotak untuk taksonomi entri */
} 

Buat underline pada Tajuk Sidebar dan Ubah Font Tajuk Sidebar menjadi HURUF BESAR

.widget-title {
border-bottom: 2px solid #737373;		/* Buat underline pada Tajuk Sidebar*/
font-variant: small-caps;				/* Ubah Font Tajuk Sidebar menjadi HURUF BESAR */
}

Membuat Sidebar Lebih Lebar

#container { float: left; margin: 0 0px 4px 0; width: 628px; }			/* Menetapkan size overall page iaitu container */
#content {width: 590px; overflow:hidden; margin:0 0px 10px 0px;			/* Kecilkan ruangan entri */
     padding: 5px 0px 0px 20px;}
#primary, #secondary { float: right; overflow: hidden; width: 300px;		/* Besarkan ruangan sidebar */
     margin: 0 0 4px 0;}

7. Hasil akhir style.css yang sudah siap adalah seperti di bawah.

/*
Theme Name: Anak
Description: Child theme for the Twenty Ten theme
Author: RozaniGhani
Template: twentyten
*/

@import url("../twentyten/style.css");

#site-title a {
font-size:150%		/* Besarkan Tajuk Blog menjadi 1.5 kali ganda*/
}

#access {
font-variant:small-caps;	/* Ubah Font Menu menjadi HURUF BESAR */
}

.entry-meta {
padding:4px 0 4px 20px;
background-color:#F8F8F8; border: solid 1px #A0A0A0;	/* Buat kotak untuk meta description entri */
}
.entry-utility {
padding:4px 0 4px 20px;
background-color:#C0C0C0; border: solid 1px #A0A0A0;	/* Buat kotak untuk taksonomi entri */
}

.widget-title {
border-bottom: 2px solid #737373;		/* Buat underline pada Tajuk Sidebar*/
font-variant: small-caps;				/* Ubah Font Tajuk Sidebar menjadi HURUF BESAR */
}

#container { float: left; margin: 0 0px 4px 0; width: 628px; }			/* Menetapkan size overall page iaitu container */
#content {width: 590px; overflow:hidden; margin:0 0px 10px 0px;			/* Kecilkan ruangan entri */
     padding: 5px 0px 0px 20px;}
#primary, #secondary { float: right; overflow: hidden; width: 300px;		/* Besarkan ruangan sidebar */
     margin: 0 0 4px 0;}

8. Sekian sahaja. Child theme anda sudah siap dan sedia diupload secara Filezilla upload atau upload guna dashboard WP.
* Jika upload guna dashboard WP, zipkan folder child theme dan upload seperti biasa.
* Jika upload guna Filezilla, buat folder baru di dalam direktori themes dan namakan folder itu. Upload style.css ke dalam folder yang baru dinamakan itu.

Selamat mencuba! Ganbatte!