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 2 of 2
  1. bintang_kecil

    bintang_kecil Super Hero

    Joined:
    Jun 3, 2010
    Messages:
    1,266
    Likes Received:
    56
    luar biasa, bukan ilmu sembarangan nih,.terus menyimak. trims om thank meluncur!
     
    bintang_kecil, Sep 3, 2010
    #21
  2. hylal

    hylal Hero

    Joined:
    Aug 28, 2008
    Messages:
    727
    Likes Received:
    12
    Location:
    Jakarta
    thanks dah................
     
    hylal, Sep 3, 2010
    #22
  3. jaya-terus

    jaya-terus Banned

    Joined:
    Mar 23, 2009
    Messages:
    2,318
    Likes Received:
    776
    Location:
    tsabita-shop
    7. Footer
    Di bagian ini sederhana sekali, silakan tambahkan kode ini persis di atas </body> atau di bawah area sidebar
    Code:
    <div id="footer">
   <p>Copyright @2010 <a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a> Theme by jaya-terus
   </p>
</div>

    Save pekerjaan anda dan coba refresh browser anda, liat perubahan yang terjadi. Bentuknya masih dalam satu kolom.

    Langkah demi langkah sudah selesai dari header, index, sidebar, dan footer. Simplekan? Semua theme baik premium atau tidak langkah awalnya seperti ini bentuknya, sekarang tinggal kreasinya bagaimana theme akan dbuat atau dibentuk. Tapi di sini hanya diajarkan bentuk theme sederhana 2 kolom saja ya.

    Ingat, ikuti langkah2 di atas dengan sabar dan pelan2, supaya anda paham, jangan buru - buru.

    Hasil akhir sampe di langkah footer adalah (check kembali pekerjaan anda ya sob, udah bener belum)

    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>
[color="blue"]
<div id="sidebar">
<ul>
<?php if ( function_exists('register_sidebar') )   register_sidebar(); ?>
<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>
<?php endif; ?>

</ul>
</div>[/color]
[color="green"]
<div id="footer">
   <p>Copyright @2010 <a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a> Theme by jaya-terus
   </p>
</div>
[/color]
</body>

</html>
    Langkah selanjutnya adalah Membagi/memisahkan file.
    Langsung saja
    Sebelum melangkah lebih lanjut silakan buat 3 file kosong dengan nama header.php. sidebar.php, dan footer.php. Jadi sampai di sini kita mempunyai berapa file? Monggo dijawab, kalo benar tak pencet tombol thanks, kalo salah berarti gk memperhatikan..hehehe


    --- Update ---

    Oke sampai di sini kita udah masuk bab memisahkan/membagi file2 theme
    8. Memisahkan file
    Sebelum memisahkan file, ada kode yang harus ditambahkan untuk ukuran lebar theme kita. Silakan tambahkan kode <div id="wrap"> di atas tag <div id="header"> dan tambahkan tag </div> sebagai penutup persis di atas tag </body>

    Udah ya, oke sekarang kamu buka file2 index.php, header.php, sidebar.php, dan footer.php

    Mulai dari index.php, silakan remove/pindahkan kode ini ke header.php
    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>

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

    Langsung ganti dengan kode <?php get_header(); ?>. Save dan refresh browser anda jika ada perubahan berarti ....? Jawab sendiri

    Oke sekarang, menuju ke bagian sidebar, masih di index.php, remove/cut kode di bawah ini ke file sidebar.php
    Code:
    <div id="sidebar">
<ul>
<?php if ( function_exists('register_sidebar') )   register_sidebar(); ?>
<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>
<?php endif; ?>

</ul>
</div>

    Langsung diganti dengan kode <?php get_sidebar(); ?>. Save dan refresh browser anda ada perubahan kagak?

    Langkah terakhir adalah masih di index.php remove/cut kode di bawah ini ke file footer.php
    Code:
    <div id="footer">
   <p>Copyright @2010 <a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a> Theme by jaya-terus
   </p>
</div>
[/color]
</body>

</html>

    Langsung ganti dengan kode <?php get_footer(); ?>. Save dan refresh browser anda, apakah baja hitam telah berubah?
    Oke, langkah ke 8 membagi file telah selesai. So, gimana hasil akhirnya?

    Silakan lihat di sini
    Silakan anda posting di sini, supaya tahu ada yang mengikuti langkah2 dari awal sampe akhir tidak, umpama tidak ada yang posting, terpaksa tutorial berhenti dulu di sini...hehehe. Sambil ngerjain tugas lain nih
    Jadi bagian File theme ada beberapa langkah yaitu :

    1. Layout dasar theme
    2. Membuat Judul dan Deskripsi Blog
    3. Menambah Artikel di index.php
    4. Menambah categories, author, dan komentar postingan
    5. Menambah ID Judul dan Navigation
    6. Sidebar
    7. Footer
    8. Memisahkan file

    Oke sebelum melangkah ke bagian css, anda perlu check dulu sampai di langkah 8 ini ada error tidak...
     
    Last edited: Sep 4, 2010
    jaya-terus, Sep 4, 2010
    #23
    dedesuryadi likes this.
  4. Mufet

    Mufet Ads.id Fan

    Joined:
    Aug 15, 2009
    Messages:
    226
    Likes Received:
    1
    Location:
    Palembang
    kereeeennnn...thanks added
    :kembang:
     
    Mufet, Sep 4, 2010
    #24
  5. wizzkid

    wizzkid Ads.id Pro

    Joined:
    Aug 12, 2008
    Messages:
    294
    Likes Received:
    105
    Om Jaya Terus, lanjutin donk bagian CSS nya, justru ini nih yang paling di tunggu tunggu . Hehehe
     
    wizzkid, Sep 25, 2010
    #25
  6. joestatic

    joestatic Super Hero

    Joined:
    Nov 2, 2009
    Messages:
    1,218
    Likes Received:
    163
    Location:
    on Monitor Butut
    thanks mas jaya :D ♥ it
     
    joestatic, Sep 25, 2010
    #26
  7. mamas86

    mamas86 Super Hero

    Joined:
    Oct 1, 2009
    Messages:
    1,267
    Likes Received:
    109
    Location:
    Di HATImu... :)
    Likes this... Thanks brother :D
    Mantap
     
    mamas86, Sep 25, 2010
    #27
  8. deniardians

    deniardians Ads.id Fan

    Joined:
    Jul 21, 2010
    Messages:
    105
    Likes Received:
    1
    wah....mantap juga ini artikel...ane nyobain dulu ah..
     
    deniardians, Sep 28, 2010
    #28
  9. abdipribados

    abdipribados Newbie

    Joined:
    Apr 5, 2011
    Messages:
    33
    Likes Received:
    0
    kok tutorialnya gak berlanjut mas ? :(
     
    abdipribados, Jun 9, 2011
    #29
  10. adie18july

    adie18july Ads.id Starter

    Joined:
    Mar 9, 2011
    Messages:
    76
    Likes Received:
    1
    Location:
    Pojokan Depok
    Sama gan, ane juga nunggu udah lama, sekarang ada waktu buka ini thread lagi, tapi blm juga ada update:((:((
     
    adie18july, Nov 17, 2012
    #30
Page 2 of 2

Share This Page