alexa-tracking

Main Content

1024
1024
KASKUS
51
244
https://www.kaskus.co.id/thread/50b6582c0975b49e3b000002/cara-membuat-wordpress-theme-dengan-baik-dan-benar
Cara membuat wordpress theme dengan baik dan benar
Ane anggota baru forum ini. Sebelumnya ane pernah share nih topic di forum tetangga, newbie mau sedikit berbagi ilmu, kalau agan gak keberatan bisa komentar, kalau agan gak suka maafkan karena ane cuman newbie.

Untuk theme yang pernah ane buat nanti ane share dimari.

Ane mau sedikit berbagi cara membuat theme wordpress:
Langkah awal:
1. Selalu aktifkan WP_DEBUG menjadi true di wp_config (ini untuk menghindari kesalahan kode karena beberapa kesalahan kode jika ini nonactive tidak ditampilkan di wordpress anda dan untuk menghidari functions2 yang deprecate)
2. Sebelum anda membuat theme install terlebih dulu theme-check di WP anda.. linknya hxxxxp://wordpress.org/extend/plugins/theme-check/ (ini agar theme hasil buatan Standart dengan WP standat coding sehingga theme anda bisa support plugin dari WP)

Langkah Berikutnya: 1. Menulis kode CSS. (WP required style.css yang di taruh di folder awal theme anda).

Berikut contoh kode dari CSS:
Code:
 
/*
Theme Name: namathema
Theme URI: hxxp://namadomainthema.com
Description: ini adalah keterangan dari theme yang anda buat
Author: namapembuattheme
Author URI: hxxp://namadomainauthor.com
License: GNU General Public License version 3.0
License URI: hxxp://www.gnu.org/licenses/gpl-3.0.html
Version: 1.0
Tags: tags theme yang anda buat lihat di hXXp://wordpress.org/extend/themes/about/ untuk tags nya */
.class{}
#id{}


nah simpan css anda dengan nama style.css berikut adalah CSS standart WP yang harus ada di CSS anda:
Code:
 /* =WordPress Core  -------------------------------------------------------------- */   .alignnone {}  
.aligncenter,div.aligncenter {}
.alignright {}
.alignleft {}
.aligncenter {}
a img.alignright {}
a img.alignnone {}
a img.alignleft {}
a img.aligncenter {}
.wp-caption {}
.wp-caption.alignnone {}
.wp-caption.alignleft {}
.wp-caption.alignright {}
.wp-caption img {}
.wp-caption
p.wp-caption-text {}

Ingat jangan menghapus kode diatas... Anda bisa mengkosongkannya atau memberi comment tag pada kode tersebut.

Sekarang anda buat file theme anda, berikut adalah list file yang harus anda buat di WP theme:

1. index.php ini untuk mengidentifikasi halaman homepage anda
2. comments.php ini untuk mengidentifikasi comment form dan comment list di theme anda
3. 404.php ini untuk halaman error 404 jika post anda tidak ditemukan 4. front-page.php (optional)
5. home.php (optional)
6. single.php ini merupakan halaman utama postingan anda atau single post jika anda menggunakan post-type anda bisa membuat baru halaman single anda dengan nama single-posttype.php posttype bisa diisi misal membuat posttype portfolio anda bisa membuat single-portfolio.php
7. page.php ini merupakan halaman page anda semisal sample page
8. tag.php (optional untuk mengidentifkasi postingan berdasarkan tag)
9. category.php (optional untuk mengidentifkasi postingan berdasarkan category)
10. date.php (optional untuk mengidentifkasi postingan berdasarkan waktu/date)
11. author.php (optional untuk mengidentifkasi postingan berdasarkan author)
12. archive.php ini merupakan halaman archive jika halaman tag, category,date, author anda tidak dimasukkan maka halaman ini yang menjadi utamanya.
13. search.php ini merupakan halaman pencarian biasanya diisi dengan the_excerpt() untuk contentnya.
14. attachment.php (optional untuk single file attachment anda)

Oke berikut merupakan tambahan file theme untuk mempermudah pembuatan theme anda:
1. header.php merupakan header theme anda dipanggil dengan get_header();
2. sidebar.php merupakan sidebar theme anda dipanggil dengan get_sidebar();
3. footer.php merupakan footer dari theme anda dipanggil dengan get_footer();
4. functions.php merupakan functions 2 php tertentu yang membantu mempercantik theme anda seumpama function share post dan lain2.

Oke sekarang bagaimana caranya memanggil file javascript dan CSS yang benar di theme anda berikut adalah
1. Untuk css
Code:

wp_enqueue_style( $handle, $src, $deps, $ver, $media );

Oke diatas merupakan function dari wp_codexnya. Keterangan: $handle untuk menghandle function yang akan dipanggil CSS nya
1. $src path CSS anda
2. $depts CSS harus di load sebelum CSS ini... Seumpama disini functions cssframework.css.. Default array();
3. $ver versi css anda bisa diisi dengan tanggal (01012012)
4. $media merupakan media CSS contohnya all, screen, dll list lengkapnya di hXXp://www.w3.org/TR/CSS2/media.html#media-types

Oke berikut contoh penulisan CSS nya:
Code:
 
function theme_cssanda() {
wp_register_style( 'handdlecssini', get_template_directory_uri() . '/css/custom-style.css', array(), '01012012', 'all' );
wp_enqueue_style( 'handdlecssini' );
}
add_action('wp_enqueue_scripts', 'theme_cssanda'); // add action fungsi wp


2. Untuk JS Kurang lebih hampir sama dengan css wp_enqueue_script( $handle ,$src ,$deps ,$ver ,$in_footer );

Berikut contoh penggunaannya

Code:
 
function theme_jsanda() {
wp_enqueue_script('handdlejs', get_template_directory_uri() . '/js/custom_script.js', array('jquery'));
wp_enqueue_script( 'handdlejs' );
}
add_action('wp_enqueue_scripts', 'theme_jsanda');


Nah contoh diatas atas untuk array('jquery') ini merupakan fungsi memanggil jquery terlebih dahulu sebelum memanggil js ini...

SEEEPPP diatas merupakan dasar2 nya cara baik untuk membuat theme.

Dengan membuat theme yang benar maka website anda bisa di load dengan baik dan cache menjadi lebih baik sehingga website anda bisa di load dengan cepat...

Berikut adalah contoh theme free yang udah ane buat:
hxxp://kentooz.com/theme/kres-theme/
hxxp://kentooz.com/theme/kandas-theme/

Untuk kodenya akan ane share di postingan ini..

code share cara memanggil js/css di halaman tertentu

Untuk contoh theme bisa di download di [url]hxxp://kentooz.com/theme/kandas-theme/[/url] ini framework theme yang udah ane buat.

Sedikit code share cara memanggil js/css di halaman tertentu misalnya halaman utama saja maka halaman lain tidak dipanggil (fungsi dari theme ane):

Register css anda:
Code:

function ktz_register_css() {
if( !is_admin() ) { // jika bukan di halaman admin maka .....
wp_register_style( 'bootstrapmin-css',ktz_url . 'css/bootstrap.css', array(), '1.0', 'screen, projection' );
wp_register_style( 'nivo-theme',ktz_url . 'css/themes/default/default.css',array(), '1.0', 'all' );
wp_register_style( 'nivo-css',ktz_url . 'css/nivo-slider.css',array(), '1.0', 'all' );
wp_register_style( 'main-css',ktz_url . 'style.css',array(), '1.0', 'all' );
}
}
add_action( 'init', 'ktz_register_css' );

Enqueue funstions urutan css dipanggil berdasarkan urutan:
Code:

function ktz_enqueue_css() {
if( !is_admin() ) {
wp_enqueue_style( 'bootstrapmin-css' );
wp_enqueue_style( 'nivo-theme' );
if (is_home()) { wp_enqueue_style( 'nivo-css' ); } // jika di home maka ... lihat di [url]hXXp://codex.wordpress.org/Conditional_Tags[/url]
wp_enqueue_style( 'main-css' );
}
}
add_action( 'wp_enqueue_scripts', 'ktz_enqueue_css' );

Code populer post tanpa plugin

Berikut merupakan kode untuk menampilkan popular post di theme anda (kode dari theme ane gan):
Code:

if( !function_exists('ktz_popcon')) { // tetap bersih dari duplicate fungsi yang menyebabkan error mastah
function ktz_popcon() {
$popcontent = new WP_Query(array('post_type'=> 'post', 'showposts' => 9, 'post_status' => 'publish', 'ignore_sticky_posts' => 1,'orderby' => 'comment_count')); // ini merupakan kode array untuk menampilkan query post... terserah ente dah nih array mau diisi apa
$popcon = '<ul>';
while ($popcontent->have_posts()) : $popcontent->the_post();
global $post;
$permalink = get_permalink();
$title = get_the_title();
$popcon .= '<li><a href="' . $permalink . '" title="' . $title . '">' . $title . '</a></li>';
endwhile;
$popcon = '</ul>';
return $popcon;
}
}


Cara menampilkan di theme ente sebagai berikut:
Code:

<?php echo ktz_popcon(); //simple yah ?>

Code cara merubah default class di avatar

Ini berguna jika anda menggunakan css framework dan merubah class atavar anda:

Code:

function change_avatar_css($class) { // Hehehe ane gunain ini karena ana pake bootstrap dan untuk class imagenya menggunakan thumbnail...
$class = str_replace("class='avatar", "class='thumbnail", $class) ;
return $class;
}

Singkat tapi bermanfaat...

Code membuat breadcrumbs di theme

Berikut kode function breadcrumbs yang ane ambil dari theme ane:
Code:

if ( !function_exists('ktz_crumbs') ) {
function ktz_crumbs() {
if( is_front_page() ) // jika di homepage maka tidak ditampilkan so ubah ini jika ente mau menampilkan di homepage
return;
echo '<div id="breadcrumbs-wrap"><div class="breadcrumbs">';
if ( get_theme_option('ktz_breadcrumbs') != '' ) :
echo '<a href="';
echo home_url(); // call link homepage
echo '">';
echo __('Home');
echo "</a>";
if (is_category() || is_single()) { // jika berada dihalaman category atau single
the_category(' '); // mendapatkan judul category
if (is_single()) { // jika di single maka
echo the_title();
}
} elseif (is_page()) {
echo the_title();
}
elseif (is_tag()) {
echo single_tag_title();
}
elseif (is_day()) {echo __("Archive for ",ktz_theme_textdomain); the_time('F jS, Y');}
elseif (is_month()) {echo __("Archive for ",ktz_theme_textdomain); the_time('F, Y');}
elseif (is_year()) {echo __("Archive for ",ktz_theme_textdomain); the_time('Y');}
elseif (is_author()) {echo __("Author Archive",ktz_theme_textdomain);}
elseif (isset($_GET['paged']) && !empty($_GET['paged'])) {echo "Blog Archives";}
elseif (is_search()) {echo __("Search Results",ktz_theme_textdomain);}
elseif (is_404()) {echo __("Page not found");}
endif;
echo '</div></div>';
}
}


Cara menampilkan crumb di theme ente:
Code:

<?php echo ktz_crumbs(); ?>


untuk kentooz framework (theme nya nanti ane share) ente bisa liat di init.php
lihat:
Code:

add_action( 'do_ktz_after_header', 'ktz_crumbs' );

dan fungsi:
Code:

function hook_ktz_after_header() {
do_action('do_ktz_after_header');
}

Ya itu fungsi hook untuk memanggil crumbs versi kentooz framework
mantep gan tulisannya...
sekalian tentang nambahin fungsi lewat backadmin gan, jadi konfig themesnya bisa diatur lewat backadmin



----------------------------------------------------------------------------
●●▌★▐●● Jasa Digital Order paypai Super Murah ( iLegAL ) ●●▌★▐●●
[QUOTE=jasapal;50b68f671cd719850a00002a]mantep gan tulisannya...
sekalian tentang nambahin fungsi lewat backadmin gan, jadi konfig themesnya bisa diatur lewat backadmin



emoticon-Smilie Kagak ada yang tertarik kayaknya di kaskus lebih tertarik sama script yang udah jadi sama nulled yah ane liat2... emoticon-Frown
emoticon-Matabelo
ane nyimak dulu gan..
ilmu tingkat tinggi nih
Quote:Original Posted By kentooz

emoticon-Smilie Kagak ada yang tertarik kayaknya di kaskus lebih tertarik sama script yang udah jadi sama nulled yah ane liat2... emoticon-Frown


gan.

PHP Code:
<?php wp_enqueue_script?>


koding di atas itu harus di taro di header apa harus di functions.php?
kalo di header kan ga perlu di register dulu gan. kalo di functions.php kita harus add_action.
Quote:Original Posted By uconalpukat


gan.

PHP Code:
<?php wp_enqueue_script?>


koding di atas itu harus di taro di header apa harus di functions.php?
kalo di header kan ga perlu di register dulu gan. kalo di functions.php kita harus add_action.


Difungsi gan... Jangan biasain taruh css/js langsung di themenya...
Quote:Original Posted By jasapal
mantep gan tulisannya...
sekalian tentang nambahin fungsi lewat backadmin gan, jadi konfig themesnya bisa diatur lewat backadmin


Nanti ane share soalnya kodenya lumayan panjang gan


Quote:Original Posted By CS.Kaskus
emoticon-Matabelo
ane nyimak dulu gan..
ilmu tingkat tinggi nih


Ilmu standart WP itu gan, ane juga baru belajar... emoticon-Smilie

Quote:Original Posted By kentooz


Difungsi gan... Jangan biasain taruh css/js langsung di themenya...



script src="js/libs/jquery-1.5.1.min.js">/script
script src="js/libs/jquery.easing.1.3.min.js">/script
script src="js/mylibs/royal-slider-1.0.min.js">/script


kalo dirubah ke wordpress gimana gan, naro di functions.php-nya?

ane soalnya udah nyoba ga bisa gan make wp_enqueue, mau ane taro di functions.php atau header. jadinya ane make yang standard aja.


script src="<?php echo get_template_directory_uri();?>/js/libs/jquery-1.5.1.min.js">/script
script src="<?php echo get_template_directory_uri();?>/js/libs/jquery.easing.1.3.min.js">/script
script src="<?php echo get_template_directory_uri();?>/js/mylibs/royal-slider-1.0.min.js">/script


kalo make yang standard kata wordpress yang ane baca-baca, nantinya bisa crash sama jquery yang dipake sama mesin wordpress itu sendiri.

edited:
di remove kalo make tag script>. jadi ane ilangin depan sama belakangnya.
Quote:Original Posted By kentooz

emoticon-Smilie Kagak ada yang tertarik kayaknya di kaskus lebih tertarik sama script yang udah jadi sama nulled yah ane liat2... emoticon-Frown


Kata sapa gan?.. ane minat belajar eung, kalo yg suka theme jadi maupun nulled mungkin buat belajar jg or barangkali dikejar deadline proyek web nya gan..

Nice share, ane bantu rate aja dulu gan.
Quote:Original Posted By uconalpukat



script src="js/libs/jquery-1.5.1.min.js">/script
script src="js/libs/jquery.easing.1.3.min.js">/script
script src="js/mylibs/royal-slider-1.0.min.js">/script


kalo dirubah ke wordpress gimana gan, naro di functions.php-nya?

ane soalnya udah nyoba ga bisa gan make wp_enqueue, mau ane taro di functions.php atau header. jadinya ane make yang standard aja.


script src="<?php echo get_template_directory_uri();?>/js/libs/jquery-1.5.1.min.js">/script
script src="<?php echo get_template_directory_uri();?>/js/libs/jquery.easing.1.3.min.js">/script
script src="<?php echo get_template_directory_uri();?>/js/mylibs/royal-slider-1.0.min.js">/script


kalo make yang standard kata wordpress yang ane baca-baca, nantinya bisa crash sama jquery yang dipake sama mesin wordpress itu sendiri.

edited:
di remove kalo make tag script>. jadi ane ilangin depan sama belakangnya.


/*******************************************
# Register javascript on hook system ~ header
*******************************************/
Code:

function register_jascripts() {
if( !is_admin() ) {
wp_register_script( 'easing',get_template_directory_uri() . '/js/libs/jquery.easing.1.3.min.js',array('jquery'), false, true );
wp_register_script( 'royal',get_template_directory_uri() . '/js/mylibs/royal-slider-1.0.min.js',array('jquery'), false, true );
}
}

add_action( 'init', 'register_jascripts' ); // add action di hook WP


/*******************************************
# Enqueue javascript on hook system ~ header
*******************************************/
Code:

function func_urutan() { // bisa diseuaikan urutannya
if( !is_admin() ) {
wp_enqueue_script('jquery'); //buat ngambil jquery di WP jadi ente gak perlu manggil jquery lagi
wp_enqueue_script('easing'); // pake nama handdle jquery diatas
wp_enqueue_script('royal'); // pake nama handdle jquery diatas
}
}

add_action( 'wp_enqueue_scripts','func_urutan' ); // add action di hook WP

Kalau konflik pake jquery no_conflict

Quote:Original Posted By Progets


Kata sapa gan?.. ane minat belajar eung, kalo yg suka theme jadi maupun nulled mungkin buat belajar jg or barangkali dikejar deadline proyek web nya gan..

Nice share, ane bantu rate aja dulu gan.


Thanks gan
Quote:Original Posted By kentooz


/*******************************************
# Register javascript on hook system ~ header
*******************************************/
Code:

function register_jascripts() {
if( !is_admin() ) {
wp_register_script( 'easing',get_template_directory_uri() . '/js/libs/jquery.easing.1.3.min.js',array('jquery'), false, true );
wp_register_script( 'royal',get_template_directory_uri() . '/js/mylibs/royal-slider-1.0.min.js',array('jquery'), false, true );
}
}

add_action( 'init', 'register_jascripts' ); // add action di hook WP


/*******************************************
# Enqueue javascript on hook system ~ header
*******************************************/
Code:

function func_urutan() { // bisa diseuaikan urutannya
if( !is_admin() ) {
wp_enqueue_script('jquery'); //buat ngambil jquery di WP jadi ente gak perlu manggil jquery lagi
wp_enqueue_script('easing'); // pake nama handdle jquery diatas
wp_enqueue_script('royal'); // pake nama handdle jquery diatas
}
}

add_action( 'wp_enqueue_scripts','func_urutan' ); // add action di hook WP

Kalau konflik pake jquery no_conflict



Thanks gan


PHP Code:
<?php
function register_jascripts() {

 if( !
is_admin() ) {

  
wp_register_script'easing',get_template_directory_uri() . '/js/libs/jquery.easing.1.3.min.js',array('jquery'), falsetrue );

  
wp_register_script'royal',get_template_directory_uri() . '/js/mylibs/royal-slider-1.0.min.js',array('jquery'), falsetrue );

 }

}



add_action'init''register_jascripts' );  // add action di hook WP

function func_urutan() { // bisa diseuaikan urutannya

 
if( !is_admin() ) {

  
wp_enqueue_script('jquery'); //buat ngambil jquery di WP jadi ente gak perlu manggil jquery lagi

               
wp_enqueue_script('easing');       // pake nama handdle jquery diatas

               
wp_enqueue_script('royal');        // pake nama handdle jquery diatas

 
}

}



add_action'wp_enqueue_scripts','func_urutan' ); // add action di hook WP ?>


kode di atas udah ane masukin ke functions.php. tapi ga work gan. emoticon-Frown
kalo script yang standard itu ane masukin lagi, baru work lagi.

ini berarti ga kepanggil gan jquery buat royal slidernya.
Quote:Original Posted By uconalpukat


kode di atas udah ane masukin ke functions.php. tapi ga work gan. emoticon-Frown
kalo script yang standard itu ane masukin lagi, baru work lagi.

ini berarti ga kepanggil gan jquery buat royal slidernya.


Wedew... Coba nyalin WP_DEBUG nya dulu function diatas js nya di footer gan ($in_footer) kan true bukan di header coba klik kanan view page source terus liat JS nya di bawah...

Quote:Original Posted By kentooz


Wedew... Coba nyalin WP_DEBUG nya dulu function diatas js nya di footer gan ($in_footer) kan true bukan di header coba klik kanan view page source terus liat JS nya di bawah...



gimana gimana gan. coba scriptnya gan, takut salah persepsi.

ane soalnya kalo buat wp ga make wp_debug gan. langsung jalan. tapi entah kenapa dengan royal slider ini kenapa ga jalan.
Quote:Original Posted By uconalpukat


gimana gimana gan. coba scriptnya gan, takut salah persepsi.

ane soalnya kalo buat wp ga make wp_debug gan. langsung jalan. tapi entah kenapa dengan royal slider ini kenapa ga jalan.


WP_DEBUG wajib di jadiin true (jangan di live site) kalau ente mau develop theme maupun plugin WP.. Kalau2 ada script deprecate atau script error yang ke handdle sama debug...

Kalau script diatas sudah benar, coba liat di source page nya... Kalau semisal sudah muncul di source page tinggal, mungkin masalah di custom JS ente...

Pake jquery no conflict di custom js ente
Code:

$.noConflict();
jQuery(document).ready(function($) {
Code JS ente
});
Jiahhhh ente pake plugin jquery premium yah dari codecanyon???? Atau nulled???? Lihat versinya bro... Jquery yang dipanggil di WP itu jquery versi 1.7.2
sedangkan plugin ente seri jadul abis...

masukin kode berikut di antara
Code:

function ktz_register_jascripts() {
if( !is_admin() ) {
wp_deregister_script('jquery'); // unregister default jquery
wp_register_script('jquery', "http" . ($_SERVER['SERVER_PORT'] == 443 ? "s" : "") . "://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js", false, true); // menggunakan CDN dari google bisa juga dari JS yang ente masukin di folder JS
}
}


*** Saran kalau ente beli plugin tersebut, update plugin tersebut kan gratis di codecanyon terus gunakan default jquery bawaan WP atau gunakan query terbaru..

Quote:Original Posted By kentooz
Jiahhhh ente pake plugin jquery premium yah dari codecanyon???? Atau nulled???? Lihat versinya bro... Jquery yang dipanggil di WP itu jquery versi 1.7.2
sedangkan plugin ente seri jadul abis...

masukin kode berikut di antara
Code:

function ktz_register_jascripts() {
if( !is_admin() ) {
wp_deregister_script('jquery'); // unregister default jquery
wp_register_script('jquery', "http" . ($_SERVER['SERVER_PORT'] == 443 ? "s" : "") . "://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js", false, true); // menggunakan CDN dari google bisa juga dari JS yang ente masukin di folder JS
}
}


*** Saran kalau ente beli plugin tersebut, update plugin tersebut kan gratis di codecanyon terus gunakan default jquery bawaan WP atau gunakan query terbaru..



Spoiler for coding:


itu functions.php ane gan, tetep ga work.

---

menurut ane bukan karena jadul gan. walaupun jadul seharusnya bisa work gan. di HTML aja work.

ane bingung kenapa pas ane pake wp_enqueue_script dia ga mau kepanggil, padahal file Jquery jadul tersebut ada. permasalahannya adalah ga mau dipanggilnya itu gan. ane di functions.php juga awal bikin ga manggil jquery si WP.

tapi coba agan rubah functions.php ane. ane rubah-rubah tetep ga work(ga kepanggil).

---

ane make nulled gan. emoticon-Malu (S)