{"id":52452,"date":"2015-08-19T02:49:34","date_gmt":"2015-08-19T06:49:34","guid":{"rendered":"http:\/\/www.templatemonster.com\/help\/?p=52452"},"modified":"2015-09-07T05:21:18","modified_gmt":"2015-09-07T09:21:18","slug":"cherryframework-4-how-to-display-posts-of-certain-type-with-shortcode","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/cherryframework-4-how-to-display-posts-of-certain-type-with-shortcode.html","title":{"rendered":"CherryFramework 4. How to display posts of certain type with shortcode"},"content":{"rendered":"<p>Hello! In this tutorial we&#8217;ll show you how to display posts of certain type on your page using shortcodes in your <strong>CherryFramework4<\/strong> template.<\/p>\r\n\t\r\n<a href=\"http:\/\/www.youtube.com\/watch?v=YlbIsm-YouM?width=1280&amp;height=720\" rel=\"prettyPhoto\">CherryFramework 4. How to display posts of certain type with shortcode<\/a>\r\n<ol>\r\n\t\t<li><p> Navigate to <strong>Pages -> Add new<\/strong> and click on <strong>Insert shortcode<\/strong> button:<\/p>\r\n\r\n<a href=\"\/help\/wp-content\/uploads\/2015\/08\/how_to_display_posts_of_certain_type_with_shortcode-1.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2015\/08\/how_to_display_posts_of_certain_type_with_shortcode-1-300x169.jpg\" alt=\"how_to_display_posts_of_certain_type_with_shortcode-1\" width=\"300\" height=\"169\" class=\"aligncenter size-medium wp-image-52453\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/08\/how_to_display_posts_of_certain_type_with_shortcode-1-300x169.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/08\/how_to_display_posts_of_certain_type_with_shortcode-1-150x84.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/08\/how_to_display_posts_of_certain_type_with_shortcode-1.jpg 1000w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\r\n<\/li>\r\n\t\t<li><p>Click on <strong>Content<\/strong> and choose the type of posts you wish to display on the page, for example <strong>Portfolio<\/strong>:<\/p>\r\n\r\n<a href=\"\/help\/wp-content\/uploads\/2015\/08\/how_to_display_posts_of_certain_type_with_shortcode-2.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2015\/08\/how_to_display_posts_of_certain_type_with_shortcode-2-300x169.jpg\" alt=\"how_to_display_posts_of_certain_type_with_shortcode-2\" width=\"300\" height=\"169\" class=\"aligncenter size-medium wp-image-52454\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/08\/how_to_display_posts_of_certain_type_with_shortcode-2-300x169.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/08\/how_to_display_posts_of_certain_type_with_shortcode-2-150x84.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/08\/how_to_display_posts_of_certain_type_with_shortcode-2.jpg 1000w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\r\n<\/li>\r\n\t\t<li><p>In the window that opens you can set all kinds of options for your shortcode. Scroll down to see\/change all of them: <\/p>\r\n\r\n<a href=\"\/help\/wp-content\/uploads\/2015\/08\/how_to_display_posts_of_certain_type_with_shortcode-3.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2015\/08\/how_to_display_posts_of_certain_type_with_shortcode-3-300x169.jpg\" alt=\"how_to_display_posts_of_certain_type_with_shortcode-3\" width=\"300\" height=\"169\" class=\"aligncenter size-medium wp-image-52455\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/08\/how_to_display_posts_of_certain_type_with_shortcode-3-300x169.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/08\/how_to_display_posts_of_certain_type_with_shortcode-3-150x84.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/08\/how_to_display_posts_of_certain_type_with_shortcode-3.jpg 1000w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\r\n<\/li>\r\n\t\t<li>\r\n\t\t\t\t<p>Among those options you also can:<\/p>\r\n\t\t\t\t<ul class=\"list\">\r\n\t\t\t\t<li><p>Change the layout of your shortcode. For example, if you choose masonry layout, the posts will have different thumbnail sizes and will stick to each other.<\/p><\/li>\r\n\t\t\t\t<li><p>How many posts will be displayed on each page.<\/p><\/li>\r\n\t\t\t\t<li><p>Whether posts will paginate or there will be a read more button to load more posts.<\/p><\/li>\r\n\t\t\t\t<li><p>Number of columns posts will display in.<\/p><\/li>\r\n\t\t\t\t<li><p>The animation type posts will have on hover.<\/p><\/li>\r\n\t\t\t\t<li><p>The pixel value of margin between the posts on the page under Gutter width.<\/p><\/li>\r\n\t\t\t\t<li><p>Whether there will be filter by category and filter by date on the page.<\/p><\/li>\r\n\t\t\t\t<li><p>Which shortcode template(layout) will be used on the page.<\/p><\/li>\r\n\t\t\t\t<li><p>Also you can add custom class to a shortcode.<\/p><\/li>\r\n\t\t\t\t<\/ul>\r\n\t\t\t\t<\/li>\r\n\t\t<li><p>Once you&#8217;re done editing, click on <strong>Insert shortcode<\/strong> button:<\/p>\r\n\r\n<a href=\"\/help\/wp-content\/uploads\/2015\/08\/how_to_display_posts_of_certain_type_with_shortcode-4.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2015\/08\/how_to_display_posts_of_certain_type_with_shortcode-4-300x169.jpg\" alt=\"how_to_display_posts_of_certain_type_with_shortcode-4\" width=\"300\" height=\"169\" class=\"aligncenter size-medium wp-image-52456\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/08\/how_to_display_posts_of_certain_type_with_shortcode-4-300x169.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/08\/how_to_display_posts_of_certain_type_with_shortcode-4-150x84.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/08\/how_to_display_posts_of_certain_type_with_shortcode-4.jpg 1000w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\r\n<\/li>\r\n\t\t<li><p>Click on <strong>Preview<\/strong> changes to see how it looks on the front-end of your site:<\/p>\r\n\r\n<a href=\"\/help\/wp-content\/uploads\/2015\/08\/how_to_display_posts_of_certain_type_with_shortcode-5.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2015\/08\/how_to_display_posts_of_certain_type_with_shortcode-5-300x169.jpg\" alt=\"how_to_display_posts_of_certain_type_with_shortcode-5\" width=\"300\" height=\"169\" class=\"aligncenter size-medium wp-image-52457\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/08\/how_to_display_posts_of_certain_type_with_shortcode-5-300x169.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/08\/how_to_display_posts_of_certain_type_with_shortcode-5-150x84.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/08\/how_to_display_posts_of_certain_type_with_shortcode-5.jpg 1000w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\r\n<\/li>\r\n\t\t<li><p>There it is, you&#8217;ve learned how to display posts of certain type on your page with shortcode:<\/p>\r\n\r\n<a href=\"\/help\/wp-content\/uploads\/2015\/08\/how_to_display_posts_of_certain_type_with_shortcode-6.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2015\/08\/how_to_display_posts_of_certain_type_with_shortcode-6-300x169.jpg\" alt=\"how_to_display_posts_of_certain_type_with_shortcode-6\" width=\"300\" height=\"169\" class=\"aligncenter size-medium wp-image-52458\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/08\/how_to_display_posts_of_certain_type_with_shortcode-6-300x169.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/08\/how_to_display_posts_of_certain_type_with_shortcode-6-150x84.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/08\/how_to_display_posts_of_certain_type_with_shortcode-6.jpg 1000w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\r\n<\/li>\r\n\t<\/ol>\r\n\r\n<p>Feel free to check the detailed video tutorial below:<\/p>\r\n\r\n<a href=\"http:\/\/www.youtube.com\/watch?v=YlbIsm-YouM?width=1280&amp;height=720\" rel=\"prettyPhoto\">CherryFramework 4. How to display posts of certain type with shortcode<\/a>","protected":false},"excerpt":{"rendered":"<p>In this tutorial we&#8217;ll show you how to display posts of certain type on your page using shortcodes in your <strong>CherryFramework4<\/strong> template.<\/p>\n","protected":false},"author":81,"featured_media":52460,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[2017,728],"tags":[2012,592,1415],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/52452"}],"collection":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/users\/81"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=52452"}],"version-history":[{"count":0,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/52452\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/52460"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=52452"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=52452"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=52452"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}