Membuat Tema WordPress Responsive dengan Bootstrap 4

21 October 2018 | Tags: , ,


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:
Membuat Tema WordPress Responsive dengan Bootstrap 4

Gambar 1. Tampilan Tema WordPress Responsive

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:

  1. Mengetahui dasar Bootstrap: membuat halaman sederhana yang responsive.
  2. Mengetahui WordPress: Mengerti cara installasi, mengganti tema, menambah widget, menu dan sebagainya.
  3. Memiliki kemampuan PHP: Sebuah keuntungan dan memudahkan anda pada proses pembuatannya.
  4. 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:

  1. index.php (Halaman blog)
  2. 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.

  1. index.php: Halaman awal blog.
  2. style.css: Deskripsi singkat dari tema sekaligus mengatur tampilan
  3. header.php: bagian untuk membuat header yang biasanya terdiri dari menu navigasi, gambar.
  4. sidebar.php: biasanya digunakan untuk menampilkan menu kategori, posting terbaru, akun sosial media, dan informasi tambahan lainnya.
  5. footer.php: bagian untuk menampilan kontak informasi, hak cipta dan posisinya paling bawah dalam halaman web.
  6. comments.php: bagian untuk menampilan form dan komentar yang sudah masuk.
  7. functions.php: Fungsi tambahan untuk tema kita. Berfungsi untuk mengatur menu, widget, pagination dan sebagainya.
  8. screenshot.png: gambar untuk menampilkan preview dari tema yang dibuat. Anda akan melihatnya ketika akan mengganti tema di Dashboard.
  9. single.php: untuk menampilan halaman artikel.
  10. page.php: untuk menampilkan halaman statis.
  11. archive.php: menampilkan kumpulan artikel yang diurut berdasarkan tanggal.
  12. category.php : menampilan kumpulan artikel berdasarkan kategori
  13. tag.php: menampilan kumpulan artikel berdasarkan tag.
  14. search.php: menampilan artikel sesuai dengan kata kunci yang dimasukkan.
  15. 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:

  1. Halaman depan, halaman yang pertama kali muncul.
  2. Halaman lain: halaman yang disediakan untuk semua halaman selain halaman depan dan ditambahkan kolom sidebar.

Rancangan halaman depan terdiri dari bagian:

  1. bagian header yang memuat menu navigasi, kota pencarian
  2. bagian body yang terdiri dari: Judul Web, Slogan Web, Daftar artikel
  3. bagian footer: informasi footer

Rancangannya dapat anda lihat pada Gambar 2 dibawah ini:
rancangan halaman depan Membuat Tema WordPress Responsive

Gambar 2. Rancangan halaman Depan

Rancangan halaman selain halaman depan terdiri dari bagian:

  1. bagian header yang memuat menu navigasi, kota pencarian
  2. 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.
  3. 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:

  1. css
    • bootstrap.min.css
  2. 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:

Template awal Membuat Tema WordPress Responsive dengan Bootstrap 4

Gambar 4. Template Awal

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&copy; 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&copy; 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: &quot;<?php echo get_search_query();?>&quot;</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:
Preview Membuat Tema WordPress Responsive dengan Bootstrap 4

Gambar 5. Tampilan Screenshot.png

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:
Daftar File Membuat Tema WordPress Responsive dengan Bootstrap 4

Gambar 6. Daftar File Tema WordPress

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 via Facebook tentang Membuat Tema WordPress Responsive dengan Bootstrap 4

Komentar tentang Membuat Tema WordPress Responsive dengan Bootstrap 4

Silahkan tulis saran, komentar dan pertanyaan dibawah!

Your email address will not be published. Required fields are marked *