Bootstrap and WordPress Theme Integration

Selamat pagi, kawan2. Apakabar? Semoga baik2 saja ya….oiya sudah lama nih belum nulis2 lagi, mungkin sibuk kali ya…kali ini ada tutorial nih buat newbie seperti saya untuk mengintegrasikan bootstrap dengan WordPress, bosan kali ya web theme dari wordpress atau memang punya web theme buatan sendiri. nah, ikuti yuk langkah2 nya. seperti biasa langsung saja ya langkah-langkahnya.

Misal kita mau integrasi bootstrap web heme yang kita dapat download dari colorlib. link sebegai berikut https://colorlib.com/wp/template/animal-shelter/

Langkah 1
Ekstrak file hasil download tersebut.

Langkah 2
Buatlah folder bernama catndogadopt pada lokasi folder berikut F:\xampp\htdocs\wordpress\wp-content\themes

Langkah 3
Buatlah folder dan file dengan struktur pada folder catndogadopt berikut:

Langkah 4
Supaya file css dan jquey dapat diakses, maka perlu didaftarkan file functions.
berikut script nya.

function catndogadopt_scripts() {

//Including CSS & JavaScript
wp_enqueue_style( 'fonts', 'https://fonts.googleapis.com/css?family=Poppins:100,200,400,300,500,600,700',true,'','all');
wp_enqueue_style( 'linearicons', get_template_directory_uri() . '/css/linearicons.css',true,'','all');
wp_enqueue_style( 'font-awesome.min', get_template_directory_uri() . '/css/font-awesome.min.css',true,'4.7.0','all');
wp_enqueue_style( 'bootstrap', get_template_directory_uri() . '/css/bootstrap.css',true,'4.0.0-beta','all'); 
wp_enqueue_style( 'magnific-popup', get_template_directory_uri() . '/css/magnific-popup.css',true,'','all');
wp_enqueue_style( 'nice-select', get_template_directory_uri() . '/css/nice-select.css',true,'','all');
wp_enqueue_style( 'animate.min', get_template_directory_uri() . '/css/animate.min.css',true,'3.5.1','all');
wp_enqueue_style( 'owl.carousel', get_template_directory_uri() . '/css/owl.carousel.css',true,'2.2.0','all');
wp_enqueue_style( 'main', get_template_directory_uri() . '/css/main.css',true,'','');

wp_enqueue_script('popper.min', 'https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js', array('jquery'), true);
wp_enqueue_script('bootstrap.min', get_template_directory_uri() . '/js/vendor/bootstrap.min.js', array('jquery'),'4.0.0', true);
wp_enqueue_script('googleapis','https://maps.googleapis.com/maps/api/js?key=AIzaSyBhOdIF3Y9382fqJYt5I_sswSrEw5eihAA', array('jquery'), true);
wp_enqueue_script('easing.min', get_template_directory_uri() . '/js/easing.min.js', array('jquery'), true);
wp_enqueue_script('hoverIntent', get_template_directory_uri() . '/js/hoverIntent.js', array('jquery'),'1.8.1', true);
wp_enqueue_script('superfish.min', get_template_directory_uri() . '/js/superfish.min.js', array('jquery'),'1.7.9', true);
wp_enqueue_script('jquery.ajaxchimp.min', get_template_directory_uri() . '/js/jquery.ajaxchimp.min.js', array('jquery'), true);
wp_enqueue_script('jquery.magnific-popup.min', get_template_directory_uri() . '/js/jquery.magnific-popup.min.js', array('jquery'),'1.1.0', true);
wp_enqueue_script('owl.carousel.min', get_template_directory_uri() . '/js/owl.carousel.min.js', array('jquery'), true);
wp_enqueue_script('jquery.nice-select.min', get_template_directory_uri() . '/js/jquery.nice-select.min.js', array('jquery'),'1.0', true);

wp_enqueue_script('main', get_template_directory_uri() . '/js/main.js', array('jquery'), false);

}
add_action( 'wp_enqueue_scripts', 'catndogadopt_scripts' );

Langkah 5
Pada file header.php script nya dapat didonwload pada link berikut

Langkah 6
Pada file footer.php script nya dapat didownload pada link berikut

Done.

Jika mengikuti langkah2 dengan benar, maka berikut hasilnya. Semoga kawan2 dapat manfaat dari tutorial yang sederhana ini. Jika ada kesalahan mohon dibantu untuk infokan.

 

Terimakasih

Okto

Referencess:
https://www.sitepoint.com/bootstrap-wordpress-theme-integration/
https://colorlib.com/wp/template/animal-shelter/

 

Advertisements

Custom Post Type pages are “not found”

Halo selamat malam kawan-kawan, semoga masih ada yang semangat ya..malam ini saya ingin berbagi sedikit trik mengenai menampilkan custom post type yang telah di create pada WordPress

ini cukup mudah, ikuti langkah berikut:

Langkah-1
login admin

Langkah-2
Pilih Menu Setting

Langkah-3
Pilih submenu Permalink,

Langkah-4
Klik Button Save Changes.

Sumber: https://wordpress.stackexchange.com/questions/219974/single-custom-post-type-page-redirecting-to-404-page