Create New Theme WordPress From Bootstrap

Nah, hari ini kita membahas bagaimana cara merubah theme wordpress yang kita sukai. Kali ini kita mencoba merubah theme wordpress dari Bootstrap. Tanpa basa-basi lagi, yuk kita nyimak bagaimana caranya.

1. Misal kita siapkan terlebih dahulu theme bootstrap yang kita buat atau sudah tersedia di mbah Google tercinta.
Kita download di URL: http://www.wpfreeware.com/magexpress-fancy-style-wordpress-magazine-theme/

1

2. Persiapkan file-file wordpress seperti berikut:

2

3. Kemudian, register file CSS dan file Jquery pada wordpress

3

function twentysixteen_scripts() {
 // Add custom fonts, used in the main stylesheet.
 wp_register_style('bootstrap.min', get_template_directory_uri() . '/css/bootstrap.min.css');
 wp_register_style('font-awesome.min', get_template_directory_uri() . '/css/font-awesome.min.css');
 wp_register_style('animate', get_template_directory_uri() . '/css/animate.css');
 wp_register_style('slick', get_template_directory_uri() . '/css/slick.css');
 wp_register_style('theme', get_template_directory_uri() . '/css/theme.css');
 wp_register_style('style', get_template_directory_uri() . '/css/style.css');
 
 wp_enqueue_style( 'bootstrap.min' );
 wp_enqueue_style( 'font-awesome.min' );
 wp_enqueue_style( 'animate' );
 wp_enqueue_style( 'slick' );
 wp_enqueue_style( 'theme' );
 wp_enqueue_style( 'style' );
 
 wp_enqueue_script('jquery.min', get_template_directory_uri() . '/js/jquery.min.js');
 wp_enqueue_script('wowjs', get_template_directory_uri() . '/js/wow.min.js');
 wp_enqueue_script('bootstrapjs', get_template_directory_uri() . '/js/bootstrap.min.js'); 
 wp_enqueue_script('slickjs', get_template_directory_uri() . '/js/slick.min.js'); 
 wp_enqueue_script('customjs', get_template_directory_uri() . '/js/custom.js'); 
 
}
add_action( 'wp_enqueue_scripts', 'twentysixteen_scripts' );

Kemudian, file header.php letakkan script <?php wp_head(); ?>

4. Hit URL wordpress yang telah kita buat

4

 

5. Done 😀

Sekian Terimakasih,
Regards,

Okto Alhamda Putra

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s