Penggunaan kod TEMPLATEPATH dan get_template_part adalah sama iaitu mengloadkan atau menyertakan satu file php di dalam satu file php yang lain yang berada di dalam folder yang sama. Biasanya kedua-kedua kod ini digunakan di dalam sebuah theme WordPress.

Biasanya TEMPLATEPATH digunakan untuk theme option dan kurang sesuai untuk digunakan diletakkan ke dalam theme secara direct. Sebabnya TEMPLATEPATH digunakan secara force, sekiranya file php itu gagal loading maka error 404 akan dihasilkan.

Get_template_part adalah coding terbaru sejak WordPress 3.0 yang digunakan secara besar-besaran dalam Twenty Ten Theme. Salah satu kelebihannya kita mampu memanggil file php yang mengandungi conditional tag loop seperti loop.php malah kita mampu apply kod get_template_part ke dalam child theme untuk memanggil child loop.php seperti loop-index.php, loop-category.php dan sebagainya.

Bagi saya, kod get_template_part memang best. Kod ini diloadkan secara parallel atau synchronous (serentak), bagus untuk loading page. Jika file yang diload gagal dipaparkan atau gagal dipanggil oleh server, page tersebut tidak akan memaparkan error 404 sebalik jadi page kosong berwarna putih seperti kertas A4.

Nik ada bagi saya satu rujukan yang agak baik dan saya akan tunjukkan rujukan itu sebagai contoh.

Berdasarkan rujukan itu, saya simplify kod itu jadi seperti di bawah. Kod di bawah ini menggunakan kod TEMPLATEPATH.

<?php include (TEMPLATEPATH . '/sidebar1.php'); ?>
<?php include (TEMPLATEPATH . '/sidebar2.php'); ?>

Berdasarkan kod tadi, saya ubah kod tersebut mengikut kod get_template_part.

<?php get_template_part('sidebar1.php'); ?>
<?php get_template_part('sidebar2.php'); ?>

Harap dapat membantu.

Rujukan: How Does get_template_part Works In Twenty Ten Theme

Ini adalah respond kepada Madlut dari entrinya Tutorial Twenty Ten : Menjadikan Header Sebagai Link Homepage.

Coding Bahagian A

Ini adalah code yang mengandungi coding header di dalam Twenty Ten Theme.

<?php
// Check if this is a post or page, if it has a thumbnail, and if it's a big one
if ( is_singular() &&
has_post_thumbnail( $post->ID ) &&
( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'post-thumbnail' ) ) &&
$image[1] >= HEADER_IMAGE_WIDTH ) :
// Houston, we have a new header image!
echo get_the_post_thumbnail( $post->ID, 'post-thumbnail' );
else : ?>
<img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" />
<?php endif; ?>

Perhatikan <!–?php endif ?–> . Ini adalah code fallback bagi sesuatu function dibuat. Tanpa code ini, coding akan break dan theme akan gagal berfungsi.

Ceraian Coding Bahagian A Lebih Mendalam

<?php
// Check if this is a post or page, if it has a thumbnail, and if it's a big one
if ( is_singular() &&
has_post_thumbnail( $post->ID ) &&
( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'post-thumbnail' ) ) &&
$image[1] >= HEADER_IMAGE_WIDTH ) :
// Houston, we have a new header image!
echo get_the_post_thumbnail( $post->ID, 'post-thumbnail' );

Coding di atas ini menyatakan condition di mana gambar thumbnail (Diset melalui Featured Image ketika membuat post/entry) akan mengantikan gambar header pada homepage. Gambar thumbnail akan dipaparkan pada halaman single.php atau page.php. Coding di atas berakhir boleh diakhiri endif tetapi coding di atas diakhiri else: yang bermaksud sekiranya coding di atas ini gagal, wordpress akan memproses coding yang berada selepas else: dan coding sebelum endif. Coding di bawah ini adalah coding di antara else: dan endif:

<img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" />

Coding ini pula adalah coding yang memproses image header yang sering kita lihat pada setiap halaman page dalam Twenty Ten Theme. Image header dipilih melalui paparan Header Image pada panel Appearance.

Coding Bahagian B

Untuk membuat header sebagai header yang clickable yang boleh terus link ke homepage, saya akan gunakan coding yang sedia ada dalam header.php Twenty Ten Theme.

<a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>

<?php bloginfo( ‘name’ ); ?> dalam Coding Bahagian B akan digantikan dengan Coding Bahagian A tetapi tidak semudah itu. Akan tetapi, kita akan gantikan dengan Ceraian Coding Bahagian A.

Untuk Coding Pertama Ceraian Bahagian A

Kita perlu berhati-hati untuk menyumbat Coding Bahagian B ke dalam Coding Pertama Ceraian Bahagian A supaya coding berfungsi. Memandangkan coding ini adalah conditional tag, kita akan letak pemula tag <a> selepas if (is_singular && …..): . Hasil akhir jadi seperti ini.

<?php
// Check if this is a post or page, if it has a thumbnail, and if it's a big one
if ( is_singular() &&
has_post_thumbnail( $post->ID ) &&
( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'post-thumbnail' ) ) &&
$image[1] >= HEADER_IMAGE_WIDTH ) :
// Houston, we have a new header image! ?>
<a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
<?php echo get_the_post_thumbnail( $post->ID, 'post-thumbnail' );?>
</a>

Untuk Coding Kedua Ceraian Coding A

Cara ini lebih mudah berbanding sebelum ini, cuma kita perlu berhati-hati dengan conditional tag iaitu else: dan endif. Coding berakhir seperti ini.

<?php else : ?>
<a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
<img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" />
</a>
<?php endif; ?>

Kita sudah siap edit semuanya. Kita refresh balik coding asal dan lihat hasil akhir.

Coding Sebelum Edit

<?php
// Check if this is a post or page, if it has a thumbnail, and if it's a big one
if ( is_singular() &&
has_post_thumbnail( $post->ID ) &&
( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'post-thumbnail' ) ) &&
$image[1] >= HEADER_IMAGE_WIDTH ) :
// Houston, we have a new header image!
echo get_the_post_thumbnail( $post->ID, 'post-thumbnail' );
else : ?>
<img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" />
<?php endif; ?>

Hasil Akhir

<?php
// Check if this is a post or page, if it has a thumbnail, and if it's a big one
if ( is_singular() &&
has_post_thumbnail( $post->ID ) &&
( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'post-thumbnail' ) ) &&
$image[1] >= HEADER_IMAGE_WIDTH ) :
// Houston, we have a new header image! ?>
<a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
<?php echo get_the_post_thumbnail( $post->ID, 'post-thumbnail' );?>
 </a>
<?php else : ?>
<a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
<img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" />
</a>
<?php endif; ?>

Sekian sudah tutorial Membuat Header Twenty Ten Theme Sebagai Link ke Homepage. Harap maaf kalau tutorial ini terlalu panjang. Saya sudah pastikan coding ini berfungsi dan ada fungsi fallback.
Akan datang saya akan buat tutorial header dengan hover image effects.

Atas permintaan Syahril Hafiz, aku buat tutor untuk kasi widget title ada style bold dan align center.

Buka style.css dan tambah kod di bawah.

Untuk boldkan Widget Title

.widget-title {
font-weight: bold;
}

Untuk centerkan Widget Title

.widget-title {
text-align: center;
}

Overall Widget Title siap dicustomize

.widget-title {
font-weight: bold;
text-align: center;
}

Harap dapat membantu.

Apa perlu anda buat?

1. Buka Comments pada Admin Panel.
2. Standby Google pada New Tab atau New Page.
3. Copy semua teks commen itu dari hujung ayat ke hujung ayat. Kalau ada perenggan atau lebih dari 2 baris, copy sahaja semua.
4. Paste pada form Google dan tekan search.
5. Lihat About ….. Results. Lihat ada berapa ratus ribu atau juta.
6. Jika beribu results, delete sahaja comment itu.
7. Satu lagi cara, copy dan paste comment seperti cara nombor 3 dan 4.
8. Pada search form Google, tambahkan ” pada awal dan akhir ayat.
9. Ikut cara nombor 5 dan 6 seperti biasa.

Aku benci SPAM!!! Yea!

Saya akan menunjukkan cara membuat child theme untuk Twenty Ten.

1. Mula-mula, buat satu folder di dekstop dan namakan folder itu sebagai ABC.
2. Buka folder ABC itu dan buat file style.css.
3. Buka style.css dan copy code di bawah ini dan paste ke dalam style.css.

/*
Theme Name: ABC
Description: Child theme for the Twenty Ten theme
Author: Nama anda
Template: twentyten
*/

4. Berdasarkan code di atas, code di atas adalah code paling asas untuk child theme untuk berfungsi terutamanya “template: twenty ten”, jika tidak child theme tidak berfungsi. Theme Name boleh diubah mengikut selera anda. Nama folder juga mestilah sama mengikut Theme Name. Dalam Theme Anak Child Theme Twenty Ten , saya namakan folder dan Theme Name sebagai Anak.

5. Seterusnya, kita akan import style.css dari parent theme iaitu theme Twenty Ten. Fungsi import adalah supaya child theme mewarisi ciri-ciri parent theme. Copy code di bawah ini dan paste selepas code yang ditunjuk pada cara no 3.

@import url("../twentyten/style.css");

6. Baiklah, anda sudah siap child theme dari segi teknikal tetapi belum sedia untuk digunakan. Selebihnya adalah mengubah style.css dengan meletakkan beberapa code css. Berikut adalah code css yang saya gunakan dalam style.css dalam child theme yang saya buat iaitu Theme Anak Child Theme Twenty Ten :

Besarkan Tajuk Blog menjadi 1.5 kali ganda
Yang ini membesarkan size font Tajuk Blog pada header menjadi 1.5 kali ganda

#site-title a {
font-size:150%		/* Besarkan Tajuk Blog menjadi 1.5 kali ganda*/
}

Ubah Font Menu menjadi HURUF BESAR

#access {
font-variant:small-caps;	/* Ubah Font Menu menjadi HURUF BESAR */
} 

Buat kotak untuk meta description dan taksonomi entri

.entry-meta {
padding:4px 0 4px 20px;
background-color:#F8F8F8; border: solid 1px #A0A0A0;	/* Buat kotak untuk meta description entri */
}
.entry-utility {
padding:4px 0 4px 20px;
background-color:#C0C0C0; border: solid 1px #A0A0A0;	/* Buat kotak untuk taksonomi entri */
} 

Buat underline pada Tajuk Sidebar dan Ubah Font Tajuk Sidebar menjadi HURUF BESAR

.widget-title {
border-bottom: 2px solid #737373;		/* Buat underline pada Tajuk Sidebar*/
font-variant: small-caps;				/* Ubah Font Tajuk Sidebar menjadi HURUF BESAR */
}

Membuat Sidebar Lebih Lebar

#container { float: left; margin: 0 0px 4px 0; width: 628px; }			/* Menetapkan size overall page iaitu container */
#content {width: 590px; overflow:hidden; margin:0 0px 10px 0px;			/* Kecilkan ruangan entri */
     padding: 5px 0px 0px 20px;}
#primary, #secondary { float: right; overflow: hidden; width: 300px;		/* Besarkan ruangan sidebar */
     margin: 0 0 4px 0;}

7. Hasil akhir style.css yang sudah siap adalah seperti di bawah.

/*
Theme Name: Anak
Description: Child theme for the Twenty Ten theme
Author: RozaniGhani
Template: twentyten
*/

@import url("../twentyten/style.css");

#site-title a {
font-size:150%		/* Besarkan Tajuk Blog menjadi 1.5 kali ganda*/
}

#access {
font-variant:small-caps;	/* Ubah Font Menu menjadi HURUF BESAR */
}

.entry-meta {
padding:4px 0 4px 20px;
background-color:#F8F8F8; border: solid 1px #A0A0A0;	/* Buat kotak untuk meta description entri */
}
.entry-utility {
padding:4px 0 4px 20px;
background-color:#C0C0C0; border: solid 1px #A0A0A0;	/* Buat kotak untuk taksonomi entri */
}

.widget-title {
border-bottom: 2px solid #737373;		/* Buat underline pada Tajuk Sidebar*/
font-variant: small-caps;				/* Ubah Font Tajuk Sidebar menjadi HURUF BESAR */
}

#container { float: left; margin: 0 0px 4px 0; width: 628px; }			/* Menetapkan size overall page iaitu container */
#content {width: 590px; overflow:hidden; margin:0 0px 10px 0px;			/* Kecilkan ruangan entri */
     padding: 5px 0px 0px 20px;}
#primary, #secondary { float: right; overflow: hidden; width: 300px;		/* Besarkan ruangan sidebar */
     margin: 0 0 4px 0;}

8. Sekian sahaja. Child theme anda sudah siap dan sedia diupload secara Filezilla upload atau upload guna dashboard WP.
* Jika upload guna dashboard WP, zipkan folder child theme dan upload seperti biasa.
* Jika upload guna Filezilla, buat folder baru di dalam direktori themes dan namakan folder itu. Upload style.css ke dalam folder yang baru dinamakan itu.

Selamat mencuba! Ganbatte!

Biasanya user WordPress akan guna theme yang ada sidebar sahaja, jadi jika meletak iklan skyscrapper contoh iklan skyscrapper Adverlet berukuran 120x600px. Untuk cuba tutorial ini, iklan Nuffnang tidak digalakkan kerana iklan Nuffnang sama seperti biskut Chipsmore, sekejap ada, sekejap tak ada. Jadi tidak berbaloi. Ini adalah saiz standard bagi iklan skyscrapper.

Sebelum pergi lebih jauh, saya gunakan Mystique theme untuk mencuba kod yang saya akan apply.

Kod di bawah ini akan digunakan sebagai template untuk diisi pada widget sidebar wordpress. Kod ini dijana pada Microsoft Frontpage dan saya membuat sedikit perubahan.  Pada line 1, saya setkan table border pada nilai 0 supaya border menjadi transparent. Dan pada line 1 juga, width mesti pada 100% supaya fit pada sidebar theme.

<table border="0" width="100%">
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>

Kod di atas akan menunjukkan table di bawah ini:

Seolah-olah table ikut akan berkelip bila kita letakkan mouse pada table. Table itu ada 2 kolum kosong iaitu kiri dan kanan.

Ruangan kosong itu diwakili oleh kod &nbsp;. Mudah sahaja, selepas ini gantikan salah satu kod &nbsp; dengan kod Adverlet dan satu lagi dari kod dari Innity. Ingat! Kod iklan skyscrapper tau! Kodnya boleh didapati pada dashboard Adverlet dan Innity kamu sendiri. Sekian, selamat mencuba!

Ini video 1st attempt saya, just untuk testing sahaja. Saya akan buat lebih banyak video selepas ini. Video yang saya akan buat lebih kepada tutorial dan menjawab soalan yang tidak clear bagi tutorial yang sedia ada. Enjoy!

TinyMCE Advanced Plugin adalah sokongan plugin kepada TinyMCE yang sedia ada pada wordpress. TinyMCE advanced memuatkan 15 plugin dalam 1 plugin termasuk plugin Advanced HR, Advanced Image, Advanced Link, Context Menu, Emotions (Smilies), Date and Time, IESpell, Layer, Nonbreaking, Print, Search and Replace, Style, Table, Visual Characters dan XHTML Extras.

Compatible dengan WP dan WPMU yang paling latest. Jadi, tidak perlu risau lagi.

http://wordpress.org/extend/plugins/tinymce-advanced/

Sebelum install TinyMCE Advanced Plugin

Selepas install TinyMCE Advanced Plugin

Ada perbezaan bukan? Lebih banyak butang. Smiley button pun ada. Tinggal pilih smiley sahaja.

Satu-satu kelemahan TinyMCE Advanced Plugin adalah lebar TinyMCE. TinyMCE akan mengikut lebar berdasarkan butang yang diinstall. Tidak digalakkan untuk meletakkan semua butang, gunakan yang mana perlu sahaja.

Akan tetapi, ketinggian TinyMCE tetap tidak berubah.

Sebenarnya saya sudah lama cari kaedah untuk install WPMU (WordPress Multi User) secara offline menggunakan XAMPP.

Caranya mudah sahaja. Tiada perlu edit-edit file WPMU seperti mana sebelum ini kena edit WP, baru dapat install WP. Caranya:

1. Download WPMU.

http://mu.wordpress.org/download/

2. Unzip dan masukkan folder wordpress-mu ke dalam folder htdocs di dalam folder XAMPP.

Folder: F:xampphtdocs supaya folder menjadi F:xampphtdocswordpress-mu

* Bergandung partition yang anda guna, jika C guna C: atau sebagainya.

3. Buka folder C:WindowsSystem32driversetc

4. Buka file hosts. Hati-hati kerana file host ini tidak mempunyai extension langsung. Buka guna notepad. Jika tidak dapat, run as administrator, kemudian buka guna notepad.

5. Tambahkan ayat ini ke dalam file host. Letakkan ayat ini di bawah sekali. Copy paste je ayat ni, senang. Pastu letak ayat ini di bawah sekali di dalam file itu.

127.0.0.1 localhost.localdomain

6. Buka XAMPP seperti biasa. Startkan Apache dan Mysql seperti biasa.

7. Buat database dan username baru. Copy password yang digenerated kerana kita akan guna dalam install nanti.

Database: wpmu_db

User: wpuser_user

8.  Taipkan http://localhost.localdomain/wordpress-mu/ di internet browser.

9. Fill in the blank dan masukkan password yang digenerated tadi. Page jadi seperti di bawah dan copy password itu.

10. Tekan login dan guna password yang baru sahaja dicopy.

11. Jika mahu tukar password, pergi ke bahagian Users, klik Your Profile. Itu sahaja.

Selamat mencuba! Cuba install WP yang biasa terlebih dahulu jika mahu guna WPMU agar mudah faham.

Content overall adalah banyak, jadi di bawah ini adalah preview penuh bagi ebook tersebut. Jika tidak mahu pening kepala, just download dari link di bawah ini:

Download The “How To Create Blog” Ebook

How to Create Blog eBook
Download This

Harap-harapnya, OtakWorks.net dapat improve highlight pada gambar-gambar yang sedia ada agar nampak kemas.