Category Archives: Theme WordPress

Membuat Drop Down Menu

Pada artikel sebelumnya tentang cara membuat custom menu navigasi, ternyata saya melewatkan sebuah panduan yaitu bagaimana kalau menu-nya bersusun alias ada sub menu. Mengingat ruang navigasi yang ada cuma cukup untuk 1 baris menu saja, maka kita perlu mengakalinya dengan membuat drop down.

Bagaimanakah caranya?

Mudah saja kok. Kita cuma perlu main-main sedikit dengan CSS-nya. Dan inilah kode CSS yang harus anda masukkan di file style.css Continue reading

Dicari dengan kata kunci:

membuat drop down menu,membuat dropdown menu,membuat menu drop down,yhs-fh_lsonsw,drop down,cara membuat sub menu di wordpress,drop down menu,membuat menu dropdown di wordpress,membuat drop down menu wordpress,membuat menu dropdown

Membuat Custom Background

Sepertinya makin seru aja nih kegiatan kita utak-atik Themes WordPress. Dan kali ini saya ingin tunjukkan sebuah jurus lagi untuk membuat themes anda lebih gaya dan full fungsi. Apalagi kalau bukan custom background. hehehe..

Walaupun hasil akhirnya nanti sangat keren, tapi bikinnya ternyata gampang banget. Bahkan cuma perlu edit 1 file doang. Apalagi kalau bukan file functions.php yang selama ini sudah menemani kita dalam mempercanggih tampilan blog. Apa sih kode rahasianya? Nih, copy dan paste ke functions.php anda ya Continue reading

Dicari dengan kata kunci:

background,background wordpress,membuat background,membuat background wordpress,cara membuat background wordpress,cara memberi background pada html,membuat background php,cara membuat background di wordpress,wordpress background,cara membuat background html

Footer Theme

Membuat Footer

Footer atau kaki blog adalah bagian yang biasanya berisi informasi singkat soal copy right, mesin yang dipakai dan mungkin juga informasi kecil soal blog. Di footer ini juga bisa kita sisipkan judul artikel sehingga bisa menambah daya dorong SEO-nya. Continue reading

Dicari dengan kata kunci:

footer,cara membuat footer,membuat footer,langkah membuat footer,footer adalah,membuat footer html,footer html,cara membuat footer di wordpress,membuat footer di wordpress,cara membuat footer html

Hasil styling sidebar

Styling Sidebar

Bagaimana pelajaran kemarin? Sudah berhasil semua kan? Kali ini kita akan buat supaya sidebar kita lebih cakep. Untuk pewarnaan, silahkan anda pilih sendiri-sendiri ya? Warna-warna yang dipakai di panduan ini semuanya berdasarkan selera saya.. hehehe… Anda bisa melihat daftar kode-kode warna di http://html-color-codes.com/ atau seperti saya menggunakan software color picker 🙂

Nah, kita langsung saja kalau gitu. Karena kali ini kita akan bahas soal styling (kalau bahasa Indonesia apa ya?) maka file yang kita utak-atik apa?

Bener… style.css jadi GPL, langsung buka style.css dan kita cari lokasi styling sidebarnya. Sebenarnya bisa langsung anda tambah di bawah, tapi kelak ketika anda mau mengubah-ubah lagi anda akan puyeng nyarinya hehehe… Continue reading

Dicari dengan kata kunci:

cara menghilangkan sidebar twitter,cara menghilangkan sidebar di twitter,menghilangkan sidebar twitter,cara menghilangkan sidebar pada twitter,membuat sidebar dengan css,mengatur sidebar wordpress,merubah ukuran sidebar wordpress,cara merubah ukuran sidebar wordpress,cara edit sidebar wordpress,cara menghilangkan warna sidebar pada twitter

Membuat Sidebar Widget

Selamat berjumpa kembali dalam seri panduan membangun themes dari nol hingga menjadi themes yang memenuhi standart WordPress 3.1. Pelan tapi pasti themes yang sudah kita bangun mulai menampakkan bentuknya. Jika anda mengikuti terus panduan ini dari awal, saya yakin anda sudah mulai berani mengutak-atik themes yang sudah ada. Tapi buat yang terlambat silahkan baca kembali panduan ini dari awal biar nyambung karena saya tidak akan mengulang lagi pelajaran yang sudah lewat 🙂

Jika kemarin kita telah menyelesaikan pembuatan bagian konten, maka sekarang kita akan coba memasukkan unsur canggih dalam themes kita yaitu sidebar widget. Disini kita akan berkenalan dengan file baru yang kita beri nama functions.php. File ini khusus menangani fungsi-fungsi PHP yang kita bangun untuk keseluruhan blog. Jadi, anda harus benar-benar membaca artikel ini dengan baik dan teliti Continue reading

Dicari dengan kata kunci:

xwidget theme,membuat sidebar,sidebar,membuat sidebar wordpress,membuat widget wordpress,cara membuat sidebar di wordpress,cara membuka file widget,cara membuat widget sendiri,sidebar widget wordpress,membuat sidebar di wordpress

Hasil Akhir Styling bagian Konten

Styling Konten WordPress

Gak terasa lagi-lagi saya gak update sekian lama. Padahal saya rasa baru beberapa hari saya tinggal blog ini tapi cek tanggalnya ternyata update terakhir lebih dari sepekan yang lalu. Ya udah, kita terusin deh sharing ilmu cara membuat themes WordPress-nya.

Kali ini kita akan mengatur tampilan konten yang sudah kita buat di pertemuan sebelumnya. Karena mengatur style, berarti file yang akan kita edit sekarang adalah file style.css. Dan karena ini pengaturan konten, maka kita tempatkan saja di bawah pengaturan untuk konten sambil sekalian menghilangkan warna kuning di bagian konten artikelnya. Yuk, kita cari kode ini: Continue reading

Dicari dengan kata kunci:

konten wordpress,cara merubah warna tulisan menu pada wordpress,cara mengubah warna menu di worpress,merubah warna template wordpress,merubah warna link pada wordpress,utak atik css menu theme twenty twelve,custom template wordpress,cara merubah warna text di template wordprees,cara menambahkan konten pada wordpress,cara membuat konten pada wordpress

Mengatur Konten dalam Themes WordPress

Wah, tidak terasa sudah lama sekali saya tidak meneruskan penduan membuat theme di wordpress.or.id. Bagaimana PR yang saya berikan, harusnya sih udah selesai semua ya? Nah, pertemuan kali ini saya cuma akan menunjukkan pengaturan konten yang saya lakukan. Barangkali ada yang masih belum mengerjakan, silahkan deh di contek 🙂

  <div id="content">
   <?php if ( have_posts() ) : ?>
    <?php while ( have_posts() ) : the_post(); ?>
    <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
      <h2 class="title"><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
      <p><?php the_content(); ?></p>
      <div id="postmeta">Publish on <?php the_time('F jS, Y'); ?> under <?php the_category(', '); ?> by <?php the_author(); ?> | 
      <?php comments_popup_link('No Comments &raquo;', '1 Comment &raquo;', '% Comments &raquo;'); ?> 
      <?php edit_post_link('Edit','','|'); ?></div>
    </div>
    <?php comments_template(); ?>
    <?php endwhile;?>
   <?php endif;?>
  </div>

Continue reading

Dicari dengan kata kunci:

mengatur layout wordpress,mengatur wordpress,mengatur tata letak di wordpress,cara mengatur layout wordpress,bagaimana mengatur link post pada word press,cara mengatur tata letak wordpress,mengatur tata letak wordpress,cara edit tata letak wordpress,cara mengatur tata letak di wordpress,cara mengatur THEMES

Buat Theme WP: Konten

Bukan blog namanya kalau ndak memunculkan konten. Nah, tutorial membuat theme WP kali ini akan beranjak turun ke bawah yaitu ke bagian konten. Disini nanti akan kita munculkan artikel-artikel blog yang sudah susah payah dan berpeluh serta berderai air mata kita tulis dengan tinta emas kita… *lebay*

Untuk itu mari fokus lagi ke index.php dan kita akan mengutak-atik kode ini:

<div id="content">
   Artikel akan muncul disini
</div>

Continue reading

Dicari dengan kata kunci:

membuat wp theme,cara memperlebar halaman wordpress,cara mengedit theme wp,membuat index berita di wordpress,memperlebar halaman blog wordpress,fungsi loop wordpress,membuat indeks berita php wordpress,kata kata buat sahabat yg sok alim tp dalemnya busuk,belajar bikinvtheme wp,bagaimana while loop bekerja

Buat Theme WordPress: Blog Header

Panduan kali ini membutuhkan konsentrasi tinggi.. hehehe.. Makanya anda butuh fokus..fokus..dan fokus.. cieeh.. Bagi yang kesasar, ini adalah artikel ketujuh dari rangkaian artikel cara membuat theme WordPress dari awal sampai akhir. Anda bisa membaca-baca lagi artikel sebelumnya di bagian bawah tulisan ini:

Yang akan kita bahas nanti adalah bagian header blog. Saya punya gambaran headernya nanti bisa diganti-ganti kayak Twenty Ten gitu, tapi nanti ajalah kalau kita sudah membahas soal fungsi. Untuk saat ini kita bikin standart dulu. Namanya juga belajar. Tul nggak?

Kita akan pasang judul blog ukuran besar di bagian header. Kemudian kita tambahkan juga description dengan font lebih kecil di bawahnya dan nanti dekat dengan batas bawah header kita pasang menu navigasi. Untuk sementara menu navigasinya pakai list page saja. Nanti kita akan merubahnya menjadi custom menu. Keren kan? Continue reading

Dicari dengan kata kunci:

header,buat tema,buat theme,template wordpress 3 1,membuat tema blog wordpress,tema blog,membuat theme wordpress dari awal,mengatur font di wordpress,pasang header di wordpress,mengganti header di twenty twelve

Membuat Theme: Heading

Ini adalah pertemuan keenam dalam seri panduan membangun theme WordPress. Anda bisa membaca artikel-artikel sebelumnya dengan melihat daftar isi di bawah artikel ini.

Setelah kita melakukan tata letak layout di artikel sebelumnya, saatnya sekarang kita mengutak-atik bagian headernya. Disini kita akan mulai mencoba memasukkan fungsi-fungsi WordPress ke dalam theme blog kita. Yuk kita mulai! Continue reading

Dicari dengan kata kunci:

membuat themes,cara buat gambar berganti banner wordpress,membuat header web php,cara membuat header wordpress berganti-ganti,membuat gambar berganti di wordpress,buat tema dengan berganti ganti,fungsi meta charset,cara membuat kepala halaman berubah-ubah di wordpress,cara pasang slide kepala di wordpress,gambar berganti ganti di wordpress