How to add Custom Fields in Block Editor

Hey @ballt

If you don’t want to use any plugins

Step 1: Create a child theme
Step 2: Add code snippets directly to your theme’s functions.php file

If you don’t feel comfortable in your theme’s functions.php file, I suggest using a code snippets plugin. This lets you add and manage custom code snippets on your website without having to edit your theme files.

I hope this resource about Custom Fields will help: https://www.wpbeginner.com/wp-tutorials/wordpress-custom-fields-101-tips-tricks-and-hacks/

Thank you for your answer.
I found the articel you mentioned, it’s very good written.
Maybe I have a misconseption, but the article only explains how to add in old style block editor.
With the new beta site builder there is no “single.php” file anymore.
The templates are created in site builder, I can see the code, but it looks like:

<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:spacer {"height":"51px"} -->
<div style="height:51px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

I am pretty shure I have to add the custom fields in that format, but I can’t find how

Hi @ballt

Functions.php can be used by both classic themes, block themes, and child themes.

I am really sorry, but i am confused. I read the article 3 times. There is no reference how to display a custom field in a block template.
The functions.php doesn’t help, because it would show the custom field somewhere. I need it to be in a template.
to make it concrete: I have an employee template:

Name ->title of post
Employee E-Mail -> Custom field
Employee Title -> Custom field
Employee Resume -> Post Content

Again: it’s a Post Template from the new Beta Editor, but is basicly a Gutenberg thing.

To make it clear could you supply me with a code sample?

Thanks
Thomas

Hi @ballt

One way to achieve this would be by building a custom block to render the custom fields and using that block in the site editor. The other way could be using a custom shortcode in your functions.php, and the shortcode block in the single.html template.

For example, here is some code to add a shortcode in my functions.php file, which gets a custom field I’ve set up called name. In this case, I’m returning the post id and the name value.

add_shortcode( 'custom_field_shortcode', 'twentytwentythree_custom_field_shortcode' );
function twentytwentythree_custom_field_shortcode( $atts ){
	$id = get_the_ID();
	$name = get_post_meta( $id, 'name', true );
	return 'Custom Field ' . $id . ' - ' . $name;
}

Then I added the shortcode block to my single.html template in the Site editor, and add the shortcode to it

[custom_field_shortcode]

When the post renders, it gets the custom field from the database and renders it.