{"id":1639,"date":"2017-06-13T16:06:40","date_gmt":"2017-06-13T16:06:40","guid":{"rendered":"http:\/\/docs.contentviewspro.com\/?p=1639"},"modified":"2024-01-02T10:18:44","modified_gmt":"2024-01-02T10:18:44","password":"","slug":"customize-html-structure-post","status":"publish","type":"docs","link":"https:\/\/contentviewspro.com\/documentation\/article\/customize-html-structure-post\/","title":{"rendered":"Customize the HTML template\/structure of each post in the grid layout"},"content":{"rendered":"<p>Each layout of Content Views Pro has its own way to display post fields (thumbnail, title, content&#8230;). Normally, you can change the display order of fields by drag &#038; drop checkboxes under <strong>Display Settings >> Fields settings<\/strong> easily.<\/p>\n<p>But if you want to create your own HTML output of post in View, you can add this code to file <strong>functions.php<\/strong> of your active theme:<\/p>\n<pre style=\"font-size:13px\">\n\/\/ Content Views Pro - Very custom HTML output for each post\nadd_filter( 'pt_cv_view_type_custom_output', 'cvp_theme_view_type_custom_output', 100, 3 );\n\/**\n * Customize HTML output of each post\n *\n * @param string $args       Current HTML output for a post\n * @param array $fields_html Array of fields (title, thumbnail, content...) and their HTML output\n * @param object $post       The current post object\n * @return string\n *\/\nfunction cvp_theme_view_type_custom_output( $args, $fields_html, $post ) {\n\t\/\/ Do this for only specific Views\n\tglobal $pt_cv_id;\n\tif ( in_array( $pt_cv_id, array( 'VIEW_1', 'VIEW_2', 'VIEW_3' ) ) ) {\n\t\tob_start();\n\t\t?&gt;\n\t\t&lt;!-- Your custom HTML here. You can access:\n\t\t$fields_html[ 'thumbnail' ]\n\t\t$fields_html[ 'title' ]\n\t\t$fields_html[ 'content' ]\n\t\t$fields_html[ 'meta-fields' ]\n\t\t$fields_html[ 'custom-fields' ]\n\t\t$fields_html[ 'others-wrap' ] (when enable \"Do not wrap text around image\")\n\t\t--&gt;\n\t\t&lt;?php\n\t\t$args = ob_get_clean();\n\t} \/\/ <strong>Ensure to put } BELOW the line of ob_get_clean()<\/strong>\n\n\treturn $args;\n}\n<\/pre>\n<p>Please replace <strong>VIEW_1, VIEW_2, VIEW_3<\/strong> with IDs of your Views. And you can add\/remove Views as you want.<\/p>\n<p><strong>Notice<\/strong>: This task requires your coding skills about PHP, HTML.<\/p>\n<p>Best regards,<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Each layout of Content Views Pro has its own way to display post fields (thumbnail, title, content&#8230;). Normally, you can change the display order of fields by drag &#038; drop checkboxes under Display Settings >> Fields settings easily. But if you want to create your own HTML output of post in View, you can add &hellip;<\/p>\n<p class=\"read-more\"> <a class=\"\" href=\"https:\/\/contentviewspro.com\/documentation\/article\/customize-html-structure-post\/\"> <span class=\"screen-reader-text\">Customize the HTML template\/structure of each post in the grid layout<\/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":[55],"doc_tag":[21],"class_list":["post-1639","docs","type-docs","status-publish","hentry","doc_category-advanced-modification","doc_tag-custom-code"],"year_month":"2026-09","word_count":249,"total_views":"1","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":"Advanced Modification","term_url":"https:\/\/contentviewspro.com\/documentation\/cats\/advanced-modification\/"}],"doc_tag_info":[{"term_name":"custom PHP code","term_url":"https:\/\/contentviewspro.com\/documentation\/tags\/custom-code\/"}],"_links":{"self":[{"href":"https:\/\/contentviewspro.com\/documentation\/wp-json\/wp\/v2\/docs\/1639","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=1639"}],"version-history":[{"count":4,"href":"https:\/\/contentviewspro.com\/documentation\/wp-json\/wp\/v2\/docs\/1639\/revisions"}],"predecessor-version":[{"id":5723,"href":"https:\/\/contentviewspro.com\/documentation\/wp-json\/wp\/v2\/docs\/1639\/revisions\/5723"}],"wp:attachment":[{"href":"https:\/\/contentviewspro.com\/documentation\/wp-json\/wp\/v2\/media?parent=1639"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/contentviewspro.com\/documentation\/wp-json\/wp\/v2\/doc_category?post=1639"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/contentviewspro.com\/documentation\/wp-json\/wp\/v2\/doc_tag?post=1639"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}