Create A Modal Box on WordPress Dashboard

Recently I was writing a plugin for a client. It was a simple plugin to manage invoices and customers. The development is pretty fast thanks to Elliot Condon for his awesome ACF plugin.

One of the plugin’s requirement is user can add a new customer directly from the invoice page. As default, I put a post object field for user to select the existing customer. So I decided to put the add new customer form in a modal box. And after some while looking for, I finally found how to create it using WordPress’ bundled Thickbox.

Enqueueing Thickbox Libraries

First, we need to enqueue Thickbox’s JS and CSS with simply:


Create A Trigger Button

Then we need a button to trigger the popup when it’s clicked. It must have .thickbox class so the javascript can handle it properly. To have it button-like visual, append .button class.

Next part is building the URL. It consists of 4 important query args: action, TB_iframe, width, and height. The action value determines our hook when creating the page. So here how the button looks like:

$url = add_query_arg( array(
    'action'    => 'foo_modal_box',
    'TB_iframe' => 'true',
    'width'     => '600',
    'height'    => '400'
), admin_url( 'admin.php' ) );

echo '<a href="' . $url . '" class="button button-primary thickbox">' . __( 'Add New Customer', 'foo' ) . '</a>';

In code above, we use add_query_arg() to build our URL. The result would be:

Create the Page

We’ll hook to admin_action_{$action} to create our page. By default, we’ll get a blank response when requesting to that page. We can simply testing with an echo and exit.

function foo_render_action_page() {
    define( 'IFRAME_REQUEST', true );

    // ... your content here ...
add_action( 'admin_action_foo_modal_box', 'foo_render_action_page' );

Note the IFRAME_REQUEST constant, it will remove extra 32px top padding of the <html> added by .wp-toolbar.

iframe_header() and iframe_footer() work like wp_head() and wp_footer() on theme. They will output base HTML page tailored for iframe view. That means no admin bar, no admin menu, just empty page.

Alright, go on and try clicking our button. TADAA! 🙂

Belajar Menggunakan Bower

Bower adalah salah satu package manager untuk pengembangan front-end web. Sesuai kategorinya, Bower berfungsi untuk memudahkan kita mengatur paket atau library apa saja yang kita butuhkan saat mendevelop suatu aplikasi, dalam hal ini front-end (css/js). Kita tidak perlu repot untuk mendownload library satu-per-satu ketika akan menggunakannya. Begitu juga ketika ada versi baru dari library tersebut. Cukup dengan mengetikkan satu perintah dan voila, semuanya akan terdownload secara otomatis.

Hampir semua library yang terdapat di repositori publik dapat diambil menggunakan Bower. Biasanya repo-repo ini ditempatkan di Github oleh pemiliknya dan bersifat open-source. Nah sekarang kita coba untuk menggunakan Bower.

Install Git dan NodeJS

Ada 2 software yang menjadi ketergantungan si Bower ini, yaitu Git dan NodeJS. Jadi silahkan install terlebih dulu kedua software Keduanya bisa diperoleh di:

Install Bower

Untuk menginstall bower, kita menggunakan NPM (Node Package Manager) yang sudah terpasang saat kita menginstall NodeJS. FYI, NPM ini cara kerjanya juga sama dengan Bower. 😀 Kita pasang Bower dengan perintah berikut:

$ npm install -g bower

Jika muncul error permission denied, jalankan lagi perintah itu dengan sudo.

Menggunakan Bower

Sebelumnya pindah dulu ke direktori proyek kita. Jika kita memulai proyek baru, maka bisa menggunakan perintah:

$ bower init

Kemudian kita akan diberikan wizard untuk mengisi beberapa detail tentang proyek kita (kepo deh). Setelah itu kita bisa menginstall paket-paket yang kita butuhkan. Misal kita akan menginstall Twitter Bootstrap:

$ bower install bootstrap --save

Perintah ini otomatis akan men-download semua file Bootstrap yang siap digunakan. Tidak ketinggalan juga library yang dibutuhkan Bootstrap, seperti jQuery, juga akan otomatis ter-download. Dengan opsi --save maka library yang kita install otomatis akan ditambahkan ke file bower.json. Kita bisa mengedit file ini langsung kemudian jalankan perintah:

$ bower install

Maka semua library yang tertulis di bower.json akan di-download, dan lagi-lagi secara otomatis juga men-download apa yang mereka butuhkan. Awesome! 😮

Lebih jauh tentang Bower, mangga dicek di webnya :))

P.S. Mas Rahmat Awaludin punya video bagus buat kenalan dengan Bower di Malescast.

Array Dereference in PHP 5.4

Found this out when deploying my new app into server. I used PHP 5.4 in my local machine, and unfortunately its 5.3 in my server. The app was blank and the log inform me:

PHP Parse error:  syntax error, unexpected '[', expecting ')' in /some/file.php on line 114

We need a temporary variable to fix it:

// a function returning array()
getAll() {
    return array( 1, 2, 3 );

// in PHP 5.4, we can simply:
$first_number = getAll()[0];

// my fix:
$numbers = getAll();
$first_number = $numbers[0];

Fix Missing Mysqld.sock on Linux

Hi! It’s been a long time since my last post. Why I wrote this? It’s because I got this error last night and it annoyed me so much. Well, I’ve ever got the same error, several months ago.

Alright, the error is kind like this:
ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/var/run/mysqld/mysqld.sock' (2)

We could find that error from PHP error notice or from Terminal when we try to open MySQL connection.

After some hours of Googling, and have no result, I tried my own way. I took it from several sources. And here’s how:

  1. You have to use your root access
  2. Change the directory to /var/run/mysqld
    cd /var/run/mysqld
  3. Create an empty mysqld.sock file
    touch mysqld.sock
  4. Give executable permission to sock file
    chmod +x mysqld.sock
  5. Change permission to mysql user
    chown mysql:mysql -R *
  6. Change the working directory to /tmp
    cd /tmp
  7. Create a symlink to the sock file
    ln -s /var/run/mysqld/mysqld.sock mysqld.sock
  8. And at last, run the MySQL /etc/init.d/mysql start.

Yeah, my db is up now. 🙂