Usually, users tend to create WordPress custom fields with a plugins like Advanced Custom Fields, Pods, Toolset etc. Therefore, in this post I’m going to show you how to create custom fields in WordPress without a plugin. If you’re a total beginner, then take a look at the video below because in it, I will show all this visually.
Video: How to create custom fields in WordPress without a plugin?
How to create custom fields in WordPress without a plugin?
There is actually a really simple way to do that. Just go to the WP Skills Site and open up a WordPress Meta Box Gnerator. See here.
Next, fill in all the needed fields and choose post types you need your custom fields to be created. Now click on a plus (+) icon and add your fields. Pay attention though, that you need to add Label/Name and ID, otherwise it will not work.
If all the fields are added, then click on the Copy button below (see the screenshot).
Now go to your site and using Code Snippets plugin (or your child theme’s functions.php file) paste the code and activate it.
If this is done, you can pat yourself in your back because you just added custom fields in WordPress without a plugin. To verify, open up a post and see whether the fields are there.
How to display WordPress custom fields on frontend?
Although we added our custom fields, we need to output them in frontend. Hence, I will show you three ways how to do that.
Display custom fields with code snippet
Grab the code here below and paste it to the Code Snippets code box and this will add your fields to the Woocommerce single product page summary section.
If you are using any other post type then in order to add it to the right location you need to know what hooks your theme is using. If you know that then change the ‘woocommerce_single_product_summary’ on line 2 part accordingly.
Also, in this example here below I am showing how to output all sorts of fields, that is:
- Text
- Checkbox
- Radio
- Textarea
- Dropdown selection
- Number
- Phone
- Date
- URL
Your task is to delete the ones you’re not using and replace them with your own fields.
NB! You need to change label ID_s accordingly. For example: if your field ID is my_field, then replace $some_number with $my_field and some_number with my_field (see the comments inside the code).
// Display custom fields in Woocommerce single product page
add_action( 'woocommerce_single_product_summary', 'wpsh_single_posts_custom_meta_fields', 10 );
function wpsh_single_posts_custom_meta_fields(){
$post_id = get_the_ID();
$post = get_post( $post_id );
// Replace $some_number and some_number with your own field ID-s
// For example: if your field ID is my_field, then replace $some_number with $my_field and some_number with my_field
$some_text = get_post_meta( $post->ID, 'some_text' ); // Text field
$some_textarea = get_post_meta( $post->ID, 'some_textarea' ); // Textarea field
$some_checkbox = get_post_meta( $post->ID, 'some_checkbox' ); // Checkbox field
$some_radio = get_post_meta( $post->ID, 'some_radio' ); // Radio field
$some_select = get_post_meta( $post->ID, 'some_select' ); // Dropdown selection field
$some_number = get_post_meta( $post->ID, 'some_number' ); // Number field
$some_phone = get_post_meta( $post->ID, 'some_phone' ); // Phone field
$some_date = get_post_meta( $post->ID, 'some_date' ); // Date field
$some_url = get_post_meta( $post->ID, 'some_url' ); // URL field
// Replace $some_number and some_number with your own field ID-s. NB! Don’t remove [0].
// For example: fi your field ID is my_field, then replace $some_number with $my_field and $some_number[0] with $my_field[0]
if(!empty($some_number) || !empty($some_radio) || !empty($some_checkbox)) {
echo '<div class="woocommerce-message1">';
// Text field
if(!empty($some_text)){
echo '<div class="woocommerce-message">' . $some_text[0] . '</div>';
}
// Textarea field
if(!empty($some_textarea)){
echo '<div class="woocommerce-message">' . $some_textarea[0] . '</div>';
}
// Checkbox field
if($some_checkbox[0] == 1){
echo '<div class="woocommerce-info"> Free shipping </div>';
}
// Radio field
if(!empty($some_radio)){
echo '<div class="woocommerce-error">' . $some_radio[0] . '</div>';
}
// Select field
if(!empty($some_select)){
echo '<div class="woocommerce-error">' . $some_select[0] . '</div>';
}
// Number field
if(!empty($some_number)){
echo '<div class="woocommerce-message">' . $some_number[0] . '</div>';
}
// Phone field
if(!empty($some_phone)){
echo '<div class="woocommerce-error">' . $some_phone[0] . '</div>';
}
// Date field
if(!empty($some_date)){
echo '<div class="woocommerce-error">' . $some_date[0] . '</div>';
}
// URL field
if(!empty($some_url)){
echo '<div class="woocommerce-error">' . $some_url[0] . '</div>';
}
echo '</div>';
}
}If you would like to display your custom fields on archive pages, then use this code here below and, as before, change:
- hook location on line 2 ‘woocommerce_shop_loop_item_title’
- fields
- Label ID-s
// Display custom fields in Woocommerce archive pages
add_action( 'woocommerce_shop_loop_item_title', 'wpsh_archive_custom_meta_fields', 10 );
function wpsh_archive_custom_meta_fields(){
$post_id = get_the_ID();
$post = get_post( $post_id );
// Replace $some_number and some_number with your own field ID-s
// For example: if your field ID is my_field, then replace $some_number with $my_field and some_number with my_field
$some_number = get_post_meta( $post->ID, 'some_number' ); // Number field
$some_radio = get_post_meta( $post->ID, 'some_radio' ); // Radio field
$some_checkbox = get_post_meta( $post->ID, 'some_checkbox' ); // Checkbox field
// Replace $some_number and some_number with your own field ID-s. NB! Don’t remove [0].
// For example: fi your field ID is my_field, then replace $some_number with $my_field and $some_number[0] with $my_field[0]
// Number field
if(!empty($some_number)){
echo $some_number[0];
}
// Radio field
if(!empty($some_radio)){
echo '<div class="custom_field">' . $some_radio[0] . '</div>'; // radio field
}
// Checkbox field
if($some_checkbox[0] == 1){
echo '<div class="custom_field"> Free shipping </div>';
}
}Display custom fields with Blocksy Pro Theme
If the previous solution is a bit too techie for you, then there’s a bit easier method. That is – using Blocksy Pro Theme which allows you to output taxonomies and custom fields in a archive and single post pages without any hassle. You can grab it it here (SAVE 10% coupon is WPSH10).
Take a look at the video above to see how to do that (see 12:30 mark of the video).
Also, add this filter you the Code Snippets code box and replace:
- post types on line 5
- Label ID-s (some_text, some_number etc)
- Labels (Name, Number, Your options etc.)
Remove the ones you won’t use.
add_filter(
'blocksy:pro:post-types-extra:custom:collect-fields',
function ($fields, $post_type) {
$desired_post_type = ['post', 'product'];
if (in_array($post_type, $desired_post_type)) {
$fields = [
'some_text' => __('Name', 'blocksy'),
'some_number' => __('Number', 'blocksy'),
'some_radio' => __('Your options', 'blocksy'),
'some_select' => __('Your selection', 'blocksy')
];
}
return $fields;
},
10, 2
);Display custom fields with Kadence Blocks Pro plugin
Kadence Blocks Pro plugin allows you to output dynamic content (custom fields etc) in a Gutenberg Blocks. Grab Kadence Blocks Pro with a 10% discount here (use 10% discount coupon SIMPLEHACKS).
See the video above to see how to use the plugin (watch at 16:24 mark)
Display custom fields with Blocksy Pro and Kadence Blocks Pro combo
Probably the easiest way to display your custom fields is if you use Blocksy Pro and Kadence Blocks Pro combo.
With the help of Blocksy, you can use it to ouput Gutenberg blocks wherever you need. And Kadence Blocks Pro allows you to display dynamic content, that is custom fields. See the video above (watch ar 20:40 mark).
