WordPress Custom Fields(Custom Fields) allows you to add additional information to an article or page, such as price, subtitle, source link, and so on. However, after adding the fields, many users are not sure how to display these contents on the front-end page.

This tutorial will take you step-by-step through the use of the WPCode plugin to create a simple code snippet that calls and displays the value of a custom field on the front-end. There is no need to modify the theme files and it is simple enough for users who are just getting started.

I. Preparation: adding custom fields

Before calling it, you need to add the article to theCustom FieldsThe

The steps to add are as follows:

• Open the WordPress backend and edit any post
• Click on the "three-dot menu" in the upper right corner → select "Preferences".

• Check "Customize Fields" in the Panel

• At the bottom of the page, the "Custom Fields" module will appear, click "Add New Field".

• Enter the field name and field value, for example:
  • Field Name:subtitle
  • field value:This is an article about traveling

Click "Update" to save the article.

Install and activate the WPCode plug-in.

• Go to Backstage → Plugins → Install Plugin

• Search "WPCode"

• Click "Install" and then "Enable".

WPCode is a plugin that centralizes the management of code snippets, replacing direct editing of thethematicCode for more security and convenience.

Creating a new PHP code snippet

• Open in the backend navigation: WPCode → Code Snippets → Add New

• Click on "PHP Snippet" to go tocodingEdit page

• existcaptionFill in the blanks:Display Custom Field on Frontend

Enter the following in the code box:

add_filter( 'the_content', 'add_custom_field_to_content' );
function add_custom_field_to_content( $content ) {
    if ( is_singular( 'post' ) ) {
        $subtitle = get_post_meta( get_the_ID(), 'subtitle', true );
        if ( $subtitle ) {
            $custom_output = '<p style="font-style: italic; color: #555;">Subtitle:' . esc_html( $subtitle ) . '</p>';
            $content = $custom_output . $content.
        }
    }
    return $content.
}

This code will insert asubheadingparagraph, the field name is subtitleThe

• In the "Insertion" section choose: Auto Insert → Run Everywhere

• Click "Activate" → "Save Snippet" in the upper right corner to save and enable it.

Fourth, the foreground to view the effect

Open the file you added subtitle field of that article, refresh the page.

You'll see the content at the top of the body:

Subtitle: this is an article about traveling

Indicates that the code successfully reads and outputs the custom field content.

V. Extended application: support for multiple fields

If you have multiple fields, such as price,author_note etc., can also be output uniformly in a single code snippet:

add_filter( 'the_content', 'add_multiple_fields_to_content' );
function add_multiple_fields_to_content( $content ) {
    if ( is_singular( 'post' ) ) {
        $subtitle = get_post_meta( get_the_ID(), 'subtitle', true );
        $price = get_post_meta( get_the_ID(), 'price', true );;
        $note = get_post_meta( get_the_ID(), 'author_note', true );

        $output = '';
        if ( $subtitle ) {
            $output . = '<p><strong>Subtitle:</strong> ' . esc_html( $subtitle ) . '</p>';
        }
        if ( $price ) {
            $output . = '<p><strong>Price:</strong> ' . esc_html( $price ) . '</p>';
        }
        if ( $note ) {
            $output . = '<p><strong>Author's Notes:</strong> ' . esc_html( $note ) . '</p>';
        }

        $content = $output . $content;
    }
    return $content; }
}

concluding remarks

Using the WPCode plug-in makes it easier to make the WordPress The site displays custom field content without changing the template. Just add a simple paragraph PHP code, you can output this additional information on the article page.

This approach is good for beginners to understand the structure of WordPress content and also lays the groundwork for future page personalization. If you want to display fields in other locations, such as above headings, at the end of posts, or in the sidebar, you can continue to use shortcodes or other hooks to achieve this, so feel free to explore further.

Contact Us
Can't read the tutorial? Contact us for a free answer! Free help for personal, small business sites!	Customer Service
① Tel: 020-2206-9892
② QQ咨詢：1025174874
(iii) E-mail: info@361sale.com
④ Working hours: Monday to Friday, 9:30-18:30, holidays off