Display Custom Fields in WordPress Pages with no coding

Displaying Custom Fields in WordPress is one of the simplest way to transform your website from a static page to a proper CMS.

WCK Custom Fields Creator allow you to add extra information to your Pages, Posts or Custom Post Types building a more intuitive interface for adding content.

You can use Custom Fields for:

1. Adding extra information on your Posts, Pages and Custom Post Types
2. Showcasing your Team
3. Listing Testimonials
4. Simple Property Listing
5. Custom Product Pages
6. Custom Landing Pages
7. Listing Company Services
8. And pretty much anything that might require some extra information

WordPress Creation Kit allows you to create and display custom fields with no coding, directly from the WordPress Admin interface.

Creating Custom Fields for your WordPress Pages

Creating Custom Fields is done in just a couple of clicks using WCK Custom Fields Creator module.

Let’s say we want to create Custom Fields for “Our Team” page where we want to list all our Team Members.

WCK Custom Fields Creator offers an UI for setting up Custom Meta Boxes with Custom Fields for your Team page. Also, when creating Custom Fields, you can target individual ID’s, Page Templates or entire Post Types as seen below.

This means that Extra Custom Fields can 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.

For each Team Member we will require the following information: Name, Title, Bio, Picture.

After creating all the necessary Custom Fields, once you hit “Publish” you’ll have a Team Members box attached to the “Our Team” Page where you can start adding your Team Members.

Now all that’s left is to display custom fields in the front-end.

Display Custom Fields in your Page without coding

The default way to display 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

The problem starts when you try to do more complicated stuff, like Groups of Custom Fields (Meta Boxes), Repeaters Fields and Groups, connect Posts using Custom Fields.

In our case we setup a Repeater Custom Meta Box with multiple Custom Fields. This way we can add one or more Team Members in a very easy and intuitive manner.

Writing PHP code will get a little bit complicated for a non-technical user, so we’ll avoid it altogether by using WCK Swift Templates.

Display Custom Fields in WordPress Pages using WCK Swift Templates

WCK Swift Templates allows you to display Custom Fields information in your Page Template without writing any PHP code, directly from the Page Editor Screen.

You now have all the Team Members details attached to the “Our Team” Page.

If you have WCK Swift Templates activated, on the Edit Screen for the “Our Team” page you’ll notice the Swift Templates box.

Make sure to check “Apply the template on this single post only“. This will replace the Default Template with the Template built using Swift Templates interface.

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

{{{post_content}}}
<ul>
  {{#teammembers}}
  <li>
    <h3>{{name}}</h3>
    <img src="{{picture}}" class="allignleft"/>
    <strong>{{title}}</strong>
    <p>{{bio}}</p>
  </li>
  {{/teammembers}}
</ul>

Once you hit “Update”, you will notice “Our Team” page now displays all the Team Members information.

That’s it. Using WordPress Creation Kit we were able to create and display Custom Fields information in a WordPress Page without writing a single line of PHP code.

• Share:
• Facebook
• Twitter
• Linkedin