1. Halo Guest, pastikan Anda selalu menaati peraturan forum sebelum mengirimkan post atau thread baru.

[Share]Membuat theme Wordpress - Memecah file index.php. Newbie only!

Discussion in 'Wordpress' started by wpdevep, Apr 20, 2012.

Page 1 of 2
  1. wpdevep

    wpdevep Ads.id Pro

    Joined:
    Apr 6, 2012
    Messages:
    453
    Likes Received:
    92
    Location:
    Tebet, Jakarta Selatan
    Misi Mastah-mastah Wordpress sekalian newbie mau share tuts buat theme WP :senyum:
    Sesuai judul thread khusus buat newbie yang pengen belajar WP aja, klo master mah komen aja :D

    Sebenarnya untuk membuat theme Wordpress, kita cuma perlu file index.php, style.css sama screenshot.png, adapun footer.php, single.php, page.php atau category.php diambil dari index.php dengan cara dipecah atau copas langsung isi dari index.php.

    Tujuan memecah index.php supaya tidak repot ketika ingin mengedit file footer.php misal, kebayang kalau tidak dipecah, berapa ratus baris script ketika kita mencari div="sidebar" misal. Disini kita cuma memecah index.php menjadi header.php, footer.php dan sidebar.php saja :D

    Contoh basic index.php
    HTML:
    <html>
<head>
<title>Adsense-id</title>
</head>
<body>
<div id="container">
    <div id="header">
    Ini akan menjadi header.php
    </div>
    <div class="content">
        <div class="entry">
        Ini akan menjadi index.php etc
        </div>
    </div>
    <div class="sidebar">
    Ini akan menjadi Sidebar.php
    </div>
    <div class="footer">
    Ini akan menjadi Footer.php
    </div>
</div>
</body>
</html>
    Langkah selanjutnya yaitu memecah file index.php di atas menjadi beberapa bagian

    1. Yang pertama header.php
    Kita ambil dari tag <html> sampai </div> di atas konten, save script di bawah dengan nama header.php.
    HTML:
    <html>
<head>
<title>Adsense-id</title>
</head>
<body>
<div id="container">
    <div id="header">
    Ini akan menjadi header.php
    </div>
    Karena pada index.php kita ambil beberapa script untuk dijadikan header.php maka, pada baris paling atas taro script ini untuk memanggil header.php kembali, <?php get_header();?> , untuk memecah index.php menjadi sidebar.php atau footer.php langkahnya sama persis dengan cara di atas.

    2. Sidebar.php

    Sehingga untuk sidebar.php script nya kayak di bawah ini, sedikit banget kan :D, kemudian panggil kembali sidebarnya dengan cara menaruh
    PHP:
    <?php get_sidebar();?>
    PHP:
    <div class="sidebar">
            Ini akan menjadi Sidebar.php
         </div>
    3. Footer.php
    Untuk footer.php dimulai dari <div class="footer"> sampai tag </html>, jangan lupa panggil kembali si footer dengan naro script ini
    PHP:
    <?php get_footer();?>
    PHP:
    <div class="footer">
            Ini akan menjadi Footer.php
            </div>
    </    div>
    </    body>
    </    html>
    Setelah index.php dipereteli menjadi header.php, sidebar.php dan footer.php, maka index.php sekarang tinggal beberapa baris jika dibandingkan dengan sebelum dipecah, lengkapnya index.php setelah dipecah seperti di bawah ini :D
    PHP:
    <?php get_header();?>
        <div class="content">
            <div class="entry">
            Artikel
            </div>
        </div>
    <?php get_sidebar();?>
    <?php get_footer    ();?>      
    Yang awalnya file difolder theme kita cuma ada index.php, style.css dan screenshot.png, sekarang agak banyakan :D ada header.php, footer.php dan sidebar.php. Langkah selanjutnya kita tinggal memasukan fungsi2 Wordpress agar jadi theme beneran :D

    4. style.css
    Tengkyu buat mastah web 2.0, wikielf atas tutorial style.css nya sangat lengkap penjelasnya buat newbie kyk ane :nangis:
    http://www.adsense-id.com/forums/sh...-index-php-Newbie-only!?p=1590254#post1590254


    Jangan lupa tambahin readme.txt sama license.txt biar keren :silau:

    untuk tutorial selanjutnya dari thread ini ane update disini hxxp://www.kholis.net/category/membuat-theme-wordpress/
     
    Last edited: Jul 17, 2012
    wpdevep, Apr 20, 2012
    #1
    jeffgeby, phims, Faddas and 13 others like this.
  2. engkusplus

    engkusplus Super Hero

    Joined:
    Oct 7, 2009
    Messages:
    1,910
    Likes Received:
    76
    Location:
    Jember Jatim
    ikutan belajar mastah....
     
    engkusplus, Apr 20, 2012
    #2
  3. Kapuas

    Kapuas Hero

    Joined:
    Oct 2, 2011
    Messages:
    647
    Likes Received:
    41
    Location:
    Kuala Kapuas
    wah keren nih ada tempat belajar bikin wp themes juga... teruskan mastah biar saya bisa bikin themes sendiri..:gembira:
     
    Kapuas, Apr 20, 2012
    #3
  4. GentZu AoZora

    GentZu AoZora Forbidden

    Joined:
    Nov 28, 2010
    Messages:
    2,932
    Likes Received:
    275
    Location:
    Bandung City
    mungkin yang di maksud TS bagian akhir begini :D
    PHP:
    <?php get_header();?>
        <div class="content">
            <div class="entry">
            Artikel
            </div>
        </div>
    <?php get_sidebar();?>
    <?php get_footer    ();?> 
     
    GentZu AoZora, Apr 20, 2012
    #4
    legowo and wpdevep like this.
  5. suksesjitu

    suksesjitu Super Hero

    Joined:
    Feb 6, 2010
    Messages:
    3,813
    Likes Received:
    81
    nimbrung jga ya..

    puyeng nih lihat coding..

    belajaran :pusing:
     
    suksesjitu, Apr 20, 2012
    #5
  6. hardinalz

    hardinalz Super Hero

    Joined:
    Mar 8, 2010
    Messages:
    2,395
    Likes Received:
    1,420
    Location:
    /var/www/html
    Nice tutorial gan, lanjuuut
     
    hardinalz, Apr 20, 2012
    #6
  7. wpdevep

    wpdevep Ads.id Pro

    Joined:
    Apr 6, 2012
    Messages:
    453
    Likes Received:
    92
    Location:
    Tebet, Jakarta Selatan
    terima kasih mastah udah berkunjung :D

    belajar bareng yuk mastah kl udah pinter bagi theme nya ya :D
    heehhe ia maksud seperti itu mastah, tengkyu ralatnya
    pelan2 ntar juga bisa :silau:

    Laksanakan Mastah perintah diterima dengan jelas :silau:
     
    wpdevep, Apr 21, 2012
    #7
  8. Diandra

    Diandra Super Hero

    Joined:
    Apr 8, 2011
    Messages:
    3,330
    Likes Received:
    2,168
    Location:
    Ads.id
    Wah kuerrennnnn bangetss mastah, ijin mempelajari yak.. ini yang ane cari dari dulu Jempol dah buat mastah :senyum:
     
    Diandra, Apr 21, 2012
    #8
  9. budy_piasa

    budy_piasa Hero

    Joined:
    Oct 9, 2011
    Messages:
    533
    Likes Received:
    16
    kalo bisa, ntar diterusin threadnya gan.. biar ada kelanjutannya..

    btw, nice thread.. :semangat!:
     
    budy_piasa, Apr 21, 2012
    #9
  10. legowo

    legowo Hero

    Joined:
    Jan 10, 2012
    Messages:
    743
    Likes Received:
    46
    Location:
    marang sliramu
    kelasnya dilanjut yukk...
     
    legowo, Apr 21, 2012
    #10
  11. Diandra

    Diandra Super Hero

    Joined:
    Apr 8, 2011
    Messages:
    3,330
    Likes Received:
    2,168
    Location:
    Ads.id
    Eh mau tanya mastah, kalo bikin style.css -nya itu gmn? Thanks :komunis:
     
    Diandra, Apr 21, 2012
    #11
  12. GentZu AoZora

    GentZu AoZora Forbidden

    Joined:
    Nov 28, 2010
    Messages:
    2,932
    Likes Received:
    275
    Location:
    Bandung City
    Paling gampang mah njiplak web punya orang, diambil yang bagusnya aja....

    Sent from my Xperia Pro using Tapatalk
     
    GentZu AoZora, Apr 21, 2012
    #12
    ~JustOrdinaryPeopLe~ likes this.
  13. wikielf

    wikielf Dev Alpha 10

    Joined:
    May 20, 2011
    Messages:
    1,499
    Likes Received:
    132
    Location:
    In the world
    bikin css ga susah koq, contoh simpel nya gini. buat sebuah file style.css
    kalo wordpress biasanya di file style.css harus ada deskripsi Di line pertama contoh sprti ini:
    HTML:
    /* 
Theme Name: Nama theme
Theme URI: url theme sumber / pembuat
Description: Deskripsi theme anda
Version: 1.0.3 Versi theme anda
Author: Nama pembuat theme
Author URI: web si pembuat theme
License: type license theme anda
License URI: license.txt 
Tags: tag berhubungan theme anda
*/
    misal kita buat sebuah <div> untuk header
    PHP:
    <div id="header">Content Header Bisa di isi Image, Logo, Site Title atau Tagline</div>
    nah tinggal buat style nya contoh
    HTML:
    #header { /* awal style */
  background: #ccc;
  width:600px;
  height:200px;
  border:1px solid #000;
} /* akhir style */
    ada 2 jenis tag style yaitu id dan class
    perbedaan nya kalau id awalan nya pake ( # ) contoh #header dan kalau class awalan nya pake ( . ) contoh .header

    contoh pake id:
    PHP:
    <div id="header">Content Header Bisa di isi Image, Logo, Site Title atau Tagline</div>
    HTML:
    #header { /* awal style */
  background: #ccc;
  width:600px;
  height:200px;
  border:1px solid #000;
} /* akhir style */
    contoh pake class:
    PHP:
    <div class="header">Content Header Bisa di isi Image, Logo, Site Title atau Tagline</div>
    HTML:
    .header { /* awal style */
  background: #ccc;
  width:600px;
  height:200px;
  border:1px solid #000;
} /* akhir style */
     
    wikielf, Apr 21, 2012
    #13
    wpdevep and legowo like this.
  14. ThePiz

    ThePiz Ads.id Fan

    Joined:
    Jan 23, 2012
    Messages:
    182
    Likes Received:
    2
    ini nih ilmu beneran.
    Ikut gelar tikar mastah!
     
    ThePiz, Apr 21, 2012
    #14
  15. apaaja

    apaaja Hero

    Joined:
    Nov 5, 2011
    Messages:
    722
    Likes Received:
    39
    Location:
    Cianjur Tercinta❤!!
    ngikut belajar juga Mastah...
    ditunggu tirt selanjutnya yoo :D
     
    apaaja, Apr 21, 2012
    #15
  16. triyakur007

    triyakur007 Ads.id Pro

    Joined:
    Mar 7, 2012
    Messages:
    320
    Likes Received:
    4
    gelar tiker sama sediain kopi sama camilan biar mastah betah sharednya hihihi
     
    triyakur007, Apr 21, 2012
    #16
  17. wpdevep

    wpdevep Ads.id Pro

    Joined:
    Apr 6, 2012
    Messages:
    453
    Likes Received:
    92
    Location:
    Tebet, Jakarta Selatan
    Insya Allah ntar dilanjutin, doain ya biar ane dikasih kesehatan dan kesempatan :malaikat:
    Guru web 2.0 akhirnya turun gunung :lovekiss:, ijin taro pejwan ya mastah :gembira:
    silahkan mastah ane ikutan bantuin makan cemilannya ya :lol:
     
    wpdevep, Apr 22, 2012
    #17
  18. abigan

    abigan Ads.id Pro

    Joined:
    Oct 10, 2011
    Messages:
    371
    Likes Received:
    17
    Location:
    Warkop Alias Warung Kopi
    Waw, ada yang share cara buat theme wp nh.
    kebetulan ane lagi pingin belajar,,
    :D
    like pencet
     
    abigan, Apr 22, 2012
    #18
  19. isnuN3

    isnuN3 Super Hero

    Joined:
    Mar 2, 2012
    Messages:
    1,012
    Likes Received:
    13
    om kalau bikin sidebar khusus untuk halaman index gmna ?
     
    isnuN3, Apr 22, 2012
    #19
  20. wpdevep

    wpdevep Ads.id Pro

    Joined:
    Apr 6, 2012
    Messages:
    453
    Likes Received:
    92
    Location:
    Tebet, Jakarta Selatan
    belajar bareng gan ma ane, tengkyu like nya :D
    pake widget Archives, categories atau recent post tinggal di drag drop aja gitu bukan mksdnya :D
     
    wpdevep, Apr 22, 2012
    #20
Page 1 of 2

Share This Page