WordPress: Membuat Child Themes

Terakhir diperbaharui: Sabtu, 09 September 2017 pukul 08:48
Tautan: http://darto.id/7h

Apa itu Child Themes?

Kalau ada istilah child themes pasti akan ada pula istilah parent themes. Parent themes adalah tema (themes) yang akan kita gunakan untuk CMS WordPress kita. Seperti artinya, child themes adalah keturunan dari parent themes (tema utama).

Fungsi Child Themes

Fungsi yang terutama dari child themes adalah mengambil semua peran atau konfigurasi dari tema utama (parent themes) dan kemudian kita menambahkan atau menghilangkan konfigurasi tersebut pada child themes yang akan kita terapkan untuk tampilan di backend (dasbor) dan halaman website.

Mengapa Harus Membuat Child Themes? !!!

Tema di WordPress adalah sebuah kewajiban yang harus ada. Sebelum era ada child themes, ketika kita ingin menambahkan atau menghilangkan konfigurasi di WordPress, kita menulis kodenya di functions.php yang berada di dalam folder tema. Tetapi, bagi yang pelupa tentunya akan jadi masalah besar, karena kita sudah menulis kode yang kita inginkan dan kemudian ada update tema dari developer. Bles…. hilang semua deh. Terkadang dan seringnya lupa backup juga, jadinya total disaster dah, hehehe.

Sejauh mana peran penting child themes? Saya coba uraikan beberapa hal saja, bagi yang ingin menambahkan silakan.

  • Tidak merubah parent theme. Dengan membuat child theme, semua kustomisasi yang kita buat tidak akan berpengaruh pada parent theme.
  • Aman melakukan update tema. Karena kita tidak utak-atik atau menyentuh file-file yang berada di tema utama, artinya kita akan aman ketika melakukan update yang disediakan oleh pengembang tema yang sudah kita beli.
  • Memiliki konfigurasi yang sama dengan tema utama. Lantas, kenapa tetap harus membuat child theme jika konfigurasinya sama? Kalau menurut saya sih itu keuntungannya, hehehe. Karena untuk menjawab hal ini harus balik lagi 2 poin di atas. Dan tentunya, siapa juga sih yang tidak ingin merubah dari tampilan untuk website kita? entah menambahkan style (css) atau script (javascript), pastinya setiap website ada penyesuaian terhadap apa yang kita mau.
  • Mengurangi penggunaan plugins. Poin ini hanya kecendrungan saya saja dalam menggunakan CMS WordPress, yaitu mengurangi penggunaan plugins yang bisa berdampak terhadap performa website. Ada beberapa web admin, untuk melakukan kustomisasi dari tema yang dibeli dengan keinginan tampilan, banyak menginstall plugins. Yang menurut hemat saya tentunya banyak sekali kelemahannya karena biasanya pengembang atau pembuat plugins, sebetulnya saya gak cocok nyebut pengembang hehehe, emangnya bikin kue bolu, pengembang. Tapi berhubung orang Indonesia sudah di colok hidungnya sama Google translate, taunya pengembang bukan developer, hehehe. Lanjut… banyak pengembang yang membuat plugins berawal dari tujuan pribadinya sehingga tentunya saat membuat plugins bukan untuk melengkapi plugins lainnya. Dan artinya jika kita banyak menginstall plugin akan banyak kode-kode yang bertumpang tindih atau fungsinya saling bertabrakan. Dan ini menurut saya membuat dasbor website kita menjadi tidak kondusif, xixixi.
  • Meningkatkan skill. Dengan belajar membuat child theme semakin hari anda akan semakin mengerti WordPress itu apa sih dan gimana sih kerjanya. Walaupun masih harus banyak belajar untuk mengetahui gimana cara kerja core WordPress, hehehe. Setidaknya jadi tahu bagaimana cara kustomisasi WordPress.

Cara Membuat Child Themes

1. Membuat folder di wp-content => themes dan kemudian berikan nama sesuai dengan yang diinginkan dan disarankan untuk memberikan nama yang simple, tidak panjang banget, tidak pakai spasi, tidak menggunakan nama seperti password. Contoh: dartokloning, kloningspoon. Jika ingin menggunakan dua suku kata mungkin bisa menggunakan tanda minus (strip). Contoh: darto-keren, kloning-spoon, darto-gituh.

2. Membuat style.css didalam folder child themes.

/*
 Theme Name:   Darto KLoning
 Theme URI:    https://www.kloningspoon.com/
 Description:  Darto KLoning - We Share Because We Care
 Author:       Darto KLoning
 Author URI:   https://www.kloningspoon.com
 Template:     twentyfifteen
 Version:      2016.07.14
*/

/* Terapkan kustom css anda dibawah ini
============================================ */

Yang perlu diperhatikan adalah pada isian Template, dimana isinya harus sesuai dengan nama folder dari parent theme yang ingin kita gunakan.

3. Membuat functions.php didalam folder child themes.

<?php

/*=== Memanggil css tema utama ===*/

function panggil_style_tema_utama(){
wp_enqueue_style( 'tema-utama', get_template_directory_uri() . '/style.css' );
}

add_action( 'wp_enqueue_scripts', 'panggil_style_tema_utama' );

/* Terapkan kode php atau function anda dibawah ini
=================================================== */

4. Menyiapkan file gambar dengan resolusi 1200×900 pixel dengan nama screenshot.png. Gambar ini yang akan mewakili child theme yang sudah kita buat saat di lihat di menu Appearance (tampilan) => Themes (tema).

Selesai sudah untuk pembuatan child themenya. Selebihnya anda bebas mengutak-atik child themes anda.

Selamat berekspresi dan berjuang.

CSS: Responsive Template

Terakhir diperbaharui: Kamis, 25 Agustus 2016 pukul 15:12
Tautan: http://darto.id/r

Here empty style for your need to make responsive template or theme.

Before write style, in some condition, it’s better way to have meta in your header.

<meta name="viewport" content="width=1100" />

Here the empty responsive template CSS.

/*------------------------------------------------*/
/*-------------------[RESPONSIVENESS]------------------*/
/*------------------------------------------------*/

/* Minimum width of 600 pixels. */
@media screen and (min-width: 600px) {
/* Styles */
}

/* Minimum width of 960 pixels. */
@media screen and (min-width: 960px) {
/* Styles */
}

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {

/* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

 

WordPress: Display a List of Last Updated Posts

Terakhir diperbaharui: Kamis, 25 Agustus 2016 pukul 15:12
Tautan: http://darto.id/1b

If you are using last modified date, then you might want to show a list of your recently updated posts on your site. Each time you update a post, WordPress stores the date and time of that update in the posts table as last updated date. We will show you how to create a custom WordPress query to list your most recently updated articles.

Copy code below to your functions.php

function wpb_lastupdated_posts() { 

// Query Arguments
$lastupdated_args = array(
'orderby' => 'modified',
'ignore_sticky_posts' => '1'
);

//Loop to display 5 recently updated posts
$lastupdated_loop = new WP_Query( $lastupdated_args );
$counter = 1;
echo '<ul>';
while( $lastupdated_loop->have_posts() && $counter < 5 ) : $lastupdated_loop->the_post();
echo '<li><a href="' . get_permalink( $lastupdated_loop->post->ID ) . '"> ' .get_the_title( $lastupdated_loop->post->ID ) . '</a> ( '. get_the_modified_date() .') </li>';
$counter++;
endwhile; 
echo '</ul>';
wp_reset_postdata(); 
} 

//add a shortcode
add_shortcode('lastupdated-posts', 'wpb_lastupdated_posts');

That’s all. Now if you want to display last updated posts in your theme’s template files, then you can use it like this:

<?php 
if (function_exists(wpb_lastupdated_posts)) : 
wpb_lastupdated_posts();
endif;
?>

And if you need to change in the posts or pages then you need to open these files: index.php or home.php, single.php and page.php. But sometimes theme developer change this file with template, like loop.php inside include folder.

Then you will need to locate the following code:

<?php the_modified_time('F jS, Y');?>

Replace it with:

<?php $u_time = get_the_time('U'); 
$u_modified_time = get_the_modified_time('U'); 
if ($u_modified_time >= $u_time + 86400) { 
echo "and last modified on "; 
the_modified_time('F jS, Y'); 
echo " at "; 
the_modified_time(); 
echo ", "; } ?>

Or maybe you want to not change the original post date instead add last updated info below post date, you could try WordPress plugin Last Updated Shortcode.

 

source: wpbeginner