Show Custom Fields in WordPress

How to show custom fields in WordPress can be a pretty challenging thing to achieve by non-technical users.

By default, WordPress gives you the possibility to add custom fields directly from the UI.

Show Custom Fields in your Theme

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 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:

  1. Open the single.php or page.php template file from your theme (via FTP or locally)
  2. Find the_content function so you can list your custom fields after the actual content of the post or page
  3. Use the get_post_meta function to list custom fields

It doesn’t sound too complicated, but you’ve lost a non-technical user at opening single.php template file

This is how your page.php could look if you wanted to show two custom fields, book title and book ISBN code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<?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>' ) ); ?>
					</div><!-- .entry-content -->
 
					<footer class="entry-meta">
						<?php edit_post_link( __( 'Edit', 'twentythirteen' ), '<span class="edit-link">', '</span>' ); ?>
					</footer><!-- .entry-meta -->
				</article><!-- #post -->
 
				<?php comments_template(); ?>
			<?php endwhile; ?>
 
		</div><!-- #content -->
	</div><!-- #primary -->
 
<?php get_sidebar(); ?>
<?php get_footer(); ?>

It’s not rocket science and really simple to pull off.

The problem starts when you try to do more complicated stuff, like groups of custom fields (meta boxes), repeater fields and groups, connecting 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:

Start creating custom fields so we can enter our content

With WordPress Creation Kit, when creating custom fields, you can target individual ID’s, page templates or entire post types.

This means the extra custom fields will appear on individual ID’s, page templates or entire post types. It’s really cool, because we can list different custom fields on different pages.

We’ll build a Favorite Books page that:

  • Allows us to enter Book Title, Cover, Description & Link
  • Will be a repeater field (so we can add as many books as we want)
  • Will be sortable, so we can order by our most favorite book
  • All of this will then be available inside our template using just HTML and Swift Template Tags

Go to WCK -> Custom Fields Creator and then click “Add New”.

WordPress Creation Kit - Custom Fields Creator feature
Since we only want this metabox to appear on the Favorite Books page we’re also specifying the ID (30 in this case, but will probably be different in your case).

Creating our custom fields

The book title and link is a normal input field type, the book description is a textarea while the cover will be an upload field type.

This is how our Custom Fields setup will look like:

WordPress Creation Kit - Add Metabox with Custom Fields feature

Show custom fields in your template

Now that we’ve setup exactly the custom fields that we want in our Favorite Books page it’s time to display those custom fields in that exact page.

Go to Pages -> My Favorite Books page

By default there’s nothing there since we haven’t entered any custom fields (we’ve just defined them).

So first step would be to add some custom fields that will represent our Favorite Books.

This is how our Favorite Books page looks like, without content in custom fields and without showing yet custom fields in the template.

WordPress - My Favorite Book
After entering a few book information, in our custom fields, it is finally time to show custom fields in our template.

In the “Swift Templates” metabox, select the checkbox “Use template on this post”

WordPress - Swift MetaBox
Again, by default there is nothing there, so we’ll need to add some HTML to show custom fields in that page alone.

All the custom fields tags are available in the right column so everything you need, to show custom fields in your template, is easily available.

For this example, here’s a simple HTML structure with all the custom fields in it.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!-- we still need to include the content so we can list some intro text -->
{{{post_content}}}
 
<h2>Favorite Books</h2>
{{#favorite-books}}
<div style="clear: both;">
 
<img class="alignright" style="width: 300px;" src="{{book-cover}}" alt="" />
<h3>{{book-title}}</h3>
 
{{{book-description}}} 
<!-- the book description and the_content have 3 { because we're escaping html tags otherwise -->
<p>Learn more from <a href="{{book-link}}">Amazon</a></p>
 
</div>
{{/favorite-books}}

So as a recap:

  • We’ve created repeater custom fields for our books
  • Entered some book information in those custom fields including an image of the cover
  • Created a basic template with all that information that will allow us to show custom fields in our theme

Here’s a screenshot of “My Favorite Books” page after doing all of the above.

WordPress - Show Custom Fields in Page (backend)
And this is how this looks in our theme:

WordPress - Show Custom Fields in Page (frontend)
While this is just a basic tutorial, it is quite possible to build complex websites using just WCK and Swift Templates:

Also, if you want to learn more about WordPress Creation Kit Pro just visit the plugin page.

There is also a completely FREE version available over at wordpress.org that allows you to:

Subscribe to get early access

to new plugins, discounts and brief updates about what's new with Cozmoslabs!

3 thoughts on “Show Custom Fields in WordPress

  1. I agree that getting the custom posts for a non-programmer is the hardest part. I just don’t see how using the swift templates requires no code at all, because I got lost after

    Again, by default there is nothing there, so we’ll need to add some HTML to show custom fields in that page alone.

    My impression is that you have to be able to understand the code to move on from that point. I get the impression you’ve made it easier for someone who knows a little php, but not for someone who doesn’t know any php.

  2. I am a doing a training in php.and i never know how to show a custom field under a post.but the code is given above in page.php file.its really help me alot.
    Thanks Alot.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.