Cara Membuat Themes WordPress : Bagian 2

Posted in category: Themes Wordpress by

Dalam pembuatan themes wordpress tentunya ada bagian-bagian seperti kepada, tubuh, tangan dan kaki. Untuk saat ini saya mencoba membahas cara membuat themes wordpress pada bagian kepada (header) dan Kaki (footer).

Pada bagian pertama cara membuat themes wordpress ada sahabat yang bertanya, untuk index.phpnya nggak ada php get footer, header, sidebar, dll ya? Benar gan seharusnya ada tapi saya mencoba menguraikannya menjadi beberapa bagian. Ntar kepanjangan kalau dibuat.

Header.php biasanya berisi diskripsi, meta dan informasi HEAD. Sedangkan Footer.php berisi berupa informasi seperti copyright, tahun pembuatan blog dan informasi yang dianggap perlu. Untuk memanggil file header.php dan file footer.php, silahkan bukan file index.php terlebih dahulu, lihat cara membuat themes wordpress bagian 1.

Sekarang buka file index.php tersebut anda cukup menambah fungsi get header dan get footer. Seperti ini bentuknya.

<?php get_header(); ?>
File index.php (lihat script index.php di artikel cara membuat themes wordpress bagian 1)
<?php get_footer(); ?>

Untuk file index.php sampai disini aja dulu, ntar file tersebut kita tambah dengan fungsi untuk memanggil comment dan sidebar. Sekarang kita lanjut untuk membuat file header.php.

Cara membuat file header.php. Silahkan salin kode dibawah ini.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />
<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php wp_get_archives('type=monthly&format=link'); ?>
<?php wp_head(); ?>
</head>
<body>
<body <?php body_class(); ?>>
<h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
<div class="description"><?php bloginfo('description'); ?></div>
<hr />

Copy paste script diatas dan simpan dengan nama file header.php. Untuk memudahkan menyimpan script gunakanlah notepad++.

Sekarang kita mencoba membuat file footer.php kira-kira seperti ini;

<?php wp_footer(); ?>
Copyright © 2010 · Themes by <a href="http://www.zaifulanwar.com" >Zaiful Anwar</a> · Powered by <a href="http://www.wordpress.org/">WordPress</a> · <?php wp_loginout(); ?>
</body>
</html>

Simpan script diatas dengan nama file dengan nama footer.php.

Langkah awal pembuatan themes wordpress sudah jadi dan selanjutnya tugas kita membuat layout dengan menggunakan file sytle.css serta membuat Sidebar dan Kolom Komentar.

Pada artikel ini saya tidak akan menjelaskan fungsi-fungsi dari script tersebut mungkin pada artikel berikutnya. Bagi yang sudah master mohon dikoreksi pada bagian penulisan script diatas, maklum lagi belajar membuat themes wordpress. Hehehe…..

26 Responses to “Cara Membuat Themes WordPress : Bagian 2”

  1. Anggara says:
    May 5, 2010 at 10:13 pm

    Trims atas tutorialnya, mau tanya bagaiman cara bikin footer 3 kolom?
    .-= Anggara´s last blog ..PELAYANAN dalam NEW MARKETING MIX =-.

  2. Masdin says:
    May 6, 2010 at 9:34 pm

    Sepertinya bakalan makan banyak waktu yah…. kalau untuk saat ini rasanya saya belum punya banyak waktu nih buat bikin theme.
    .-= Masdin´s last blog ..My name is Masdin, not mas Din =-.

  3. iskandaria says:
    May 6, 2010 at 10:12 pm

    Numpang nyimak dulu ya mas. Tapi kalo scriptnya cuman hasil nyalin, apa bisa dikatakan kita sudah mampu bikin theme sendiri ya..hehe. Kalo menurut saya, seseorang dianggap mampu membuat theme jika sudah benar-benar paham coding (pemrograman). Mulai dari tag-tag dasar HTML, tata cara menyusunnya, struktur CSS, bagaimana ia bisa berpengaruh pada tampilan, serta paham dasar pemrograman dengan menggunakan bahasa query PHP.
    .-= iskandaria´s last blog ..Trik Menghemat Waktu Saat Menyisipkan Link pada Posting WordPress =-.

    • Zaiful Anwar says:
      May 7, 2010 at 12:12 am

      Saya memang tidak begitu mengerti dengan PHP dan coding tapi disini saya memcoba memahami struktur themes pada wordpress.
      dan saya melihat rata-rata semua script yang ada pada themes wordpress sama, yang membedakannya cuma pengaturan pada struktur CSS didalam file php tersebut. script yang ada dalam postingan adalah script dasar dan belum ada penambahan fungsi CSS.

      Kalau untuk scriptnya dengan terpaksa harus nyalin, karena saya belum bisa merubah script php seperti (php the_content) menjadi (php konten) hehehe….

    • satrya says:
      May 7, 2010 at 12:25 am

      Mas is , sebenarnya asal rajin dan mau belajar terus pasti lama2 akan mengerti Hook2 dari theme wordpressnya :)
      .-= satrya´s last blog ..3 Tips Security WordPress dari Matt Cutts =-.

  4. solusi berpromosi says:
    May 6, 2010 at 10:29 pm

    wah mumet baca koda kode macem itu. aku lebih suka pake sopwer aja, praktis ….
    Salam dari surabaya
    A. Fauzi
    .-= solusi berpromosi´s last blog ..Kontes SEO NegriAds.com Berhadiah Total Rp.14 Juta =-.

  5. lowongan kerja terbaru perusahaan bonafit | zaki says:
    May 7, 2010 at 12:18 am

    coba ada yang versi video ya….mungkin bisa lebih paham…sejauh ini saya kurang bisa nangkep kalo langsung baca…gak tau harus melakukan langkah2nya
    .-= lowongan kerja terbaru perusahaan bonafit | zaki´s last blog ..Lowongan Kerja Kasir @ MABUA HARLEY – DAVIDSON =-.

  6. satrya says:
    May 7, 2010 at 12:22 am

    mas untuk line 6 di header.php sebaiknya di hilangkan saja, terus saya mau tanya koq tag body ada 2 y ? satu juga cukup koq mas. :)
    .-= satrya´s last blog ..3 Tips Security WordPress dari Matt Cutts =-.

  7. satrya says:
    May 7, 2010 at 12:23 am

    Lah komentar saya koq hilang y ? terfilter spam ? sekali lagi deh :D
    Mas line 6 pada header.php sebaiknya di hilangkan untuk alasan security.
    Lalu tag body satu juga cukup koq mas. Tidak perlu ada 2 :)
    .-= satrya´s last blog ..3 Tips Security WordPress dari Matt Cutts =-.

  8. Artha says:
    May 7, 2010 at 10:42 am

    makasi ya gan… baru belajar nge blog nih, skalian belajar bikin themesnya juga jadinya
    .-= Artha´s last blog ..Facebook Ucapan Ulang Tahun =-.

  9. Bisnis Online says:
    May 7, 2010 at 5:30 pm

    Thanks infonya mas. Saya tunggu kelanjutan tutorialnya.
    .-= Bisnis Online´s last blog ..Bayaran BlogsVertise Tiba =-.

  10. Dunia Komputer says:
    May 7, 2010 at 5:33 pm

    Mantab mas. Lanjutkan!
    .-= Dunia Komputer´s last blog ..Beriklan Online melalui PPCKlik.com =-.

  11. merawat dan memperbaiki komputer says:
    May 8, 2010 at 2:46 am

    pake wordpress memang menyenangkan ya mas,tapi kadang bikin pusing juga…
    hehe

  12. Hakim says:
    May 8, 2010 at 9:57 am

    izin nyimak dan di tunggu seri selanjutnya
    .-= Hakim´s last blog ..Hosting Gratis Yang Ciamik =-.

  13. Kang Yudiono says:
    May 8, 2010 at 2:41 pm

    Sedikit demi sedikit saya jadi tahu pembuatan themes.
    Saya bookmark tutorialnya Mas.
    Ditunggu kelanjutannya ya :D
    .-= Kang Yudiono´s last blog ..Postingan Biasa Ternyata Bisa Juga Menembus Top 10 Lintas Berita =-.

  14. 66speeds says:
    May 8, 2010 at 8:11 pm

    kurang bro. kalau bisa tutorialnya yang lengkap, dari awal pek akhir.jadi tar aq bisa buat sendiri template sendiri.hehehe
    .-= 66speeds´s last blog ..Financial Decline After The Film Was Released Cowboy in Paradise =-.

  15. Bung Eko says:
    May 9, 2010 at 6:51 pm

    Walah, semakin ke sini kok smakin gak ngerti saya.
    Maaf, beribu-ribu maaf kalo cuma setor nama saja. ^_^
    .-= Bung Eko´s last blog ..Film Menculik Miyabi Akhirnya Tayang Juga! =-.

  16. Cara Membuat Themes Wordpress Bagian 5 | ZaifulAnwar.com says:
    May 28, 2010 at 12:43 am

    [...] Cara membuat Theme WordPress Bagian 2 [...]

  17. 5 Konten Teratas Berdasarkan Google Analytics Pada Bulan Mei | Zaiful Anwar says:
    June 2, 2010 at 12:03 am

    [...] 2. Cara Membuat Themes WordPress Bagian 2. [...]

  18. Adi says:
    June 24, 2010 at 7:50 pm

    boleh tanya? tarif bikin template wordpress berapa ya? desain psd udah ada

  19. bisnis online says:
    July 21, 2010 at 2:05 pm

    mammpir bos! postingnya bagus. makasih banyak infonya.

    (bisnis online)

  20. yudishtira says:
    July 29, 2010 at 3:51 pm

    trims tutorialnya.. banyak membantu… he..he.

  21. baju muslim says:
    November 8, 2010 at 3:58 pm

    copas juga ah… :D
    baju muslim´s last [type] ..Baju Muslim Gamis FD 2852

  22. Zapra Gartiast says:
    April 24, 2011 at 11:17 am

    wuaahhh pusing juga ya… >_<'
    pengen banget nih belajar bikin template sendiri di wordpress…
    Zapra Gartiast´s last [type] ..If Nested In JavaScript