63077436 Belajar Membuat Tema Wordpress

7/31/2019 63077436 Belajar Membuat Tema Wordpress

1/45

A+ Labs, pc33 and B|H present | Cara membuat teme wordpress by anggamovic

1

Selamat sore kawan semua, berjumpa lagi bersama saya,angga A.k.A anggamovic yang akan membahas caramembuat theme wordpress untuk sahabat BinusHacker

semuanyaPART 1

Seperti yang sudah saya janjikan pada artikel yangkemarin

http://www.binushacker.net/membuat-toggle-sederhana-css-dan-jquery.html, nah sekarang kitalanjutkan pembahasan tentang web desainnya, bahasanyang sekarang akan saya angkat yaitu Membuat theme

wordpress step by step Ini adalahPART 1Dikarenakan komponen dari theme wordpress itu

bejibun, jadi disini saya akan membahasnya satu persatu,kenapa? selain agar kalian dapat lebih mengerti hirarkidalam tema wordpress, kalian juga akan mengerti tag tagyang dipake oleh wordpress dalam penyusunanfrontendnya.

Kita siapkan dulu bahan bahan yang akan kita gunakan.

=[1]= Template html dasar

[ Disini saya akan menggunakan template HTML yangsudah banyak betebaran di google, untuk downloaddasarnya silakan downloaddisinihttp://freehtml5templates.com/downloads/free/butterflybrilliance.zip]

=[2]=Text editor untuk mengedit templatedasarnya, disini saya menggunakan Dream Weaver8,

bagi yang tidak ada silakan pake text editor e.g notepad,notepad++,
http://www.binushacker.net/membuat-toggle-sederhana-css-dan-jquery.htmlhttp://www.binushacker.net/membuat-toggle-sederhana-css-dan-jquery.htmlhttp://www.binushacker.net/membuat-toggle-sederhana-css-dan-jquery.htmlhttp://freehtml5templates.com/downloads/free/butterflybrilliance.ziphttp://freehtml5templates.com/downloads/free/butterflybrilliance.ziphttp://freehtml5templates.com/downloads/free/butterflybrilliance.ziphttp://freehtml5templates.com/downloads/free/butterflybrilliance.ziphttp://freehtml5templates.com/downloads/free/butterflybrilliance.ziphttp://freehtml5templates.com/downloads/free/butterflybrilliance.ziphttp://freehtml5templates.com/downloads/free/butterflybrilliance.ziphttp://www.binushacker.net/membuat-toggle-sederhana-css-dan-jquery.htmlhttp://www.binushacker.net/membuat-toggle-sederhana-css-dan-jquery.html


2/45


2

=[3]= Teh manis, camilan, rokok untuk menemanimembaca artikel ini, jangan lupa puter mp3 kesayangankalian untuk mebuat mood kalian oke.

======== Step 1 [ Pre Editing ] =========

Sebelum kita memulai mengerjakan membuat tema ini,alangkah baiknya jika kita mengenal dulu hirarki dalamtema wordpress itu.

===> Menurut wprainbow (wprainbow.com) dituliskanpada artikel

http://www.wprainbow.com/memahami-hirarki-theme-template-wordpress/

Disebut kan,Theme Template WordPress memiliki alur eksekusi

berdasarkan aturan tertentu. Artikel kali ini akanmembantu anda untuk memahami alur dari ThemeTemplate

Prasyarat yang dibutuhkan

Sebelum Anda meneruskan untuk membaca artikel ini,pastikan Anda telah membaca artikel saya sebelumnya yangberjudul Menggunakan File Theme Template dan MengenalAnatomi WordPress Theme.

Hirarki Theme Templates

Seperti yang telah kita tahu sebelumnya bahwa sebuahWordPress Theme minimal memiliki 2 file yaitu style.cssdan index.php maka ketika sebuah WordPress Theme tidakmemiliki file Theme Template diatas, maka akan digantikanfungsinya oleh Theme Template lainnya berdasarkanurutan hierarki yang telah ditentukan oleh WordPress.
http://www.wprainbow.com/memahami-hirarki-theme-template-wordpress/http://www.wprainbow.com/memahami-hirarki-theme-template-wordpress/http://www.wprainbow.com/memahami-hirarki-theme-template-wordpress/http://www.wprainbow.com/memahami-hirarki-theme-template-wordpress/http://www.wprainbow.com/memahami-hirarki-theme-template-wordpress/


3/45


3

Misal ketika pengunjung mengakses blog, maka engineWordPress pertama kali akan mencari file Theme Templatehome.php. Jika WordPress Theme yang aktif sekarang tidak

memiliki file home.php maka yang akan digunakan adalahfile index.php. Contoh lain ketika pengunjung membukaCategory tertentu maka yang pertama kali dicari olehengine WordPress adalah file category-id.php, jika tidakditemukan maka file category.php-lah yang akandigunakan, jika masih tidak ditemukan maka filearchieve.php. Terakhir jika masih belum ditemukan makaakan menggunakan file index.php.

Berikut ini bagan hirarki wordpress:


4/45


4

======== Step 2 [ Editing ] =========

Setelah kalian tadi download template html nya, sekarangextract dalam folder,seperti yang terpampang di bagan diatas, kita bisamengambil kesimpulan, hirarki tema wordpress palingpaling sederhana, berikut susuannya.

1. Style.css2. index.php

3. footer.php4. header.php5. comments.php6. single.php7. page.php8. archive.php9. functions.php

Itu lah susunan yang akan kita pakai sebagai dasarnya,

Sekarang kita cek tema html yang tadi kita downloadapakah sudah ada

file file yang kita butuh kan itu atau belum? Yangpastinya belum, maka tugas kita selanjutnya adalahmembuat file yang belum ada.

File yang sudah ada hanyalah style.css, maka untuk file

yang lainya kita buat terlebih dahulu, sekarang buat file ber-extensi *php dari notepad, buat satu file text document dan save as index.php

Setelah itu kita copy paste file index.php itu, buat 6 lagi,dan rename menjadifooter,header,single,page,comments,functions dan archieve.

Tugas kita selanjutnya, adalah mengisi


5/45


5

header.phpSekarang buka file

index.html yang disertakan di temlpate html tadi,

open with notepad.

berikut isi dari index.html

ButterflyBrilliance


6/45


6

Butterfly Brilliance

Your interesting tag line goes here

Home

About

Products

Services

Support

Contact Us

First Article Title


7/45


7

lacinia arcu eget nulla. Class aptent taciti sociosqu ad litoratorquent per conubia nostra, per inceptos himenaeos.Curabitur sodales ligula in libero. Sed dignissim lacinia

nunc. Fusce nec tellus sed augue semper porta. Maurismassa. Vestibulum lacinia arcu eget nulla. Class aptenttaciti sociosqu ad litora torquent per conubia nostra, perinceptos himenaeos.

Second Article Title


8/45


8

Buy StuffTrade Stuff

Sponsors

Connect With UsTwitterFacebook

Friends

one linkylinktwo linkylinksthree linkylinks

Awesome Stuffone linkylinktwo linkylinksthree linkylinks

Coolnessone linkylink


9/45


9

two linkylinksthree linkylinks

Blahdyblah

2010 yoursite.com Praesentlibero. Sed cursus ante dapibus diam. Sed nisi.

Setelah terlihat isi indexnya, kita copypaste kedalam header.php

Berikut source yang akan kita copas.

ButterflyBrilliance


10/45


10

Butterfly BrillianceYour interesting tag line goes here

HomeAboutProductsServices

SupportContact Us

Sekarang tinggal kita edit source yang ada supaya dapat

berjalan di blog wordpress kita,

Seperti yang kita liat di tag diatas, tag itu tidak akan dieksekusi oleh wp engine, sekarang kita ubah sedikit agardapat berjalan di blog wp kita

Tertulis disana href=styles.css jika dalam wordpress

tag yang digunakan untuk memanggile style.css sepertiini maka dari itu,tulisan style.css kita ganti dengan tag diatas.,, maka akanmenjadi seperti ini


11/45


11

Maka untuk memanggilnya kita gunakan tag kedua,/print.css media=print />

Oke, setelah itu kita sisipkan tag

Sebelum Setelah itu kita SAVE.Hasil akhirnya seperti ini

ButterflyBrilliance/ print.cssmedia=print />


Home


12/45


12

AboutProductsServices

SupportContact Us

Sebelum kita lanjut pada tahap selanjutnya, sedikit akansaya bahas apa saja sih yang bisa dimasukan kedalahheader.php ini??

Disini kita bisa sisipkan favicon.Contoh pemanggilan faviconya seperti ini/favicon.ico />

Untuk perjumpaan yang sekarang saya cukupkan sampai

disini dulu, udah magrib, saatnya saya untuk mandi dansolat, so kita lanjutkan pada perjumpaan yang selanjutnya..Oke, have a niceday and GBUPART 2

Oke kawan, selamat morning, kali ini kita akanmembahas Belajar Membuat Theme WordPress Part2.Kita awali pagi dengan senyuman, oke


13/45


13

Oke, sebelum kita lanjutkan pembahasan yangkemaren,http://www.binushacker.net/belajar-membuat-theme-wordpress-p1.html, mungkin diantara kalian yang

membaca dan menyimak tutor ini bertanya tanya, kenapatag html nya berbeda dari html yang biasa kita jumpai?

Jadi begini kawan, dunia internet semakin berkembang,dan para developer web pun mengembangkan sourcesupaya lebih mudah dan simple, maka dari itu, sedikit demisedikit saya akan membiasakan dalam tutor desain yangsaya berikan itu menggunakan HTML5+css3, karenadalam dalam dunia webdis (web desain) source ini sedang

di gandrungiOke, sekarang kita lanjut ke step selanjutnya.

Setelah kemaren kita membuat fileheader.phpSekarang kita akan membuat pasanganya,yaitu footer.php

Sedikit kita review tag index yang kemaren

ButterflyBrilliance

http://www.binushacker.net/belajar-membuat-theme-wordpress-p1.htmlhttp://www.binushacker.net/belajar-membuat-theme-wordpress-p1.htmlhttp://www.binushacker.net/belajar-membuat-theme-wordpress-p1.htmlhttp://www.binushacker.net/belajar-membuat-theme-wordpress-p1.htmlhttp://www.binushacker.net/belajar-membuat-theme-wordpress-p1.htmlhttp://www.binushacker.net/belajar-membuat-theme-wordpress-p1.htmlhttp://www.binushacker.net/belajar-membuat-theme-wordpress-p1.htmlhttp://www.binushacker.net/belajar-membuat-theme-wordpress-p1.htmlhttp://www.binushacker.net/belajar-membuat-theme-wordpress-p1.htmlhttp://www.binushacker.net/belajar-membuat-theme-wordpress-p1.html


14/45


14

HomeAboutProductsServicesSupportContact Us

>

First Article Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Integer nec odio. Praesent libero. Sed cursus ante dapibusdiam. Sed nisi. Nulla quis sem at nibh elementumimperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nectellus sed augue semper porta. Mauris massa. Vestibulumlacinia arcu eget nulla. Class aptent taciti sociosqu ad litoratorquent per conubia nostra, per inceptos himenaeos.Curabitur sodales ligula in libero. Sed dignissim lacinianunc. Fusce nec tellus sed augue semper porta. Maurismassa. Vestibulum lacinia arcu eget nulla. Class aptenttaciti sociosqu ad litora torquent per conubia nostra, perinceptos himenaeos.


Loremipsum dolor sit amet, consectetur adipiscing elit. Integernec odio. Praesent libero. Sed cursus ante dapibus diam.


15/45


15

Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duissagittis ipsum. Praesent mauris. Fusce nec tellus sed auguesemper porta. Mauris massa. Vestibulum lacinia arcu eget

nulla. Class aptent taciti sociosqu ad litora torquent perconubia nostra, per inceptos himenaeos. Curabitur sodalesligula in libero. Sed dignissim lacinia nunc. Duis sagittisipsum. Praesent mauris. Fusce nec tellus sed augue semperporta. Mauris massa. Vestibulum lacinia arcu eget nulla.Class aptent taciti sociosqu ad litora torquent per conubianostra, per inceptos himenaeos.

Duis sagittis ipsum. Praesent mauris. Fusce nec tellus

sed augue semper porta. Mauris massa. Vestibulum laciniaarcu eget nulla. Class aptent taciti sociosqu ad litoratorquent per conubia nostra, per inceptos himenaeos.

Things To Do

Play GamesChat With FriendsSwap StoriesSell StuffBuy StuffTrade Stuff

Sponsors



16/45


16

Friendsone linkylinktwo linkylinksthree linkylinks


Coolnessone linkylinktwo linkylinksthree linkylinks

Blahdyblah

2010 yoursite.com Praesentlibero. Sed cursus ante dapibus diam. Sed nisi.


17/45


17

Dari source diatas kita akan ambil bagian footernya,Here we go..





18/45


18

Blahdyblah

2010 yoursite.com Praesent

libero. Sed cursus ante dapibus diam. Sed nisi.

Dalam footer ini ga ada yang aneh, secara keseluruhanhampir sama dengan header, so just place this codebefore ,Berikut fungsiwp_footer menurut

http://www.wpdesigner.comThewp_footer() function is often used by plugins to

insert PHP codes after everything else on your page.According to WordPress.org theme developmentdocumentation, you should place the wp_footer() functionin the footer, which would be in the footer.php file.

One detail that WordPress.org doesnt mention is thatmost plugins (i.e: Spam Karma 2, PodPress, and FireStats),using the wp_footer() function, tend to break your theme. Awell-designed and well-built theme is nothing without a

safely placed wp_footer() function.Heres my advice. Dont place the wp_footer() function

right before the end; thats usually the closing body tag.Instead, place that function within a DIV or container. Forexample:

PostsSidebar
http://www.wpdesigner.com/2007/05/30/where-exactly-should-you-place-wp_footer/http://www.wpdesigner.com/2007/05/30/where-exactly-should-you-place-wp_footer/http://www.wpdesigner.com/2007/05/30/where-exactly-should-you-place-wp_footer/


19/45


19

If you do that, no matter what a certain plugin does tothe footer of your theme, it doesnt expand beyond thecontainer or DIV containing the wp_footer() function. You

can open up the footer.php file of the Greed theme for anexample.

Update:Place the wp_footer() function within a style-less container(usually the outermost div with no backgrounds andimages) that your layout doesnt depend on. Otherwise, youmight end up with an incomplete layout while waiting for aslow loading plugin.

Jadi secara harfiah fungsi dariwp_footer adalahsebagai tolak ukur penggunaan plug-in jika ingin plug-innya itu berjalan seperti sebagai mana mestinya.Jadi final source untuk footer.php ada lahah seperti ini.




20/45


20

Coolness

one linkylinktwo linkylinksthree linkylinks

Blahdyblah



http://freehtml5templates.com >

So thats all our leason for today, hope you understand.And than have a great day and GBUSee ya in next step.

PS: Untuk berdiskusi silakan

ke:http://forum.binushacker.netPART 3

Malam, begadang nih, dari pada ga ada kerjaan mendingkita lanjutin materi yang sebelumnya gue bahas yaitumembuat footer.phplangsung aja dah,
http://forum.binushacker.net/http://forum.binushacker.net/http://forum.binushacker.net/http://forum.binushacker.net/


21/45


21

Step selanjutnya adalah membuat isian dari index.phpSebelumnya kita ulas dulu isidari header.php dan footer.php

header.php

ButterflyBrilliance/ print.css

media=print />

Butterfly Brilliance

Your interesting tag line goes here

HomeAboutProductsServices


22/45


22

SupportContact Us

footer.php





23/45


23

Blahdyblah



http://freehtml5templates.com >

Oke sekarang kita buat index nya, bukafile index.php nyaDan masukan 2 code ini:

Sekarang buka file index.html dari tema yang kemarenkita download dan copy paste code ini di antara keduacode diatas,dan hasilnya seperti ini.

First Article Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.Integer nec odio. Praesent libero. Sed cursus ante dapibusdiam. Sed nisi. Nulla quis sem at nibh elementumimperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nectellus sed augue semper porta. Maurismassa.Vestibulumlacinia arcu eget nulla. Class aptenttaciti sociosqu ad litora torquent per conubia nostra, perinceptos himenaeos. Curabitur sodales ligula in libero. Sed
http://www.binushacker.net/http://www.binushacker.net/http://www.binushacker.net/http://www.binushacker.net/


24/45


24

dignissim lacinia nunc. Fusce nec tellus sed augue semperporta. Mauris massa. Vestibulum lacinia arcu eget nulla.Class aptent taciti sociosqu ad litora torquent per conubia

nostra, per inceptos himenaeos.


Loremipsum dolor sit amet, consectetur adipiscing elit. Integernec odio. Praesent libero. Sed cursus ante dapibus diam.Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis

sagittis ipsum. Praesent mauris. Fusce nec tellus sed auguesemper porta. Mauris massa. Vestibulum lacinia arcu egetnulla. Class aptent taciti sociosqu ad litora torquent perconubia nostra, per inceptos himenaeos. Curabitur sodalesligula in libero. Sed dignissim lacinia nunc. Duis sagittisipsum. Praesent mauris. Fusce nec tellus sed augue semperporta. Mauris massa. Vestibulum lacinia arcu eget nulla.Class aptent taciti sociosqu ad litora torquent per conubia

nostra, per inceptos himenaeos.

Duis sagittis ipsum. Praesent mauris. Fusce nec tellussed augue semper porta. Maurismassa. Vestibulum laciniaarcu eget nulla. Class aptent taciti sociosqu ad litoratorquent per conubia nostra, per inceptos himenaeos.

Things To DoPlay GamesChat With FriendsSwap StoriesSell StuffBuy StuffTrade Stuff
http://www.binushacker.net/http://www.binushacker.net/http://www.binushacker.net/


25/45


25

Sponsors


Sampai disini sebenarnya template ini sudah siap dites (tapi belum layak pakai)Tugas kita selanjutnya adalah menampilkan hasil daripostingan kita.

Seperti yang tertulis dari code index diatas, disanaterdapat dua tag article, kita buang saja satu,Hasilnya seperti ini:

First Article Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.Integer nec odio. Praesent libero. Sed cursus ante dapibusdiam. Sed nisi. Nulla quis sem at nibh elementumimperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nectellus sed augue semper porta. Mauris massa. Vestibulum

lacinia arcu eget nulla. Class aptent taciti sociosqu ad litoratorquent per conubia nostra, per inceptos himenaeos.Curabitur sodales ligula in libero. Sed dignissim lacinianunc. Fusce nec tellus sed augue semper porta. Maurismassa. Vestibulum lacinia arcu eget nulla. Class aptenttaciti sociosqu ad litora torquent per conubia nostra, perinceptos himenaeos.


26/45


26

Things To Do


Sponsors


Sekarang kita akan memasangkanjamu pemanggilpostingan kita,Here we go..

Kita pasangkan di tag article kita, final code is right here.


27/45


27

Jadi hasil dari kerja kita malam ini menghasilkansource index.php seperti ini:

Things To Do



28/45


28

Sponsors


Untuk sekarang di cukupkan dulu, kita akan lanjutkannanti pada tahap pembuatan single.phpSo keep stay inwww.BinusHacker.netfor more useablearticle.Good nite and have a great dream to night.

See yaPART 4

Yah baru sempet posting lagi.. beberapa hari ini agak

disibukan ma tunggakan tugas yang udah musti kelar buatsarat ikut UAS, ditambah lagi repot beresin porumkomunitas, tutor nya jadi terbengkalai dah.

Berhubung hutang itu harus di bayar, jadi ane lanjutin

lagi dah tutor nyaMungkin dari kalian semua ada yang berpendapatkenapa tutor nya ga disatuin aja, kenapa musti dibagi bagigini??gini gan, dulu ane pernah singgah disalah satu blog tutor,disana menerapkan one week one content.dan itu ternyataberhasil, karena kita akan lebih fokus dalam satu ulasan itu,tanpa terpengaruh oleh yang lain, nah konsep seperti itu

mulai ane terapin dihampir semua site garapan ane,ane
http://www.binushacker.net/http://www.binushacker.net/http://www.binushacker.net/http://www.binushacker.net/


29/45


29

harap sih, kalian semua bisa menerima cara penyampaianyang ane jalankan, sukur sukur agan semua kaga puasdengan apa yang udah ane sampein, jadi bisa bertanya dan

lebih ngulik lagi soal bahasanya, tambah banyak kantambah ilmu. right?

Lanjut setelah kemaren kita buat index.php..http://www.binushacker.net/belajar-membuat-theme-wordpress-p3.html

Enaknya kita ngelancong kemana dulu ya??Yang pendek pendek dulu aja kalia ya.. oke deh,, hari inikita akan bahas sidebar.php

Sebelum nya review dulu isian dari idex.phpindex.php

Things To DoPlay GamesChat With FriendsSwap StoriesSell Stuff

Buy Stuff
http://www.binushacker.net/belajar-membuat-theme-wordpress-p3.htmlhttp://www.binushacker.net/belajar-membuat-theme-wordpress-p3.htmlhttp://www.binushacker.net/belajar-membuat-theme-wordpress-p3.htmlhttp://www.binushacker.net/http://www.binushacker.net/http://www.binushacker.net/belajar-membuat-theme-wordpress-p3.htmlhttp://www.binushacker.net/belajar-membuat-theme-wordpress-p3.html


30/45


30

Trade Stuff

Sponsors


Dalam html5, sudah disediakan tag sidebar, yaitu aside

jadi kita buka file sidebar.phpdan index.php nya,

Cut code ini dari index.php

Things To Do


Sponsors

http://www.binushacker.net/http://www.binushacker.net/


31/45


31

Dan paste-kan di sidebar.phpSekarang buka lagi file index.php nya, kita akan

masukan tak pemanggil sidebar.

Here we go.

Nah, sekarang pasang fungsi itu di index.phpJadinya seperti ini.

Setelah itu save file index.phpnya, sekarang bukafile sidebar.phpNah berikut fungsi yang biasa diisikan di file sidebar.php

1.

2.3.4.


32/45


32

Fungsi diatas masih bisa agan semua modifikasilagi,silakanlihathttp://codex.wordpress.org/Customizing_Your_Sideb

arjika ingin mengetahui lebih dalam tentang costumasisidebar. untuk sekarang saya hanya akan menggunakansebagian saja biar tidak riweuh wkwkwk

Ini hasil akhir untuk file sidebar.php

Save and doneOke cukup dulu ah....

Mau lanjut lagi ngerjain makalah. so keep [email protected] see ya.GBU

PART 5
http://codex.wordpress.org/Customizing_Your_Sidebarhttp://codex.wordpress.org/Customizing_Your_Sidebarhttp://codex.wordpress.org/Customizing_Your_Sidebarhttp://codex.wordpress.org/Customizing_Your_Sidebarhttp://www.binushacker.net/http://www.binushacker.net/http://www.binushacker.net/http://www.binushacker.net/http://www.binushacker.net/http://www.binushacker.net/http://www.binushacker.net/http://codex.wordpress.org/Customizing_Your_Sidebarhttp://codex.wordpress.org/Customizing_Your_Sidebarhttp://codex.wordpress.org/Customizing_Your_Sidebar


33/45


33

Yang langsung nyantol di link ini, nih ane kasih part partsebelum mulai beranjak untuk membaca part 5 ini. silakandi pelajari dan di komentari

Kemaren kita udah buat file sidebar.php, danberhubung sekarang waktu ane sangat sangat singkat

banget, jadi kita mulai dengan hal file yang simple dulu kaliyeOke yang sekarang akan kita bahas adalah membuat

file comments.phpBerhubung ane sendiri sampe sekarang masih agak

bingung tentang costumasi file comments.php jadi anekasih mentahnya aja untuk kalian copas difile comments.php yang sebelumnya telah kita buat.

Silakan pastekan function ini di comments.php

This post is password protected. Enter the passwordto view comments.


34/45


34

/* This variable is for alternating comment background*/$oddcomment = ;

?>

Comments

Comments are closed.

Post a comment

You must be >logged in to post acomment.


35/45


35

Logged in as .

/>Name

/>

Mail (will not be published)

XHTML: You can

use these tags:
>


36/45


36

Dari pengalaman ane selama ini mengostumasifile comments.php, ane hanya mengetahui beberapa dariratusan bahkan ribuat trik untuk membuat menarikcomments kalian

Kalian bisa mempercantik tag tag html nya denganmengcostumasinya di style.css

So thats it for today.Semoga kalian tidak puas dan terus bertanya.Stay connect with us @http://www.binushacker.netAnd forum @ http://forum.binushacker.netSee ya and have a nice day

PART 6

Yo yo yo. selamat malam kawan semuanya. mari kitalanjutkan pembelajaran kita pada pembahasan pembuatantema wordpress.

Ga kerasa sekarang itu udah memasuki tuto yang part 6,Yang sekarang akan kita bahas adalah cara membuat

file single.php, oh iye, tutor ini ane dah susun mulai daridepan hingga belakang secara berurutan, seperti pada part 1kita membahas membuat header, dan footer pada part 2,dilanjutkan dengan index pada part 3, disusul oleh sidebarpada part 4, dan comments pada part 5, jadi menuruthemat saya, maka selanjutnya adalah single, so lets start.pada dasarnya, single.php itu sama dengan index.phphanya saja ada beberapa tambahan pada page single. sepertikomentar, similiar post, etc.
http://www.binushacker.net/http://www.binushacker.net/http://www.binushacker.net/http://forum.binushacker.net/http://forum.binushacker.net/http://forum.binushacker.net/http://www.binushacker.net/


37/45


37

Jadi untuk membuat single.php kita buka dulufile index.phpDan copas isinya ke single.php.

Berikut adalah isi dariindex.phprenewal yang udah direfisi pada part 4,

Nah sekarang tambah kancodepemanggil commentBerikut code nya
http://www.binushacker.net/http://www.binushacker.net/http://www.binushacker.net/http://www.binushacker.net/http://www.binushacker.net/http://www.binushacker.net/http://www.binushacker.net/http://www.binushacker.net/


38/45


38

Letakan sebelum endwhile, maka hasil akhirnya sepertiini

Save code diatas dengan nama single.php,Mudah kan.. oke sekarang mah belajarnye pendek pendekaje dulu ye.. cz takut muntah klo di jejelin bejibun codedalam sekali lahap, Pelan pelan aje ye, supaya tar kalianpada bisa dan berkarya dengan ilmu,,

So thats it for today..Ill teach you all in next meeting..

Have a great day, and see yaNB : keep learning and join us @forum.binushacke.netPART 7

Selamat malam semuanye pa kabar nih?? bertemu lagidengan angga a.k.a anggamovic, setelah kemaren kita buatfile single.php sekarang kita akan membahaspage.php
http://forum.binushacke.net/http://forum.binushacke.net/http://forum.binushacke.net/http://www.binushacker.net/http://www.binushacker.net/http://www.binushacker.net/http://www.binushacker.net/http://forum.binushacke.net/


39/45


39

Sebenernye sama ajadengan single.php cuma page.php ini akan didipakesebagai default page yang kita buat.

Sekarang kita buka lagi file single.php nya.. dan copy

semua source yang ada, copas ke file page.phpMaka filepage.phpakan menjadi seperti ini

Ada satu lagi trik di file page.php ini. ane nemu trik inisetelah beberapa waktu lalu ane mau buat page galery diblog ane, tapi rasanya canggung klo pake template pagebawaan tema. makanya ane cari sumber lain dan ga jauhjauh.. ketemunye di instalanwordpressjuga, tepatnye ditema bawaan wordpress.. nah hal yang perlu kalian

tambahkan untuk membuat page yang kalian ingin kan dan
http://www.binushacker.net/http://www.binushacker.net/http://www.binushacker.net/http://www.binushacker.net/http://www.binushacker.net/http://www.binushacker.net/http://www.binushacker.net/http://www.binushacker.net/


40/45


40

pastinya beda dari page.php yang ada. silakan kalianmodifikasi sebagus mungkin file page.php nya. setelah itusave as, ubah namanya terserah kalian, disini saya kasih

contoh galery.php nah setelah itu kalian tambah kan codeini tepat di atas

Berikut codenya

Nah jadinya seperti ini


41/45


41

Oke untuk kostumasinya saya akan tampilkan jikatutorial ini sudah selesai dan tema hasil buatan kita ..

So have a nice day and nice day

Dont Forget To Join Forum BinusHackerhttp://forum.binushacker.netPART 8

Seperti yang sudah ane janjiin dulu di pagenyaB|Hdifacebook bahwa ane akan bahas tentangfunctions.php diwordpress, nah pertemuan sekarang ane akan sedikitmengulas tentang functions.php, padadasarnya functions.php adalah file yang berisi perintah

tambahan untuk blog kita. dan disini kita bisa melakukansegala hal untukblogkita. bisa dibilang ini adalah nyawaketiga blog kita setelah hosting dan theme.

So lets beginCompletely remove the version number from

pages and feeds

// remove version info from head and feedsfunction complete_version_removal() {return ;}add_filter(the_generator, complete_version_removal);

Customize the admin footer message// customize admin footer text

function custom_admin_footer() {

echo Website Design by Monzilla Media;
http://forum.binushacker.net/http://forum.binushacker.net/http://www.binushacker.net/http://www.binushacker.net/http://www.binushacker.net/http://www.binushacker.net/http://www.binushacker.net/http://www.binushacker.net/http://www.binushacker.net/http://www.binushacker.net/http://forum.binushacker.net/


42/45


42

}add_filter(admin_footer_text, custom_admin_footer);

Enable delete and spam links for comments// spam & delete links for all versions of wordpressfunction delete_comment_link($id) {if (current_user_can(edit_post)) {echo | del ;echo | spam;}}

dan tambah kan ini di cooments loop nyaDisable all WordPress feeds// disable all feeds

function fb_disable_feed() {wp_die(__(

Feed not available, please visit ourHome Page!

));}add_action(do_feed, fb_disable_feed, 1);add_action(do_feed_rdf, fb_disable_feed, 1);add_action(do_feed_rss, fb_disable_feed, 1);add_action(do_feed_rss2, fb_disable_feed, 1);add_action(do_feed_atom, fb_disable_feed, 1);

Add feed links to header// add feed links to headerif (function_exists(automatic_feed_links)) {automatic_feed_links();} else {return;}

Enable threaded comments


43/45


43

// enable threaded commentsfunction enable_threaded_comments(){if (!is_admin()) {

if (is_singular() AND comments_open() AND(get_option(thread_comments) == 1))wp_enqueue_script(comment-reply);}}add_action(get_header, enable_threaded_comments);

Remove unwanted crap from the head section// remove junk from head

remove_action(wp_head, rsd_link);remove_action(wp_head, wp_generator);remove_action(wp_head, feed_links, 2);remove_action(wp_head, index_rel_link);remove_action(wp_head, wlwmanifest_link);remove_action(wp_head, feed_links_extra, 3);remove_action(wp_head, start_post_rel_link, 10, 0);remove_action(wp_head,parent_post_rel_link, 10, 0);

remove_action(wp_head, adjacent_posts_rel_link, 10,0);

Add a different favicon for your blogs Admin

area

// add a favicon for your adminfunction admin_favicon() {echo ;}add_action(admin_head, admin_favicon);
http://www.binushacker.net/http://www.binushacker.net/http://www.binushacker.net/


44/45


44

Custom Admin Login logo// custom admin login logo

function custom_login_logo() {

echo h1 a { background-image:url(.get_bloginfo(template_directory)./images/custom-login-logo.png) !important; };}add_action(login_head, custom_login_logo);

Disable unused widget areas// disable all widget areas

function disable_all_widgets($sidebars_widgets) {//if (is_home())$sidebars_widgets = array(false);return $sidebars_widgets;}add_filter(sidebars_widgets, disable_all_widgets);

Kill the WordPress update nag// kill the admin nagif (!current_user_can(edit_users)) {add_action(init, create_function($a,remove_action(init, wp_version_check);), 2);add_filter(pre_option_update_core, create_function($a,return null;));}

Sekarang tinggal di masukan kepadafile functions.php dan walah,, jadilah tema yang selamaini jadi tutorial kita.. untuk demo nya menyusul ya, czbelum ane susun

Keep stay atbinushacker.netandforum.binushacker.net
http://www.binushacker.net/http://www.binushacker.net/http://www.binushacker.net/http://forum.binushacker.net/http://forum.binushacker.net/http://forum.binushacker.net/http://forum.binushacker.net/http://www.binushacker.net/


45/45

45

About The Author

Anggamovic atau yang lebih suka

menggunakan alias sebagai anggamovicadalah seorang web designer dan seorang

pengembang wordpress dan buddypress,

Pria kelahiran 15 juni 1991 ini juga seorang

mahasiswa di sebuah politeknik di kota

Cirebon, ke cintaannya kedalam dunia web

diawali ketika dia bertemu dengan mata

kuliah web design, dan dari sanalah dia

mengenal istilah hacking, selama ini yang menjadi tujuan nya dalamdunia cyber adalah memberikan sesuatu yang bermanfaat kepada

khalayak dengan apa yang dia bisa, hacking menurut paham dia

adalah seorang yang paham akan dunia cyber dan menghasilkan

sesuatu yang bermanfaat seperti yang pernah dia pelajari dalam

web design pada bab bab awal yang membahas tentang hacker,

hacking cracker, dan cracking yang membuat mata nya terbuka akan

apa arti dari hack itu sendiri.

63077436 Belajar Membuat Tema Wordpress

Documents

Transcript of 63077436 Belajar Membuat Tema Wordpress