{"id":32030,"date":"2022-12-06T17:15:42","date_gmt":"2022-12-06T17:15:42","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&p=32030"},"modified":"2024-09-12T11:52:06","modified_gmt":"2024-09-12T11:52:06","slug":"how-to-add-likes-and-display-likes-counter-in-posts","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-add-likes-and-display-likes-counter-in-posts\/","title":{"rendered":"How to Add Likes and Display Likes Counter in Posts"},"content":{"rendered":"\n
\n

WordPress Dashboard > JetEngine > Modules<\/em><\/strong> and enable the Data Stores<\/strong> toggle. <\/p>\n\n\n\n

\"jetengine<\/a><\/div>\n\n\n\n

Click the “Save<\/strong>” button.<\/p>\n<\/div><\/div>\n\n\n\n

Create a Data Store<\/strong><\/h2>\n\n\n\n
\n

Unroll the Data Stores<\/strong> tab of the JetEngine dashboard<\/strong> and press the “+ New Store<\/strong>” button. <\/p>\n\n\n\n

In this newly-appeared tab, type the Name<\/strong> of the data store (the “Likes” data store, in the given case), and the Slug<\/strong> field will be pre-filled automatically. Then, keep the default “Cookies” option in the Store type<\/strong> drop-down list and activate the Count items<\/strong> toggle. <\/p>\n\n\n\n

\"jetengine<\/a><\/div>\n\n\n\n

Finally, press the “Save<\/strong>” button.<\/p>\n<\/div><\/div>\n\n\n\n

Add the Data Store Button Widget to the Listing<\/strong><\/h2>\n\n\n\n
\n

Open the Listing template <\/strong>built beforehand.<\/p>\n\n\n\n

In this case, we divided the listing item into two parts using the Container<\/strong> widget. <\/p>\n\n\n\n

Then, add the Data Store Button<\/strong><\/a> widget to the page. <\/p>\n\n\n\n

\"data<\/a><\/div>\n<\/div><\/div>\n\n\n\n

Adjust the Data Store Button Widget Settings<\/strong><\/h2>\n\n\n\n
\n

In this stage, navigate to the Content<\/strong> tab of the Data Store Button<\/strong> widget and unroll it.<\/p>\n\n\n\n

Choose the data store (here, we picked the created “Likes” data store) in the Select store<\/strong> drop-down menu. We also deleted the default text in the Label<\/strong> field.<\/p>\n\n\n\n

Then, we added the Icon<\/strong> to display likes (here, an icon from the library). If necessary, add the \u201cDislike\u201d icon in the same way.<\/p>\n\n\n\n

We left the Label after added to store<\/strong> field empty but selected the same Icon<\/strong> (for likes or dislikes) from the Media Library<\/strong>.<\/p>\n\n\n\n

\"data<\/a><\/div>\n<\/div><\/div>\n\n\n\n

Customize the Heading Settings<\/strong><\/h2>\n\n\n\n
\n

Add the Heading<\/strong> widget to the Listing<\/strong> template<\/strong>. Press the “Dynamic Tag<\/strong>” icon near the Title<\/strong> field. Select the “Data Stores: Post Count” option from the drop-down menu. Then, select the Store<\/strong> (in this case, the “Likes” data store) in the Settings<\/strong> tab of the newly-appeared window.<\/p>\n\n\n\n

\"\"<\/a><\/div>\n\n\n\n

If needed, unroll the Advanced <\/strong>tab of this window and type the text Before<\/strong> or After<\/strong> the number of likes. In this tutorial, we typed the “likes” text in the After<\/strong> text field.<\/p>\n\n\n\n

\"heading<\/a><\/div>\n\n\n\n

Customize the heading by selecting its size from the HTML Tag <\/strong>drop-down menu. <\/p>\n\n\n\n

\"customization<\/a><\/div>\n\n\n\n

Additionally, you can customize the appearance of the Heading<\/strong> in the Style<\/strong> settings.<\/p>\n\n\n\n

Finally, press the “Publish\/Update<\/strong>” button.<\/p>\n<\/div><\/div>\n\n\n\n

Add the Listing to a Page<\/strong><\/h2>\n\n\n\n
\n

Open the page in the editor you like. In this case, we used Elementor.<\/p>\n\n\n\n

Find the Listing Grid<\/strong><\/a> widget in the search bar and drag-n-drop it to the page.<\/p>\n\n\n\n

Then, select the Listing<\/strong> that will be shown on this page, set the Columns Number<\/strong>, etc.<\/p>\n\n\n\n

\"listing<\/a><\/div>\n\n\n\n

For more details about how to add CPT <\/strong>posts to the Listing Grid<\/strong> widget and manage its settings, watch the How to Create a Listing Grid<\/a> video.<\/p>\n\n\n\n

Press the “Publish\/Update<\/strong>” button.<\/p>\n<\/div><\/div>\n\n\n\n

Check the Results<\/strong><\/h2>\n\n\n\n
\n

Navigate to the front end to observe how the Data Store<\/strong> works. Here, if you press the “Like” icon near the specific posts, then the counter will display the number of likes.<\/p>\n\n\n\n

\"likes<\/a><\/div>\n<\/div><\/div>\n\n\n\n

That\u2019s all about adding a “Like” or “Dislike” counter to custom post listings using the Data Store <\/strong>widget of the JetEngine<\/em> plugin for WordPress.<\/p>\n","protected":false},"excerpt":{"rendered":"

Find out how to add “Like” or “Dislike” counters to custom post listings using the Data Store module of the JetEngine plugin to automatically update the page without reloading when users like or dislike posts.<\/p>\n","protected":false},"author":12,"featured_media":0,"template":"","format":"standard","builder-category":[],"article-category":[404],"yoast_head":"\nHow to Add Like or Dislike Counters to WordPress Posts - Help Center<\/title>\n<meta name=\"description\" content=\"Find out how to add "Like" or "Dislike" counters to custom post listings using the Data Store module of the JetEngine plugin to automatically update the page without reloading when users like or dislike posts.\" \/>\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\/jetengine\/how-to-add-likes-and-display-likes-counter-in-posts\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Add Like or Dislike Counters to WordPress Posts - Help Center\" \/>\n<meta property=\"og:description\" content=\"Find out how to add "Like" or "Dislike" counters to custom post listings using the Data Store module of the JetEngine plugin to automatically update the page without reloading when users like or dislike posts.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-add-likes-and-display-likes-counter-in-posts\/\" \/>\n<meta property=\"og:site_name\" content=\"Help Center\" \/>\n<meta property=\"article:modified_time\" content=\"2024-09-12T11:52:06+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/jetengine-data-stores-toggle-enabled-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\/jetengine\/how-to-add-likes-and-display-likes-counter-in-posts\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-add-likes-and-display-likes-counter-in-posts\/\",\"name\":\"How to Add Like or Dislike Counters to WordPress Posts - Help Center\",\"isPartOf\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\"},\"datePublished\":\"2022-12-06T17:15:42+00:00\",\"dateModified\":\"2024-09-12T11:52:06+00:00\",\"description\":\"Find out how to add \\\"Like\\\" or \\\"Dislike\\\" counters to custom post listings using the Data Store module of the JetEngine plugin to automatically update the page without reloading when users like or dislike posts.\",\"breadcrumb\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-add-likes-and-display-likes-counter-in-posts\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-add-likes-and-display-likes-counter-in-posts\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-add-likes-and-display-likes-counter-in-posts\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Articles\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/articles\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Add Likes and Display Likes Counter in Posts\"}]},{\"@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 Like or Dislike Counters to WordPress Posts - Help Center","description":"Find out how to add \"Like\" or \"Dislike\" counters to custom post listings using the Data Store module of the JetEngine plugin to automatically update the page without reloading when users like or dislike posts.","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\/jetengine\/how-to-add-likes-and-display-likes-counter-in-posts\/","og_locale":"en_US","og_type":"article","og_title":"How to Add Like or Dislike Counters to WordPress Posts - Help Center","og_description":"Find out how to add \"Like\" or \"Dislike\" counters to custom post listings using the Data Store module of the JetEngine plugin to automatically update the page without reloading when users like or dislike posts.","og_url":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-add-likes-and-display-likes-counter-in-posts\/","og_site_name":"Help Center","article_modified_time":"2024-09-12T11:52:06+00:00","og_image":[{"url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/jetengine-data-stores-toggle-enabled-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\/jetengine\/how-to-add-likes-and-display-likes-counter-in-posts\/","url":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-add-likes-and-display-likes-counter-in-posts\/","name":"How to Add Like or Dislike Counters to WordPress Posts - Help Center","isPartOf":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#website"},"datePublished":"2022-12-06T17:15:42+00:00","dateModified":"2024-09-12T11:52:06+00:00","description":"Find out how to add \"Like\" or \"Dislike\" counters to custom post listings using the Data Store module of the JetEngine plugin to automatically update the page without reloading when users like or dislike posts.","breadcrumb":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-add-likes-and-display-likes-counter-in-posts\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-add-likes-and-display-likes-counter-in-posts\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-add-likes-and-display-likes-counter-in-posts\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/crocoblock.com\/knowledge-base\/"},{"@type":"ListItem","position":2,"name":"Articles","item":"https:\/\/crocoblock.com\/knowledge-base\/articles\/"},{"@type":"ListItem","position":3,"name":"How to Add Likes and Display Likes Counter in Posts"}]},{"@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\/article\/32030"}],"collection":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/types\/article"}],"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=32030"}],"wp:term":[{"taxonomy":"builder-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/builder-category?post=32030"},{"taxonomy":"article-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article-category?post=32030"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}