Start creating custom fields so we can enter our content

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”.

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:

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.

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”

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.

And this is how this looks in our theme:

While this is just a basic tutorial, it is quite possible to build complex websites using just WCK and Swift Templates:

Subscribe to get early access

3 thoughts on “Show Custom Fields in WordPress”

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.