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

Thank you for reading this article. I hope you found it helpful as you build your own websites and e-commerce sites. Here are some tools I use as a Wordpress developer and enthusiast that I hope you’ll also find helpful.

These are affiliate links, so if you do decide to use any of them, I’ll earn a commission and this helps me create these tutorials and make Youtube videos. But in all honesty, these are the exact tools that I use and recommend to everyone, even my friends and family.

Themes: For the last couple of years I have two go-to themes which I use for every kind of projects. Those two themes are Blocksy theme and Kadence Theme. On this site and my Youtube channel you’ll see a lot of tutorials I have made about them. If you would like to get a 10% discount for both of them then:

Code Snippets manager: WPCodeBox allows you to add code snippets to your site. Also, it allows you to build and manage your WordPress Code Snippets library 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 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 20% discount.

Woocommerce extensions: There are a bunch of Woocommerce extensions that I really like but the one that stands really 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: For getting started, I really like A2 Hosting. They have the dedicated and fast Wordpress hostinh and support has also been fast and responsive. If you’re more tech savvy and want to have a really fast managed cloud hosting then I recommend Cloudways. (Btw, this site is hosted in Cloudways.)

To see all my of 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.

Choose amount

Best selling plugins

Default image
Janek T.

I am a Wordpress enthusiast who has been making websites since 2011. In this site I am offering simple to follow tips on how to use Wordpress and Woocommerce.
If you want to be the first to be notified about the new tutorials then please subscribe to my Youtube channel here
Follow me in Twitter here

Articles: 80