Series: Settings, Custom Fields, and Customizer Tutorials

How to use Customize API “postMessage” Method for Color Options

2

customizer-color-option-postmesssage

I’m not actually a fan of themes with tons of design options. I think as a designer, it’s our job to design theme.

However, it’s not always a bad idea to let user express their creativity.

Last weekend, I create another theme. Nevertheless, a simple one with classic design. And this time I create several color options for it. Usually I prefer “refresh” transport method for my themes, because it’s works, easier to code (and maintain in the future). But because this is a simple theme, I get it done relatively quickly. So I decide to “play” and use “postMessage” transport method for the color options.

There are problems I found when implementing this, and I want to share my solution.

Here’s the theme, you can download and check the source code:

Download or Fork at Github

Read More How to use Customize API “postMessage” Method for Color Options

How to use Customize API “postMessage” Method to Hide/Show Element

1

hide-masthead-customize

That was actually a question by a fellow WordPress designer/developer when he realized his code didn’t work (I’ll explain the problem below).

It’s actually a simple mistake and can be avoided if we use “refresh” transport method when creating customizer option. But I do understand that “postMessage” transport method is better (but needed more code).

So here’s a little example. I create a twentyfifteen child theme with customizer setting to hide/show header area. Read More How to use Customize API “postMessage” Method to Hide/Show Element

How to Add Settings Section in WordPress Default Settings

4

Additional-Reading-Settings

It’s very easy to create settings page in WordPress. But sometimes in our plugin we only need a single/few options. And creating dedicated settings page just for this option is overkill.

That’s what I think when I write “f(x) Private Site” Plugin yesterday. You can download the plugin for a full code example:

Download Plugin

When it make sense, we can add settings to WordPress default settings page such as “General Settings”, Writing Settings”, “Reading Settings”, etc. And this is how to do that. Read More How to Add Settings Section in WordPress Default Settings

Validation in WordPress Dashboard Widget API

2

WP-Dashboard-Widget-Options

WordPress Dashboard Widget API is my favorite API in WordPress and sometimes dashboard is my preferred admin page to add simple settings in client site. It’s the screen they will see when they logged in. Why not use it more?

In this post I want to share a little about how to properly save the dashboard meta box “Configuration” with the build in nonce validation.

I read a lot of tutorial but no mention about this, I don’t even find any reference in Codex page. Read More Validation in WordPress Dashboard Widget API

How to Create Sortable Checkboxes Option in Customizer

1

Customizer-Sortable-Checkboxes

WordPress Customizer is a very powerful. Not only because we have a live preview, but also because it got a lot of build-in input type. And we can also extend it or create our own reuse-able input type.

This is not a full tutorial but only explaining the concept, but you can check the full working code here:

Download f(x) Share @GitHub

This is a useful control, we can use it for various settings for example:

  • Reorder element, such as header, navigation menu, thumbnail, excerpt, etc.
  • Sharing buttons.
  • etc..

Read More How to Create Sortable Checkboxes Option in Customizer

How to Sanitize Image Upload?

Today I updated my plugin f(x) Favicon (no longer available, WordPress now have “Site Icon” feature), and I would like to share in how I sanitize image URL in the plugin uploader.

favicon-settingsWhy sanitize image upload?
Basically what we need is to make sure that the input is an image URL. So, we don’t want user to input other file such as document file, video file, mp3 file, etc.

And this is to make sure our plugin/theme working correctly. We also need to do this check before loading the file.

Wanted result:

<link rel="shortcut icon" href="http://siteurl.com/path/favicon.png"/>

Unwanted Result:

<link rel="shortcut icon" href="http://siteurl.com/path/some-random-file.doc"/>

Read More How to Sanitize Image Upload?

Create WordPress Settings Page With Meta Boxes

9

In this tutorial I want to explain Step by Step How To Create WordPress Settings/Options Page With Meta Box, like what you see in this screenshot:

WordPress Settings With Meta Box
WordPress Settings With Meta Box

WordPress have a decent Settings API and it offer a lot flexibility in design. Several plugins do “wild” things in their Settings Page, However for better user experience it’s best to use seamless design (blended) with other admin UI design.

One of my favorite admin UI element is Meta Box. Not only because meta box have an easy to use Meta Box API (so we can easily create meta boxes), but it also have user preference options where user can reorder (drag-and-drop) the position, toggle open/close meta boxes. and even changing Screen Layout to 1 or 2 column using “Screen Options”.

Benefit in using Meta Box in Settings Page:

  1. Nice UI : Neatly Group Complex Settings.
  2. Minimum Design Time : WordPress already have the design.
  3. Easy to use : because user already familiar with how the panel works.
  4. Extend-Ability : Other developer can easily extend our plugins and add options with familiar API.

So Let’s Start ! Read More Create WordPress Settings Page With Meta Boxes