How to create custom fields in WordPress without a plugin?

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).

How to create custom fields in WordPress without a plugin?

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).

Useful WordPress tips

Useful Blocksy related tips

Here are some of my favorite WordPress tools

Thanks for reading this article! I hope it's been useful as you work on your own websites and e-commerce sites. I wanted to share some tools I use as a WordPress developer, and I think you'll find them helpful too.

Just so you know, these are affiliate links. If you decide to use any of them, I'll earn a commission. This helps me create tutorials and YouTube videos. But honestly, I genuinely use and recommend these tools to my friends and family as well. Your support keeps me creating content that benefits everyone.

Themes: Over the past few years, I've consistently relied on two primary themes for all sorts of projects: the Blocksy theme and the Kadence Theme. If you explore this website and my YouTube channel, you'll come across numerous tutorials that delve into these themes. If you're interested in obtaining a 10% discount for both of these themes, then:

Code Snippets Manager: WPCodeBox allows you to add code snippets to your site. Not only that, but it also provides you with the capability to construct and oversee your WordPress Code Snippets library right in the cloud. You can grab it with the 20% discount here (SAVE 20% Coupon: WPSH20).

Contact forms: There are hundreds of contact forms out there but Fluent Forms is the one I like the most. If you need a 20% discount then use this link (save 20% coupon is WPSH20).

Gutenberg add-ons: If I need a good Gutenberg blocks add-on then Kadence Blocks is the one I have used the most. You’ll get a 10% discount with the coupon SIMPLEHACKS here.

Website migration: While building a website you probably need a good plugin that can help you with the migration, backups, restoration, and staging sites. Well, WpVivid is the one I have used for the last couple of years. If you use this link along with the WPSH20 coupon you’ll get a 20% discount.

Woocommerce extensions: There are a bunch of Woocommerce extensions that I like but the one that stands out is Advanced Dynamic Pricing. Once again, you’ll get a 20% discount if you use this link here (save 20% coupon is WPSH20)

Web Hosting: If you would like to have a really fast and easy-to-use managed cloud hosting, then I recommend Verpex Hosting (see my review here). By the way, this site is hosted in Verpex.)

To see all my most up-to-date recommendations, check out this resource that I made for you!

Do you want to thank me and buy me a beer?

Every donation is entirely welcome but NEVER required. Enjoy my work for free but if you would like to thank me and buy me a beer or two then you can use this form here below.

Donation Form (#2)

Janek T.
Janek T.

Improve this text: {CLIPBOARD}

- I have been passionate about Wordpress since 2011, creating websites and sharing valuable tips on using Wordpress and Woocommerce on my site.
- Be the first to receive notifications about new tutorials by subscribing to my Youtube channel .
- Follow me on Twitter here

Articles: 105