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.

Pertama mari kita buka index.php. Dan kita cari bagian footernya:

<div id="footer">
  Footer ada disini
</div>

Kita akan ganti kata-kata Footer ada disini dengan informasi sebagai berikut:

  1. Nama Blog
  2. Copyright
  3. Judul Artikel yg sedang dibuka
  4. Powered by WordPress

Maka kodenya adalah seperti ini:

<div id="footer">
  <p><a href="<?php bloginfo('url');?>"><?php bloginfo('name');?></a> 
  &copy 2011 menggunakan <a href="http://wordpress.or.id">WordPress</a><br/>
  <?php if (!is_home()) { wp_title(''); } ?></p>
</div>

Sekarang biar cakep dan gak campur aduk, kita dandanin dulu di style.css dengan kode ini:

#footer {
  font-size:10px;
  background: #EDEDED;
  text-align:center;
  margin-top:20px;
  padding:10px;
}

Dan inilah hasil akhirnya saudara-saudara.. hehehe

Footer Theme

Footer Theme WordPress

Untuk sentuhan terakhir adalah memasang fungsi wp_footer yang akan dipakai oleh banyak plugin untuk bekerja maksimal di blog anda. Cari kode </body> dan pasang sebelumnya seperti ini:

  <?php wp_footer();?>
   </body>
</html>

Sekarang coba anda login dan jika benar, maka admin bar akan muncul di blog anda hehehe… Dan nanti kalau ada plugin lain yang membutuhkan fungsi ini untuk meletakkan beberapa kode di footer, maka dia bisa meletakannya dengan mudah.

Themes ini secara prinsip sudah siap. Tentunya anda bisa memodifikasinya sesuka hati sehingga sesuai dengan selera anda. Anda bisa menghiasinya dengan background yang menarik atau header yang keren untuk membuat themes ini makin cakep.

Dan dengan berakhirnya panduan membuat footer ini maka seri panduan dasar membangun theme WordPress sudah selesai. Insya Allah berikutnya akan saya berikan beberapa tips dan trik untuk meningkatkan performa themes ini sehingga makin maknyuss…

Makanya subscribe dong menggunakan form di sebelah kanan tuh. Biar makin semangat sharingnya. Kalau sepi kan kayak sharing sama hantu.. hehehe…

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

97 thoughts on “Membuat Footer

  1. johan Caniago

    Ngatur Nuwon tenan,Mas. Atas segala dukungan dan bantuannya yang telah banyak
    membuang waktu membina saya. Wasalam. Jasanya tidak terlupakan. Tolong..donk nomor Hend Phonya. Saya mau berhubungan lebih dekat lagi. Tenkp

  2. agito

    tutorial yang mantap… terima kasih. Saya pun udah berlangganan lewat email, takut terlambat dapat info menarik lagi.

    Saya lihat di screenshot diatas udah ada form komentarnya, tapi di theme yang saya buat kok belum? apakah ada yang terlewatkan…

    terima kasih.

  3. fadil

    bagaimana ya caranya menambah fungsi widget di footer? soalx theme yg ane pake g ada fungsi widget di footernya dan lgsung bisa disetting di menu Admin>>Appearance>>Widgets…
    mohon pencerahannya mas..

  4. surya

    maaf neh salah komen tadi, mas, apakah tutorial ini bisa dijadikan ebook. biar bisa belajar offline, yang ini sangat bagus tutornya, mudah dipahami. mohon balasannya, kalau bisa buat ebook tutor membuat theme wordpress ini. thanks ^_^

    saya mempelajarinya secara pribadi, karena saya ada sangat berkeinginan jadi webmaster kayak mas

    1. admin Post author

      Kalau mau jadi webmaster, nggak boleh manja. Pengen semua tersedia itu sifatnya user, musti dijauhkan tuh sifat itu dari webmaster

  5. Dadan Hatomi

    Terima kasih banyak mas untuk artikelnya sangat mudah di pahami ๐Ÿ™‚
    kalo artikelnya seperti ini saya bersedia langanan, maklum mas saya sangat tidak tahu dalam bikin-bikin seprti ini jadi harus di kasih penerangan ini (seperti philis gitu..)
    tapi saya berkeinginan jadi pembuat tidak hanya jadi pengguna sekarang ini.

    terima kasih banyak mas artikelnya bagus-bagus.

  6. cucu

    Terima kasih banyak mas atas tutorialnya.
    Saya kena sedikit masalah nih ๐Ÿ˜€
    Footer nya kok berada di bagian Sidebar ya?? kira2 dimana salahnya ya?
    klik di sini untuk lihat screenshootnya.

  7. bebiy

    thanks gan tutorialnya manfaat sekali
    klo pengen kasi gambar pada header itu gimana??? truz pada tutorial bagian sidebar koq aku ga ada gambarnya

  8. cucu

    Alhamdulillah, step demi step tutorial telah saya jalan kan, dan hasilnya pun memuaskan. Tinggal tahap pengembangan selanjutnya, terima kasih Admin ๐Ÿ˜€

  9. Fathan

    ada kendala di menu mas, script yang dikasih anda berantakan.
    Klik Lihat Screenshot tolong dibantu mas. oh yah makasih atas tutornya, saya jadi ngerti bahasa PHP ma CSS. ternyata mudah buat nasi goreng lw ada resepnya,.,tapi lw tau buat nasi goreng tinggal buat resepnya aja,., haha

  10. qo2

    mas sampai sini saya sudah paham tetapi sewaktu di coba untuk me-logout dari wp-admin maupun dari tampilan theme nya qo keluar ini yah “Warning: Cannot modify header information – headers already sent by (output started at D:\AppServ\www\belajarweb\wp-content\themes\themegue\functions.php:1) in D:\AppServ\www\belajarweb\wp-login.php on line 353” klo ini kenapa yah ..

  11. adam

    utk memanggil footer itu ngak jalan mas… coba liat2 di wordpress.org

    harus dengan <?php get_footer(); ?>

    atau mungkin ini berlaku untuk versi terbaru ๐Ÿ™‚

    1. Lutvi Avandi Post author

      get_footer itu untuk memanggil file footer.php sementara wp_footer itu fungsi yang akan dipakai oleh plugin untuk meletakkan kode di bagian footer.

  12. adhani

    mas, saya punya themes,, footernya banyak berisi link dan mau saya edit. tapi setelah di edit malah ngeblenk themesnya,
    nah dengan membuat footer.php baru apakah bisa mengatasi hal demikian ya?

  13. panghaidar

    Mas Lutvi saya coba membuat widget footer di funtions.php. judul widgetnya berhasil tampil tapi tidak bisa diisi apa2.. waktu diklik tanda panah di widget description nya ga muncul..lengkap kodenya di bawah..

    register_sidebar( array(  
        'name' => 'Footer',  
        'id' => 'footer',  
        'description' => 'footer dengan lebar 145px terletak di bawah sidebar lebar',  
        'before_widget' => '<li id="%1$s" class="widget-container %2$s">',  
        'after_widget' => '</li>',  
        'before_title' => '<h3 class="widget-title">',  
        'after_title' => '</h3>',  
      ) );

  14. Jendral SEO

    saya mau nanya nich mas….

    biasanya kalau kita menggunakan template gratisan wordpress, ada link pembuat templatenya di bagian footer, kan linknya tidak boleh di hapus mas, terus kalau di ubah menjadi nofollow apa boleh ? tapi tetap mencantumkan link pembuat template…..

  15. joni

    mas, waktu login keluar error ini kenapa ya?

    Warning: Cannot modify header information – headers already sent by (output started at C:\AppServ\www\wordpress\wp-content\themes\latihan1\functions.php:1) in C:\AppServ\www\wordpress\wp-login.php on line 349

    Warning: Cannot modify header information – headers already sent by (output started at C:\AppServ\www\wordpress\wp-content\themes\latihan1\functions.php:1) in C:\AppServ\www\wordpress\wp-login.php on line 361

    Warning: Cannot modify header information – headers already sent by (output started at C:\AppServ\www\wordpress\wp-content\themes\latihan1\functions.php:1) in C:\AppServ\www\wordpress\wp-includes\pluggable.php on line 669

    Warning: Cannot modify header information – headers already sent by (output started at C:\AppServ\www\wordpress\wp-content\themes\latihan1\functions.php:1) in C:\AppServ\www\wordpress\wp-includes\pluggable.php on line 670

    Warning: Cannot modify header information – headers already sent by (output started at C:\AppServ\www\wordpress\wp-content\themes\latihan1\functions.php:1) in C:\AppServ\www\wordpress\wp-includes\pluggable.php on line 671

    Warning: Cannot modify header information – headers already sent by (output started at C:\AppServ\www\wordpress\wp-content\themes\latihan1\functions.php:1) in C:\AppServ\www\wordpress\wp-includes\pluggable.php on line 866

  16. Halim

    Terimakasih mas atas tutorialnya, saya sangat terbantu sekali. Oh iya mas untuk file-file theme php wp seperti home.php, single.php, header.php, dll ko ga dibahas ya..atau saya kelewatan..

    Trims bnyk mas..

  17. Harry R

    Mas, terimakasih atas tutorial yang sangat berharga nya. Kluarin tutor buat breadcumb nya juga donk mas ๐Ÿ™‚ biar makin manis themes sederhana nya kita2..

  18. astadala

    setelah memasang kode untuk footernya di indexnya ternyata error:
    Parse error: syntax error, unexpected T_STRING in C:\xampp\htdocs\wordpress\wp-content\themes\astadala\index.php on line 68

    errornya menunjukkan dibaris 68 yaitu:
    ย ย 
    ย  ย <aย href="”>ย ย ย 
    ย  ย &copyย 2011ย menggunakanย WordPressย ย 
    ย ย  ย ย =====> baris 68
    ย ย 

    gimana solusinya gan?……

  19. Irwan Ardyansyah

    Sebelumnya saya mengucapkan terima kasih banyak sama mas lutvi udah mau berbagi ilmunya tentang wordpess, saya sudah mengikuti step by step cara membuat tema wordpress (dasar) dari awal hingga akhir dan hasilnya lumayan sukses ๐Ÿ™‚ , saya sudah subscribe blog ini dan saya merekomendasikan blog ini ke semua teman-teman saya… semoga penulis blog ini “mas lutvi” diberi kesehatan oleh Allah SWT agar nanti kedepannya bisa terus memberikan postingan-postingan yang bermanfaat. amien.

    Salam persahabatan dari saya,
    Irwan Ardyansyah
    Follow me on twitter : @IrwanArdyansyah
    https://twitter.com/IrwanArdyansyah

  20. oliv

    terimakasih banyak mas, disini aku banyak dapat ilmu, ilmunya sangat bermanfaat, semoga ilmunya tambah banyak.

  21. Doel

    Tutorial yang sangat bagus dan detail hingga orang awan seperti saya bisa mengikutinya.
    Kalau ada Tutorial Cara membuat Backend WordPress Sendiri Bos biar Lebih Keren Lagi… hehehe

  22. jam tangan

    huhuhu…. belum ketemu file index.php yang mana ya…filenya ada di public html, wp content n di masing2 theme juga ada…yang mana yah mas??mohon bantuannyah…

  23. Obat Kuat Herbal

    Minta bantu solusinya dong, footer di blog saya nampilnya di side bar sebelah kanan, itu kenapa ya?
    + obatnya biar bisa di posisi seharusnya , boleh reply by email juga gan
    Trims

  24. Mayra

    I see a lot of interesting articles on your website. You have
    to spend a lot of time writing, i know how to save you
    a lot of work, there is a tool that creates unique, google friendly articles in couple
    of seconds, just type in google – laranita’s free content source

  25. Arief

    Gan, mohon bantuannya… saya download theme gratis tapi di footer bawah itu ada link yang ditempel, sedangkan linknya sudah di suspend. Saya takut pengaruh ke web saya. Gimana cara editnya atau menghapusnya? Kalau ga salah itu di wp_footer tapi saya ga tau letak dan cara editnya. Ditunggu balasannya. Kalau ga keberatan boleh dibalas lewat email juga. Makasih
    ini web saya http://mrhomestay.com

  26. this

    I simply want to tell you that I’m newbie to blogging and definitely liked your web-site. Most likely Iโ€™m going to bookmark your blog . You definitely come with outstanding article content. Bless you for sharing your blog.

  27. elephant's toothpaste

    Hey there! Quick question that’s entirely off topic. Do you know how to mak your site mobile friendly?
    My weblog looks weird when viewing from my apple
    iphone. I’m trying to find a template oor plugin that might be
    able too resolve thgis issue. If you have any recommendations, please share.
    Many thanks!

  28. Kieth Harkless

    hello there and thank you for your information โ€“ I have certainly picked up anything new from right here. I did however expertise some technical points using this web site, since I experienced to reload the site a lot of times previous to I could get it to load properly. I had been wondering if your web host is OK? Not that I am complaining, but slow loading instances times will often affect your placement in google and can damage your high-quality score if ads and marketing with Adwords. Well I am adding this RSS to my e-mail and can look out for a lot more of your respective interesting content. Make sure you update this again soon..

  29. Rhett Chlebek

    Heya i am for the formerly time at this point. I found this board and I stumble on It accurately beneficial & it helped me out a lot. I chance to create a little back and evade others like you helped me.

  30. Hung Waltner

    Nice blog here! Also your web site loads up fast! What host are you using? Can I get your affiliate link to your host? I wish my site loaded up as quickly as yours lol

  31. Son Garacia

    Hello There. I found your blog using msn. This is a very well written article. I will make sure to bookmark it and return to read more of your useful info. Thanks for the post. Iโ€™ll certainly comeback.

  32. Colby Kremen

    I simply needed to say thanks all over again. I do not know what I might have followed in the absence of the type of tips provided by you concerning that situation. It has been the intimidating problem in my opinion, but viewing your specialised approach you processed that took me to jump for delight. I’m just happy for this guidance as well as pray you comprehend what a great job that you are getting into instructing many people by way of your web page. More than likely you haven’t come across all of us.

  33. Rose Player

    You’re so interesting! I do not think I have read through anything like that before. So wonderful to find another person with some original thoughts on this subject. Seriously.. many thanks for starting this up. This site is one thing that is needed on the web, someone with a little originality!

  34. Irvin Roldan

    I’ve been surfing online more than 3 hours today, yet I never found any interesting article like yours. Itโ€™s pretty worth enough for me. In my opinion, if all website owners and bloggers made good content as you did, the internet will be a lot more useful than ever before.

  35. Israel Hollenshead

    This is really interesting, You are a very skilled blogger. I have joined your feed and look forward to seeking more of your great post. Also, I have shared your web site in my social networks!

Comments are closed.