Tuesday, April 28, 2020

wordpress plugin developement menambahkan bootstrap pada halaman admin

ketika develope plugin wordpress dan ingin menggunakan bootstrap untuk tampilan admin dari plugin kita tidak bisa langsung import boootsrap. tapi harus di wrap dulu. caranya seperti ini

download dan install dulu koala download dari sini http://koala-app.com/

kemudian buat folder isinya bootstrap.css (hasil download dari getbootrap) dan wordpress-bootstrap.less

untuk wordpress-bootstrap.less isinya seperti ini

.bootstrap-wrapper {
    @import (less) url( 'bootstrap.css' );
}

oke kalau sudah import semua ke koala

kemudian pilih file wordpress-bootstrap.less di koala
pada option strict math dicentang
selanjutnya klik compile


nanti akan ada file baru namanya wordpress-bootstrap.css

upload ke folder plugin anda, kemudian enqueue jss nya

wp_enqueue_style( 'ordero_bootstrap', WP_PLUGIN_URL.'/ordero/assets/css/wordpress-bootstrap.css' );

untuk memanggil bootsrap nya harus di wrap dulu pake class bootstrap-wrapper

<div class="bootstrap-wrapper">
        <button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>

<button type="button" class="btn btn-link">Link</button>
    </div>