{"id":114,"date":"2014-08-17T10:07:35","date_gmt":"2014-08-17T10:07:35","guid":{"rendered":"http:\/\/docs.contentviewspro.com\/\/?p=114"},"modified":"2025-01-14T10:56:45","modified_gmt":"2025-01-14T10:56:45","password":"","slug":"completely-replace-wordpress-layout-by-content-views-pro-layout","status":"publish","type":"docs","link":"https:\/\/contentviewspro.com\/documentation\/article\/completely-replace-wordpress-layout-by-content-views-pro-layout\/","title":{"rendered":"Replace Layout &#8211; show Grid layout on Blog, Category, Search&#8230; pages"},"content":{"rendered":"<style>.entry-content ul.nav-tabs{margin-left:0}h2{margin-top:1.2em!important}h3{margin:10px 0!important}p{margin-bottom:1em}.step{font-size:1.1em}blockquote{margin-left:0;margin-bottom:20px;}blockquote p,blockquote pre{margin-bottom:0;font-size:.9em}ul{margin-bottom:5px;}#collapse_f6ee-47a8 .panel-title{margin:10px}h4{margin: 0 0 20px !important;}.tableofcontent{line-height: 16px; text-transform: capitalize;}mark{background:yellow!important}<\/style>\n<blockquote><p>This feature is only available in the <a href=\"https:\/\/www.contentviewspro.com\/#buynow\" target=\"_blank\" rel=\"noopener noreferrer\">Pro version<\/a>.<\/p><\/blockquote>\n<div>\n<h4>TABLE OF CONTENTS:<\/h4>\n<ul class=\"tableofcontent\">\n<li><a href=\"#intro\">Introduction<\/a><\/li>\n<li><a href=\"#howto\">How to do?<\/a><\/li>\n<li><a href=\"#sorting\">Customize sort order<\/a><\/li>\n<li><a href=\"#overwrite\">Overwrite the result<\/a><\/li>\n<li><a href=\"#which\">Which pages can I replace the posts layout?<\/a><\/li>\n<li><a href=\"#custom\">How to use a different layout for each category?<\/a><\/li>\n<li><a href=\"#specific\">How to replace layout for only a specific category?<\/a><\/li>\n<li><a href=\"#subcategories\">How to show sub-categories on the parent category page?<\/a><\/li>\n<li><a href=\"#notwork\">Notices<\/a><\/li>\n<\/ul>\n<\/div>\n<h2 id=\"intro\">Introduction<\/h2>\n<p>Content Views Pro helps you to display WordPress content anywhere easily. But it can help you to do even more things.<\/p>\n<p>The Blog, Category, Search results, Archives\u2026 are special pages of each WordPress site. The posts layout in these pages is managed by the active theme. To show Grid in these pages, you will need to modify theme&#8217;s files. That is a complicated task, requires coding skills and knowledge about HTML, PHP and WordPress.<\/p>\n<p>The <strong>Replace Layout<\/strong> feature of Content Views Pro will help you to show Grid (or another layout) in Blog, Category, Search results, Archives\u2026 pages easily, without any line of code. You will save a lot of time, effort and hassle.<\/p>\n<p style=\"text-align: center;\"><img decoding=\"async\" class=\"align-center\" src=\"https:\/\/d1s48tdzk2qtjc.cloudfront.net\/20161202\/7-replace-layout-min.png\" alt=\"Replace layout - Content Views Pro for WordPress\" \/><\/p>\n<hr \/>\n<h2 id=\"howto\">How to do?<\/h2>\n<p>There are only 2 simple steps to show Grid in your Blog, Category&#8230; pages:<\/p>\n<ol>\n<li><strong>Create View to design the layout (Grid, Pinterest&#8230;)<\/strong><br \/>\nThis step is <mark>creating a view<\/mark> to set the layout you want to show your posts (<em>start at 0:30 in below video<\/em>).<\/p>\n<p><mark>If you already created the view, you can skip this step.<\/mark> It is about selecting layout (Grid, Pinterest, Timeline&#8230;), set number of columns, customize font &amp; color, setup pagination&#8230; You have complete control over the layout to design it in your desired way.<\/p>\n<p>Normally, you <mark style=\"font-size: revert;\">don&#8217;t need to change any settings in &#8220;Filter Settings&#8221;<\/mark><span style=\"font-size: revert; color: var(--ast-global-color-3); background-color: var(--ast-global-color-5);\"> of this View (<\/span><mark style=\"font-size: revert;\">leave &#8220;Filter Settings&#8221; as default<\/mark><span style=\"font-size: revert; color: var(--ast-global-color-3); background-color: var(--ast-global-color-5);\">), because Content Views Pro will get the posts of current page automatically.<br \/>\n<\/span>For example: when replacing layout of a category page, Content Views Pro will get the posts list of that current category automatically.<\/li>\n<li id=\"step2\" style=\"margin-top: 30px;\"><strong>Use the View on archive pages<\/strong><br \/>\nIn Admin dashboard, click <em>Content Views &gt;&gt; Replace Layout<\/em>.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-6014\" src=\"https:\/\/contentviewspro.com\/documentation\/wp-content\/uploads\/2014\/08\/Replace-Layout-Menu.png\" alt=\"\" width=\"196\" height=\"225\" \/><\/p>\n<p>In the Replace Layout page:<\/p>\n<ul>\n<li>select checkbox of the WordPress page you want to replace layout<\/li>\n<li>select the View (that you created in Step 1 above) in the dropdown<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1758\" src=\"https:\/\/contentviewspro.com\/documentation\/wp-content\/uploads\/2020\/12\/Content-Views-Pro-Grid-layout-for-Category.png\" alt=\"Content Views Pro - Grid layout for Category\" width=\"633\" height=\"374\" \/><\/li>\n<li id=\"create-view\">\n<blockquote><p>For Categories (or Tags, custom taxonomies), you can select a different layout for each category (<a href=\"https:\/\/contentviewspro.com\/documentation\/article\/completely-replace-wordpress-layout-by-content-views-pro-layout\/#custom\">read more<\/a>).<\/p><\/blockquote>\n<\/li>\n<\/ol>\n<p>That&#8217;s done. You now have beautiful Grid layout in your Category pages effortlessly.<\/p>\n<p>To disable this feature for any page, please uncheck the checkbox of that page.<\/p>\n<hr \/>\n<p>This video will demonstrate how to use the Replace Layout feature to show Grid in your WordPress category page:<\/p>\n<p><iframe loading=\"lazy\" src=\"\/\/www.youtube.com\/embed\/MMsdHaxaLUI?hd=1&amp;vq=hd720&amp;cc_load_policy=1&amp;autohide=1&amp;showinfo=0&amp;modestbranding=1&amp;iv_load_policy=3&amp;rel=0&amp;theme=light\n\" width=\"640\" height=\"360\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<hr \/>\n<h2 id=\"sorting\">Customize sort order<\/h2>\n<p>The default sort order of page will be used, to use your custom sort order, please:<\/p>\n<ul>\n<li>configure the \u201cSort by\u201d of the View as you want (<a href=\"https:\/\/contentviewspro.com\/documentation\/article\/how-to-sort-wordpress-posts-in-view\/\" target=\"_blank\" rel=\"noopener noreferrer\">see document<\/a>)<\/li>\n<li>then select the option <strong>Use &#8220;Sort by&#8221; setting of View<\/strong> in the third column:<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2855\" src=\"https:\/\/contentviewspro.com\/documentation\/wp-content\/uploads\/2014\/08\/Replace-Layout-change-posts-order.png\" alt=\"Replace Layout - change posts order\" width=\"708\" height=\"122\" srcset=\"https:\/\/contentviewspro.com\/documentation\/wp-content\/uploads\/2014\/08\/Replace-Layout-change-posts-order.png 708w, https:\/\/contentviewspro.com\/documentation\/wp-content\/uploads\/2014\/08\/Replace-Layout-change-posts-order-300x52.png 300w\" sizes=\"auto, (max-width: 708px) 100vw, 708px\" \/><\/li>\n<\/ul>\n<hr \/>\n<h2 id=\"overwrite\">Overwrite the result<\/h2>\n<p>By default, the returned result by WordPress for a page will be used, for example the Blog page will display posts from all categories.<br \/>\nTo overwrite this result (query posts in your custom way), please:<\/p>\n<ul>\n<li>configure the &#8220;Filter Settings&#8221; of the View as you want<\/li>\n<li>then select the option <strong>Use &#8220;Filter Settings&#8221; of View<\/strong> in the third column:<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-3045\" src=\"https:\/\/contentviewspro.com\/documentation\/wp-content\/uploads\/2014\/08\/Replace-Layout-overwrite-result.png\" alt=\"Replace-Layout-overwrite-result\" width=\"695\" height=\"116\" srcset=\"https:\/\/contentviewspro.com\/documentation\/wp-content\/uploads\/2014\/08\/Replace-Layout-overwrite-result.png 695w, https:\/\/contentviewspro.com\/documentation\/wp-content\/uploads\/2014\/08\/Replace-Layout-overwrite-result-300x50.png 300w\" sizes=\"auto, (max-width: 695px) 100vw, 695px\" \/><\/li>\n<\/ul>\n<hr \/>\n<h2 id=\"which\">Which pages can I replace the posts layout?<\/h2>\n<p>You can replace layout in many WordPress pages:<\/p>\n<ul>\n<li>Blog page: is the default latest posts page, or the <strong><em>Posts page<\/em><\/strong> page which you selected in WordPress admin <strong><em>Settings &gt; Reading<\/em><\/strong>:<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2655\" src=\"https:\/\/contentviewspro.com\/documentation\/wp-content\/uploads\/2017\/12\/CVP-select-Blog-page-for-WordPress.png\" alt=\"CVP - select Blog page for WordPress\" width=\"695\" height=\"251\" srcset=\"https:\/\/contentviewspro.com\/documentation\/wp-content\/uploads\/2017\/12\/CVP-select-Blog-page-for-WordPress.png 695w, https:\/\/contentviewspro.com\/documentation\/wp-content\/uploads\/2017\/12\/CVP-select-Blog-page-for-WordPress-300x108.png 300w\" sizes=\"auto, (max-width: 695px) 100vw, 695px\" \/><\/li>\n<li>Search results page<\/li>\n<li>Category archive<\/li>\n<li>Tag archive<\/li>\n<li>Custom taxonomy archive (WooCommerce shop page, WooCommerce product categories, EDD download categories, event categories&#8230;)<\/li>\n<li>Other archives (author, date, month, year)<\/li>\n<li>Post type archives<\/li>\n<li>Single post, single page, single product, single event&#8230; page<\/li>\n<\/ul>\n<hr \/>\n<h2 id=\"custom\">How to use a different layout for each category?<\/h2>\n<p>To use a different layout for each category, please:<\/p>\n<ul>\n<li>in the <i>Content Views &gt;&gt; Replace Layout<\/i> page, select the Category checkbox, and select the View which you created to replace layout of most categories:<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2961\" src=\"https:\/\/contentviewspro.com\/documentation\/wp-content\/uploads\/2014\/08\/CVP-replace-layout-of-Category-common.png\" alt=\"CVP - replace layout of Category common View\" width=\"651\" height=\"84\" srcset=\"https:\/\/contentviewspro.com\/documentation\/wp-content\/uploads\/2014\/08\/CVP-replace-layout-of-Category-common.png 651w, https:\/\/contentviewspro.com\/documentation\/wp-content\/uploads\/2014\/08\/CVP-replace-layout-of-Category-common-300x39.png 300w\" sizes=\"auto, (max-width: 651px) 100vw, 651px\" \/><\/li>\n<li>edit the category which you want different layout (<em>click Posts &gt; Categories, mouse over the category and click <strong>Edit<\/strong><\/em>), then select the View you created for this category in the <strong>Content Views<\/strong> setting:<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2958\" src=\"https:\/\/contentviewspro.com\/documentation\/wp-content\/uploads\/2014\/08\/Content-Views-Pro-specific-View-for-replace-category-layout.png\" alt=\"Content Views Pro - specific View for replace category layout\" width=\"656\" height=\"570\" srcset=\"https:\/\/contentviewspro.com\/documentation\/wp-content\/uploads\/2014\/08\/Content-Views-Pro-specific-View-for-replace-category-layout.png 656w, https:\/\/contentviewspro.com\/documentation\/wp-content\/uploads\/2014\/08\/Content-Views-Pro-specific-View-for-replace-category-layout-300x261.png 300w\" sizes=\"auto, (max-width: 656px) 100vw, 656px\" \/><\/li>\n<\/ul>\n<p>You can use different layouts for different tags, custom taxonomies too.<\/p>\n<h2 id=\"specific\">How to replace layout for only a specific category?<\/h2>\n<p>If you don&#8217;t want to replace layout of all category pages but only a specific category, please:<\/p>\n<ul>\n<li>in the <i>Content Views &gt;&gt; Replace Layout<\/i> page, select the Category checkbox, but <strong>do not select any View<\/strong> (use the default option &#8220;(Select View)&#8221;)<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2955\" src=\"https:\/\/contentviewspro.com\/documentation\/wp-content\/uploads\/2018\/03\/CVP-replace-layout-of-Category-default.png\" alt=\"CVP - replace layout of Category default\" width=\"651\" height=\"84\" srcset=\"https:\/\/contentviewspro.com\/documentation\/wp-content\/uploads\/2018\/03\/CVP-replace-layout-of-Category-default.png 651w, https:\/\/contentviewspro.com\/documentation\/wp-content\/uploads\/2018\/03\/CVP-replace-layout-of-Category-default-300x39.png 300w\" sizes=\"auto, (max-width: 651px) 100vw, 651px\" \/><\/li>\n<li>edit the category which you want to replace layout, then select the View you created for this category in the <strong>Content Views<\/strong> setting:<br \/>\n<img loading=\"lazy\" decoding=\"async\" id=\"select-view-for-a-term\" class=\"alignnone size-full wp-image-2958\" src=\"https:\/\/contentviewspro.com\/documentation\/wp-content\/uploads\/2014\/08\/Content-Views-Pro-specific-View-for-replace-category-layout.png\" alt=\"Content Views Pro - specific View for replace category layout\" width=\"656\" height=\"570\" srcset=\"https:\/\/contentviewspro.com\/documentation\/wp-content\/uploads\/2014\/08\/Content-Views-Pro-specific-View-for-replace-category-layout.png 656w, https:\/\/contentviewspro.com\/documentation\/wp-content\/uploads\/2014\/08\/Content-Views-Pro-specific-View-for-replace-category-layout-300x261.png 300w\" sizes=\"auto, (max-width: 656px) 100vw, 656px\" \/><\/li>\n<\/ul>\n<p>You can replace layout for only a specific tag, custom taxonomy too.<\/p>\n<h2 id=\"subcategories\">How to show sub-categories on the parent category page?<\/h2>\n<p>By default, WordPress will display posts on any category page.<br \/>\nHow to display sub-categories on the parent category page? Content Views Pro (since version 5.3.0) will help you to do it easily in 3 simple steps:<\/p>\n<ol>\n<li>First, in the <i>Content Views &gt;&gt; Replace Layout<\/i> page:\n<ul>\n<li>if you do not want to replace layout in sub-categories pages, please select the Category checkbox, but <strong>do not select any View<\/strong> (use the default option &#8220;(Select View)&#8221;):<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2955\" src=\"https:\/\/contentviewspro.com\/documentation\/wp-content\/uploads\/2018\/03\/CVP-replace-layout-of-Category-default.png\" alt=\"CVP - replace layout of Category default\" width=\"651\" height=\"84\" srcset=\"https:\/\/contentviewspro.com\/documentation\/wp-content\/uploads\/2018\/03\/CVP-replace-layout-of-Category-default.png 651w, https:\/\/contentviewspro.com\/documentation\/wp-content\/uploads\/2018\/03\/CVP-replace-layout-of-Category-default-300x39.png 300w\" sizes=\"auto, (max-width: 651px) 100vw, 651px\" \/><\/li>\n<li>if you want to replace layout in sub-categories pages, select the Category checkbox, and select the View which you created to replace layout of sub-categories:<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2961\" src=\"https:\/\/contentviewspro.com\/documentation\/wp-content\/uploads\/2014\/08\/CVP-replace-layout-of-Category-common.png\" alt=\"CVP - replace layout of Category common View\" width=\"651\" height=\"84\" srcset=\"https:\/\/contentviewspro.com\/documentation\/wp-content\/uploads\/2014\/08\/CVP-replace-layout-of-Category-common.png 651w, https:\/\/contentviewspro.com\/documentation\/wp-content\/uploads\/2014\/08\/CVP-replace-layout-of-Category-common-300x39.png 300w\" sizes=\"auto, (max-width: 651px) 100vw, 651px\" \/><\/li>\n<\/ul>\n<\/li>\n<li>Secondly, <strong>let&#8217;s create a View to show sub-categories<\/strong>.<br \/>\nIn that View, select the <strong>Taxonomy<\/strong> checkbox in Filter Settings &gt; Advance. Then select options like this:<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-3120\" src=\"https:\/\/contentviewspro.com\/documentation\/wp-content\/uploads\/2014\/08\/CVP-show-subcategories-on-category-archive-page.png\" alt=\"CVP - show subcategories on category archive page\" width=\"679\" height=\"396\" srcset=\"https:\/\/contentviewspro.com\/documentation\/wp-content\/uploads\/2014\/08\/CVP-show-subcategories-on-category-archive-page.png 679w, https:\/\/contentviewspro.com\/documentation\/wp-content\/uploads\/2014\/08\/CVP-show-subcategories-on-category-archive-page-300x175.png 300w\" sizes=\"auto, (max-width: 679px) 100vw, 679px\" \/><\/li>\n<li>Finally, <strong>edit each of parent categories<\/strong>,<br \/>\nthen <strong>select the created View in step 2 above<\/strong> for the <em>Content Views<\/em> setting:<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-3129\" src=\"https:\/\/contentviewspro.com\/documentation\/wp-content\/uploads\/2014\/08\/cvp-select-view-for-parent-category.png\" alt=\"cvp-select-view-for-parent-category\" width=\"636\" height=\"327\" srcset=\"https:\/\/contentviewspro.com\/documentation\/wp-content\/uploads\/2014\/08\/cvp-select-view-for-parent-category.png 636w, https:\/\/contentviewspro.com\/documentation\/wp-content\/uploads\/2014\/08\/cvp-select-view-for-parent-category-300x154.png 300w\" sizes=\"auto, (max-width: 636px) 100vw, 636px\" \/><\/li>\n<\/ol>\n<p>These steps can be applied to category, or any custom taxonomy.<\/p>\n<hr \/>\n<h2 id=\"notwork\">Notices<\/h2>\n<blockquote><p>Above settings will not work with the themes of <code>RocketTheme<\/code>, please <a href=\"http:\/\/contentviewspro.com\/documentation\/article\/replace-layout-in-themes-use-the-gantry-framework\/\">click here for the solution<\/a>.<\/p><\/blockquote>\n<p>Thank you,<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This feature is only available in the Pro version. TABLE OF CONTENTS: Introduction How to do? Customize sort order Overwrite the result Which pages can I replace the posts layout? How to use a different layout for each category? How to replace layout for only a specific category? How to show sub-categories on the parent &hellip;<\/p>\n<p class=\"read-more\"> <a class=\"\" href=\"https:\/\/contentviewspro.com\/documentation\/article\/completely-replace-wordpress-layout-by-content-views-pro-layout\/\"> <span class=\"screen-reader-text\">Replace Layout &#8211; show Grid layout on Blog, Category, Search&#8230; pages<\/span> Read More &raquo;<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","footnotes":""},"doc_category":[45],"doc_tag":[10],"class_list":["post-114","docs","type-docs","status-publish","hentry","doc_category-popular-features","doc_tag-replace-layout"],"year_month":"2026-09","word_count":958,"total_views":"6","reactions":{"happy":"0","normal":"0","sad":"0"},"author_info":{"name":"admin1","author_nicename":"admin1","author_url":"https:\/\/contentviewspro.com\/documentation\/author\/admin1\/"},"doc_category_info":[{"term_name":"Popular Features","term_url":"https:\/\/contentviewspro.com\/documentation\/cats\/popular-features\/"}],"doc_tag_info":[{"term_name":"replace layout","term_url":"https:\/\/contentviewspro.com\/documentation\/tags\/replace-layout\/"}],"_links":{"self":[{"href":"https:\/\/contentviewspro.com\/documentation\/wp-json\/wp\/v2\/docs\/114","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/contentviewspro.com\/documentation\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/contentviewspro.com\/documentation\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/contentviewspro.com\/documentation\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/contentviewspro.com\/documentation\/wp-json\/wp\/v2\/comments?post=114"}],"version-history":[{"count":15,"href":"https:\/\/contentviewspro.com\/documentation\/wp-json\/wp\/v2\/docs\/114\/revisions"}],"predecessor-version":[{"id":6019,"href":"https:\/\/contentviewspro.com\/documentation\/wp-json\/wp\/v2\/docs\/114\/revisions\/6019"}],"wp:attachment":[{"href":"https:\/\/contentviewspro.com\/documentation\/wp-json\/wp\/v2\/media?parent=114"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/contentviewspro.com\/documentation\/wp-json\/wp\/v2\/doc_category?post=114"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/contentviewspro.com\/documentation\/wp-json\/wp\/v2\/doc_tag?post=114"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}