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

[Basic] How To Create Theme Easy

Discussion in 'Wordpress' started by jaya-terus, Sep 3, 2010.

Tags:
Page 1 of 2
  1. jaya-terus

    jaya-terus Banned

    Joined:
    Mar 23, 2009
    Messages:
    2,318
    Likes Received:
    776
    Location:
    tsabita-shop
    Dalam rangka

    Start Sharing Not Selling ​

    Mumpung bulan puasa semoga mendapat banyak amal kebaikan dengan share

    Dasar Pembuatan Theme Wordpress​
    Saya mau share kailnya bukan ikannya (kalo mau ikannya silakan di http://www.adsense-id.com/forums/showthread.php/51314). Semoga tidak repost dan semoga tidak ada yang tersinggung. Insya Allah setelah anda ikuti petunjuk di sini, saya yakin anda sudah bisa membuat theme sendiri, modifikasi dan edit theme lain. Tampilan theme tergantung dari kreasi anda sendiri, Saya sendiri juga masih belajar , saya yakin di forum sudah banyak master wordpress...

    Saya hanya mengajarkan basicnya saja, selanjutnya terserah anda....
    Ada beberapa bab dalam pembuatan theme : (versi ane sendiri)

    1. Persiapan tools
    2. Pendahuluan
    3. File Theme

    Oke langsung saja....

    BAB 1 : Persiapan Tools

    Tools wajib pembuatan theme :

    1. Notepad, saya sarankan pake notepad++++
    Bisa anda download di _http://notepad-plus-plus.org/release/5.7
    2. Wordpress offline
    Bisa didownload di _wordpress.org
    3. Program yang buat online di lokal
    Bisa anda dapatkan di _http://www.appservnetwork.com (ane pake ini sejak dulu)

    Sebelum masuk di bab 2 anda harus sudah menginstall notepad +++ dan program buat online di lokal. Oke kita lanjutkan bab berikutnya....

    BAB 2 : Pendahuluan

    1. Install wordpress di lokal.
    Ane gak bisa share di sini, ntar malah kepanjangan utk lengkapnya silakan googling ya, udah banyak yang share kayaknya.
    2. Masuk ke folder wordpress
    Buat folder baru di www/wp-content/themes untuk nama theme anda
    3. Di folder tersebut silakan buat file dengan nama index.php

    Sebelum anda melangkah ke bab selanjutnya, silakan anda login dulu di wp-admin wordpress lokal dan aktifkan theme anda, setiap pekerjaan selesai coba refresh browser anda untuk melihat hasil sementara.

    BAB 3 : File Theme

    Sebelum kita lanjut, ada beberapa file dasar dari theme wordpress yang perlu diketahui, yang lainnya menyusul

    - header.php
    - index.php
    - sidebar.php
    - footer.php
    - style.css

    Adapun gambaran dari file - file tersebut adalah :
    [​IMG]
    Mengertikan...? Oke kita lanjut...

    Yang perlu anda siapkan adalah file index.php dan browser utk melihat hasil sementara theme anda. Sebelumnya anda perlu menambah 5 - 7 postingan biar lebih mudah dalam mengikuti langkah2nya, pada umumnya di wordpress yang baru diinstall cuman ada 1 postingan dengan judul Hello World!

    1. Layout dasar theme

    Buka file index.php yang telah anda buat, tetapi masih kosong

    Sekarang coba anda tulis di index.php dengan tulisan di bawah ini (sebaiknya jangan copy paste, biar anda terbiasa)
    Code:
    <!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">

<title><?php bloginfo('name'); ?><?php wp_title(); ?></title>

<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />	

<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats please -->

<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'); ?>" />

<link rel="shortcut icon" href="<?php bloginfo('template_directory'); ?>/favicon.ico" />

<?php wp_get_archives('type=monthly&format=link'); ?>

<?php //comments_popup_script(); // off by default ?>

<?php wp_head(); ?>

</head>

<body>



</body>

</html>
    Refresh browser anda, liat ada perubahan tidak? Jika tidak ada perubahan/blank berarti benar
    Oke kita ke langkah selanjutnya yaitu membuat judul blog dan deskripsinya

    2. Membuat Judul dan Deskripsi Blog

    Tulis di bawah <body> : <?php bloginfo('name'); ?> dan refresh browser anda,liat hasilnya.
    Untuk judul blog biasanya ada link yang menuju ke alamat url blog kita maka tambahkan <a href="<?php bloginfo('url'); ?>"> dan </a> jangan lupa tambahkan juga tag <h1>

    Jadinya seperti ini
    Code:
    <h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
    Save dan refresh browser anda liat perubahan yang terjadi...
    Untuk menggambarkan deskripsi blog di bawah judul blog tambahkan kode <h2><?php bloginfo('description'); ?></h2>

    Jadinya seperti ini
    Code:
    <h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
<h2><?php bloginfo('description'); ?></h2>

    Oke langkah kedua telah usai, kita lanjutkan langkah ketiga yaitu Menambah Artikel di index.php
    Lanjutannya ada di bawah ya...takut kebanyakan ntar di awal
    Oke kita menuju ke langkah ke 3 yaitu Menambah Artikel di index.php lihat bawah...
    Tapi sebelumnya di cek dulu index.php anda apakah sudah seperti di bawah ini, jika ya berarti benar
    Code:
    <!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">

<title><?php bloginfo('name'); ?><?php wp_title(); ?></title>

<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />	

<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats please -->

<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'); ?>" />

<link rel="shortcut icon" href="<?php bloginfo('template_directory'); ?>/favicon.ico" />

<?php wp_get_archives('type=monthly&format=link'); ?>

<?php //comments_popup_script(); // off by default ?>

<?php wp_head(); ?>

</head>

<body>

[color="red"]<h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
<h2><?php bloginfo('description'); ?></h2>[/color]

</body>

</html>

    Silakan ikuti tutorialnya langkah demi langkah, jangan terburu - buru, setiap langkah coba anda pahami dan jika sudah mengikuti langkah2nya sampai selesai, coba anda trial dan error kenapa bisa begini, kenapa bisa begitu, kenapa layoutnya seperti ini kenapa seperti itu, dan seterusnya sampai anda bener2 paham, saya yakin anda pasti bisa dan paham...
     
    Last edited: Sep 3, 2010
    jaya-terus, Sep 3, 2010
    #1
    okay17, abdipribados, mamas86 and 11 others like this.
  2. xtmxady

    xtmxady Super Hero

    Joined:
    Dec 13, 2009
    Messages:
    3,854
    Likes Received:
    74
    Location:
    Tarakan BAIS \m/
    Tak tunggu juga mas, ne juga lage mau juma't_an ... ;)
     
    xtmxady, Sep 3, 2010
    #2
  3. jaya-terus

    jaya-terus Banned

    Joined:
    Mar 23, 2009
    Messages:
    2,318
    Likes Received:
    776
    Location:
    tsabita-shop
    Udah tak tulis dikit tuh mas. Ntar diterusin sore ya, ngantuk berat neh...
    Semoga bermanfaat bagi yang lainnya....
     
    jaya-terus, Sep 3, 2010
    #3
  4. Kenz33

    Kenz33 Super Hero

    Joined:
    Jun 8, 2010
    Messages:
    1,783
    Likes Received:
    70
    Location:
    Merantau
    Alhamdulillah... Akhirnya ada juga yang mau share caranya, saya tunggu tutor lanjutannya om :gembira:
     
    Kenz33, Sep 3, 2010
    #4
  5. jaya-terus

    jaya-terus Banned

    Joined:
    Mar 23, 2009
    Messages:
    2,318
    Likes Received:
    776
    Location:
    tsabita-shop
    Siap kang mas... Semoga bermanfaat ya. Ini lagi ane tulis
     
    jaya-terus, Sep 3, 2010
    #5
  6. missyswan

    missyswan Super Hero

    Joined:
    Jun 3, 2010
    Messages:
    1,211
    Likes Received:
    100
    sob jelasin tentang pengaturan layoutnya sob..untuk ngebuat layout nya
    maksudnya biar layout nya bisa 2 kolom 3 kolom dst

    sama ini sob programming style.css nya

    penggunakan tanda "#" "." dll :D
     
    Last edited: Sep 3, 2010
    missyswan, Sep 3, 2010
    #6
  7. jaya-terus

    jaya-terus Banned

    Joined:
    Mar 23, 2009
    Messages:
    2,318
    Likes Received:
    776
    Location:
    tsabita-shop
    3. Menambah Artikel di index.php

    Sebelumnya di bagian atas dan bawah <h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
    <h2><?php bloginfo('description'); ?></h2> ditambahkan tag DIV, dengan nama <div id="header"> dan </div>
    Jadinya seperti ini
    Code:
    <div id="header">
<h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
<h2><?php bloginfo('description'); ?></h2>
</div>
    Udah ya, oke ke pokok inti bagian ke 3 yaitu menambah artikel di index.php

    Tambahkan di bawah header (kita sebut bagian header, yaitu bagian tag div header,pahamkan,jadi di bawah </div> ===>> id header
    yaitu
    Code:
    <div id="contain">
<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>

<?php endwhile; ?>

<?php endif; ?>
</div>

    Sudah ya, save dan refresh apa ada perubahan?
    Oke langkah selanjutnya adalah menambah judul dan artikel

    Menambah judul
    Tulis (jangan copy paste ya,hehehe) <?php the_title(); ?> di bawah the_post(); ?> dan sebelum <?php endwhile; ?>
    Udah? save dan liat perubahannya? apakah ada judul postingan anda?

    Untuk membuat link url postingan kita di judul, maka kita tambahkan fungsi <a href="<?php the_permalink(); ?>"> dan </a> di sekeliling <?php the_title(); ?>.
    Save dan liat perubahannyakan? Oke untuk lebih SEO Friendly coba kamu tambahkan ini title="<?php the_title(); ?>" setelah kode "<?php the_permalink(); ?>"
    Save dan refresh browser anda, liat perubahannya...Gerakkan kursor anda di title, ada yang terjadi?

    Memasukkan artikel
    Sekarang tambahkan kode <?php the_content(); ?> di bawah title.
    Save dan refresh browser anda, liat ada content masuk tuh...
    Langkah ke 3 yaitu menambah artikel, udah selesai...(cepat ya) kode utk pelajaran ini adalah
    Code:
    <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a>
<?php the_content(); ?>

    Oke langkah selanjutnya.....(ntar ane mandi dl)

    --- Update ---
    Pelan2 mas, bagian itu setelah footer dah selesai, ntar bisa diatur lewat css, kalem bro...
    Kalem ya...
    Ini belajar mulai dari awal bukan dari editing ataupun modifikasi theme. OK?

    ngemeng2 kok sepi ya?
     
    Last edited: Sep 3, 2010
    jaya-terus, Sep 3, 2010
    #7
  8. numerals2009

    numerals2009 Hero

    Joined:
    Jul 13, 2010
    Messages:
    563
    Likes Received:
    5
    Location:
    Kota Daeng - Makassar
    berarti nanti ada editing dong. . .:gembira:
    ane bookmark dolo ah. . .
     
    numerals2009, Sep 3, 2010
    #8
  9. jaya-terus

    jaya-terus Banned

    Joined:
    Mar 23, 2009
    Messages:
    2,318
    Likes Received:
    776
    Location:
    tsabita-shop
    Sebenarnya jika anda telah mengikuti langkah2 teknik dasar pembuatan theme ini sampe selesai, anda sudah otomatis bs edit2 atau modifikasi theme sob... Coba aja ikuti terus ya...

    Sebelum menginjak langkah ke 4 yaitu Menambah kategori, author, dan jmlh komentar di bawah artikel, atau disebut dng metadata, anda perlu ngecek lagi index.php anda sampe di langkah 3 ini udah benar atai tidak
    Lihat di sini
    Code:
    <!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">

<title><?php bloginfo('name'); ?><?php wp_title(); ?></title>

<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />	

<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats please -->

<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'); ?>" />

<link rel="shortcut icon" href="<?php bloginfo('template_directory'); ?>/favicon.ico" />

<?php wp_get_archives('type=monthly&format=link'); ?>

<?php //comments_popup_script(); // off by default ?>

<?php wp_head(); ?>

</head>

<body>

[color="red"]
<div id="header">
<h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
<h2><?php bloginfo('description'); ?></h2>
</div>

<div id="contain">
<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>

             <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a>
             <?php the_content(); ?>

<?php endwhile; ?>

<?php endif; ?>

</div>


[/color]
</body>

</html>
     
    Last edited: Sep 3, 2010
    jaya-terus, Sep 3, 2010
    #9
  10. zuhair

    zuhair Ads.id Fan

    Joined:
    Jul 28, 2010
    Messages:
    156
    Likes Received:
    2
    cuma saran ya bro jaya.. kalo bisa kodenya jangan ditulis didalam kutipan, nanti kalo ada user yg copas kodenya ga akan bekerja karena perubahan pada tanda kutip yang ga kebaca sebagai kode html
    cmiiw
     
    zuhair, Sep 3, 2010
    #10
  11. za2n456

    za2n456 Ads.id Fan

    Joined:
    Aug 16, 2010
    Messages:
    237
    Likes Received:
    2
    mantab gan, nie yang ane cari2 dari dulu.. dari dulu pgen banget bkin theme ndiri tapi bingung mulainya..
     
    za2n456, Sep 3, 2010
    #11
  12. jaya-terus

    jaya-terus Banned

    Joined:
    Mar 23, 2009
    Messages:
    2,318
    Likes Received:
    776
    Location:
    tsabita-shop
    Sebenarnya emang ane sengaja sob biar user gk malas untuk nulis, kalo cuman copas copas ntar malah gk terbiasa. Tapi ya usul mase akan saya pertimbangkan... Sippp

    --- Update ---
    Dibookmark aja sob, ntar ane rangkum kok, pembahasannya agak panjang, tapi sebenarnya simple saja
     
    jaya-terus, Sep 3, 2010
    #12
  13. oraisoopoopo

    oraisoopoopo Super Hero

    Joined:
    Oct 14, 2009
    Messages:
    820
    Likes Received:
    43
    Location:
    Jakarta
    Wuih mantep ini bro jaya-terus :ok:
     
    oraisoopoopo, Sep 3, 2010
    #13
  14. ketut

    ketut Super Hero

    Joined:
    Jun 22, 2010
    Messages:
    1,285
    Likes Received:
    71
    Location:
    Lombok
    MAntabzz banget tutornya, saya bookmark dulu,
    untuk nambah2 ilmu wo nhii
    Thanx banget mas ^_^
     
    ketut, Sep 3, 2010
    #14
  15. jaya-terus

    jaya-terus Banned

    Joined:
    Mar 23, 2009
    Messages:
    2,318
    Likes Received:
    776
    Location:
    tsabita-shop
    4. Menambah categories, author, dan comentar postingan

    Anda tulis kode ini
    Code:
    <p class="meta">
<?php _e('Categories:'); ?> <?php the_category(', ') ?> | <?php _e('Posted by'); ?> <?php  the_author(); ?><br />
<?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?> <?php edit_post_link('Edit', ' | ', ''); ?>
</p>
    persis di bawah kode <?php the_content(); ?>

    Save dan refresh browser anda, liat perubahannya. Jangan lupa setiap selesai menambah kode, refresh browser anda biar anda tau ada perubahan tidak.

    Sampai di langkah ke 4 ini udah agak sedikit pahamkan? Ayo kita lanjut ke langkah 5, Menambah ID judul dan navigation

    sambil nunggu ada yang komentar plus pencetan thanks, ane nulis2 dulu nih
     
    jaya-terus, Sep 3, 2010
    #15
  16. aanemuth

    aanemuth Ads.id Fan

    Joined:
    Jan 21, 2010
    Messages:
    132
    Likes Received:
    2
    Location:
    solo
    wow.. bagus banget nie, tengkiu banget ane ikut nyimak sob, buat nambah2 ilmu.. thanks meluncur sob..:senyum:
     
    aanemuth, Sep 3, 2010
    #16
  17. pelaku

    pelaku Super Hero

    Joined:
    Jun 5, 2010
    Messages:
    926
    Likes Received:
    106
    Ane ikutan ya bro, ilmu mahal nih, thx
     
    pelaku, Sep 3, 2010
    #17
  18. jaya-terus

    jaya-terus Banned

    Joined:
    Mar 23, 2009
    Messages:
    2,318
    Likes Received:
    776
    Location:
    tsabita-shop
    5. Menambah ID Judul dan Navigation

    Sebelumnya udah pada pahamkan langkah2nya. Oke kita sekarang untuk menambah ID judul. Tapi sebelumnya silakan tambahkan kode <div class="post"> di atas judul dan kode penutup kodenya </div> persis di bawah class meta. Udah? Tambahkan juga kode <div class="content"> di atas kode <?php the_content(); ?> dan di atas kode <?php endwhile(); ?>. Jangan sampe salah ya

    Kodenya jadi begini
    Code:
    <div id="contain">
<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
<div class="post">
             <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a>

<div class="entry">
             <?php the_content(); ?>
<p class="meta">
<?php _e('Categories:'); ?> <?php the_category(', ') ?> | <?php _e('Posted by'); ?> <?php  the_author(); ?><br />
<?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?> <?php edit_post_link('Edit', ' | ', ''); ?>
</p>

</div>
</div>
<?php endwhile; ?>

<?php endif; ?>

</div>

    Apa sih bedanya class dan id, kenapa kok ada div id dan div class, kalo div id itu untuk yang tidak berulang dan div class untuk yang berulang2.
    Save pekerjaan anda dan refresh browser anda,lia perubahan yang terjadi. Dapat diliat ada postingan yang berulang dan judul juga ikut menyertainya, makanya ikut di tag div class... pahamkan maksdnya, ntar kode di css juga berbeda untuk div id dan div class.

    Langkah ke intinya yaitu menambah ID judul, tambahkan kode id="post-<?php the_ID(); ?>" di dalam kode <div class="post"> jadinya seperti ini
    Code:
    <div class="post" id="post-<?php the_ID(); ?>">
    , gunanya buat membedakan ID postingan2 kita..

    Untuk menambahkan kode navigation, langsung saja di bawah kode <?php endwhile; ?> tambahkan kode
    Code:
    <div class="navigation">

                   <?php if(function_exists('wp_pagenavi')) { wp_pagenavi(); } ?>

           </div>

    Saya buat navigationnya biar support ama plugin pagenavi. Ada tambahan setelah kode navigation atau di atas kode <?php endif(); ?> anda tambahkan kode di bawah ini
    Code:
    <?php else : ?>
    	<div class="post" id="post-<?php the_ID(); ?>">
        <h2><?php _e('Artikel tidak ketemu'); ?></h2>
	</div>
    Fungsinya jika artikel yang dicari tidak diketemukan maka akan muncul psotingan ini "Artikel tidak ketemu"

    Oke langkah ke 5 udah selesai kita menuju langkah ke 6, sabar ya... udah diikuti dengan benarkan? Sabar pelan2 ya

    Silakan check kembali pekerjaan anda, apakah sudah sesuai dengan kode di bawah ini
    Code:
    <!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">

<title><?php bloginfo('name'); ?><?php wp_title(); ?></title>

<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />	

<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats please -->

<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'); ?>" />

<link rel="shortcut icon" href="<?php bloginfo('template_directory'); ?>/favicon.ico" />

<?php wp_get_archives('type=monthly&format=link'); ?>

<?php //comments_popup_script(); // off by default ?>

<?php wp_head(); ?>

</head>

<body>

[color="red"]
<div id="header">
<h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
<h2><?php bloginfo('description'); ?></h2>
</div>[/color]
[color="blue"]
<div id="contain">
<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
<div class="post" id="post-<?php the_ID(); ?>">
             <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a>
<div class="entry">
             <?php the_content(); ?>

<p class="meta">
<?php _e('Categories:'); ?> <?php the_category(', ') ?> | <?php _e('Posted by'); ?> <?php  the_author(); ?><br />
<?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?> <?php edit_post_link('Edit', ' | ', ''); ?>
</p>

</div>
</div>
[/color]
<?php endwhile; ?>
[color="green"]
<div class="navigation">
      <?php if(function_exists('wp_pagenavi')) { wp_pagenavi(); } ?>
</div>
[/color]
[color="brown"]
<?php else : ?>
    	<div class="post" id="post-<?php the_ID(); ?>">
                <h2><?php _e('Artikel tidak ketemu'); ?></h2>
	</div>
[/color]
<?php endif; ?>
</div>

</body>

</html>


    --- Update ---

    6. Sidebar
    cepat banget neh..
    Tulis kode <div id="sidebar"> dan </div> di atas kode </body>
    Di dalam area sidebar tulis kode <ul> dan </ul>
    Jadinya seperti ini
    Code:
    <div id="sidebar">
<ul>

</ul>
</div>

    Oke sekarang kita lanjutkan dengan menambahkan kode di antara <ul> dan </ul> dengan kode di bawah ini

    Code:
    [color="blue"]<li id="search"><h2><?php _e('Search in here'); ?></h2>
<?php include(TEMPLATEPATH.'/searchform.php'); ?>
</li>

<li id="calendar"><h2><?php _e('Calendar'); ?></h2>
<?php get_calendar(); ?>
</li>
		
<?php wp_list_pages('depth=1&title_li=<h2>Pages</h2>'); ?>
		
<li><h2><?php _e('Archives'); ?></h2>
<ul>
<?php wp_get_archives('type=monthly'); ?>
</ul>
</li>
		
<?php get_links_list(); ?>
	    
<li><h2><?php _e('Categories'); ?></h2>
<ul>
       <?php wp_list_cats('sort_column=name&optioncount=1&hierarchical=0'); ?>
</ul>
</li>
		
<li><h2><?php _e('Meta Tags'); ?></h2>
<ul>
<?php wp_register(); ?>
<li><?php wp_loginout(); ?></li>
<?php wp_meta(); ?>
</ul>
</li>
		
<li><h2><?php _e('Tag Claud'); ?></h2>
<ul><?php wp_tag_cloud('smallest=9&largest=9&number=45&format=flat'); ?></ul>
</li>[/color]

    Save pekerjaan anda dan refresh browser anda, liat ada perubahan apa? Oya untuk mengetes navigasinya, silakan anda install dulu plugin pagenavi dan di bagian setting di menu reading kamu setting postingan di homepage ada berapa postingan, buat aja misal 3 - 4 postingan, ntar keliatan navigasinya....
     
    Last edited: Sep 3, 2010
    jaya-terus, Sep 3, 2010
    #18
  19. moffey

    moffey Super Hero

    Joined:
    Mar 28, 2010
    Messages:
    3,207
    Likes Received:
    577
    Location:
    Jakarta
    :gembira:Stubleupon doeloe ah ini, elmu bagus buat dipunyai semua blogger... i love you full Om jaya :kiss:
     
    moffey, Sep 3, 2010
    #19
  20. jaya-terus

    jaya-terus Banned

    Joined:
    Mar 23, 2009
    Messages:
    2,318
    Likes Received:
    776
    Location:
    tsabita-shop
    Sebelum melangkah ke tahap selanjutnya silakan buat file baru dengan nama functions.php di folder theme anda. Buka dan isi dengan kode di bawah ini
    Code:
    <?php if ( function_exists('register_sidebar') )   register_sidebar(); ?>

    Dan di bagian sidebar, area sidebar tambahkan kode di bawah <ul> dengan kode di bawah ini
    Code:
    <?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar() ) : else : ?>

    Dan di atas kode </ul> masih di area sidebar tambahkan kode <?php endif; ?>

    Oke sekarang save pekerjaan anda.
    Header sudah, index sudah, sidebar sudah, yup sekarang melangkah ke bagian footer....
     
    jaya-terus, Sep 3, 2010
    #20
Page 1 of 2

Share This Page