{"id":46309,"date":"2024-12-09T18:19:02","date_gmt":"2024-12-09T18:19:02","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=tips-and-tricks&p=46309"},"modified":"2024-12-17T11:52:52","modified_gmt":"2024-12-17T11:52:52","slug":"changing-listing-items-and-html-tag-wrappers","status":"publish","type":"tips-and-tricks","link":"https:\/\/crocoblock.com\/knowledge-base\/tips-and-tricks\/changing-listing-items-and-html-tag-wrappers\/","title":{"rendered":"Changing Listing Items and Their HTML Tag Wrappers"},"content":{"rendered":"\n

Add the Code Snippe<\/strong>t<\/strong><\/h2>\n\n\n\n
\n

Navigate to the WordPress Dashboard > Snippets > Add New<\/em><\/strong> page and add the snippet\u2019s name (here, the \u201cJetEngine. Register new settings for Jet_Engine_Render_Base instance\u201d text). Then, insert the following code into the Code<\/strong> block.<\/p>\n\n\n\n

class JEC_Change_Tags {\n\t\n\tpublic function __construct() {\n\t\tadd_filter( 'jet-engine\/listing\/render\/jet-listing-grid\/settings', array( $this, 'apply_settings' ) );\n\t\tadd_filter( 'jet-engine\/listing\/grid\/nav-widget-settings', array( $this, 'nav_settings' ), 10, 2 );\n\t\tadd_filter( 'jet-engine\/listing\/render\/default-settings', array( $this, 'default_settings' ) );\n\t}\n\t\n\t\/\/set 'is-ul-listing' setting to 1 if tags need to be changed to ul \/ li\n\t\/\/change tags\n\tpublic function apply_settings( $settings ) {\n\t\t$settings['is-ul-listing'] = $this->is_ul_listing( $settings );\n\t\t\t\n\t\tif ( ! empty( $settings['is-ul-listing'] ) ) {\n\t\t\t$settings['list_items_wrapper_tag'] = 'ul';\n\t\t\t$settings['list_item_tag'] = 'li';\n\t\t}\n\n\t\treturn $settings;\n\t}\n\t\n\t\/\/set default value for compatibility with JetSmartFilters\n\tpublic function default_settings( $settings ) {\n\t\t$settings['is-ul-listing'] = '';\n\t\treturn $settings;\n\t}\n\t\n\t\/\/save 'is-ul-listing' to nav settings for compatibility with Load More\n\tpublic function nav_settings( $widget_settings, $settings ) {\n\t\t$widget_settings['is-ul-listing'] = $this->is_ul_listing( $settings );\n\t\treturn $widget_settings;\n\t}\n\t\n\t\/\/check if 'is-ul-listing' setting should be set for block \/ widget \/ element \n\t\/\/\n\t\/\/for Elementor and Block Editor - widget \/ block must have 'listing-ul' class\n\t\/\/for Bricks Builder - element must have a 'data-listing-ul' attribute\n\tpublic function is_ul_listing( $settings ) {\n\t\tif ( ! empty( $settings['is-ul-listing'] ) ) {\n\t\t\treturn 1;\n\t\t}\n\t\t\n\t\t$class = '';\n\t\t\n\t\tif ( ! empty( $settings['_css_classes'] ) ) {\n\t\t\t$class = $settings['_css_classes'];\n\t\t} elseif ( ! empty( $settings['className'] ) ) {\n\t\t\t$class = $settings['className'];\n\t\t} elseif( ! empty( $settings['_attributes'] ) && is_array( $settings['_attributes'] ) ) {\n\t\t\tforeach ( $settings['_attributes'] as $attr ) {\n\t\t\t\tif ( ! empty( $attr['name'] ) && $attr['name'] === 'data-listing-ul' ) {\n\t\t\t\t\t$class = 'listing-ul';\n\t\t\t\t\tbreak;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\t\n\t\treturn false !== strpos( $class, 'listing-ul' ) ? 1 : '';\n\t}\n}\n\n\/\/create an instance of a class\nnew JEC_Change_Tags();<\/code><\/pre>\n\n\n\n
After that, tick the \u201cRun snippet everywhere<\/strong>\u201d selector below the Code<\/strong> block and press the \u201cSave Changes<\/strong>\u201d button. <\/p>\n\n\n\n
\"the<\/a><\/div>\n\n\n\n
In the next step, move to the WordPress Dashboard > Snippets > All Snippets<\/em><\/strong> page and activate the newly-created snippet.<\/p>\n\n\n\n
\"the<\/a><\/div>\n<\/div><\/div>\n\n\n\n
Change the Listing Grid Settings in the Block Editor<\/strong><\/h2>\n\n\n\n
\n
Create a page or open a previously created one and insert the Listing Grid<\/strong><\/a> <\/strong>block. Add the needed LISTING<\/strong> and configure other settings. Next, scroll the Block<\/strong> settings down and unroll the Advanced <\/strong>tab. Here, add the \u201clisting-ul\u201d class into the ADDITIONAL CSS CLASS(ES)<\/strong> field. <\/p>\n\n\n\n
\"the<\/a><\/div>\n\n\n\n
Once added, click the \u201cPublish\/Save<\/strong>\u201d button.<\/p>\n<\/div><\/div>\n\n\n\n
Change the Listing Grid Settings in the Elementor<\/strong><\/h2>\n\n\n\n
\n
As in the Block Editor<\/a>, \u0441reate a page or open a previously created one and insert the Listing Grid<\/strong><\/a> <\/strong>widget. <\/p>\n\n\n\n
Configure the needed settings. Then, unroll the Advanced<\/strong> tab and add the \u201clisting-ul\u201d class into the CSS Classes<\/strong> field.<\/p>\n\n\n\n
\"the<\/a><\/div>\n\n\n\n
Finally, click the \u201cPublish\/Save<\/strong>\u201d button.<\/p>\n<\/div><\/div>\n\n\n\n
Change the Listing Grid Settings in the Bricks Theme<\/strong><\/h2>\n\n\n\n
\n
As in the Block Editor<\/a>, \u0441reate a page or open a previously created one and insert the Listing Grid <\/strong>element. <\/p>\n\n\n\n
Adjust the needed settings. Then, unroll the STYLE<\/strong> tab and move to the ATTRIBUTES <\/strong>tab. Here, unfold this tab, add the \u201cdata-listing-ul\u201d value into the Name<\/strong> field, and type a random value into the Value<\/strong> field (in this case, \u201c1\u201d text).<\/p>\n\n\n\n
\"the<\/a><\/div>\n\n\n\n
Finally, save the page.<\/p>\n<\/div><\/div>\n\n\n\n
Site Code Changes<\/strong><\/h2>\n\n\n\n
\n
After the actions mentioned above, the Listing Item<\/strong>\u2019s code will be changed from the following one:<\/p>\n\n\n\n
<div class=\"jet-listing-grid__items\">\n<div class=\"jet-listing-grid__item\"><\/div>\n<div class=\"jet-listing-grid__item\"><\/div>\n<\/div><\/code><\/pre>\n\n\n\n
To the code presented below:<\/p>\n\n\n\n
<ul class=\"jet-listing-grid__items\">\n<li class=\"jet-listing-grid__item\"><\/li>\n<li class=\"jet-listing-grid__item\"><\/li>\n<\/ul><\/code><\/pre>\n\n\n\n
\"the<\/div>\n<\/div><\/div>\n\n\n\n
That\u2019s it. Now you know how to add HTML tag wrappers to the listing and its compounds using the specific code snippet to provide better HTML semantics, SEO, and code flexibility using the JetEngine<\/em> plugin for WordPress.<\/p>\n","protected":false},"excerpt":{"rendered":"
Add the Code Snippet Navigate to the WordPress Dashboard > Snippets > Add New page and add the snippet\u2019s name (here, the \u201cJetEngine. Register new settings for Jet_Engine_Render_Base instance\u201d text). Then, insert the following code into the Code block. After that, tick the \u201cRun snippet everywhere\u201d selector below the Code block and press the \u201cSave […]<\/p>\n","protected":false},"author":12,"featured_media":0,"template":"","format":"standard","tipstricks-tags":[],"yoast_head":"\nHow to Add HTML Tag Wrappers to Listing Items \u3161 JetEngine l Crocoblock<\/title>\n<meta name=\"description\" content=\"Learn how to add HTML tag wrappers to listings using a specific code snippet to provide better HTML semantics, SEO, and code flexibility using the JetEngine plugin for WordPress.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/crocoblock.com\/knowledge-base\/tips-and-tricks\/changing-listing-items-and-html-tag-wrappers\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Add HTML Tag Wrappers to Listing Items \u3161 JetEngine l Crocoblock\" \/>\n<meta property=\"og:description\" content=\"Learn how to add HTML tag wrappers to listings using a specific code snippet to provide better HTML semantics, SEO, and code flexibility using the JetEngine plugin for WordPress.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/crocoblock.com\/knowledge-base\/tips-and-tricks\/changing-listing-items-and-html-tag-wrappers\/\" \/>\n<meta property=\"og:site_name\" content=\"Help Center\" \/>\n<meta property=\"article:modified_time\" content=\"2024-12-17T11:52:52+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/12\/the-code-snipped-added-1024x640.webp\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/tips-and-tricks\/changing-listing-items-and-html-tag-wrappers\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/tips-and-tricks\/changing-listing-items-and-html-tag-wrappers\/\",\"name\":\"How to Add HTML Tag Wrappers to Listing Items \u3161 JetEngine l Crocoblock\",\"isPartOf\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\"},\"datePublished\":\"2024-12-09T18:19:02+00:00\",\"dateModified\":\"2024-12-17T11:52:52+00:00\",\"description\":\"Learn how to add HTML tag wrappers to listings using a specific code snippet to provide better HTML semantics, SEO, and code flexibility using the JetEngine plugin for WordPress.\",\"breadcrumb\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/tips-and-tricks\/changing-listing-items-and-html-tag-wrappers\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/crocoblock.com\/knowledge-base\/tips-and-tricks\/changing-listing-items-and-html-tag-wrappers\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/tips-and-tricks\/changing-listing-items-and-html-tag-wrappers\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Tips & tricks\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/tips-and-tricks\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Changing Listing Items and Their HTML Tag Wrappers\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"name\":\"Help Center\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\",\"name\":\"Help Center\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"contentUrl\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"caption\":\"Help Center\"},\"image\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Add HTML Tag Wrappers to Listing Items \u3161 JetEngine l Crocoblock","description":"Learn how to add HTML tag wrappers to listings using a specific code snippet to provide better HTML semantics, SEO, and code flexibility using the JetEngine plugin for WordPress.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/crocoblock.com\/knowledge-base\/tips-and-tricks\/changing-listing-items-and-html-tag-wrappers\/","og_locale":"en_US","og_type":"article","og_title":"How to Add HTML Tag Wrappers to Listing Items \u3161 JetEngine l Crocoblock","og_description":"Learn how to add HTML tag wrappers to listings using a specific code snippet to provide better HTML semantics, SEO, and code flexibility using the JetEngine plugin for WordPress.","og_url":"https:\/\/crocoblock.com\/knowledge-base\/tips-and-tricks\/changing-listing-items-and-html-tag-wrappers\/","og_site_name":"Help Center","article_modified_time":"2024-12-17T11:52:52+00:00","og_image":[{"url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/12\/the-code-snipped-added-1024x640.webp"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/crocoblock.com\/knowledge-base\/tips-and-tricks\/changing-listing-items-and-html-tag-wrappers\/","url":"https:\/\/crocoblock.com\/knowledge-base\/tips-and-tricks\/changing-listing-items-and-html-tag-wrappers\/","name":"How to Add HTML Tag Wrappers to Listing Items \u3161 JetEngine l Crocoblock","isPartOf":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#website"},"datePublished":"2024-12-09T18:19:02+00:00","dateModified":"2024-12-17T11:52:52+00:00","description":"Learn how to add HTML tag wrappers to listings using a specific code snippet to provide better HTML semantics, SEO, and code flexibility using the JetEngine plugin for WordPress.","breadcrumb":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/tips-and-tricks\/changing-listing-items-and-html-tag-wrappers\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/crocoblock.com\/knowledge-base\/tips-and-tricks\/changing-listing-items-and-html-tag-wrappers\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/crocoblock.com\/knowledge-base\/tips-and-tricks\/changing-listing-items-and-html-tag-wrappers\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/crocoblock.com\/knowledge-base\/"},{"@type":"ListItem","position":2,"name":"Tips & tricks","item":"https:\/\/crocoblock.com\/knowledge-base\/tips-and-tricks\/"},{"@type":"ListItem","position":3,"name":"Changing Listing Items and Their HTML Tag Wrappers"}]},{"@type":"WebSite","@id":"https:\/\/crocoblock.com\/knowledge-base\/#website","url":"https:\/\/crocoblock.com\/knowledge-base\/","name":"Help Center","description":"","publisher":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization","name":"Help Center","url":"https:\/\/crocoblock.com\/knowledge-base\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/","url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","contentUrl":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","caption":"Help Center"},"image":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/tips-and-tricks\/46309"}],"collection":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/tips-and-tricks"}],"about":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/types\/tips-and-tricks"}],"author":[{"embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/users\/12"}],"wp:attachment":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/media?parent=46309"}],"wp:term":[{"taxonomy":"tipstricks-tags","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/tipstricks-tags?post=46309"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}