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.

Ada sesiapa pernah guna theme Twenty Ten Weaver atau 2010 Weaver? Sebenarnya nama theme ini sama sahaja cuma bezanya Twenty Ten Weaver dihostkan di WpWeaver.info manakala 2010 Weaver dihostkan di WordPress Theme Directory.

Bagi mereka yang tidak mengetahui Twenty Ten Weaver ini rupanya macam mana, rupa design theme ini memang sebijik macam kat WpWeaver.info. Twenty Ten Weaver theme ni tak banyak beza Twenty Ten theme dari segi design tapi dari segi function, Twenty Ten Weaver lebih advance dari Twenty Ten.

Sekarang ni, Twenty Ten Weaver telah ditukarkan nama kepada Weaver. RG rasa pun bagus gak sebab bila selalu bukak forum kat WordPress.org cari pasal Twenty Ten theme, Twenty Ten Weaver yang keluar. Satu lagi, bila Weaver dah tukar nama, hilanglah rasa salah sangka newbie yang selalu ingat Twenty Ten Weaver tu theme default WordPress.

Pros

• Weaver bagus untuk newbie dan tidak perlukan kepakaran yang tinggi.
• Function Weaver sama seperti Twenty Ten Theme malah lebih advance dari Twenty Ten Theme dari segi pemilihan sub theme.
• Banyak option seperti memasukkan nilai color, tukar jenis font, tukar layout column.
• Weaver dianggap theme yang advanced sebagai theme yang percuma.

Cons

• Weaver kurang sesuai untuk pengguna advance yang selalu inginkan modification yang canggih.
• Weaver kurang sesuai untuk optimization seperti speed optimization sebab file Weaver terlampau banyak.
• Size style.css yang agak besar iaitu 29kb kurang sesuai. Style.css kalau kurang dari 20kb lebih bagus.
• Weaver ada banyak function tetapi tiada function SEO. Agak menghampakan tetapi inilah realiti theme percuma.
• Advanced Options Page mempunyai banyak sangat teks dan agak crowded.
• Pemilihan warna secara manual memerlukan pengalaman dan penyelidikan mengenai warna supaya pemilihan warna lebih teratur dan kemas.
• Disebabkan Weaver mempunyai banyak option, database WordPress seperti WP_Options akan jadi lebih berat apabila selalu tukar nilai color dan font. Setiap perubahan nilai akan disave ke dalam table database WP_Options.

Konklusi

Twenty Ten Weaver atau 2010 Weaver telah bertukar nama kepada Weaver. Weaver didapati di WordPress Theme Directory (Weaver).

Weaver atau Twenty Ten lebih bagus? Terpulanglah pada diri masing-masing.

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.

Somehow I get to understand what is get_template_part codex in Twenty Ten Theme is about. I visualize how the code in the slide. Hope you have time to understand. Ciao.

I would like to show you how to show excerpt in Twenty Ten Theme. This tutorial does not require any activation of plugin. If you have any excerpt plugin, please disable. Please backup you theme if necessary.

1. Locate loop.php in Twenty Ten Theme folder.

2. Find this code below in loop.php.

<?php /* How to display all other posts. */ ?>

	<?php else : ?>
		<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
			<h2 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'twentyten' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h2>

			<div class="entry-meta">
				<?php twentyten_posted_on(); ?>
			</div><!-- .entry-meta -->

	<?php if ( is_archive() || is_search() ) : // Only display excerpts for archives and search. ?>
			<div class="entry-summary">
				<?php the_excerpt(); ?>
			</div><!-- .entry-summary -->
	<?php else : ?>
			<div class="entry-content">
				<?php the_content( __( 'Continue reading <span class="meta-nav">&rarr;</span>', 'twentyten' ) ); ?>
				<?php wp_link_pages( array( 'before' => '<div class="page-link">' . __( 'Pages:', 'twentyten' ), 'after' => '</div>' ) ); ?>
			</div><!-- .entry-content -->
	<?php endif; ?>

3. If you that code, you are in the right track. Look the code below. This code will show the excerpt in archive page and search page. (Note: excerpt is not activated in stage temporarily, excerpt will activate at step 6)

<?php if ( is_archive() || is_search() ) : // Only display excerpts for archives and search. ?>

4. Change that code into this code below. (Note: excerpt will be also visible at home page after proceed to step 5)

<?php if ( is_home() || is_archive() || is_search() ) : // Only display excerpts for archives and search. ?>

5.  Save your loop.php or update file.

6. The finished should be like this.

<?php /* How to display all other posts. */ ?>

	<?php else : ?>
		<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
			<h2 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'twentyten' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h2>

			<div class="entry-meta">
				<?php twentyten_posted_on(); ?>
			</div><!-- .entry-meta -->

	<?php if ( is_home() || is_archive() || is_search() ) : // Only display excerpts for archives and search. ?>
			<div class="entry-summary">
				<?php the_excerpt(); ?>
			</div><!-- .entry-summary -->
	<?php else : ?>
			<div class="entry-content">
				<?php the_content( __( 'Continue reading <span class="meta-nav">&rarr;</span>', 'twentyten' ) ); ?>
				<?php wp_link_pages( array( 'before' => '<div class="page-link">' . __( 'Pages:', 'twentyten' ), 'after' => '</div>' ) ); ?>
			</div><!-- .entry-content -->
	<?php endif; ?>

7. That’s all. If you have any problems, please leave a comment.

This is my first modification of Twenty Theme. I named this theme as Twenty Ten Alternative Sidebar Theme. This theme purposely was modified for person who want 2 sidebar in 1 sidebar. I am a fan of 2 sidebar in 1 sidebar but I do not like footer sidebars.

Twenty Ten Alternative Sidebar Theme’s Features:

• Have the latest features of Twenty Twenty Theme version 1.1
• Modified according to Twenty Twenty Theme version 1.1
• 1 column and 2 sidebars/1 sidebars
• 2 wide sidebars (340px)
• 2 narow sidebars (160px)
• No footer sidebars
• Good for person who want more space for ads in sidebar

Demo| Download

FYI:

Changelog is included in the theme. Pleas read if you want to understand the theme before modify.

If you have any problems, please contact me via nurrozaini@gmail.com

Thanks.

Bagaimana? Sudah puas menonton. Dalam video itu bukan muka saya. Berbalik kepada asal usul Custom Menu seperti yang ditunjukkan dalam video, function Custom Menu pada awalnya diasaskan oleh Woo Themes yang telah diapply ke dalam WooThemes Framework v2 sebelum kewujudan WordPress 3.0 seperti ditunjukkan dalam gambar di bawah.[1][2]

“With the custom nav, you can easily mix and match categories and pages, and even add custom menu items into the mix. You can add your own structure to the menu by arranging the menu items via our drag and drop interface, and also add dropdowns or sub-navigations to each menu point. You can have as many levels as you want although this is usually limited to 3-4 levels by CSS in the theme itself.” [1]

WooThemes Framework dipaparkan seperti video di bawah. Lihatlah perbezaan fungsi Custom Menu WooThemes yang kemudiannya diapply ke dalam WordPress 3.0.

Keseluruhannya, WooThemes satu-satunya pengeluar theme yang terkenal dengan functionality. Maka, tidak hairanlah fungsi Custom Menu keluaran WooThemes menjadi fungsi utama dalam WordPress 3.0.

“Jeff has already begun working with Ryan Boren (one of WordPress’ lead developers) on porting the WooNav into “patch form”, which will then in turn be submitted to the core of WordPress. Feature freeze for WordPress 3.0 is this week and we’re hoping to have ported the WooNav to the core ASAP, so that the community may start discussing the functionality, after which we will continue to work with the WP developers and the community on improving and finalizing the functionality for WP 3.0.

“Unfortunately” this impacts our users, since these developments mean we have to delay the integration & roll-out of the WooNav to all our themes. Whilst the implementation thereof will stay 99% the same, we don’t want to potentially duplicate work for ourselves and have decided to wrap-up the porting & development of the WooNav into core WP first, before integrating it with all of our themes.

You can however rest assured that by the time WordPress 3.0 hits your web browser, we’ll have included support for this amazing functionality in all of our themes. So this new awesomeness from the two W’s is not far off and all WooThemes will soon be able to enjoy it in all of its glory.” [2]

Citations:
[1] http://www.woothemes.com/2010/01/the-awesome-custom-woo-navigation/

[2] http://www.woothemes.com/2010/02/woonav-integrated-in-wp-30/

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!

Saya release terlebih dahulu child theme Twenty Ten aka 2010 yang saya namakan sebagai Anak. Saya buat child theme ini cuma berasaskan style.css. Tutorial dan penerangannya akan saya release di kemudian hari.

Ciri-ciri Theme Anak “Child Theme Twenty Ten”

• Site Title lebih besar
• Title Page Menu berhuruf besar
• Sidebar lebih luas
• Tajuk Sidebar berhuruf besar dan mempunyai underline
• Meta description berkotak
• Utility description berkotak

Keistimewaan Theme Anak

• Design seperti design Blogger (Blogspot)
• Ringan (Cuma perlu file style.css sahaja)

Download Theme Anak Twenty Ten

Sila berikan komen atau cadangan untuk improve theme Anak. Terima kasih.