How to show custom fields in WordPress is one of the hardest thing to understand by non-technical users.
By default, WordPress gives you the possibility to add custom fields directly from the UI.
There are also a lot of plugins that let you add advanced custom fields like inputs, check-boxes, selects, etc.
However, almost all of those solutions fall short when it comes when you want to show custom fields in your template.
Show Custom Fields Using Code
The default way to show custom fields in WordPress would be to:
- Open the single.php or page.php template file from your theme (via FTP or locally)
- Find the_content function so you can list your custom fields after the actual content of the post or page
- Use the get_post_meta function to list custom fields
It doesn’t sound to complicated, but you’ve lost a non-technical user at opening single.php
This is how your page.php could look if you wanted to show two custom fields, book title and book ISBN code.
< ?php
/**
* The template for displaying all pages
*
* This is the template that displays all pages by default.
* @subpackage Twenty_Thirteen
*/
get_header(); ?>
<div id="primary" class="content-area">
<div id="content" class="site-content" role="main">
< ?php /* The loop */ ?>
< ?php while ( have_posts() ) : the_post(); ?>
<article id="post-<?php the_ID(); ?>" < ?php post_class(); ?>>
<header class="entry-header">
<h1 class="entry-title">< ?php the_title(); ?></h1>
</header><!-- .entry-header -->
<div class="entry-content">
< ?php the_content(); ?>
<!-- Let's show our custom fields here -->
< ?php
$my_book_title = get_post_meta( get_the_ID(), 'book_title', true);
$my_book_isbn = get_post_meta( get_the_ID(), 'book_isbn', true);
if( ! empty( $my_book_title ) ) {
echo '<h3>Book Title: ' . $my_book_title . '<h3>';
echo '<p>ISBN: ' . $my_book_isbn . '</p>';
}
?>
<!-- End showing our custom fields here -->
< ?php wp_link_pages( array( 'before' => '<div class="page-links"><span class="page-links-title">' . __( 'Pages:', 'twentythirteen' ) . '</span>', 'after' => '</div>', 'link_before' => '<span>', 'link_after' => '</span>' ) ); ?>
</h3></div><!-- .entry-content -->
<footer class="entry-meta">
< ?php edit_post_link( __( 'Edit', 'twentythirteen' ), '<span class="edit-link">', '' ); ?>
</footer><!-- .entry-meta -->
</article><!-- #post -->
< ?php comments_template(); ?>
< ?php endwhile; ?>
</div><!-- #content -->
</div><!-- #primary -->
< ?php get_sidebar(); ?>
< ?php get_footer(); ?> |
It’s no rocket science and really simple to pull off.
The problem starts when you try to do more complicated stuff, like groups of custom fields (metaboxes), repeaters fields and groups, connect posts using custom fields.
Show custom fields using Swift Templates without code
Listing your custom fields in WordPress is one of the simplest way to transform your website from static pages to a proper CMS. You can use it for:
- Adding extra information on your posts and pages
- Showcasing your team
- Listing testimonials
- Simple property listing
- Custom product pages
- Custom landing pages
- Listing company services
- And pretty much anything that might require some extra information
It’s possible to create all of the above without being a developer in three steps.
Read more
First of all, click on the button below to download the add-on. Unzip the downloaded file and copy the contents in the wp-content/plugins directory.
