Category: Web Dev Log

Why use React/JS to create a Meta Box

In my previous post I mentioned that the reason why we need to learn to do this is to get all the new features. But what is the new features?

You can read more in my previous post: Custom Field & Meta Box in Gutenberg Editor.

In this short blog post, I want to give a simple example, to transform the field to a full sidebar panel.

Read More Why use React/JS to create a Meta Box

Custom Field & Meta Box in Gutenberg Editor

How to do this in the “new” way?

From this:

To this:

Creating a custom field using a custom meta box is simple and very straightforward.

Basically we create a meta box using meta box API and add it in post meta data using save_post hook.

Here’s the basic code:

// Add field:
add_action( 'add_meta_boxes', function() {
	add_meta_box(
		'my_meta_box',
		'My Meta Box',
		function( $post ) {
			wp_nonce_field( __FILE__, '_my_data_nonce' );
			?>
			<p><input type="text" class="large-text" name="my_data" value="<?php echo esc_attr( get_post_meta( $post->ID, '_my_data', true ) ); ?>"></p>
			<?php
		},
		'post',
		'side'
	);
} );
// Save field.
add_action( 'save_post', function( $post_id ) {
	if ( isset( $_POST['my_data'], $_POST['_my_data_nonce'] ) && wp_verify_nonce( $_POST['_my_data_nonce'], __FILE__ ) ) {
		update_post_meta( $post_id, '_my_data', sanitize_text_field( $_POST['my_data'] ) );
	}
} );

But how to do this in the new way?

Read More Custom Field & Meta Box in Gutenberg Editor

How to Create Valid SSL in localhost for XAMPP

Chrome browser updates has become a burden for local development. Not only they decided to disable .dev domain for local development, they also really have specific configuration in SSL Cert to show the site as secure.

In this step by step tutorial I will try to explain  the walk-through to create SSL cert locally to be used in XAMPP in Windows.

Read More How to Create Valid SSL in localhost for XAMPP

How to exclude folders in Notepad++ search

In Notepad++, one of my features that I use a lot is “Find in Files”. If you ever use this feature, I’m sure you will agree that it’s a very powerful search (and replace) feature.

The problem is that Notepad++ search feature cannot exclude folders.

In WordPress plugin/theme project I often need to use Grunt or Gulp or Composer and it generate folders such as “node_modules”. And it’s usually very large in size with tons of library and codes.

I usually move them to other directory before I search, but I found a very simple trick to exclude it. Read More How to exclude folders in Notepad++ search

You Don’t Need “wp_localize_script()” to Get “admin-ajax.php”

The most common method to use AJAX in WordPress is using admin-ajax.php + WordPress hook system.

And one of the recommended method to get this file URL is by using wp_localize_script(). This method is explained in details in my other tutorial WordPress AJAX for Beginners.

However, there is an alternative method.

Read More You Don’t Need “wp_localize_script()” to Get “admin-ajax.php”