Kira-kira awal bulan lalu saya mendapatkan info dari Joko Bondowoso-nya Indonesia, Jauhari, tentang sebuah kontes desain wordpress theme. Kontes Woothemes yang sudah memasuki minggu ketiga.

Dan sampai saat ini terhitung ada 5 orang 8 orang Indonesia yang sudah submit desain. Saya sendiri, Deny, Firman Firdaus (sejak kapan jadi web desainer? :p), Taufiq Ridho, Armono Wibowo, Pupung, Yogi, dan Danies Pahlevi. Dan saya yakin, akan bertambah lagi minimal satu lagi. ;)

Dari hasil-hasil desain mereka, saya takjub. Ternyata banyak skill berterbaran di Indonesia. Apalagi hasil desain mas Firman Firdaus yang cukup menjanjikan. Padahal dia bukan orang yang mencari uang di bidang web.

Dan kami butuh dukungan dari semua blogger Indonesia :)

Inilah dia desain dari mereka:

1. Firman Firdaus (Desain 1, Desain 2, Desain 3)
2. Armono Wibowo
3. Deny Sri
4. Taufiq Ridho
5. Didats Triadi
6. Pupung Budi Purnama
7. Andra Yogi
8. Danies Pahlevi

UPDATE: Pupung akhirnya ikutan submit.

UPDATE 29 Oktober: Ada 8 orang Indonesia yang ikut. Dari list member group, harusnya akan ada Zam dan Gage.

Related posts:

1. Bertambah lagi orang Indonesia di Kuwait Alhamdulillah. Ini Kuwait emang negara super kaya. Jadi walaupun cuaca...

Hasil dari tutorial ini adalah membuat kotak komentar menjadi warna strip. Bahasa gampangnya, punya warna berbeda di nomor ganjil dan genapnya. Selain itu, saya juga membahas bagaimana membuat komentar dari sang author atau sang empunya blog berbeda sendiri dari warna-warna lain seperti di blog ini.

Comments.php

Daftar-daftar komentar dan form komentar biasanya berada di file comments.php di theme wordpress yang sedang digunakan. Saya harapkan jangan berbuat hal yang macam-macam jika anda tidak tahu apa yang sedang anda lakukan. Seperti komentar di bagian bawah file comments.php, if you delete this the sky will fall on your head. Hehehe…

Buka comments.php di editor kesayangan anda. Jangan tanya saya editornya. Yang terpenting adalah, anda bisa mengubahnya. Mau pakai software apa saja, itu tergantung kesukaan.

Setelah membukanya, carilah kode di bawah ini

[source:php]foreach ($comments as $comment) :[/source]

Kode diatas bermaksud mencoba membaca semua komentar yang ada dengan menggunakan teknik iterasi (perulangan). Jadi proses yang berada di dalam kode tersebut, dieksekusi secara terus menerus sampai dengan komentar untuk post yang bersangkutan habis.

Membuat warna strip

Untuk membuat warna strip di blok komentar, anda membutuhkan sebuah variabel penunjuk status. Kita bisa membuat variabel sendiri bernama katakanlah, j. Jadi, ubah kode foreach di atas menjadi seperti ini kira-kira.

[source:php]<?php
$j=0;
foreach ($comments as $comment) :
?>[/source]

Artinya, kita mulai membuat sebuah variabel bernama j dan langsung memberikannya sebuah nilai 0.

Lalu tambahkan kode ini persis di bawah baris foreach:

[source:php]if($j%2==0) $class=”comment-1″;
else $class=”comment-2″;
$j++;[/source]

Artinya, jika nilai j habis dibagi dengan angka 2 (artinya nilai adalah genap) maka kita membuat sebuah variabel $class yang berisi “comment-1″. Selain itu (artinya nilai adalah ganjil) maka variabel $class kita isi dengan “comment-2″. Setelah itu, nilai $j ditambahkan satu.

Dengan kode di atas, maka kita membuat 2 buah blok komentar dengan masing-masingnya punya keunikan tersendiri dari nama class.

Kemudian ubah blok komentar anda dengan melakukan penambahan class seperti di bawah ini:

<div class="comments <?php echo $class ?>" id="comment-<?php comment_ID();?>">

Situasi blok komentar mungkin bisa saja berbeda, tapi yang jelas, biasanya ada di semua theme wordpress. Diperhatikan saja pola-nya. Pada prinsipnya, hanya untuk menambahkan sebuah class unik di setiap blok ganjil dan genap.

Dan sudah, halas, bas, finish. Itu saja. Gampang? oh iyaaa…

Membuat style sendiri untuk admin blog

Tidak jauh berbeda dengan bagian atas, untuk bagian ini hanya perlu membutuhkan kondisi saja. Konsepnya, anda cuma butuh mencocokkan email yang anda gunakan untuk verifikasi sebagai admin.

Langkah pertama, buat dulu sebuah variabel tepat di bawah variabel $j yang sudah kita tulis di bagian atas. Lengkapnya jadi begini.

[source:php]<?php
$j=0;
$author_class = “”;
foreach ($comments as $comment) :
?>[/source]

Kemudian, tinggal menaruh kondisi tepat di bawah kondisi nilai genap dan ganjil yang sudah kita buat di atas. Lengkapnya jadi begini:

[source:php]if($j%2==0) $class=”comment-1″;
else $class=”comment-2″;
$j++;
if($comment->comment_author_email == “didats@dimanasaja.com”) $author_class = “byauthor”;[/source]

Nah, langkah terakhir tinggal bagaimana kita menaruh variabel $author_class di bagian blok komentar. Tinggal edit saja bagian atas menjadi seperti ini:

[source:php]<div class=”comments <?php echo $class.” “.$author_class ?> ” id=”comment-<?php comment_ID();?>”>[/source]

Lengkapnya, jadi seperti ini:

[source:php]<?php
$x=0;
$author_class = “”;
foreach ($comments as $comment) :
if($j%2==0) $class=”comment-1″;
else $class=”comment-2″;
$j++;

if($comment->comment_author_email == “didats@dimanasaja.com”) $author_class = “byauthor”;
?>
<div class=”comments <?php echo $class.” “.$author_class ?> ” id=”comment-<?php comment_ID();?>”>[/source]

Bagian CSS

Memanipulasi theme wordpress sudah, sekarang saatnya kita memberikan sebuah penyelesaian akhir atas manipulasi yang telah kita buat. Yang perlu diingat, akan ada 3 buat class baru yang harus kita definisikan di file style.css yang ada di theme aktif. Yaitu, class comment-1, comment-2, dan byauthor.

Buka file style.css, dan tempatkan kursor di bagian paling akhir. Tulis seperti ini:

[source:css].comment-1 {
background:#F1F0DC;
}
.comment-2 {
background:#F7F7F7;
}
.byauthor {
background:#EFEFEF !important;
border-top:1px solid #999;
border-bottom:1px solid #999;
}[/source]

Artinya, kita membuat blok komentar yang bernilai genap dengan background berwarna agak orange, dan blok komentar yang ganjil dengan background berwarna abu-abu terang. Sedangkan untuk si author, memberi warna abu-abu terang yang lebih gelap sedikit dari blok ganjil, serta menambahkan border di atas dan di bawah.

Ternyata memang mudah, kan? :P

Related posts:

1. Tutorial: Membuat template WordPress (1) Siapapun yang punya blog dengan mesin WordPress tentunya ingin membuat...
2. Tutorial: Membuat template WordPress(3) – Header Lanjut lagi. Setelah membahas masalah desain, kini kita berlanjut ke...
3. Tutorial: Membuat template wordpress (2) – Desain template Yeah, akhirnya tutorial bagian pertama dilanjutkan. Dari beberapa komentar dan...

Ada sekitar 4 buah WordPress theme yang sudah saya publish ke publik. Yaitu, Ombax, Umalas, Duaempat dan Osiempel. Dan diantara kesemuanya, tak ada lagi yang saya perhatikan. Hehe. Dan kini saatnya mengubah semuanya menjadi sebuah theme yang serius saya tangani. Bahasa kerennya, biar lebih menarik untuk didownload dan digunakan.

Seperti halaman portfolio yang sudah saya buat, kumpulan theme-theme ini akan saya buat di sebuah kategori yang lain dan khusus ditampilkan di sebuah halaman lain. Halamannya sampai saat ini belum saya buat. Kenapa saya suka mengumpulkan semuanya ke dalam post? karena akan lebih mudah pengkategoriannya. Mengaturnya juga lebih mudah. Tak perlu lagi install-install plugin. Maka dari itu, buat yang belum subscribe RSS, dimohon untuk subscribe sekarang juga. Hahaha… scaaaam….

Ombax

Theme pertama yang saya rilis. Ini adalah sebuah contoh ke-sok-an saya yang baru belajar wordpress, sudah berani merilis. Padahal, theme-nya hanyalah sebuah copy-paste dari theme default wordpress, dan saya hanya bermain di CSS dan struktur HTML-nya.

Nantinya, saya akan membuat versi 2 yang mungkin banyak menghilangkan beberapa bawaan dari theme default, sehingga menjadi theme yang bisa di download dan digunakan orang lain secara layak.

Umalas

Theme ini termasuk yang paling laku. Karena bentuknya yang tidak standar. Meliuk-liuk bagaikan gitar spanyol. Hihihi. Tapi sayang, ini juga masih berupa copy-paste dari theme dasar, dan saya hanya berimprovisasi dengan struktur HTML dan CSS-nya.

Kekurangan theme ini adalah gambar header yang tidak bisa diganti. Huehehe… :D

Nantinya, di versi 2, saya akan merombak secara besar-besaran tapi dengan tetap menjaga Umalas-nya yang meliuk-liuk. Saya sendiri juga belum yakin seberapa besar perombakan yang terjadi, nanti saja dipikirkan lebih lanjut.

Duaempat

Theme ini adalah sebuah peringatan atas ke-duapuluh-empatan umur saya waktu itu. Tidak terasa, sudah hampir 2 tahun yang lalu. Huehehe. Bagi saya, ini adalah theme yang gagal. Karena saya tidak memberikan perhatian secara detail. Hanya terlihat dari luar saja, tapi tak ada yang menarik dari theme ini selain skin kertas-nya.

Untuk versi 2-nya, saya sendiri masih belum tahu seperti apa. Tapi yang jelas tetap saya akan buat rombakan yang cukup besar.

Osiempel

Osiempel adalah sebuah theme yang memperingati pacaran-nya saya dengan istri. Saya mencoba membuat sebuah theme yang sangat simpel, dan kemudian memberikan nama panggilan istri di depannya.

Untuk yang versi 2 ini mungkin akan terlihat jauh berbeda. Yang tidak saya hilangkan cuma kesimpelannya. Tentunya, juga ada rombakan besar-besaran nanti.

Kenapa memberikan cuma-cuma?

Mungkin banyak orang yang tidak tahu, bahwa semua pekerjaan yang kita kerjakan tidaklah menjadi sia-sia. Secara jujur, membuat wordpress theme sangat menyita waktu dan perhatian. Dari sekedar mendesain, mengubahnya ke dalam bentuk HTML dengan CSS, lalu memberikan perhatian ke kode-kode PHP di wordpress bukanlah pekerjaan yang mudah.

Tapi, yang menarik adalah masalah ego. Seperti ada rasa bangga ketika WordPress theme yang saya buat banyak digunakan oleh orang-orang. Dan lebih bangga lagi ketika theme yang saya buat diubah sedemikian rupa hingga menjadi sebuah theme yang punya nilai tinggi bagi yang menggunakannya.

Selain rasa bangga, ternyata ada hal lain. Yaitu masalah kerjaan. Tidak di sangka, banyak yang menawarkan saya pekerjaan setelah beberapa kali membuat WordPress theme. Jadi, bisa disimpulkan, bahwa memberikan sesuatu yang bermanfaat bagi orang lain tidak akan sia-sia nantinya. Percayalah.

Dan terakhir, tentu saja link… :D Makin banyak yang menggunakan WordPress theme yang saya buat, maka semakin banyak link yang saya dapat, dan efeknya, bernilai tinggi di dunia search engine. Asalkan sang pengguna menghormati pembuatnya dengan tetap mencantumkan link.

Dari ide-ide di atas, apa ada yang berniat mensponsori? Di tiap theme yang saya buat nantinya (kalau ada yang mau mensponsori loh) akan ada link sponsor di bagian bawah. Tentunya ini bukan berpengaruh banyak pada trafik situs sponsor, tapi akan menjadi sebuah outbond link yang punya manfaat besar.

Sekali lagi, ada yang mau jadi sponsor? :P

Menurut Yogi, themenya dibenci. Ya wis… gag jadi deh… :D

Related posts:

1. Published My Portfolio Finally, My Portfolio page has published. It’s quite hard to...
2. Tutorial WordPress: Membuat daftar komentar lebih menarik Saya masih saja agak kesulitan untuk menulis tutorial baru tentang...

The terminology

Portfolio items is a post from wordpress. It just separated with the category. That’s why if you has subscribed my feed, all of the portfolio items showed.

I did the portfolio the same as Sideblog on the front page. I didn’t use any plugin, it just the category. The portfolio items are under portfolio category, and the sideblog items are under sideblog category.

What I did on the portfolio page is like this:

[source:php]<?php if($post->ID == 430) { ?>
<div id=”theportfolio”>
<?php
$i = 0;
$lastposts = get_posts(‘numberposts=20&category=19′);
foreach($lastposts as $post) :
setup_postdata($post);
?>
<div class=”portfolio-content”>
<h3><a href=”<?php the_permalink() ?>” rel=”bookmark” title=”Permanent Link to <?php the_title(); ?>”><?php the_title(); ?></a></h3>
<div class=”portfolio-entry”>
<?php the_content() ?>
</div>
</div>
<?php endforeach; ?>
</div><!– /#theportfolio –>
<?php } ?>[/source]

Yes, first thing, you should know the ID of the page that you want to put the post items. You can see the ID for each page from the “Manage Page” menu on the admin panel of wordpress. Once you got the ID, you can put conditional scripts on page.php located on your theme directory.

[source:php]<?php if($post->ID == 430) { ?>[/source]

Then you can put your get_post code after the conditional scripts. Dont’ forget to close the area by putting this at the end of area:

[source:php]<?php } // conditional page ID ?>[/source]

Yes, that’s all.

Related posts:

1. Setelah Portfolio, saatnya WordPress Themes Halaman portfolio kini sudah menjadi bagian dari blog ini. Perlu...
2. Membedah theme Didats.net Menjadi seorang web designer tentunya punya beban dan ego yang...
3. Tutorial WordPress: Membuat daftar komentar lebih menarik Saya masih saja agak kesulitan untuk menulis tutorial baru tentang...