Membuat Child Theme di WordPress.


Di wordpress kita bisa membuat Child theme dari theme yang induk. Child Theme adalah metode pewarisan tema dari tema induknya. Sebagai anak, child theme menerima segalanya. Mulai dari layout, warna, widget, typography, file static dan lainnya. Sebagai contoh reddof twenty ten child

reddof twenty ten child

Sedangkan Twenty ten yang induk adalah seperti di bawah ini

original

Langkah langkah untuk membuat Child Theme adalah sebagai berikut:

  • Download Child Twenty Ten kosong disini
  • Ekstrak file zip yang baru aja kalian download kemudian buka function.php dengan menggunakan notepad. Ganti nama tema seperti font yang berwarna merah dibawah ini sesuai dengan keinginan kalian kemudian save

<?php
/**
* Reddof TwentyTen Child Theme functions and definitions
*
*/

  • Selanjutnya Buka lagi style.css.  Ganti Theme Name, Theme URL, Decription, Author, Author URL, serta Version sesuai dengan keinginan kalian. Tapi ingat text yang berwarna merah seperti di bawah harus sama. kemudian save.

/*
Theme Name: Reddof Twenty Ten Child
Theme URI: http: //reddof.co.cc/
Description: Child theme for the Twenty Ten theme
Author: Reddo Firmansyah
Author URI: http: //reddof.co.cc/hubungi-saya
Template: twentyten
Version: 0.1.0
*/

@import url(‘../twentyten/style.css’);

  • Selanjutnya Upload folder theme tersebut ke direktori wp-content/themes
  • Sekarang kalian Masuk ke dashboard wordpress kalian kemudian masuk Appearance>Themes. Aktifkan Themes yang baru aja kalian upload tadi.
  • Sekarang tinggal modifikasi Child theme kalian. misalnya mau menghapus Title dan Deccription blog kalian , buka editor theme kalian lalu pilih di bagian kanan Header (header.php). Cari kode seperti di bawah kemudian hapus kode tersebut. selanjutnya save.

<?php $heading_tag = ( is_home() || is_front_page() ) ? ‘h1’ : ‘div’; ?>
                <<?php echo $heading_tag; ?> id=”site-title”>
                    <span>
                        <a href=”<?php echo home_url( ‘/’ ); ?>” title=”<?php echo esc_attr( get_bloginfo( ‘name’, ‘display’ ) ); ?>” rel=”home”><?php bloginfo( ‘name’ ); ?></a>
                    </span>
                </<?php echo $heading_tag; ?>>
                <div id=”site-description”><?php bloginfo( ‘description’ ); ?></div>

  • Untuk mengecilkan lebar banner, pilih header ( header.php) cari kode di bawah, ganti angka yang berwarna merah sesuai dengan keinginan kalian. kemudian save.

<img src=”<?php header_image(); ?>” width=”<?php echo HEADER_IMAGE_WIDTH; ?>” height=50px”<?php echo HEADER_IMAGE_HEIGHT; ?>” alt=”” />

  • Sekarang kalian bisa upload banner dan hasilnya akan terlihat seperti di bawah ininew banner
  • Untuk membuat banner tersebut bisa diklik copy dan paste kode di bawah ini sebelum <img src=”<?php header_image(); dengan catatan ganti text yang berwarna merah dengan URL blog kalian

<a href=”http://reddof.co.cc“></a>

sehingga menjadi

<a href=”http://reddof.co.cc”><img src=”<?php header_image(); ?>” width=”<?php echo HEADER_IMAGE_WIDTH; ?>” height=50px”<?php echo HEADER_IMAGE_HEIGHT; ?>” alt=”” /></a>

  • Untuk menghilangkan garis Melintang di bagian ata banner buka stylesheet (style.css) kemudian tambahkan kode di bawah ini di bawah kode yang sudah ada. kemudian save.

#branding img {
border-top: none;
border-bottom: none;
}
#header {
padding: 0 0 0;
}

Mungin itu sedikit ilmu yang bisa membantu kalian.

Terima Kasih telah berkunjung

Baca juga Cara mengalihkan 404 Page Not Found di WordPress

.

About reddof
Yach, ga ada yang special tentang gue.

Tinggalkan Balasan

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: