{"id":117119,"date":"2013-04-04T23:13:07","date_gmt":"2013-04-04T23:13:07","guid":{"rendered":"http:\/\/wpml.org\/?p=117119"},"modified":"2018-04-03T12:17:23","modified_gmt":"2018-04-03T12:17:23","slug":"easier-content-management-with-custom-post-types","status":"publish","type":"post","link":"https:\/\/wpml.org\/ja\/tutorials\/2013\/04\/easier-content-management-with-custom-post-types\/","title":{"rendered":"Easier Content Management with Custom Post Types"},"content":{"rendered":"

Our list of paid contractors<\/a> is growing and we’ve decided to organize it by language. This means you’ll be able to find contractors who can help you in your own language. Turns out, custom post types was the right solution for this. Read on to see why.<\/strong><\/p>\n

Our contractors page contains a few opening sentences, the list of contractors and a few closing sentences.<\/p>\n

\"\"<\/a>
English contractors page<\/figcaption><\/figure>\n

We want to have the same structure for the contractor pages, just with contractors who speak each of the languages. For example, here’s the Japanese page:<\/p>\n

\"\"<\/a>
Japanese contractors page<\/figcaption><\/figure>\n

It’s built the same way, but with different content.<\/p>\n

One way to build these pages would be with regular WordPress pages. That’s what we had until just yesterday. When the contractors listing started, it listed only two people, so managing it as a regular page was easy.<\/p>\n

Today, that page includes 8 contractors and it’s available in 5 languages, so maintaining it as pages becomes a serious headache. Because we want each of the translated contractor pages to include only certain contractors (who speak that language), we can’t just send the English page to translation. If we were to use regular WordPress pages, we’d have to explain to our translators which contractors to include in each language. That’s a lot of communication and manual work.<\/p>\n

Using Custom Post Types and Fields to Build the List<\/h2>\n

So, we moved from regular pages to custom post types and fields. To setup the new custom types, we used our Types<\/a> plugin.<\/p>\n

First, we created a new ‘contractors’ post type. Then, we added the image, website URL, portfolio and contact fields. Here is how a contractor page looks like in our WordPress admin:<\/p>\n

\"\"<\/a>
Edit page for a contractor, using a custom post type<\/figcaption><\/figure>\n

Isn’t this nice?<\/p>\n

We have a separate field for every piece of information. When we add new contractors, we don’t worry about how it’s displayed on the site. All we need to do is enter the fields. A template will display it properly, along with the other contractors.<\/p>\n

Look at the right hand side of the page, where the translation controls are. You’ll immediately notice that Mana’s page is available also in Japanese. That’s the huge benefit that we were looking for. When content is split into small elements, we can easily translate different entries into different languages.<\/p>\n

Displaying the Contractors Lists for Each Language<\/h2>\n

Now that we have contractor entries per language, we need to display them.<\/p>\n

If you prefer to hack it with PHP, you are more than welcome to use Types PHP API<\/a>. When I started to change the contractors page, it was already 10pm and I wanted to finish everything the date changes (and the wife gets upset with me on the PC). I used our Views<\/a> plugin to build the contractors listing, finished the job around 11pm and still had spare hour before my curfew kicks in \ud83d\ude42<\/p>\n

The new contractor page uses a template to display each entry. The template looks like this:<\/p>\n

\"\"<\/a>
Template for contractor with different fields<\/figcaption><\/figure>\n

I built it using a View Template<\/a>\u00a0from within the WordPress admin. A View Template lets me insert fields from the GUI and style them with HTML and CSS. It’s like writing a standard page, just with field shortcodes instead of static text.<\/p>\n

Then, I created a View<\/a> to load the list of contractors and display it. When you create a View, you tell it what content type to load, how to filter (in our case, no filtering is needed) and how to display. We’ve already created a template for a single contractor, so the View just needs to use that template in the listing page.<\/p>\n

Here is the contractors page, showing the static content above and below the list and the shortcode to the View showing the contractors list itself.<\/p>\n

\"\"<\/a>
Contractors listing page<\/figcaption><\/figure>\n

Displaying the Right Content Per Language<\/h2>\n

When you use Views to display content in multilingual sites, the language selection happens automatically. This means that when you insert the listing View into an English page, you’ll get the contractor entries in English. When you insert it into a Japanese page, you get only the entries that are translated to Japanese.<\/p>\n

Now, to get certain contractors to appear in other languages, we only need to translate their entries. The View will load the right entries from the database and display on the page.<\/p>\n

Summary<\/h2>\n

I started this post about how to make content management easier using custom post types and then it kinda became a mini tutorial for our Views plugin.<\/p>\n

The important thing to take here is that for any listing page, custom post types are the way to go.<\/p>\n

If you love coding, you can use the WordPress themes API to create custom templates for your content. We love coding too, but I’m a bit short on time, so I use our Views plugin. Views<\/a> alone costs $95 or you can buy it as part of our Toolset package<\/a> for $149.<\/p>\n

What do you think? How do you build listing pages?<\/strong><\/p>\n

 <\/p>\n

 <\/p>\n","protected":false},"excerpt":{"rendered":"

Our list of paid contractors is growing and we’ve decided to organize it by language. This means you&#82 […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"ep_exclude_from_search":false,"footnotes":""},"categories":[8],"tags":[],"class_list":["post-117119","post","type-post","status-publish","format-standard","hentry","category-tutorials"],"_links":{"self":[{"href":"https:\/\/wpml.org\/ja\/wp-json\/wp\/v2\/posts\/117119","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpml.org\/ja\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpml.org\/ja\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpml.org\/ja\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/wpml.org\/ja\/wp-json\/wp\/v2\/comments?post=117119"}],"version-history":[{"count":8,"href":"https:\/\/wpml.org\/ja\/wp-json\/wp\/v2\/posts\/117119\/revisions"}],"predecessor-version":[{"id":1563330,"href":"https:\/\/wpml.org\/ja\/wp-json\/wp\/v2\/posts\/117119\/revisions\/1563330"}],"wp:attachment":[{"href":"https:\/\/wpml.org\/ja\/wp-json\/wp\/v2\/media?parent=117119"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpml.org\/ja\/wp-json\/wp\/v2\/categories?post=117119"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpml.org\/ja\/wp-json\/wp\/v2\/tags?post=117119"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}