{"id":7843935,"date":"2021-01-14T17:05:32","date_gmt":"2021-01-14T17:05:32","guid":{"rendered":"https:\/\/wpml.org\/?p=7843935"},"modified":"2021-01-14T17:05:36","modified_gmt":"2021-01-14T17:05:36","slug":"how-to-display-and-translate-custom-content-lists-without-programming","status":"publish","type":"post","link":"https:\/\/wpml.org\/pt-br\/tutorials\/2021\/01\/how-to-display-and-translate-custom-content-lists-without-programming\/","title":{"rendered":"How to display and translate custom content lists without programming"},"content":{"rendered":"\n<p class=\"lead\">Many sites that use <a href=\"https:\/\/wpml.org\/tutorials\/2018\/07\/creating-custom-content-for-multilingual-sites-with-toolset\/\">custom post types<\/a> and <a href=\"https:\/\/toolset.com\/course-lesson\/creating-custom-fields\/\">custom fields<\/a> need to display dynamic lists of content. We\u2019ll show you how to create such lists using the View block from Toolset.<\/p>\n\n\n\n<p>A View loads the content that you choose from the database and displays it with your styling. For example, you could use a View to show:<\/p>\n\n\n\n<p><strong>Recently added properties<\/strong><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\" tb-image tb-image-media aligncenter\" data-toolset-blocks-image=\"04d98eff932d1f26d0bce566ff867c42\"><a href=\"https:\/\/wpml.org\/wp-content\/uploads\/2021\/01\/recent-properties-view-1.png\"><img decoding=\"async\" width=\"1024\" height=\"562\" loading=\"lazy\" src=\"https:\/\/wpml.org\/wp-content\/uploads\/2021\/01\/recent-properties-view-1-1024x562.png\" alt=\"\" class=\"wp-image-7844107\" srcset=\"https:\/\/wpml.org\/wp-content\/uploads\/2021\/01\/recent-properties-view-1-1024x562.png 1024w, https:\/\/wpml.org\/wp-content\/uploads\/2021\/01\/recent-properties-view-1-300x165.png 300w, https:\/\/wpml.org\/wp-content\/uploads\/2021\/01\/recent-properties-view-1-150x82.png 150w, https:\/\/wpml.org\/wp-content\/uploads\/2021\/01\/recent-properties-view-1-768x422.png 768w, https:\/\/wpml.org\/wp-content\/uploads\/2021\/01\/recent-properties-view-1-1536x843.png 1536w, https:\/\/wpml.org\/wp-content\/uploads\/2021\/01\/recent-properties-view-1-2048x1124.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n<\/div>\n\n\n<p><strong>Featured tours<\/strong><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\" tb-image tb-image-media aligncenter\" data-toolset-blocks-image=\"1fe58b50419e2b97e6fc4b9ba09986ca\"><a href=\"https:\/\/wpml.org\/wp-content\/uploads\/2021\/01\/featured-tours-view.png\"><img decoding=\"async\" width=\"1024\" height=\"759\" loading=\"lazy\" src=\"https:\/\/wpml.org\/wp-content\/uploads\/2021\/01\/featured-tours-view-1024x759.png\" alt=\"\" class=\"wp-image-7844139\" srcset=\"https:\/\/wpml.org\/wp-content\/uploads\/2021\/01\/featured-tours-view-1024x759.png 1024w, https:\/\/wpml.org\/wp-content\/uploads\/2021\/01\/featured-tours-view-300x222.png 300w, https:\/\/wpml.org\/wp-content\/uploads\/2021\/01\/featured-tours-view-150x111.png 150w, https:\/\/wpml.org\/wp-content\/uploads\/2021\/01\/featured-tours-view-768x569.png 768w, https:\/\/wpml.org\/wp-content\/uploads\/2021\/01\/featured-tours-view-1536x1139.png 1536w, https:\/\/wpml.org\/wp-content\/uploads\/2021\/01\/featured-tours-view-2048x1518.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n<\/div>\n\n\n<p><strong>Recipes that meet certain search criteria<\/strong><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\" tb-image tb-image-media aligncenter\" data-toolset-blocks-image=\"2df37e4e375682c21a8f4786058f9896\"><a href=\"https:\/\/wpml.org\/wp-content\/uploads\/2021\/01\/recipes-search-2.png\"><img decoding=\"async\" width=\"1024\" height=\"850\" loading=\"lazy\" src=\"https:\/\/wpml.org\/wp-content\/uploads\/2021\/01\/recipes-search-2-1024x850.png\" alt=\"\" class=\"wp-image-7847201\" srcset=\"https:\/\/wpml.org\/wp-content\/uploads\/2021\/01\/recipes-search-2-1024x850.png 1024w, https:\/\/wpml.org\/wp-content\/uploads\/2021\/01\/recipes-search-2-300x249.png 300w, https:\/\/wpml.org\/wp-content\/uploads\/2021\/01\/recipes-search-2-150x125.png 150w, https:\/\/wpml.org\/wp-content\/uploads\/2021\/01\/recipes-search-2-768x638.png 768w, https:\/\/wpml.org\/wp-content\/uploads\/2021\/01\/recipes-search-2-1536x1275.png 1536w, https:\/\/wpml.org\/wp-content\/uploads\/2021\/01\/recipes-search-2-2048x1700.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n<\/div>\n\n\n<p>And more!<\/p>\n\n\n\n<p>In each of the above examples, the View searches through our existing content to display items that match specific criteria. This means the View&#8217;s output is dynamically updated as more matching content gets created. And all this without coding!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Setting things up<\/h2>\n\n\n\n<p>To create a View, 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 account. If you\u2019re not using Toolset yet, 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 content, 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\">Step 1) Adding a View to a page<\/h2>\n\n\n\n<p>To add a View, simply create or edit the page, post, or a template where you would like to include the View. Then, insert the <strong>View<\/strong> block and give your View a name.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\" tb-image tb-image-media aligncenter\" data-toolset-blocks-image=\"b8c3f171ee9720fa6d9404dfb321f294\"><a href=\"https:\/\/wpml.org\/wp-content\/uploads\/2021\/01\/adding-and-naming-view.png\"><img decoding=\"async\" width=\"1024\" height=\"806\" loading=\"lazy\" src=\"https:\/\/wpml.org\/wp-content\/uploads\/2021\/01\/adding-and-naming-view-1024x806.png\" alt=\"\" class=\"wp-image-7844195\" srcset=\"https:\/\/wpml.org\/wp-content\/uploads\/2021\/01\/adding-and-naming-view-1024x806.png 1024w, https:\/\/wpml.org\/wp-content\/uploads\/2021\/01\/adding-and-naming-view-300x236.png 300w, https:\/\/wpml.org\/wp-content\/uploads\/2021\/01\/adding-and-naming-view-150x118.png 150w, https:\/\/wpml.org\/wp-content\/uploads\/2021\/01\/adding-and-naming-view-768x604.png 768w, https:\/\/wpml.org\/wp-content\/uploads\/2021\/01\/adding-and-naming-view-1536x1209.png 1536w, https:\/\/wpml.org\/wp-content\/uploads\/2021\/01\/adding-and-naming-view-2048x1612.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><div class=\"tb-image-caption\"><figcaption><em>Adding a View block to a page<\/em><\/figcaption><\/div><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\">Step 2) Select options for the View<\/h2>\n\n\n\n<p>You can choose between list, grid, masonry, or collage layouts. If you are displaying a lot of content, you can add pagination, front-end sorting, or search options.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\" tb-image tb-image-media aligncenter\" data-toolset-blocks-image=\"54ee043cc91eaa218b677ab7e3ca8525\"><a href=\"https:\/\/wpml.org\/wp-content\/uploads\/2021\/01\/view-choose-design-1.png\"><img decoding=\"async\" width=\"1024\" height=\"714\" loading=\"lazy\" src=\"https:\/\/wpml.org\/wp-content\/uploads\/2021\/01\/view-choose-design-1-1024x714.png\" alt=\"\" class=\"wp-image-7844251\" srcset=\"https:\/\/wpml.org\/wp-content\/uploads\/2021\/01\/view-choose-design-1-1024x714.png 1024w, https:\/\/wpml.org\/wp-content\/uploads\/2021\/01\/view-choose-design-1-300x209.png 300w, https:\/\/wpml.org\/wp-content\/uploads\/2021\/01\/view-choose-design-1-150x105.png 150w, https:\/\/wpml.org\/wp-content\/uploads\/2021\/01\/view-choose-design-1-768x536.png 768w, https:\/\/wpml.org\/wp-content\/uploads\/2021\/01\/view-choose-design-1.png 1528w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><div class=\"tb-image-caption\"><figcaption>Choosing View options<\/figcaption><\/div><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\">Step 3) Select which content to display<\/h2>\n\n\n\n<p>Next, choose what type of content you want to display. You can choose from any of your custom post types.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\" tb-image tb-image-media aligncenter\" data-toolset-blocks-image=\"9945c0834c433e549aeca81b2b99a495\"><a href=\"https:\/\/wpml.org\/wp-content\/uploads\/2021\/01\/views-choose-content.png\"><img decoding=\"async\" width=\"1024\" height=\"660\" loading=\"lazy\" src=\"https:\/\/wpml.org\/wp-content\/uploads\/2021\/01\/views-choose-content-1024x660.png\" alt=\"\" class=\"wp-image-7844279\" srcset=\"https:\/\/wpml.org\/wp-content\/uploads\/2021\/01\/views-choose-content-1024x660.png 1024w, https:\/\/wpml.org\/wp-content\/uploads\/2021\/01\/views-choose-content-300x193.png 300w, https:\/\/wpml.org\/wp-content\/uploads\/2021\/01\/views-choose-content-150x97.png 150w, https:\/\/wpml.org\/wp-content\/uploads\/2021\/01\/views-choose-content-768x495.png 768w, https:\/\/wpml.org\/wp-content\/uploads\/2021\/01\/views-choose-content.png 1526w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><div class=\"tb-image-caption\"><figcaption><em>Selecting which content you want your list to display<\/em><\/figcaption><\/div><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\">Step 4) Add fields and design the View\u2019s output<\/h2>\n\n\n\n<p>Now, you need to choose how the View will display your content on the front-end. In other words, you need to insert different blocks to display various information about the listed posts.<\/p>\n\n\n\n<p>In the editor, click the <strong>plus <\/strong>button to add a block and choose from one of the Toolset blocks. You can choose from <a href=\"https:\/\/toolset.com\/block-item\/\">more than 20 blocks<\/a> like <strong>Heading<\/strong>, <strong>Image<\/strong>, <strong>Single Field<\/strong>, <strong>Button<\/strong>, and so on.&nbsp;<\/p>\n\n\n\n<p>All Toolset blocks allow you to display content coming from dynamic sources. Dynamic sources are all the WordPress fields, custom fields, and taxonomies that are stored in the database.&nbsp;<\/p>\n\n\n\n<p>As you select a specific dynamic source for a block you\u2019ll see the content automatically refresh and show the dynamic information for each post in the list.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\" tb-image tb-image-media aligncenter\" data-toolset-blocks-image=\"3c38c75de290493a1d12583216c7a189\"><a href=\"https:\/\/wpml.org\/wp-content\/uploads\/2021\/01\/populating-view-with-dynamic-content.png\"><img decoding=\"async\" width=\"1024\" height=\"806\" loading=\"lazy\" src=\"https:\/\/wpml.org\/wp-content\/uploads\/2021\/01\/populating-view-with-dynamic-content-1024x806.png\" alt=\"\" class=\"wp-image-7844343\" srcset=\"https:\/\/wpml.org\/wp-content\/uploads\/2021\/01\/populating-view-with-dynamic-content-1024x806.png 1024w, https:\/\/wpml.org\/wp-content\/uploads\/2021\/01\/populating-view-with-dynamic-content-300x236.png 300w, https:\/\/wpml.org\/wp-content\/uploads\/2021\/01\/populating-view-with-dynamic-content-150x118.png 150w, https:\/\/wpml.org\/wp-content\/uploads\/2021\/01\/populating-view-with-dynamic-content-768x604.png 768w, https:\/\/wpml.org\/wp-content\/uploads\/2021\/01\/populating-view-with-dynamic-content-1536x1209.png 1536w, https:\/\/wpml.org\/wp-content\/uploads\/2021\/01\/populating-view-with-dynamic-content-2048x1612.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><div class=\"tb-image-caption\"><figcaption><em>Adding dynamic content to a View<\/em><\/figcaption><\/div><\/figure>\n<\/div>\n\n\n<p>You can also change the styling of your View, the number of results shown, the order the results are displayed, and so much more!<\/p>\n\n\n\n<p>Here\u2019s a video on creating custom lists using the Toolset View block:<\/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 Create a View Using WordPress and Toolset - Free Course\" width=\"700\" height=\"394\" src=\"https:\/\/www.youtube.com\/embed\/G0bUrzCHyoA?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/div>\n<\/div><\/figure>\n\n\n\n<p>For step-by-step instructions, please visit the Toolset documentation about <a href=\"https:\/\/toolset.com\/documentation\/getting-started-with-toolset\/create-and-display-custom-lists-of-content\/\">creating a custom list of posts in WordPress<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Translating pages that contain Views<\/h2>\n\n\n\n<p>Views live inside pages (or posts or custom types). When you translate a page that contains a View, WPML will let you translate all the \u201cstatic\u201d texts that you added to the View.<\/p>\n\n\n\n<p>Blocks that use dynamic content will also pull in any existing translations. This means that if translations exist for these elements, they will automatically display in the View in the correct languages.<\/p>\n\n\n\n<p>You should translate content with Views normally, as you would <a href=\"https:\/\/wpml.org\/documentation\/getting-started-guide\/#how-to-translate-pages-posts-and-custom-posts\">translate any page with WPML<\/a>.<\/p>\n\n\n\n<p>When translated, the page with your View looks like this:<\/p>\n\n\n\n<div class=\"tb-fields-and-text\" data-toolset-blocks-fields-and-text=\"360284519b991feb492b582c7d84725f\"><div class=\"grid-table-wrapper\">\n  <div class=\"grid-table grid-table--align-center grid-table--style-striped grid-table--style-shadow grid-table--padding-lg mt-40 mb-60\">\n    <div class=\"row row-head hide-sm\">\n      <div class=\"col-md-6 text-center\">View in default language<\/div>\n      <div class=\"col-md-6 text-center\">View in secondary language<\/div>\n    <\/div>\n    <div class=\"row\">\n      <div class=\"col-md-6 text-center\"><figure class=\"wp-block-image tb-image tb-image-media\" data-toolset-blocks-image=\"1\"><a href=\"https:\/\/wpml.org\/wp-content\/uploads\/2021\/01\/view-default-language-3.png\"><img decoding=\"async\" width=\"300\" height=\"232\" src=\"https:\/\/wpml.org\/wp-content\/uploads\/2021\/01\/view-default-language-3-300x232.png\" alt=\"\" class=\"wp-image-7844617\" srcset=\"https:\/\/wpml.org\/wp-content\/uploads\/2021\/01\/view-default-language-3-300x232.png 300w, https:\/\/wpml.org\/wp-content\/uploads\/2021\/01\/view-default-language-3-1024x792.png 1024w, https:\/\/wpml.org\/wp-content\/uploads\/2021\/01\/view-default-language-3-150x116.png 150w, https:\/\/wpml.org\/wp-content\/uploads\/2021\/01\/view-default-language-3-768x594.png 768w, https:\/\/wpml.org\/wp-content\/uploads\/2021\/01\/view-default-language-3-1536x1188.png 1536w, https:\/\/wpml.org\/wp-content\/uploads\/2021\/01\/view-default-language-3-2048x1584.png 2048w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/figure><br><div class=\"d-block d-md-none\"><\/div>\n      <\/div>\n      <div class=\"col-md-6 text-center\"><figure class=\"wp-block-image tb-image tb-image-media\" data-toolset-blocks-image=\"1\"><a href=\"https:\/\/wpml.org\/wp-content\/uploads\/2021\/01\/view-secondary-language.png\"><img decoding=\"async\" width=\"300\" height=\"232\" src=\"https:\/\/wpml.org\/wp-content\/uploads\/2021\/01\/view-secondary-language-300x232.png\" alt=\"\" class=\"wp-image-7844517\" srcset=\"https:\/\/wpml.org\/wp-content\/uploads\/2021\/01\/view-secondary-language-300x232.png 300w, https:\/\/wpml.org\/wp-content\/uploads\/2021\/01\/view-secondary-language-1024x793.png 1024w, https:\/\/wpml.org\/wp-content\/uploads\/2021\/01\/view-secondary-language-150x116.png 150w, https:\/\/wpml.org\/wp-content\/uploads\/2021\/01\/view-secondary-language-768x595.png 768w, https:\/\/wpml.org\/wp-content\/uploads\/2021\/01\/view-secondary-language-1536x1189.png 1536w, https:\/\/wpml.org\/wp-content\/uploads\/2021\/01\/view-secondary-language-2048x1586.png 2048w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/figure><br><div class=\"d-block d-md-none\"><\/div><\/div>\n    <\/div>\n  <\/div>\n<\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Give it a try!<\/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> without programming. Check out all of Toolset\u2019s free courses for more tutorials about building custom WordPress sites:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/toolset.com\/course\/wordpress-directory-and-classifieds-sites\/\">Directory and listing sites<\/a><\/li><li><a href=\"https:\/\/toolset.com\/course\/wordpress-membership-sites\/\">Membership sites<\/a><\/li><li><a href=\"https:\/\/toolset.com\/course\/custom-business-sites-with-dynamic-content\/\">Business sites<\/a><\/li><li><a href=\"https:\/\/toolset.com\/course\/custom-woocommerce-sites\/\">WooCommerce sites<\/a><\/li><li><a href=\"https:\/\/toolset.com\/course\/wordpress-real-estate-sites\/\">Real Estate sites<\/a><\/li><li><a href=\"https:\/\/toolset.com\/course\/custom-types-in-wordpress\/\">Custom types in WordPress<\/a><\/li><\/ul>\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 for WPML clients on our <a href=\"\/?page_id=2869157\">coupons page<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Leave a comment<\/h2>\n\n\n\n<p>Have you tried Toolset yet? Let us know what you\u2019ve used a View to display in the comments below!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Many sites that use custom post types and custom fields need to display dynamic lists of content. We\u2019ll show you how to create such lists using the View block from Toolset. A View loads the content that you choose from the database and displays it with your styling. For example, you could use a View [&hellip;]<\/p>\n","protected":false},"author":76577,"featured_media":7844327,"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-7843935","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials"],"_links":{"self":[{"href":"https:\/\/wpml.org\/pt-br\/wp-json\/wp\/v2\/posts\/7843935","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpml.org\/pt-br\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpml.org\/pt-br\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpml.org\/pt-br\/wp-json\/wp\/v2\/users\/76577"}],"replies":[{"embeddable":true,"href":"https:\/\/wpml.org\/pt-br\/wp-json\/wp\/v2\/comments?post=7843935"}],"version-history":[{"count":8,"href":"https:\/\/wpml.org\/pt-br\/wp-json\/wp\/v2\/posts\/7843935\/revisions"}],"predecessor-version":[{"id":7847207,"href":"https:\/\/wpml.org\/pt-br\/wp-json\/wp\/v2\/posts\/7843935\/revisions\/7847207"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpml.org\/pt-br\/wp-json\/wp\/v2\/media\/7844327"}],"wp:attachment":[{"href":"https:\/\/wpml.org\/pt-br\/wp-json\/wp\/v2\/media?parent=7843935"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpml.org\/pt-br\/wp-json\/wp\/v2\/categories?post=7843935"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpml.org\/pt-br\/wp-json\/wp\/v2\/tags?post=7843935"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}