Membuat Tema WordPress Responsive dengan Bootstrap 4
21 October 2018 | Tags: Membuat Tema Wordpress Responsive dengan Bootstrap 4, Tema Wordpress Responsive, Tema Wordpress Responsive dengan Bootsrap
Bagi anda pengguna WordPress mungkin sudah terbiasa menggunakan tema bawaan atau gratis yang tersedia di internet. Menggunakan tema orang lain tentunya kita harus tunduk dan patuh pada ketentuan yang mereka terapkan. Nah, kali ini kita akan bahas bagaimana cara membuat tema WordPress Responsive dengan Bootstrap 4.
Adapun tampilan tema WordPress Responsive yang akan kita buat nanti seperti pada Gambar 1 dibawah ini:
Mengapa harus Responsive? Ya karena tuntutan website sekarang tampilannya harus nyaman dibuka dengan berbagai media, baik itu: Laptop, Tablet, maupun Smartphone. Kalau tidak Responsive akan menjadi sebuah kerugian bagi kita pemilik website.
Prerequisites
Dalam artikel ini saya mengasumsikan anda:
- Mengetahui dasar Bootstrap: membuat halaman sederhana yang responsive.
- Mengetahui WordPress: Mengerti cara installasi, mengganti tema, menambah widget, menu dan sebagainya.
- Memiliki kemampuan PHP: Sebuah keuntungan dan memudahkan anda pada proses pembuatannya.
- Tidak Gampang Menyerah: Mungkin ini yang terpenting, jangan mudah putus asa. 😀
Anatomi Tema WordPress
Sebelum memulai pembuatan tema, ada baiknya kita mengenal terlebih dahulu anatomi atau susunan sebuah tema dari WordPress. Tema dari WordPress sebenarnya cukup dengan 2 file saja, yaitu:
- index.php (Halaman blog)
- style.css (Untuk mengatur tampilan).
Namun untuk keperluan yang lebih luas dan pengelolaan yang baik, diperlukan beberapa file yang mempunyai fungsi spesifik. Berikut ini anatomi umum dalam membuat tema WordPress.
- index.php: Halaman awal blog.
- style.css: Deskripsi singkat dari tema sekaligus mengatur tampilan
- header.php: bagian untuk membuat header yang biasanya terdiri dari menu navigasi, gambar.
- sidebar.php: biasanya digunakan untuk menampilkan menu kategori, posting terbaru, akun sosial media, dan informasi tambahan lainnya.
- footer.php: bagian untuk menampilan kontak informasi, hak cipta dan posisinya paling bawah dalam halaman web.
- comments.php: bagian untuk menampilan form dan komentar yang sudah masuk.
- functions.php: Fungsi tambahan untuk tema kita. Berfungsi untuk mengatur menu, widget, pagination dan sebagainya.
- screenshot.png: gambar untuk menampilkan preview dari tema yang dibuat. Anda akan melihatnya ketika akan mengganti tema di Dashboard.
- single.php: untuk menampilan halaman artikel.
- page.php: untuk menampilkan halaman statis.
- archive.php: menampilkan kumpulan artikel yang diurut berdasarkan tanggal.
- category.php : menampilan kumpulan artikel berdasarkan kategori
- tag.php: menampilan kumpulan artikel berdasarkan tag.
- search.php: menampilan artikel sesuai dengan kata kunci yang dimasukkan.
- 404.php: menampilkan pesan jika artikel atau halaman tidak ditemukan.
Rancangan Tema WordPress Responsive
Rancangan tema yang akan dibuat, kita bagi menjadi dua yaitu untuk:
- Halaman depan, halaman yang pertama kali muncul.
- Halaman lain: halaman yang disediakan untuk semua halaman selain halaman depan dan ditambahkan kolom sidebar.
Rancangan halaman depan terdiri dari bagian:
- bagian header yang memuat menu navigasi, kota pencarian
- bagian body yang terdiri dari: Judul Web, Slogan Web, Daftar artikel
- bagian footer: informasi footer
Rancangannya dapat anda lihat pada Gambar 2 dibawah ini:
Gambar 2. Rancangan halaman Depan
Rancangan halaman selain halaman depan terdiri dari bagian:
- bagian header yang memuat menu navigasi, kota pencarian
- bagian body kita bagi lagi menjadi 2 yaitu
- content: untuk menampilkan artikel, halaman, komentar dan sebagainya
- sidebar: menampilkan menu sidebar yang biasanya terdiri dari widget, artikel terbaru, arsip dan sebagainya.
- bagian footer: informasi footer
Rancangannya dapat kita lihat pada Gambar 3 berikut ini:
Gambar 3. Rancangan halaman selain halaman Depan
Langkah-langkah Pembuatan Tema WordPress Responsive
Buat folder untuk mengelola tema
Pertama-tama kita buatkan folder dengan nama: mytema (atau ganti dengan nama yang anda inginkan). Semua file yang terkait dengan tema nantinya ditaruh pada folder ini.
Download File Bootstrap:
Untuk latihan ada baiknya file Bootstrap anda download dulu dan taruh di sebuah folder. Kalau tema sudah siap publish di internet anda bisa menggantinya dengan metode Content Delivery Network (CDN).
Dalam folder mytema anda buat lagi folder dengan nama bs4 untuk menaruh file Bootstrap 4 yang sudah di download sebelumnya. Dan dalam folder bs4 buat lagi folder untuk mengelola file css dan js. Sehingga strukturnya menjadi:
- css
- bootstrap.min.css
- js
- bootstrap.min.js
- jquery-3.3.1.slim.min.js
- popper.min.js
Membuat file style.css
File style.css selain berfungsi untuk mengatur tampilan, juga untuk memberikan deskripsi dari tema yang kita buat.
mytema/style.css
/*--------------------------------------------------
Theme Name: MyTema
Theme URI: http://www.komang.my.id/
Author: Komang Sweta
Author URI: http://www.komang.my.id/
Description: MyTema: Tema Sederhana
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: blog, custom, sidebar
Text Domain: MyTema
-------------------------------------------------- */
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
line-height: 60px; /* Vertically center the text there */
background-color: #f5f5f5;
}
/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */
body > .container {
padding: 60px 15px 0;
}
.footer > .container {
padding-right: 15px;
padding-left: 15px;
}
code {
font-size: 80%;
}
.featurette
{
margin-bottom:5px;
}
.featurette-divider {
margin: 2rem 0; /* Space out the Bootstrap <hr> more */
}
/* Navbar Custom-----------------------
.navbar-custom {
background-color:#F30;
}
/* change the brand and text color */
.navbar-custom .navbar-brand,
.navbar-custom .navbar-text {
color:#ffffff;
}
.navbar-custom .navbar-nav > li > a {
color:#ffffff;
}
.dropdown-item a:active {
color:#ffffff;
}
.navbar-custom .navbar-nav > .active > a, .navbar-nav > .active > a:hover, .navbar-nav > .active > a:focus {
color: #ffffff;
background-color:transparent;
}
.navbar-custom .navbar-nav > li > a:hover, .nav > li > a:focus {
color: #9c3;
}
/*---Comments---*/
.comments
{
border-top:1px #ccc solid;
padding:10px;
margin-top:10px;
margin-bottom:20px;
}
.comments li
{
list-style:none;
}
.comments h3, .comments h2
{
color:#930;
padding:5px;
}
.comment-body
{
border:1px #ccc dashed;
margin-bottom:10px;
padding:20px 10px;
}
.comment-meta
{
color:#666;
pading:10px;
}
.comment-meta a
{
color:#666;
}
.comment-meta img
{
float:left;
width:auto;
margin-right:10px;
}
.comment-reply-link
{
background:#930;
color:#fff;
padding:3px;
border:#ccc 1px solid;
border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
}
.comment-reply-link a:hover
{
background:#fff;
color:#930;
}
#respond {
padding:10px;
background:#f5f5f5;
border:1px solid #CCC;
}
#respond input[type=text], textarea {
width:100%;
background:#fff;
color:#930;
border: 1px solid #930;
padding:5px;
height:auto;
border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
}
#respond input[type=text]:focus, textarea:focus {
box-shadow: 0 0 5px rgba(81, 203, 238, 1);
margin: 5px 1px 3px 0px;
border: 1px solid rgba(81, 203, 238, 1);
}
#author {
font-size:: 16px;
color:#1d1d1d;
}
#url {
color: #21759b;
}
#submit {
background:#930;
color:#fff;
border: 1px solid #693;
padding:5px;
border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
}
#submit:hover {
background:#093;
color:#fff;
border: 1px solid #930;
}
Menyiapkan template sederhana Bootstrap
Template sederhana yang kita buat ini terdiri dari bagian: header, content, sidebar dan footer seperti pada Gambar 4 dibawah ini:
Source Code template awal
<!---header.php--->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Membuat Tema WordPress Responsive</title>
<link href="bs4/css/bootstrap.min.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
</head>
<body>
<header>
<nav class="navbar navbar-expand-md fixed-top navbar-custom shadow-sm">
<div class="container">
<a class="navbar-brand" href="#">MyBlog</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
<form class="form-inline mt-2 mt-md-0">
<input class="form-control mr-sm-2" type="text" placeholder="Cari" aria-label="Search">
<button class="btn btn-info my-2 my-sm-0" type="submit">Cari</button>
</form>
</div>
</div>
</nav>
</header>
<main role="main" class="container">
<div class="row">
<!---end header.php--->
<!---temps.php--->
<div class="col-md-8 blog-main">
<div class="blog-post">
{CONTENT}
</div><!-- /.blog-post -->
</div><!-- /.blog-main -->
<!---end temps.php--->
<!---sidebar.php---->
<aside class="col-md-4 blog-sidebar">
{SIDEBAR}
</aside><!-- /.blog-sidebar -->
<!---end sidebar.php--->
<!---footer.php--->
</div><!-- /.row -->
</main><!-- /.container -->
<footer class="footer">
<div class="container"><center>
Copyright© 2018 MyBlog
</center></div>
</footer>
<script src="bs4/js/jquery-3.3.1.slim.min.js"></script>
<script src="bs4/js/popper.min.js"></script>
<script src="bs4/js/bootstrap.min.js"></script>
</body>
</html>
<!---end -footer.php--->
Bagi template menjadi header, sidebar, footer
Template awal diatas kemudian kita pecah menjadi beberapa bagian yaitu: header,sidebar, dan footer. Bagian temps bisa anda abaikan, karena nanti akan disertakan pada file lain. Baris source code yang menyertakan sumber file css dan js perlu kita sedikit modikasi karena posisinya relatif.
Misalnya
<link href="bs4/css/bootstrap.min.css" rel="stylesheet">
kita ubah menjadi
<link href="<?php bloginfo('template_url');?>/bs4/css/bootstrap.min.css" rel="stylesheet">
Source code header.php
mytema/header.php
<!---header.php--->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Membuat Tema WordPress Responsive</title>
<link href="<?php bloginfo('template_url');?>/bs4/css/bootstrap.min.css" rel="stylesheet">
<link href="<?php bloginfo('stylesheet_url');?>" rel="stylesheet">
</head>
<body>
<header>
<nav class="navbar navbar-expand-md fixed-top navbar-custom shadow-sm">
<div class="container">
<a class="navbar-brand" href="#">MyBlog</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
<form class="form-inline mt-2 mt-md-0">
<input class="form-control mr-sm-2" type="text" placeholder="Cari" aria-label="Search">
<button class="btn btn-info my-2 my-sm-0" type="submit">Cari</button>
</form>
</div>
</div>
</nav>
</header>
<main role="main" class="container">
<div class="row">
<!---end header.php--->
Source Code sidebar.php
mytema/sidebar.php
<!---sidebar.php--->
<aside class="col-md-4 blog-sidebar">
{SIDEBAR}
</aside><!-- /.blog-sidebar -->
<!---end sidebar.php--->
Source Code footer.php
mytema/footer.php
<!---footer.php--->
</div><!-- /.row -->
</main><!-- /.container -->
<footer class="footer">
<div class="container"><center>
Copyright© 2018 MyBlog
</center></div>
</footer>
<script src="<?php bloginfo('template_url');?>/bs4/js/jquery-3.3.1.slim.min.js"></script>
<script src="<?php bloginfo('template_url');?>/bs4/js/popper.min.js"></script>
<script src="<?php bloginfo('template_url');?>/bs4/js/bootstrap.min.js"></script>
</body>
</html>
<!---end -footer.php--->
Download file class-wp-bootstrap-navwalker.php
File ini berfungsi untuk mengatur menu navigasi Bootstrap. Silahkan download file class-wp-bootstrap-navwalker.php dan taruh pada folder mytema.
Download file wp_bootstrap_pagination.php
File ini berfungsi untuk mengatur tampilan pagination. Silahkan download file wp_bootstrap_pagination.php dan taruh juga pada folder mytema.
Buat file functions.php
File ini berfungsi untuk mengatur menu, widget dan pagination, dan sebagainya.
mytema/functions.php
<?php
require_once get_template_directory() . '/class-wp-bootstrap-navwalker.php';
require_once get_template_directory() . '/wp_bootstrap_pagination.php';
register_nav_menus( array(
'primary' => __( 'Primary Menu', 'MyTema' ),
) );
add_theme_support( 'post-thumbnails' );
function set_excerpt_length()
{
return 35;
}
add_filter('excerpt_length','set_excerpt_length');
function wpb_init_widgets($id)
{
register_sidebar(array(
'name' =>'Sidebar',
'id' =>'sidebar',
'before_widget' =>'<div class="p-3 list_sb">',
'after_widget' =>'</div>',
'before_title' =>'<h4><i class="fa fa-caret-right"></i> ',
'after_title' =>'</h4>'
));
}
add_action('widgets_init','wpb_init_widgets');
function customize_wp_bootstrap_pagination($args) {
$args['previous_string'] = 'previous';
$args['next_string'] = 'next';
return $args;
}
add_filter('wp_bootstrap_pagination_defaults', 'customize_wp_bootstrap_pagination');
?>
Modifikasi header.php (untuk menu)
Agar menu navigasi berfungsi, maka ubah file header.php mulai dari baris 22 sampai 37, diganti dengan
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'depth' => 2, 'container' => '', 'container_class' => '', 'container_id' => '', 'menu_class' => 'navbar-nav mr-auto', 'fallback_cb' => 'WP_Bootstrap_Navwalker::fallback', 'walker' => new WP_Bootstrap_Navwalker(), ) ); ?>
Sehingga file header selengkapnya akan menjadi:
mytema/header.php
<!---header.php--->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title><?php is_front_page()? bloginfo('description'):wp_title();?></title>
<link href="<?php bloginfo('template_url');?>/bs4/css/bootstrap.min.css" rel="stylesheet">
<link href="<?php bloginfo('stylesheet_url');?>" rel="stylesheet">
</head>
<body>
<header>
<!-- Fixed navbar -->
<nav class="navbar navbar-expand-md fixed-top navbar-custom shadow-sm">
<div class="container">
<a class="navbar-brand" href="<?php echo home_url(); ?>">MyBlog</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<?php
wp_nav_menu( array(
'theme_location' => 'primary',
'depth' => 2,
'container' => '',
'container_class' => '',
'container_id' => '',
'menu_class' => 'navbar-nav mr-auto',
'fallback_cb' => 'WP_Bootstrap_Navwalker::fallback',
'walker' => new WP_Bootstrap_Navwalker(),
) );
?>
<form class="form-inline mt-2 mt-md-0" action="<?php echo home_url( '/' ); ?>">
<input class="form-control mr-sm-2" type="text" name="s" id="s" placeholder="Cari" value="<?php if(is_search()){ echo get_search_query();} ?>" aria-label="Search">
<button class="btn btn-info my-2 my-sm-0" type="submit">Cari</button>
</form>
</div>
</div>
</nav>
</header>
<!-- Begin page content -->
<main role="main" class="container">
<?php
if(is_front_page())
{
?>
<center>
<h1><?php echo bloginfo('name');?></h1>
<small><?php echo bloginfo('description');?></small>
</center>
<?php
}
?>
<div class="row">
<!---end header.php--->
Modifikasi file sidebar.php
File sidebar kita modifikasi biar bisa menampilkan menu atau widget secara dinamis.
mytema/sidebar.php
<!---sidebar.php--->
<aside class="col-md-4 blog-sidebar">
<?php if(is_active_sidebar('sidebar')):?>
<?php dynamic_sidebar('sidebar'); ?>
<?php endif ?>
</aside><!-- /.blog-sidebar -->
<!---end sidebar.php--->
Sampai disini kita sudah membuat kerangka tema WordPress responsive. Bagaimana, masih bisa lanjut?
Ok, kita lanjut brow.
Buat file index.php
File index.php akan menjadi default untuk tema Worpdress yang kita buat.
mytema/index.php
<?php get_header();?>
<div class="blog-main">
<div class="blog-post">
<?php if(have_posts()): ?>
<?php while(have_posts()): the_post();?>
<hr class="featurette-divider" />
<div class="row featurette">
<div class="col-md-4">
<?php if(has_post_thumbnail()):?>
<a href="<?php the_permalink(); ?>"><img src="<?php echo get_the_post_thumbnail_url(); ?>" class="img-fluid rounded" /></a>
<?php else:?>
<img src="<?php bloginfo('template_url');?>/images/no_image.png" class="img-fluid rounded" />
<?php endif;?>
</div>
<div class="col-md-8">
<a href="<?php the_permalink(); ?>"><h3><?php the_title();?></h3></a>
<?php the_excerpt(); ?>
<small> <cite><?php the_time('j F Y');?> | Tags: <?php the_tags(); ?> | <a href="<?php the_permalink(); ?>">Selengkapnya..</a> </cite></small>
</div>
</div>
<?php endwhile; ?>
<?php
if ( function_exists('wp_bootstrap_pagination') )
wp_bootstrap_pagination();
?>
<?php else : ?>
<p><?php __('No Post Found'); ?></p>
<?php endif;?>
</div>
</div>
<?php get_footer();?>
Buat file single.php
File ini berfungsi untuk menampilkan detail dari setiap artikel atau post, form komentar, daftar komentar. File single.php nantinya akan memanggil template content.php dan comments.php
mytema/single.php
<?php get_header();?>
<div class="col-md-8 blog-main">
<div class="blog-post">
<?php if(have_posts()): ?>
<?php while(have_posts()): the_post();?>
<?php get_template_part('content',get_post_format());?>
<?php endwhile; ?>
<?php else : ?>
<p><?php __('No Post Found'); ?></p>
<?php endif;?>
</div> <!--End blog-post-->
</div> <!--End blog-main-->
<?php get_sidebar();?>
<?php get_footer();?>
Buat file content.php
File ini merupakan template tampilan dari setiap detail artikel.
mytema/content.php
<h2 class="blog-post-title"><?php the_title();?></h2>
<p><small> <cite><i class="fa fa-calendar"></i> <?php the_time('j F Y');?> | <i class="fa fa-tags"></i> <?php the_tags(); ?></cite></small></p>
<hr>
<?php the_content(); ?>
<?php comments_template();?>
Buat file comments.php
File ini merupakan template untuk form dan daftar komentar dari setiap artikel.
mytema/comments.php
<div class="comments">
<h4>Saran dan Komentar</h4>
<?php $args = array(
'walker' => null,
'max_depth' => '',
'style' => 'ul',
'callback' => null,
'end-callback' => null,
'type' => 'all',
'reply_text' => 'Balas',
'page' => '',
'per_page' => '',
'avatar_size' => 40,
'reverse_top_level' => null,
'reverse_children' => '',
'format' => 'html5', // or 'xhtml' if no 'HTML5' theme support
'short_ping' => false, // @since 3.6
'echo' => true // boolean, default is true
); ?>
<?php
wp_list_comments($args,$comments);
$comments_args = array(
'label_submit'=>'Kirim Komentar',
'title_reply'=>'Silahkan tulis saran, komentar dan pertanyaan dibawah!',
'comment_notes_after' => '',
'comment_field' => '<p class="comment-form-comment"><label for="comment">' . _x( 'Tulis Komentar', 'noun' ) . '</label><br /><textarea id="comment" name="comment" aria-required="true"></textarea></p>',
);
comment_form($comments_args);
?>
</div>
Buat file archive.php
File ini berfungsi untuk menampilkan kumpulan artikel diurut berdasarkan tanggal.
mytema/archive.php
<?php get_header();?>
<div class="col-md-8 blog-main">
<div class="blog-post">
<?php if(have_posts()): ?>
<h2><?php echo get_the_archive_title(); ?></h2>
<?php while(have_posts()): the_post();?>
<hr class="featurette-divider" />
<div class="row featurette">
<div class="col-md-4">
<?php if(has_post_thumbnail()):?>
<a href="<?php the_permalink(); ?>"><img src="<?php echo get_the_post_thumbnail_url(); ?>" class="img-fluid rounded" /></a>
<?php else:?>
<img src="<?php bloginfo('template_url');?>/images/no_image.png" class="img-fluid rounded" />
<?php endif;?>
</div>
<div class="col-md-8">
<a href="<?php the_permalink(); ?>"><h3><?php the_title();?></h3></a>
<?php the_excerpt(); ?>
<small> <cite><?php the_time('j F Y');?> |Tags: <?php the_tags(); ?> | <a href="<?php the_permalink(); ?>">Selengkapnya..</a> </cite></small>
</div>
</div>
<?php endwhile; ?>
<?php
if ( function_exists('wp_bootstrap_pagination') )
wp_bootstrap_pagination();
?>
<?php else : ?>
<p><?php __('No Post Found'); ?></p>
<?php endif;?>
</div> <!--End blog-post-->
</div> <!--End blog-main-->
<?php get_sidebar();?>
<?php get_footer();?>
Buat file category.php
File ini berfungsi untuk menampilkan kumpulan artikel berdasarkan kategori.
mytema/category.php
<?php get_header();?>
<div class="col-md-8 blog-main">
<div class="blog-post">
<?php if(have_posts()): ?>
<h2>Kumpulan Artikel: <?php single_cat_title();?></h2>
<?php while(have_posts()): the_post();?>
<hr class="featurette-divider" />
<div class="row featurette">
<div class="col-md-4">
<?php if(has_post_thumbnail()):?>
<a href="<?php the_permalink(); ?>"><img src="<?php echo get_the_post_thumbnail_url(); ?>" class="img-fluid rounded" /></a>
<?php else:?>
<img src="<?php bloginfo('template_url');?>/images/no_image.png" class="img-fluid rounded" />
<?php endif;?>
</div>
<div class="col-md-8">
<a href="<?php the_permalink(); ?>"><h3><?php the_title();?></h3></a>
<?php the_excerpt(); ?>
<small> <cite><?php the_time('j F Y');?> | Tags: <?php the_tags(); ?> | <a href="<?php the_permalink(); ?>">Selengkapnya..</a> </cite></small>
</div>
</div>
<?php endwhile; ?>
<?php
if ( function_exists('wp_bootstrap_pagination') )
wp_bootstrap_pagination();
?>
<?php else : ?>
<p><?php __('No Post Found'); ?></p>
<?php endif;?>
</div> <!--End blog-post-->
</div> <!--End blog-main-->
<?php get_sidebar();?>
<?php get_footer();?>
Buat file tag.php
File ini berfungsi untuk menampilkan kumpulan artikel berdasarkan tag.
mytema/tag.php
<?php get_header();?>
<div class="row">
<div class="col-md-8 blog-main">
<div class="blog-post">
<?php if(have_posts()): ?>
<h2>Tags: <?php echo single_tag_title('',false);?></h2>
<?php while(have_posts()): the_post();?>
<hr class="featurette-divider" />
<div class="row featurette">
<div class="col-md-4">
<?php if(has_post_thumbnail()):?>
<a href="<?php the_permalink(); ?>"><img src="<?php echo get_the_post_thumbnail_url(); ?>" class="img-fluid rounded" /></a>
<?php else:?>
<img src="<?php bloginfo('template_url');?>/images/no_image.png" class="img-fluid rounded" />
<?php endif;?>
</div>
<div class="col-md-8">
<a href="<?php the_permalink(); ?>"><h3><?php the_title();?></h3></a>
<?php the_excerpt(); ?>
<small> <cite><?php the_time('j F Y');?> | Tags: <?php the_tags(); ?> | <a href="<?php the_permalink(); ?>">Selengkapnya..</a> </cite></small>
</div>
</div>
<?php endwhile; ?>
<?php
if ( function_exists('wp_bootstrap_pagination') )
wp_bootstrap_pagination();
?>
<?php else : ?>
<p><?php __('No Post Found'); ?></p>
<?php endif;?>
</div> <!--End blog-post-->
</div> <!--End blog-main-->
<?php get_sidebar();?>
</div> <!--End row-->
<?php get_footer();?>
Buat file search.php
File ini berfungsi untuk menampilkan artikel berdasarkan kata kunci pencarian.
mytema/search.php
<?php get_header();?>
<div class="col-md-8 blog-main">
<div class="blog-post">
<?php if(have_posts()): ?>
<h2>Hasil Pencarian dengan Keyword: "<?php echo get_search_query();?>"</h2>
<?php while(have_posts()): the_post();?>
<hr class="featurette-divider" />
<div class="row featurette">
<div class="col-md-4">
<?php if(has_post_thumbnail()):?>
<a href="<?php the_permalink(); ?>"><img src="<?php echo get_the_post_thumbnail_url(); ?>" class="img-fluid rounded" /></a>
<?php else:?>
<img src="<?php bloginfo('template_url');?>/images/no_image.png" class="img-fluid rounded" />
<?php endif;?>
</div>
<div class="col-md-8">
<a href="<?php the_permalink(); ?>"><h3><?php the_title();?></h3></a>
<?php the_excerpt(); ?>
<small> <cite><i class="fa fa-calendar"></i> <?php the_time('j F Y');?> | <i class="fa fa-tags"></i> Tags: <?php the_tags(); ?> | <a href="<?php the_permalink(); ?>"><i class="fa fa-hand-o-right" aria-hidden="true"></i> Selengkapnya..</a> </cite></small>
</div>
</div>
<?php endwhile; ?>
<?php else : ?>
<p><?php __('No Post Found'); ?></p>
<?php endif;?>
</div> <!--End blog-post-->
</div> <!--End blog-main-->
<?php get_sidebar();?>
<?php get_footer();?>
Buat file page.php
File ini berfungsi untuk menampilkan detail halaman.
mytema/page.php
<?php get_header();?>
<div class="col-md-8 blog-main">
<div class="blog-post">
<?php if(have_posts()): ?>
<?php while(have_posts()): the_post();?>
<?php get_template_part('content_page',get_post_format());?>
<?php endwhile; ?>
<?php else : ?>
<p><?php __('No Post Found'); ?></p>
<?php endif;?>
</div> <!--End blog-post-->
</div> <!--End blog-main-->
<?php get_sidebar();?>
<?php get_footer();?>
Buat file content_page.php
File ini merupakan template dari detail halaman.
mytema/content_page.php
<h2 class="blog-post-title"><?php the_title();?></h2>
<p><small> <cite><i class="fa fa-calendar"></i> <?php the_time('j F Y');?> | <i class="fa fa-tags"></i> <?php the_tags(); ?></cite></small></p>
<hr>
<?php the_content(); ?>
Buat file 404.php
File ini berfungsi sebagai tampilan jika halaman atau url yang diakses pengguna tidak ditemukan.
mytema/404.php
<?php get_header();?>
<div class="col-md-8 blog-main">
<div class="blog-post">
<h2>Oops! Halaman tidak ditemukan.</h2>
<hr>
<p>URL yang anda masukkan salah. Silahkan pilih lewat menu!</p>
</div> <!--End blog-post-->
</div> <!--End blog-main-->
<?php get_sidebar();?>
<?php get_footer();?>
Buat file screenshot.png
Berfungsi untuk menampilkan preview dari tema ketika mau menggantinya di Dashboard, seperti pada Gambar 5 dibawah ini:
Cek Semua file Tema WordPress Responsive dengan Bootstrap 4
Untuk memastikan semua file tema sudah anda buat, silahkan bandingkan dengan daftar file pada Gambar 6 berikut ini:
Nah demikian artikel kali ini, harapannya anda bisa membuat tema WordPress Responsive. Ingat kuncinya adalah coba coba dan coba. Jangan pernah putus asa.
Download Source Code Membuat Tema WordPress Responsive dengan Bootstrap 4
Klik tombol Facebook / Twitter / Google + untuk Download
Komentar tentang Membuat Tema WordPress Responsive dengan Bootstrap 4
untuk pagingnya gak bisa, itu hanya support bootstrap 3. kalo untuk bootstrap 4 gmn ya?
Pelajarai dokumentasinya di web Bootstrap.
File Donwloadnya dimana yah?
Klik tombol FB atau Tweet, nanti akan muncul link-nya.