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.

WordPress: Menambahkan Shortcode di dalam Widget

Terakhir diperbaharui: Minggu, 18 September 2016 pukul 10:16
Tautan: http://darto.id/6o

Sebetulnya sekarang sudah banyak WordPress theme yang mengaktifkan filter agar bisa menambahkan shortcode di widget. Tapi, ya ternyata masih ada juga theme yang belum mengaktifkan filter ini, ternyata, wah wah wah, kok bisa yah.

Bagi yang mau menambahkan shortocde di widget tetapi yang keluar malah teks shortcodenya, mungkin harus mengaktifkan filter widget_text yang bisa di cantumkan di functions.php

// mengaktifkan shortcode di dalam widget
add_filter('widget_text','do_shortcode');

Semoga membantu

WordPress: Memperbaiki Post Editor (TinyMCE)

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

Kejadian tombol hilang di post editor sebetulnya jarang sekali terjadi. Tapi entah kenapa akhirnya saya harus mengalaminya juga, hehehe. Semua tombol hilang, klik “Visual” tidak berfungsi, klik “Text” tidak berfungsi, hanya ada text editor berwarna putih saja.

Clear cache tidak juga berpengaruh. Ganti browser ternyata masalahnya tetap sama. Akhirnya timpa (rewrite) folder tinymce di  wp-include/js/, ternyata tidak juga bisa memperbaiki post editor. Kemudian mencoba buka wp-config.php dan masukkan kode:

define('CONCATENATE_SCRIPTS', false);

Alhamdulillah, akhirnya post editornya kembali normal. Tombol-tombolnya bermunculan kembali, hehehe.

WordPress: Get URL Only of Featured Image

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

Untuk menampilkan featured image di WordPress sangat mudah sekali, cukup dengan perintah:

<?php echo get_the_post_thumbnail( $post_id, $size, $attr ); ?>

Contoh:

<?php echo get_the_post_thumbnail( $post->ID, full, array( 'style' => 'margin-bottom: 15px;' ) ); ?>

Dan option sizenya bisa disesuaikan dengan keinginan kita, thumbnail, medium, large dan full atau dengan ukuran yang bisa kita custom sendiri, misal array( 100, 100).

Tapi, bagaimana kalau kita hanya menginginkan URL imagenya saja tanpa ada ukuran? Kadang hal ini kita butuhkan dengan tujuan untuk responsive display di website atau email template.

Ternyata ada function bawaan dari WordPress yang bisa kita gunakan untuk hal ini, yaitu mendapatkan URL dari featured image dan juga titlenya. Berikut kodenya:

$thumbnail_id = get_post_thumbnail_id($post->ID);
$thumbnail_object = get_post($thumbnail_id);

Cara menggunakannya adalah:

<img src="<?php $thumbnail_object->guid; ?>" style="height:auto !important; max-width:600px !important; width: 100% !important;" alt="<?php $thumbnail_object->post_title; ?>">

Okay, semoga bermanfaat :D. Bagi yang ngerti itu juga, hehehehe.

WordPress Calendar Widget Style

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

While developing a WordPress theme a lot of time you forget to style WordPress calendar widget. You can find many premium themes which do not care about WordPress calendar widget and i know i have also done a lot in past. Although it’s a lesser used functionlity but it is unwise to ignore if you are developing a premium WordPress theme.

Style 0

wordpress-calendar-widget-style0

#wp-calendar {
width:100%;
font-size:12px;
font-weight:300;
border-collapse:separate;
border-spacing:8px;
margin-left:-2px;
}

#wp-calendar
caption {
display:none;
}

#wp-calendar tbody
td {
margin-bottom:10px;
text-align:center;
-webkit-border-radius:2px;
-moz-border-radius:2px;
-ms-border-radius:2px;
-o-border-radius:2px;
border-radius:2px;
border:1px solid #f4f4f4;
padding:6px;
}

#wp-calendar tbody td:hover {
border-color:#e2e2e2;
}

#wp-calendar tbody
td.pad {
border:0;
}

#wp-calendar tbody
td#today {
color:#47C2DC;
border-color:#47C2DC;
}

#wp-calendar tfoot td#prev a,#wp-calendar tfoot td#next
a {
color:#888;
font-size:12px;
font-weight:400;
position:relative;
text-transform:uppercase;
bottom:-9px;
margin-bottom:1px;
}

#wp-calendar tfoot
td#prev {
text-align:left;
}

#wp-calendar tfoot
td#next {
text-align:right;
}

#wp-calendar thead
th {
font-size:13px;
font-weight:400;
color:#888;
text-align:center;
padding-bottom:10px;
}

#wp-calendar tbody td
a,#wp-calendar tfoot td#prev a:hover,#wp-calendar tfoot td#next a:hover {
color:#47C2DC;
}

 Style 1

wordpress-calendar-widget-style1

.widget_calendar {float: left;}
#wp-calendar {width: 100%; }
#wp-calendar caption { text-align: right; color: #333; font-size: 12px; margin-top: 10px; margin-bottom: 15px; }
#wp-calendar thead { font-size: 10px; }
#wp-calendar thead th { padding-bottom: 10px; }
#wp-calendar tbody { color: #aaa; }
#wp-calendar tbody td { background: #f5f5f5; border: 1px solid #fff; text-align: center; padding:8px;}
#wp-calendar tbody td:hover { background: #fff; }
#wp-calendar tbody .pad { background: none; }
#wp-calendar tfoot #next { font-size: 10px; text-transform: uppercase; text-align: right; }
#wp-calendar tfoot #prev { font-size: 10px; text-transform: uppercase; padding-top: 10px; }

 Style 2

wordpress-calendar-widget-style2

#wp-calendar, #wp-calendar th, #wp-calendar td {
text-align: center;
background: none;
border: none;
}
#wp-calendar {
background: none;
empty-cells: hide;
width: 260px;
font: normal 11px / 200% Verdana, Arial, Helvetica, sans-serif;
}
#wp-calendar th {
font-style: normal;
font-weight: bold;
text-transform: capitalize;
border-bottom: 1px solid #666;
}
#wp-calendar td {
text-align: center;
background: transparent url(images/entry-meta.png) repeat-x top left;
padding: 0px;
border-bottom: 1px solid #ccc;
}
#wp-calendar td:hover {
background-color: red;
}
#wp-calendar a {
text-decoration: none;
display: block;
color: #fff;
}
#wp-calendar a:hover {
background: #c5d1d9;
color: #666;
}
#wp-calendar caption {
font-weight: bold;
text-align: center;
}
#wp-calendar #today {
rgba(255, 255, 255, 0.27);
}
#wp-calendar caption {
text-align: center;
width: 100%;
}
#wp-calendar .pad {
background-color: #fff;
}
#wp-calendar #next a {
padding-right: 10px;
text-align: right;
background: #f0f3f5;
color: #666;
}
#wp-calendar #prev a {
padding-left: 10px;
text-align: left;
rgba(196, 196, 196, 0.67);
color: #666;
}
#wp-calendar #prev a:hover, #wp-calendar #next a:hover {
color: #fff;
}
#wp-calendar .pad, #wp-calendar .pad:hover {
background: rgba(255, 255, 255, 0);
}

 Style 3

wordpress-calendar-widget-style3

#wp-calendar { width: 100%; font-size: 11px; }
#wp-calendar thead th { background: #f5f5f5; border: 1px solid #ddd; border-top: none; font-size: 11px; }
#wp-calendar tbody td { text-align: center; border: 1px solid #ddd; line-height: 2.5em; transition: background 0.15s ease; -webkit-transition: background 0.15s ease; -o-transition: background 0.15s ease; -moz-transition: background 0.15s ease; }
#wp-calendar tbody td:hover { background: #f1f1f1; color: #333; }
#wp-calendar tbody td a { display: block; text-decoration: none; background: #f1f1f1; color: #333; }
#wp-calendar tbody td:hover a { background: #4d4d4d; color: #fff; }
#wp-calendar tfoot td { padding-top: 1px; padding: 4px; }
#wp-calendar caption { cursor: pointer; font-size: 13px; text-transform: uppercase; margin: 0; padding: 12px; outline: 0 none !important; background: #3b86b0; color: #fff; }
#wp-calendar tbody a { display: block; text-decoration: underline; }
#wp-calendar th { text-align: center; border: 1px solid transparent; border-top: none; padding: 7px 0; color: #a7a7a7; }
#footer #wp-calendar thead th { background: #222 }
#footer #wp-calendar tbody td { border-color: #222 }

 Style 4

wordpress-calendar-widget-style4

#calendar_wrap {
	border: 1px solid #DDD;
	border-radius: 4px;
	}

.widget_calendar #wp-calendar {
	width: 100%;
	}

.widget_calendar caption {
	font-size: 18px;
	font-style: italic;
	color: #777;
	background: #F4F4F4;
	padding: 5px 0 8px 0;
	margin-bottom: 10px;
	border-bottom: 1px solid #DDD;
	}

.widget_calendar th,
.widget_calendar td {
	text-align: center;
	}

.widget_calendar #today {
	background: #F4F4F4;
	border-radius: 4px;
	}

.widget_calendar #prev,
.widget_calendar #next {
	padding: 5px 0;
	}

 Style 5

wordpress-calendar-widget-style5

#wp-calendar { border-collapse: collapse; border:1px solid #ddd; width:100%; border-top:none; }
#wp-calendar td, #wp-calendar th { text-align:center; }
#wp-calendar caption { color: #fff; padding: 0; line-height: 39px; }
#wp-calendar thead, #wp-calendar tfoot { line-height:33px; background:#eee; }
#wp-calendar tbody { line-height:33px; }
#wp-calendar #prev, #wp-calendar #next { padding:0 10px; background:#eee; }
#wp-calendar #prev { text-align:left; }
#wp-calendar #next { text-align:right; }

 Style 6

wordpress-calendar-widget

#wp-calendar {
width:100%;
}

#wp-calendar caption {
color:#eee;
font-size:13px;
margin-top:0;
background:#111;
text-transform:uppercase;
padding:8px 0;
}

#wp-calendar thead {
font-size:10px;
background:#333;
color:#fff;
}

#wp-calendar thead th {
padding:4px 10px;
}

#wp-calendar tbody {
color:#aaa;
}

#wp-calendar tbody td {
background:#222;
color:#ccc;
text-align:center;
font-size:13px;
padding:2.5%;
}

#wp-calendar tbody td a {
color:#ccc;
text-decoration:underline!important;
}

#wp-calendar tbody td.pad {
background:#111;
}

#wp-calendar tbody .pad {
background:none;
}

#wp-calendar #today {
color:#fff;
text-shadow:0 1px 0 rgba(0,0,0,.3);
background:0;
}

#wp-calendar tfoot #next {
font-size:10px;
text-transform:uppercase;
text-align:right;
}

#wp-calendar tfoot #prev {
font-size:10px;
text-transform:uppercase;
padding-top:5px;
}

 Style 7

wordpress-calendar-widget-style6

.widget_calendar {float: left;}
#wp-calendar {width: 100%; }
#wp-calendar caption { text-align: right; color: #333; font-size: 12px; margin-top: 10px; margin-bottom: 15px; }
#wp-calendar thead { font-size: 10px; }
#wp-calendar thead th { padding-bottom: 10px; }
#wp-calendar tbody { color: #aaa; }
#wp-calendar tbody td { background: #f5f5f5; border: 1px solid #fff; text-align: center; padding:8px;}
#wp-calendar tbody td:hover { background: #fff; }
#wp-calendar tbody .pad { background: none; }
#wp-calendar tfoot #next { font-size: 10px; text-transform: uppercase; text-align: right; }
#wp-calendar tfoot #prev { font-size: 10px; text-transform: uppercase; padding-top: 10px; }

A WordPress calendar comes with core wordpress classes which is pretty simple to customize. You can find a set of WordPress calendar widget core classes to customize it by your own.

.widget_calendar {}
#calendar_wrap {}
#calendar_wrap th {}
#calendar_wrap td {}
#wp-calendar tr td {}
#wp-calendar caption {}
#wp-calendar a {}
#wp-calendar #today {}
#wp-calendar #prev {}
#wp-calendar #next {}
#wp-calendar #next a {}
#wp-calendar #prev a {}

 

source: small envelope, wp explorer

 

WordPress: Add Option, Text Field to General Settings Page

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

If you need to add an option to a site, but it doesn’t really need to be on its own page. You can probably add it to one of the existing settings pages. Here’s how to add an option to the General Settings page.

In this case, I’m adding a ‘Islamic Phrases’ field for my next WordPress plugin, probably not the best example, so go ahead and change that.

$new_general_setting = new new_general_setting();
class new_general_setting {
    function new_general_setting( ) {
        add_filter( 'admin_init' , array( &$this , 'register_fields' ) );
    }
    function register_fields() {
        register_setting( 'general', 'Islamic_Phrases_Font_Size', 'esc_attr' );
        add_settings_field('Islamic_Phrases_Font_Size', '<label for="Islamic_Phrases_Font_Size">'.__('Islamic Phrases Font Size' , 'Islamic_Phrases_Font_Size' ).'</label>' , array(&$this, 'fields_html') , 'general' );
    }
    function fields_html() {
        $value = get_option( 'Islamic_Phrases_Font_Size', '' );
        echo '<input class="small-text" type="text" id="Islamic_Phrases_Font_Size" name="Islamic_Phrases_Font_Size" value="' . $value . '" />&nbsp;px&nbsp;&nbsp;<span id="IsP_errmsg"></span>';
    }
}

 

source: trepmal