Bab 1 - Membuat Style.css untuk Theme Wordpress

Penyempurnaan Header dengan memanggil Style.css dan File Javascript di file functions.php

selamat malam para sahabat sekalian setelah pada bab 1 s/d 6 telah kita bahas tutorial membangun theme wordpress sampai pada tahap pembuatan header dan pemanggilan Tag Title untuk Bar.

jika Pada tutorial kali ini temen2 belum mengerti silahkan ulangi pembahasan kami dari awal sampai tahap ini, berikut kami sertakan Link Tutorial membuat theme wordpress kami dari Depan :

Bab 1 - Membuat Style.css untuk Theme Wordpress

Bab 2 - Membangun Tampilan Theme

Bab 3 - Membangun Header Theme

Bab 4 - Membuat Logo dan Kontak

Bab 5 - Membuat functions Theme Wordpress

Bab 6 - Membangun Header dengan Functions wordpress

Menyempurnakan file Functions.php

silahkan anda buka file functions.php setelah anda selesai membuka file functions.php silahkan anda copy kode dibawah ini taruh di paling bawah setelah kode - kode yang awal saya berikan dalam tutorial sebelumnya,,,, yang pasti harus diatas tag ?>

function wp_company_style(){
  //wp_enqueue_style( 'slidercss', URL_COMPANY . 'css/slider-thumbnail.css' );
  //wp_enqueue_style( 'bootcss', URL_COMPANY . 'css/bootstrap.css' );
  wp_enqueue_style( 'awesomecss', '//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' );
  //wp_enqueue_style( 'dataTable', URL_COMPANY . 'css/dataTables.bootstrap.min.css' );
  wp_enqueue_style( 'animatecss', URL_COMPANY . 'css/animate.min.css' );
  wp_enqueue_style( 'bootmincss', URL_COMPANY . 'css/bootstrap.min.css' );
  wp_enqueue_style( 'slick', URL_COMPANY . 'css/slick.css' );
  wp_enqueue_style( 'smoothslides', URL_COMPANY . 'css/smoothslides.theme.css' );
  wp_enqueue_style( 'style', get_stylesheet_uri() );
  wp_enqueue_style( 'dashicons' );
}
add_action( 'wp_enqueue_scripts', 'wp_company_style' );

* Kode diatas adalah untuk memanggil data style dan CSS lainnya
file dan foldernya akan saya sertakan dilampiran paling bawah, anda dapat mendownload file2 tersebut. tapi saya jelaskan terlebih dahulu sampai pembahasan tutorial pada bab 7 ini selesai.

setelah kode diatas selesai di tambahkan silahkan anda copy lagi kode dibawah ini dan taruh dibawahnya kode yang diatas, begitulah seterusnya. sampai selesai.

tetap dalam file functions.php dan jangan buka theme anda website theme percobaan anda karena akan akan berakibat error dalam bug console chrome ataupun firefox dan browser yang lain. theme anda akan mengandung error-log .

Berikut kodenya :

// untuk semua jQuery wordpress
function wp_company_script() {
    //wp_register_script( 'dataTablemin', URL_COMPANY . 'js/dataTables.min.js','jquery','', true);
    //wp_register_script( 'sliderjs', URL_COMPANY . 'js/slider-thumbnail.js','jquery','', true);
    //wp_register_script( 'summernote', URL_COMPANY . 'js/summernote.js','jquery','', true);
    //wp_register_script( 'dataTable', URL_COMPANY . 'js/dataTables.bootstrap.min.js','jquery','', true);
    wp_register_script( 'bootminjs', URL_COMPANY . 'js/bootstrap.min.js','jquery','', true);
    wp_register_script( 'slick', URL_COMPANY . 'js/slick.min.js','jquery','', true);
    wp_register_script( 'smoothslides', URL_COMPANY . 'js/smoothslides.min.js','jquery','', true);
    wp_register_script( 'wp-company', URL_COMPANY . 'js/wp-company.js','jquery','', true);
    wp_register_script( 'scrolla', URL_COMPANY . 'js/scrolla.jquery.min.js','jquery','', true);
    
    // untuk default jquery dari wordpress
    wp_enqueue_script('jquery');
    wp_enqueue_script('bootminjs');
    wp_enqueue_script('slick');
    wp_enqueue_script('scrolla');
    wp_enqueue_script('smoothslides');
    wp_enqueue_script('wp-company');
    //wp_enqueue_script('dataTablemin');
    //wp_enqueue_script('dataTable');
    //wp_enqueue_script('sliderjs');
    //wp_enqueue_script('summernote');
}
add_action('wp_enqueue_scripts', 'wp_company_script');

* Kode yang saya berikan diatas adalah untuk memanggil file javascript
jika sudah selesai ditambahkan ke file functions.php anda silahkan anda simpan.
dan silahkan anda mendownload file2 yang diperlukan dalam kode diatas pada link berikut ini.

Jika sudah selesai di download silahkan anda ekstrak file kebutuhan-theme.zip dan silahkan anda taruh di dalam folder theme, sperti ini susunanya.

1. Buka Folder Theme

2. Pastekan Folder-folder yang sudah di ekstrak

Jika Anda sudah selesai silahkan sekarang buka Hasil karya theme anda di browser, jika terjadi Error di dalam Console atau javascript tidak berfungsi silahkan komentar diblog tutorial ini.. oke..

FOKUS pada hasil akhir theme anda:

Praktekkan dan Kembangkan, selamat berjumpa kembali dengan saya di BIMBEL WORDPRESS INDONESIA.

GOOD LUCK