Cara Membuat Theme WordPress dengan Bootstrap

Hai Readers jumpa lagi dengan onphpid dalam cara membuat theme wordpress dengan bootstrap sesuai apa yang onphpid sampaikan pada tutorial wordpress sebelum dalam cara install wordpress di XAMPP atau localhost.  sebenarnya kata “dengan bootstrap” tidaklah tepat karena kita membangunnya dengan PHP dan lebih tepatnya adalah membuat theme wordpress dari bootstrap. Kenapa wordpress karena wordpress merupakan CMS yang akan memudahkan kita dalam membuat website atau blog, membuat website atau blog dengan wordpress sangatlah simple karena kita cukup membuat theme atau tema wordpress dan akan lebih mudah lagi bila kita memadukannya dengan Bootstrap.

Bootstrap, siapasih sekarang yang belum tau bootstrap? Sebuah framework HTML CSS yang dilengkapi komponen website sehingga sangat mudah membuat tampilan website dengan bootstrap ini di sisi lain bootstrap telah beredar luas sehingga sudah ada beberapa template bootstrap yang bisa di unduh dengan gratis dan di tutorial membuat theme atau tema wordpress ini kita akan menggunakan sebuah template yang bernama clean blog yang bisa diunduh di http://startbootstrap.com/ secara gratis.

Baca Juga :

Cara Membuat WordPress Menjadi Unik dan Menarik

Membuat Semi Toko Online dengan WordPress

Dalam membuat theme wordpress kita perlu mengetahui bahasa pemrograman php walaupun sedikit dan sering-sering berkunjung ke codex.wordpress.org agar membuat wordpress kita menjadi website atau blog yang bagus karena membuat wordpress bekerja maksimal bukanlah perkara mudah, banyak plugin plugin yang sengaja dibuat oleh pengembang untuk membantu membuat wordpress bekerja secara optimal tapi masalah itu kita kesampingkan dahulu sebab kita akan memulai dari yang lebih sederhana yaitu membuat theme wordpress dengan bootstrap.

PERSIAPAN MEMBUAT THEME WORDPRESS DENGAN BOOTSTRAP

Unduh template bootstrap dari http://startbootstrap.com/template-overviews/clean-blog/

Buat folder theme wordpress kita dengan nama “theme-onphpid” di wp-content\themes\ pada CMS wordpress yang sudah kita install sebelumnya. Bagi yang belum tau bisa di baca di cara install wordpress.

Dan akan tampak seperti gambar berikut :

Kemudian copy-kan folder “css, img, js, fonts dan less” dari template bootstrap yang sudah kita download tadi ke dalam folder “theme-onphpid” kemudian buat file-file lain yang terdapat pada gambar berikut, jangan sampai terlewatkan agar usaha kita untuk membuat theme wordpress dengan bootstrap berhasil.

Penjelasan dari file-file pada gambar tersebut :

404.php adalah file theme wordpress untuk menampilkan pesan NOT FOUND jika halaman yang diakses tidak ditemukan.

bootstrap-walker.php : Class Walker untuk kostumisasi theme wordpess menu bawaan wordpress agar support dengan bootstrap.

footer.php : potongan dari theme wordpress.

functions.php : file yang bertugas mengatur fungsi-fungsi dan kostumisasi theme wordpress.

header.php : potongan dari theme wordpress.

index.php : file pengganti dan/atau induk dari theme wordpress. Ketika file single.php dan page.php tidak ada maka file indek lah yang akan dipanggil.

page.php : file untuk mengangani halaman ‘page’.

single.php : file untuk menangani halaman artikel secara penuh.

style.css : file yang bertanggung jawab untuk stylish sekaligus pemberi informasi tentang theme kita buat sehingga membuat wordpress tau nama dan deskripsi dari tema kita.

TAHAP PEMOTONGAN TEMPLATE BOOTSTRAP

Pada tutorial wordpress tahapan ini kita akan memotong template bootstrap yang sudah kita download tadi untuk kita jadikan kedalam beberapa file agar menjadi tema wordpress. Silahkan buka tiga file sekaligus yang berada di folder theme-onphpid yaitu header.php, index.php dan footer.php dengan text editor favoritmu dan buka juga file index.html dari template bootstrap.

Untuk bagian header.php kita ambil kode index.html dari <!DOCTYPE html> hingga </nav> karena bagian tersebut akan digunakan di home, single dan page. Sehingga akan tampak seperti berikut :

Untuk bagian index.php kita ambil dari <!– Page Header –> hingga <hr> seperti berikut :

untuk bagian footer.php pada tutorial wordpress ini tema wordpress kita ambilkan dari <!– Footer –> hingga </html> karena ini bagian paling akhir . berikut kodenya :

Lalu apakah sudah membuat wordpress tampak bagus ? bagaimana dengan single.php dan page.php. single.php akan diambilkan dari post.html dari <!– Page Header –> hingga <hr> begitu juga dengan page.php akan diambilkan dari about.html dari <!– Page Header –> hingga <hr>.

TAHAP PENGKODEAN THEME WORDPRESS

Tutorial WordPress pada tahap pengkodean theme wordpress dengan bootstrap ini kita mulai dari file style.css dengan menuliskan kode berikut sebagai informasi kepada CMS WordPress agar membuat wordpress mengetahui detail theme wordpress yang kita buat.

Kemudian login ke web wordpress di localhost/theme-wp/wp-admin kemudian masuk ke menu Appearance > Themes dan aktifkan Theme Onphpid (sesuai nama yang kita masukan di CSS diatas).

Berikutnya pada file header.php silahkan ubah kode sebelumnya dengan kode berikut ini :

Dan footer.php dengan kode berikut :

Lho kok cuma segitu pada hal di tutorial wordpress di awal tadi banyak ? ada tag <title></title>, link bootstrap, ada link font-awesome dan di footer ada script-script kok ilang ? tenang kita akan memasang css bootstrap, jquery dan pemberian tag ini didalam functions.php. nah berikut cara mendaftarkan atau menggunakan bootstrap dan font-awesome di wordpress :

Kemudian kita buka index.php dan ganti dengan kode berikut :

Kemudian single.php dan ganti dengan kode berikut :

Kemudian page.php dan ganti dengan kode berikut :

Kemudian 404.php dan ganti dengan kode berikut :

Dan terakhir pada tutorial wordpress ini adalah mengisi bootstrap-walker.php :

HASILNYA THEMES WORDPRESS DENGAN BOOTSTRAP

DEMO THEME WORDPRESS DENGAN BOOTSTRAP

DOWNLOAD THEME WORDPRESS DENGAN BOOTSTRAP

Cara Membuat WordPress Unik dan  Menarik

untuk lebih optimal membuat theme wordpress dengan bootstrap kita tambahkan CSS berikut pada file style.css :

Baca Juga Cara Membuat Website dengan WordPress

Demikian tutorial wordpress cara membuat theme wordpress dengan bootstrap dari onphpid silahkan LIKE FP ONPHPID untuk mendapatkan tutorial PHP,  tutorial wordpress,  membuat website atau tutorial tentang website lainya. Request Juga boleh kok :D. Selamat Membuat Theme WordPress.

Cara Install WordPress di XAMPP atau Localhost
Membuat Pageview di Artikel WordPress