63077436 belajar membuat tema wordpress
TRANSCRIPT
-
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 -
7/31/2019 63077436 Belajar Membuat Tema Wordpress
2/45
A+ Labs, pc33 and B|H present | Cara membuat teme wordpress by anggamovic
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/ -
7/31/2019 63077436 Belajar Membuat Tema Wordpress
3/45
A+ Labs, pc33 and B|H present | Cara membuat teme wordpress by anggamovic
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:
-
7/31/2019 63077436 Belajar Membuat Tema Wordpress
4/45
A+ Labs, pc33 and B|H present | Cara membuat teme wordpress by anggamovic
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
-
7/31/2019 63077436 Belajar Membuat Tema Wordpress
5/45
A+ Labs, pc33 and B|H present | Cara membuat teme wordpress by anggamovic
5
header.phpSekarang buka file
index.html yang disertakan di temlpate html tadi,
open with notepad.
berikut isi dari index.html
ButterflyBrilliance
-
7/31/2019 63077436 Belajar Membuat Tema Wordpress
6/45
A+ Labs, pc33 and B|H present | Cara membuat teme wordpress by anggamovic
6
Butterfly Brilliance
Your interesting tag line goes here
Home
About
Products
Services
Support
Contact Us
First Article Title
-
7/31/2019 63077436 Belajar Membuat Tema Wordpress
7/45
A+ Labs, pc33 and B|H present | Cara membuat teme wordpress by anggamovic
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
-
7/31/2019 63077436 Belajar Membuat Tema Wordpress
8/45
A+ Labs, pc33 and B|H present | Cara membuat teme wordpress by anggamovic
8
Buy StuffTrade Stuff
Sponsors
Connect With UsTwitterFacebook
Friends
one linkylinktwo linkylinksthree linkylinks
Awesome Stuffone linkylinktwo linkylinksthree linkylinks
Coolnessone linkylink
-
7/31/2019 63077436 Belajar Membuat Tema Wordpress
9/45
A+ Labs, pc33 and B|H present | Cara membuat teme wordpress by anggamovic
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
-
7/31/2019 63077436 Belajar Membuat Tema Wordpress
10/45
A+ Labs, pc33 and B|H present | Cara membuat teme wordpress by anggamovic
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
-
7/31/2019 63077436 Belajar Membuat Tema Wordpress
11/45
A+ Labs, pc33 and B|H present | Cara membuat teme wordpress by anggamovic
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 />
Butterfly BrillianceYour interesting tag line goes here
Home
-
7/31/2019 63077436 Belajar Membuat Tema Wordpress
12/45
A+ Labs, pc33 and B|H present | Cara membuat teme wordpress by anggamovic
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
-
7/31/2019 63077436 Belajar Membuat Tema Wordpress
13/45
A+ Labs, pc33 and B|H present | Cara membuat teme wordpress by anggamovic
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
Butterfly BrillianceYour interesting tag line goes here
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 -
7/31/2019 63077436 Belajar Membuat Tema Wordpress
14/45
A+ Labs, pc33 and B|H present | Cara membuat teme wordpress by anggamovic
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.
Second Article Title
Loremipsum dolor sit amet, consectetur adipiscing elit. Integernec odio. Praesent libero. Sed cursus ante dapibus diam.
-
7/31/2019 63077436 Belajar Membuat Tema Wordpress
15/45
A+ Labs, pc33 and B|H present | Cara membuat teme wordpress by anggamovic
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
Connect With UsTwitterFacebook
-
7/31/2019 63077436 Belajar Membuat Tema Wordpress
16/45
A+ Labs, pc33 and B|H present | Cara membuat teme wordpress by anggamovic
16
Friendsone linkylinktwo linkylinksthree linkylinks
Awesome Stuffone linkylinktwo linkylinksthree linkylinks
Coolnessone linkylinktwo linkylinksthree linkylinks
Blahdyblah
2010 yoursite.com Praesentlibero. Sed cursus ante dapibus diam. Sed nisi.
-
7/31/2019 63077436 Belajar Membuat Tema Wordpress
17/45
A+ Labs, pc33 and B|H present | Cara membuat teme wordpress by anggamovic
17
Dari source diatas kita akan ambil bagian footernya,Here we go..
Friendsone linkylinktwo linkylinksthree linkylinks
Awesome Stuffone linkylinktwo linkylinksthree linkylinks
Coolnessone linkylinktwo linkylinksthree linkylinks
-
7/31/2019 63077436 Belajar Membuat Tema Wordpress
18/45
A+ Labs, pc33 and B|H present | Cara membuat teme wordpress by anggamovic
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/ -
7/31/2019 63077436 Belajar Membuat Tema Wordpress
19/45
A+ Labs, pc33 and B|H present | Cara membuat teme wordpress by anggamovic
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.
Friendsone linkylinktwo linkylinksthree linkylinks
Awesome Stuffone linkylinktwo linkylinksthree linkylinks
-
7/31/2019 63077436 Belajar Membuat Tema Wordpress
20/45
A+ Labs, pc33 and B|H present | Cara membuat teme wordpress by anggamovic
20
Coolness
one linkylinktwo linkylinksthree linkylinks
Blahdyblah
2010 yoursite.com Praesent
libero. Sed cursus ante dapibus diam. Sed nisi.
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/ -
7/31/2019 63077436 Belajar Membuat Tema Wordpress
21/45
A+ Labs, pc33 and B|H present | Cara membuat teme wordpress by anggamovic
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
-
7/31/2019 63077436 Belajar Membuat Tema Wordpress
22/45
A+ Labs, pc33 and B|H present | Cara membuat teme wordpress by anggamovic
22
SupportContact Us
footer.php
Friendsone linkylinktwo linkylinksthree linkylinks
Awesome Stuffone linkylinktwo linkylinksthree linkylinks
Coolnessone linkylinktwo linkylinksthree linkylinks
-
7/31/2019 63077436 Belajar Membuat Tema Wordpress
23/45
A+ Labs, pc33 and B|H present | Cara membuat teme wordpress by anggamovic
23
Blahdyblah
2010 yoursite.com Praesent
libero. Sed cursus ante dapibus diam. Sed nisi.
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/ -
7/31/2019 63077436 Belajar Membuat Tema Wordpress
24/45
A+ Labs, pc33 and B|H present | Cara membuat teme wordpress by anggamovic
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.
Second Article Title
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/ -
7/31/2019 63077436 Belajar Membuat Tema Wordpress
25/45
A+ Labs, pc33 and B|H present | Cara membuat teme wordpress by anggamovic
25
Sponsors
Connect With UsTwitterFacebook
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.
-
7/31/2019 63077436 Belajar Membuat Tema Wordpress
26/45
A+ Labs, pc33 and B|H present | Cara membuat teme wordpress by anggamovic
26
Things To Do
Play GamesChat With FriendsSwap StoriesSell StuffBuy StuffTrade Stuff
Sponsors
Connect With UsTwitterFacebook
Sekarang kita akan memasangkanjamu pemanggilpostingan kita,Here we go..
Kita pasangkan di tag article kita, final code is right here.
-
7/31/2019 63077436 Belajar Membuat Tema Wordpress
27/45
A+ Labs, pc33 and B|H present | Cara membuat teme wordpress by anggamovic
27
Jadi hasil dari kerja kita malam ini menghasilkansource index.php seperti ini:
Things To Do
Play GamesChat With FriendsSwap StoriesSell StuffBuy StuffTrade Stuff
-
7/31/2019 63077436 Belajar Membuat Tema Wordpress
28/45
A+ Labs, pc33 and B|H present | Cara membuat teme wordpress by anggamovic
28
Sponsors
Connect With UsTwitterFacebook
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/ -
7/31/2019 63077436 Belajar Membuat Tema Wordpress
29/45
A+ Labs, pc33 and B|H present | Cara membuat teme wordpress by anggamovic
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 -
7/31/2019 63077436 Belajar Membuat Tema Wordpress
30/45
A+ Labs, pc33 and B|H present | Cara membuat teme wordpress by anggamovic
30
Trade Stuff
Sponsors
Connect With UsTwitterFacebook
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
Play GamesChat With FriendsSwap StoriesSell StuffBuy StuffTrade Stuff
Sponsors
Connect With UsTwitterFacebook
http://www.binushacker.net/http://www.binushacker.net/ -
7/31/2019 63077436 Belajar Membuat Tema Wordpress
31/45
A+ Labs, pc33 and B|H present | Cara membuat teme wordpress by anggamovic
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.
-
7/31/2019 63077436 Belajar Membuat Tema Wordpress
32/45
A+ Labs, pc33 and B|H present | Cara membuat teme wordpress by anggamovic
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 -
7/31/2019 63077436 Belajar Membuat Tema Wordpress
33/45
A+ Labs, pc33 and B|H present | Cara membuat teme wordpress by anggamovic
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.
-
7/31/2019 63077436 Belajar Membuat Tema Wordpress
34/45
A+ Labs, pc33 and B|H present | Cara membuat teme wordpress by anggamovic
34
/* This variable is for alternating comment background*/$oddcomment = ;
?>
Comments
Comments are closed.
Post a comment
You must be >logged in to post acomment.
-
7/31/2019 63077436 Belajar Membuat Tema Wordpress
35/45
A+ Labs, pc33 and B|H present | Cara membuat teme wordpress by anggamovic
35
Logged in as .
/>Name
/>
Mail (will not be published)
XHTML: You can
use these tags:
> -
7/31/2019 63077436 Belajar Membuat Tema Wordpress
36/45
A+ Labs, pc33 and B|H present | Cara membuat teme wordpress by anggamovic
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/ -
7/31/2019 63077436 Belajar Membuat Tema Wordpress
37/45
A+ Labs, pc33 and B|H present | Cara membuat teme wordpress by anggamovic
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/ -
7/31/2019 63077436 Belajar Membuat Tema Wordpress
38/45
A+ Labs, pc33 and B|H present | Cara membuat teme wordpress by anggamovic
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/ -
7/31/2019 63077436 Belajar Membuat Tema Wordpress
39/45
A+ Labs, pc33 and B|H present | Cara membuat teme wordpress by anggamovic
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/ -
7/31/2019 63077436 Belajar Membuat Tema Wordpress
40/45
A+ Labs, pc33 and B|H present | Cara membuat teme wordpress by anggamovic
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
-
7/31/2019 63077436 Belajar Membuat Tema Wordpress
41/45
A+ Labs, pc33 and B|H present | Cara membuat teme wordpress by anggamovic
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/ -
7/31/2019 63077436 Belajar Membuat Tema Wordpress
42/45
A+ Labs, pc33 and B|H present | Cara membuat teme wordpress by anggamovic
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
-
7/31/2019 63077436 Belajar Membuat Tema Wordpress
43/45
A+ Labs, pc33 and B|H present | Cara membuat teme wordpress by anggamovic
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/ -
7/31/2019 63077436 Belajar Membuat Tema Wordpress
44/45
A+ Labs, pc33 and B|H present | Cara membuat teme wordpress by anggamovic
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/ -
7/31/2019 63077436 Belajar Membuat Tema Wordpress
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.