How to Display Custom Field Value in WordPress
WordPress allows you to add custom fields to posts. WordPress stores this additional information in metadata tables.
These custom fields enhance your WordPress website, and your content is boosted for SEO on Google and other search engines.
It enhances data organization, leading to a more effective website content display.
This article will assist you in displaying custom fields in WordPress using code and custom templates.
Why Display Custom Fields With Code
There are numerous plugins that enable the creation of advanced custom fields, such as inputs, checkboxes, selects, etc.
When it comes to displaying custom fields in your template, almost all of those solutions do not work properly. So here we will write code to display custom fields.
To Show a List of All Posts With Custom Fields.
The WordPress website requires the display of posts with custom fields on pages, either as a list of posts with custom fields or as a single post with custom fields.
In the case of regular posts, we can display a list of posts with excerpts using the archive.php template file and a single post using the single.php page template.
But custom fields cannot be displayed using these default templates.
We will create a custom archive.php and single.php to solve this problem.
To display all posts with custom fields, create the template archive-{post-name}.php. To display a single post, create the template single-{post-name}.php.
How do I View Custom Fields in WordPress?
The get_post_meta function can be used to retrieve custom field values through their meta key, and they will be listed using PHP echo.
Use function in your code as: get_post_meta($post->ID, ‘your_custom_field_name’, true);
WordPress Display Custom Field Value in Loop
$args = array( 'post_type' => 'product', 'posts_per_page' => 10 );
$loop = new WP_Query( $args );
if ( $loop->have_posts() ) :
while ( $loop->have_posts() ) : $loop->the_post();
the_title();
the_content();
echo get_post_meta(get_the_ID(), 'gsta_product_price', true);
echo get_post_meta($post->ID, 'gsta_product_use', true);
endwhile;
endif;If you don’t know How to Create Custom Fields in WordPress Without Plugin see this article.
Code to list all Posts With Custom Fields on Archive Page Template.
Here we will create custom archive-product.php template for post type product.
Full code to create a custom archive page template.
<?php
/**
* The template pages for displaying custom field for products.
* archive-product
*
*/
if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly.
}
get_header(); ?>
<style>
.post_box_wapper {
display: flex;
background-color: #eee;
width: 100%;
}
.entry-content {
margin: 10px;
padding: 10px;
width: 100%;
border: 1px solid #aaa;
border-radius: 5px;
}
</style>
<?php
$args = array( 'post_type' => 'product', 'posts_per_page' => 10 );
$loop = new WP_Query( $args );
if ( $loop->have_posts() ) :
while ( $loop->have_posts() ) : $loop->the_post();
?>
<div class="post_box_wapper">
<div class="entry-content">
<h2><?php the_title(); ?></h2>
<p><?php the_content(); ?></p>
<h3> Price : <?php echo get_post_meta(get_the_ID(), 'gsta_product_price', true); ?> </h3>
<h3> USE : <?php echo get_post_meta($post->ID, 'gsta_product_use', true); ?> </h3>
</div>
</div>
<?php endwhile; ?>
<?php endif; ?>
<?php get_footer(); ?>This code will display list of all products. On archive-product.php page
Code to Display Post With Custom Fields on Single Page Template
Here we write code to create a single-product.php page to display post with custom fields.
<?php
/**
* The Template for displaying all single posts with custome fields.
*
*/
if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly.
}
get_header(); ?>
<div <?php generate_do_attr( 'content' ); ?>>
<main <?php generate_do_attr( 'main' ); ?>>
<?php
/**
* generate_before_main_content hook.
*
*/
do_action( 'generate_before_main_content' );
if ( generate_has_default_loop() ) {
while ( have_posts() ) :
the_post();
?>
<div class="single_post_head_flex">
<div class="singel_post_feature_image">
<div class="single_image_border">
<div class="post-thumbnail">
<?php
if( has_post_thumbnail() ):
the_post_thumbnail( 'gsta-lab-blog', array( 'class' => 'img-fluid', 'alt'=> 'This is feature image') );
endif;
?>
</div>
</div>
</div><!-- end singel_post_feature_image -->
<div class="singel_post_title">
<h1><?php the_title(); ?></h1>
<h3> Price : <?php echo get_post_meta($post->ID, 'gsta_product_price', true); ?></h3>
<h3> USE : <?php echo get_post_meta($post->ID, 'gsta_product_use', true); ?></h3>
<div class="meta">
<p><?php esc_html_e( 'Published by', 'fancy-lab' ); ?> <?php the_author_posts_link(); ?>
<?php esc_html_e( 'on', 'fancy-lab' ); ?> <?php echo esc_html( get_the_date() ); ?>
<br />
<?php if( has_category() ): ?>
<?php esc_html_e( 'Categories', 'gsta-lab' ); ?>: <span><?php the_category( ' ' ); ?></span>
<?php endif; ?>
<br />
<?php if( has_tag() ): ?>
<?php esc_html_e( 'Tags', 'gsta-lab' ); ?>: <span><?php the_tags( '', ', ' ); ?></span>
<?php endif; ?>
</p>
</div>
</div>
</div><!-- end singel_post_title_flex -->
<div class="content">
<?php
wp_link_pages(
array(
'before' => '<p class="inner-pagination">' . esc_html__( 'Pages', 'fancy-lab' ),
'after' => '</p>',
)
);
?>
<?php the_content(); ?>
</div>
<?php
endwhile;
}
/**
* generate_after_main_content hook.
*
* @since 0.1
*/
do_action( 'generate_after_main_content' );
?>
</main>
</div>
<?php
/**
* generate_after_primary_content_area hook.
*
* @since 2.0
*/
gsta_sidebars();
get_footer();This code will display following page.
This is an example, you have to use following code lines.
Replace: gsta_product_price, gsta_product_model with your code custom fields.
As get_post_meta($post->ID, ‘your_meta_field_name’, true)
echo “<h3> Price : “.get_post_meta($post->ID, ‘gsta_product_price’, true).”</h3>”;
echo “<h3> USE : “.get_post_meta($post->ID, ‘gsta_product_use’, true).”</h3>”;
Conclusion
WordPress can add more fields to post, according to the data format, through Custom Fields. A custom field can have a significant impact on the content display.
In this article, we have explained how to display custom fields on a page in WordPress without plugins.
We hope this article will help to display custom field in WordPress.