{"id":7817687,"date":"2021-01-11T16:38:05","date_gmt":"2021-01-11T16:38:05","guid":{"rendered":"https:\/\/wpml.org\/?p=7817687"},"modified":"2021-03-11T15:34:58","modified_gmt":"2021-03-11T15:34:58","slug":"how-to-create-and-translate-templates-for-custom-post-types","status":"publish","type":"post","link":"https:\/\/wpml.org\/it\/tutorials\/2021\/01\/how-to-create-and-translate-templates-for-custom-post-types\/","title":{"rendered":"How to create and translate templates for custom post types"},"content":{"rendered":"\n<p class=\"lead\">In this tutorial, we show how to create templates for custom posts types in multilingual sites. We\u2019ll design the template visually and use WPML to translate it.<\/p>\n\n\n\n<p>Today, WordPress&#8217;s default editor is the Block Editor (aka Gutenberg). It&#8217;s a visual editor that&#8217;s become a reliable and mature tool. We&#8217;ll use it to design our templates, together with the <a href=\"http:\/\/www.toolset.com\">Toolset plugins<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Setting things up<\/h2>\n\n\n\n<p>To create templates for custom posts, you only need the following two plugins:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Toolset Types<\/li><li>Toolset Blocks<\/li><\/ul>\n\n\n\n<p>To get these plugins, you will need a Toolset subscription. However, you can test and try all Toolset plugins for free on the <a href=\"https:\/\/discover-wp.com\/\">Discover WP site<\/a>. It allows you to create your own sandbox site with a number of prebuilt site templates to choose from and install in one click.<\/p>\n\n\n\n<p>To translate your templates and your site in general, you also need the following WPML plugins:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>WPML core plugin<\/li><li>WPML Translation Management<\/li><li>WPML String Translation<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Creating a template for custom posts<\/h2>\n\n\n\n<p>Here are the steps to create your template:<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>Go to the <strong>Toolset <\/strong>\u2192 <strong>Dashboard <\/strong>page. It lists all post types in your site along with all custom fields, taxonomies, and templates you have for each post type.<\/li><li>Look in the row of the post type you want to design a template for and click the <strong>Create Content Template<\/strong> button.<\/li><\/ol>\n\n\n<div class=\"wp-block-image\">\n<figure class=\" tb-image tb-image-media aligncenter\" data-toolset-blocks-image=\"22fbfba631493233095fecadb9b73da5\"><a href=\"https:\/\/wpml.org\/wp-content\/uploads\/2021\/01\/toolset-dashboard-create-template.png\"><img decoding=\"async\" width=\"1896\" height=\"880\" loading=\"lazy\" src=\"https:\/\/wpml.org\/wp-content\/uploads\/2021\/01\/toolset-dashboard-create-template.png\" alt=\"\" class=\"wp-image-7818519\" srcset=\"https:\/\/wpml.org\/wp-content\/uploads\/2021\/01\/toolset-dashboard-create-template.png 1896w, https:\/\/wpml.org\/wp-content\/uploads\/2021\/01\/toolset-dashboard-create-template-300x139.png 300w, https:\/\/wpml.org\/wp-content\/uploads\/2021\/01\/toolset-dashboard-create-template-1024x475.png 1024w, https:\/\/wpml.org\/wp-content\/uploads\/2021\/01\/toolset-dashboard-create-template-150x70.png 150w, https:\/\/wpml.org\/wp-content\/uploads\/2021\/01\/toolset-dashboard-create-template-768x356.png 768w, https:\/\/wpml.org\/wp-content\/uploads\/2021\/01\/toolset-dashboard-create-template-1536x713.png 1536w\" sizes=\"auto, (max-width: 1896px) 100vw, 1896px\" \/><\/a><div class=\"tb-image-caption\"><figcaption>Creating a Content Template from the Toolset Dashboard<\/figcaption><\/div><\/figure>\n<\/div>\n\n\n<ol class=\"wp-block-list\" start=\"3\"><li>You are taken to the WordPress Block Editor for your template. Here, you use Toolset blocks to insert different fields. This can be a WordPress field like a post body, any custom field, or a taxonomy. After inserting any Toolset block, enable the <strong>Dynamic Source <\/strong>option and select the field you want to display.<\/li><\/ol>\n\n\n<div class=\"wp-block-image\">\n<figure class=\" tb-image tb-image-media aligncenter\" data-toolset-blocks-image=\"576f9059974bc14e6961c060102f8028\"><a href=\"https:\/\/wpml.org\/wp-content\/uploads\/2021\/01\/toolset-dynamic-source.png\"><img decoding=\"async\" width=\"1920\" height=\"1080\" loading=\"lazy\" src=\"https:\/\/wpml.org\/wp-content\/uploads\/2021\/01\/toolset-dynamic-source.png\" alt=\"\" class=\"wp-image-7818545\" srcset=\"https:\/\/wpml.org\/wp-content\/uploads\/2021\/01\/toolset-dynamic-source.png 1920w, https:\/\/wpml.org\/wp-content\/uploads\/2021\/01\/toolset-dynamic-source-300x169.png 300w, https:\/\/wpml.org\/wp-content\/uploads\/2021\/01\/toolset-dynamic-source-1024x576.png 1024w, https:\/\/wpml.org\/wp-content\/uploads\/2021\/01\/toolset-dynamic-source-150x84.png 150w, https:\/\/wpml.org\/wp-content\/uploads\/2021\/01\/toolset-dynamic-source-768x432.png 768w, https:\/\/wpml.org\/wp-content\/uploads\/2021\/01\/toolset-dynamic-source-1536x864.png 1536w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/a><div class=\"tb-image-caption\"><figcaption>Using a Dynamic Source to display an image saved as a custom field<\/figcaption><\/div><\/figure>\n<\/div>\n\n\n<p>And that&#8217;s it, now insert any number of fields you need and tweak how they appear on the page. Each Toolset block has sections for adjusting the styling, typography, and more.<\/p>\n\n\n\n<p>Of course, you can do much more. For example, you can arrange contents in columns, use containers, display parts of the template conditionally, display a list of related posts, create responsive designs, and more.<\/p>\n\n\n\n<p>Here&#8217;s a whole video tutorial on creating a template for displaying custom posts.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<div class=\"embed-responsive embed-responsive-16by9\"><iframe title=\"How to design templates for custom content using Toolset Blocks\" width=\"700\" height=\"394\" src=\"https:\/\/www.youtube.com\/embed\/ZfudEx64gFk?feature=oembed&#038;enablejsapi=1&#038;origin=https:\/\/wpml.org\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/div>\n<\/div><\/figure>\n\n\n\n<p>You can find more information and related tutorials on the Toolset&#8217;s lesson on creating <a href=\"https:\/\/toolset.com\/course-lesson\/creating-templates-to-display-custom-posts\/\">single-post templates<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Translating the templates on multilingual sites<\/h2>\n\n\n\n<p>OK, now that you know how to create templates, let&#8217;s see how to translate them for your multilingual sites. Toolset comes from the same team behind WPML so the integration is seamless.<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>Go to the <strong>WPML <\/strong>\u2192<strong> Translation Management<\/strong> page.<\/li><li>Use the dropdown in the top search section, select <strong>Content Template, <\/strong>and click <strong>Filter<\/strong>.<\/li><li>Select the template you want to send for translation.<\/li><li>Select the languages you want to translate the template into.<\/li><li>Click <strong>Add selected content to the translation basket<\/strong>.<\/li><\/ol>\n\n\n<div class=\"wp-block-image\">\n<figure class=\" tb-image tb-image-media aligncenter\" data-toolset-blocks-image=\"c007482c162c2a2f6263c48fe9c6a6de\"><a href=\"https:\/\/wpml.org\/wp-content\/uploads\/2021\/01\/wpml-translation-management.png\"><img decoding=\"async\" width=\"1752\" height=\"898\" loading=\"lazy\" src=\"https:\/\/wpml.org\/wp-content\/uploads\/2021\/01\/wpml-translation-management.png\" alt=\"\" class=\"wp-image-7818577\" srcset=\"https:\/\/wpml.org\/wp-content\/uploads\/2021\/01\/wpml-translation-management.png 1752w, https:\/\/wpml.org\/wp-content\/uploads\/2021\/01\/wpml-translation-management-300x154.png 300w, https:\/\/wpml.org\/wp-content\/uploads\/2021\/01\/wpml-translation-management-1024x525.png 1024w, https:\/\/wpml.org\/wp-content\/uploads\/2021\/01\/wpml-translation-management-150x77.png 150w, https:\/\/wpml.org\/wp-content\/uploads\/2021\/01\/wpml-translation-management-768x394.png 768w, https:\/\/wpml.org\/wp-content\/uploads\/2021\/01\/wpml-translation-management-1536x787.png 1536w\" sizes=\"auto, (max-width: 1752px) 100vw, 1752px\" \/><\/a><div class=\"tb-image-caption\"><figcaption>Sending a Toolset template for translation<\/figcaption><\/div><\/figure>\n<\/div>\n\n\n<ol class=\"wp-block-list\" start=\"6\"><li>Finally, click the <strong>Translation Basket<\/strong> tab, select the translator you want to use, and click <strong>Send all items for translation<\/strong>.<\/li><\/ol>\n\n\n\n<p>If you want to translate the items yourself, simply go to the <strong>WPML <\/strong>\u2192 <strong>Translations <\/strong>page and click the<strong> Take and translate<\/strong> button next to the translation job you want to do.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Build advanced dynamic sites with Toolset<\/h2>\n\n\n\n<p>This tutorial shows only a tiny bit of what you can build with <a href=\"http:\/\/www.toolset.com\">Toolset<\/a>:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Design custom lists of posts<\/li><li>Build advanced custom searches<\/li><li>Display posts on a map<\/li><li>Create front-end forms for submitting posts<\/li><li>Design custom archive pages<\/li><li>Create custom WooCommerce sites<\/li><li>Connect content through advanced post relationships<\/li><\/ul>\n\n\n\n<p>And much more!<\/p>\n\n\n\n<p>Toolset also comes with complete tutorials on creating <a href=\"https:\/\/toolset.com\/course\/wordpress-directory-and-classifieds-sites\/\">directory sites<\/a>, <a href=\"https:\/\/toolset.com\/course\/custom-woocommerce-sites\/\">custom WooCommerce sites<\/a>, <a href=\"https:\/\/toolset.com\/course\/custom-woocommerce-sites\/\">membership sites<\/a>, and more.<\/p>\n\n\n\n<p><a href=\"https:\/\/toolset.com\/buy\/\">Toolset starts at only $69<\/a> for a complete package for one site. If you\u2019re interested in Toolset, there\u2019s a 30% discount waiting for you on our <a href=\"\/?page_id=2869157\">coupons page<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this tutorial, we show how to create templates for custom posts types in multilingual sites. We\u2019ll design the template visually and use WPML to translate it. Today, WordPress&#8217;s default editor is the Block Editor (aka Gutenberg). It&#8217;s a visual editor that&#8217;s become a reliable and mature tool. We&#8217;ll use it to design our templates, [&hellip;]<\/p>\n","protected":false},"author":76577,"featured_media":8286917,"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-7817687","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials"],"_links":{"self":[{"href":"https:\/\/wpml.org\/it\/wp-json\/wp\/v2\/posts\/7817687","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpml.org\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpml.org\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpml.org\/it\/wp-json\/wp\/v2\/users\/76577"}],"replies":[{"embeddable":true,"href":"https:\/\/wpml.org\/it\/wp-json\/wp\/v2\/comments?post=7817687"}],"version-history":[{"count":8,"href":"https:\/\/wpml.org\/it\/wp-json\/wp\/v2\/posts\/7817687\/revisions"}],"predecessor-version":[{"id":7822299,"href":"https:\/\/wpml.org\/it\/wp-json\/wp\/v2\/posts\/7817687\/revisions\/7822299"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpml.org\/it\/wp-json\/wp\/v2\/media\/8286917"}],"wp:attachment":[{"href":"https:\/\/wpml.org\/it\/wp-json\/wp\/v2\/media?parent=7817687"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpml.org\/it\/wp-json\/wp\/v2\/categories?post=7817687"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpml.org\/it\/wp-json\/wp\/v2\/tags?post=7817687"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}