It’s relatively easy to create date/time picker in Gutenberg editor. What we need to do is to import and use DateTimePicker component and we can create something like this:
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 BoxCustom 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 EditorHow 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 XAMPPMy New Laptop ~ Thinkpad 13
So, I finally got a new laptop. My old one is an Asus i3 with 6GB RAM. It’s already 2 years old. but still works really well, but I got a new job, and it uses several tools that need a lot more RAM, Encryption (Win 10 PRO). So, I bought a new laptop.
Read More My New Laptop ~ Thinkpad 13
How to Load Images from Live Site in Local Dev (Apache and Nginx)
I just got a neat trick for local development.
When cloning live site to local, we need to download all the assets/uploads directory to our local dev, and sometimes it’s a pain.
With this trick, we don’t need to do that and we can simply download the DB.
Read More How to Load Images from Live Site in Local Dev (Apache and Nginx)I am a WordPress 4.9 Core Contributor
Happy to contribute to this awesome software!
Good Bye Firefox, Good Bye Dropbox.
Last week I made my decision to finally use Chrome as my primary browser, and Google Drive as my primary cloud storage.
And this is the reasons why.
Read More Good Bye Firefox, Good Bye Dropbox.
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”
Today I just reached 10.000+ Active Installs ! (WordPress themes and plugins total)
I know it’s not that impressive. but 😏 YEY! anyway.
it’s pretty embarrassing actually. 15 plugins and 10 themes.
but still happy for this milestone. 0
Help! I Can’t Find The Right WordPress Contact Form Plugin
In WordPress we have a lot of options to create contact forms. But I can’t seem to find the best solutions. I even think to create my own contact forms plugin.
My Requirements Are:
- Responsive.
Not only in form output/front-end. Administration panel need to work in mobile devices. Well, at least usable, I understand that some features might need to be hidden/disabled in small screen devices for usability and UX. But not broken. - Use WordPress UI:
Seamless integration with WordPress, native-feel. I’m not a fan of app-like fancy UI. Professional. No excessive branding with cute icon/logo. If possible no cross-selling of add-ons/upgrade (or easy way to disable it). - Simple and easy to use:
User need to be able to use it without the need to learn proper form HTML markup. - Little to no learning curve:
No excessive features, I just need a contact form not a shopping cart, not a user registration form. If the code base is extendable and able to do all this via add-on that’s a plus. But it’s not necessary and not needed in the “core” plugins. - Theme and Template Friendly:
Can be added in a page template, any template file, no need to be in the “loop”. Simple shortcode to display the form should work with do_shortcode() function.
So, basically, something basic that I can use on my clients site and that’s it.
Of course anti spam features (maybe custom honey pot or integration with recaptcha/akismet) is also a requirements.
Here are several of my issue with current contact forms solutions (not in particular order):
Table of contents
Read More Help! I Can’t Find The Right WordPress Contact Form Plugin