{"id":33747,"date":"2023-01-27T16:41:33","date_gmt":"2023-01-27T16:41:33","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=features&p=33747"},"modified":"2023-04-21T10:46:41","modified_gmt":"2023-04-21T10:46:41","slug":"posts-pagination-widget-overview","status":"publish","type":"features","link":"https:\/\/crocoblock.com\/knowledge-base\/features\/posts-pagination-widget-overview\/","title":{"rendered":"Posts Pagination Widget"},"content":{"rendered":"\n
\n

The Posts Pagination<\/strong> widget is one of the six widgets of the JetBlog<\/a><\/em> plugin. This widget works with this plugin\u2019s Smart Posts Tiles<\/a> and Smart Posts List<\/a> widgets and adds pagination buttons on archive pages with arranged posts.<\/p>\n\n\n\n

The Posts Pagination<\/strong> widget customizes the previous and next page’s buttons. It makes the pagination buttons stylish, including texts and an icon (i.e., colors, typography, alignments, borders, icons, and more).<\/p>\n\n\n\n

The Posts Pagination<\/strong> widget differs from the Posts Navigation<\/strong> widget: the Posts Navigation<\/strong> widget works with different types of content (CPTs, dynamic content, pages\/posts, archive templates, etc.), and the Posts Pagination<\/strong> widget works with archive pages built with the JetThemeCore<\/em><\/a> plugin.<\/p>\n\n\n\n

This tutorial explains the Posts Pagination <\/strong>widget <\/strong>usage and describes how to customize it.<\/p>\n<\/div><\/div>\n\n\n\n

Activation of the Posts Pagination Widget<\/h2>\n\n\n\n
\n

Activate the Posts Pagination widget to use it<\/h3>\n\n\n\n

To activate the Posts Pagination<\/strong> widget, log into your WordPress dashboard, navigate to the Crocoblock plugins, and find the JetBlog<\/em> plugin. Toggle on the Posts Pagination<\/strong> widget to activate it.<\/p>\n\n\n\n\"posts\n\n\n\n

As far as the Posts Pagination<\/strong> widget works together with the Smart Posts Tiles<\/a> or Smart Posts List<\/a> widgets of this plugin, activate the widget you need to arrange posts.<\/p>\n\n\n\n

Preliminary settings of the archive page<\/h3>\n\n\n\n

Open the archive page previously created by the JetThemeCore<\/em><\/a> plugin. This archive page should have posts arranged by the Smart Posts Tiles<\/a> or Smart Posts List<\/a> widgets.Navigate to the Query & Controls<\/strong> settings of the Smart Posts Tiles<\/strong> or Smart Posts List <\/strong>widget and toggle on the Use as Archive Template<\/strong> setting.<\/p>\n\n\n\n\"use\n\n\n\n

Make sure to have enough published posts to display and slide for the correct work of the Posts Navigation<\/strong> widget. You can specify the number of posts displayed on the archive page via your WordPress dashboard: Settings > Readings > Blog pages show at most<\/em><\/strong>.<\/p>\n\n\n\n

Adding the Posts Pagination widget<\/h3>\n\n\n\n

Find the Posts Pagination<\/strong> widget and place it where you want on the archive page with the Smart Posts Tiles<\/a> or Smart Posts List<\/a> widgets.<\/p>\n\n\n\n\"posts\n\n\n\n

This tutorial explains How to Apply the Navigation Element for Smart Posts List and Posts Tiles Widgets<\/a>.<\/p>\n<\/div><\/div>\n\n\n\n

Customization of the Posts Pagination Widget\u2019s Settings<\/h2>\n\n\n\n
\n

Customization of the Items settings<\/h3>\n\n\n\n

The Item<\/strong> settings block has the following settings:<\/p>\n\n\n\n

    \n
  • Add the previous and the next page links<\/strong> toggle adds the previous and next page links.<\/li>\n\n\n\n
  • The previous page link text<\/strong> and The next page text <\/strong>fields allow typing the texts displayed on the buttons instead of the “Previous” and “Next” default texts.<\/li>\n\n\n\n
  • The previous page link icon<\/strong> and The next page link icon <\/strong>are the drop-down menus to choose the icon displayed on the button, for example, None, Chevron, Angle, Chevron, and more.<\/li>\n<\/ul>\n\n\n\n\"items\n\n\n\n

    Customization of the pagination buttons<\/h3>\n\n\n\n

    To customize the pagination buttons, navigate to the Style<\/strong> block, unroll it, and find the Item<\/strong> setting. The Item<\/strong> settings stylish the pagination buttons, including the last button:<\/p>\n\n\n\n

      \n
    • Alignment<\/strong> settings to choose the position of the pagination buttons referring to the arranged posts: Left, Center, Right, and Justify.<\/li>\n\n\n\n
    • Background Color<\/strong> and Text Color<\/strong> to choose a custom or standard color for the background and text, respectively.<\/li>\n\n\n\n
    • Typography<\/strong> tab to customize the settings referring to the text, in particular Fonts Family, Size (responsive), Weight, Transform (drop-down menu), Style (drop-down menu), Decoration (drop-down menu), Line-Height (toggle and field) to type the appropriate option in pixels or percentage (responsive); Letter Spacing toggle and field (responsive), and Words Spacing toggle and field (responsive).<\/li>\n<\/ul>\n\n\n\n\"typography\n\n\n\n
        \n
      • Item Min Width<\/strong> toggle and field to type the item\u2019s minimal width in pixels or percentages (responsive).<\/li>\n\n\n\n
      • Padding<\/strong> fields to type the padding options for the padding buttons in pixels or percentages (responsive).<\/li>\n\n\n\n
      • Gap Between Items<\/strong> toggles to specify the gap distance in pixels between the padding buttons (responsive).<\/li>\n\n\n\n
      • Border Type<\/strong> drop-down menu chooses the padding buttons border type from the None, Solid, Double, Dotted, Dashed, and Groove options.<\/li>\n\n\n\n
      • Width<\/strong> fields to specify the buttons\u2019 width in pixels or percentages (responsive).<\/li>\n\n\n\n
      • Color<\/strong> to choose the custom or standard color for the padding buttons\u2019 borders.<\/li>\n\n\n\n
      • Border Radius<\/strong> fields to specify the padding buttons\u2019 borders radii in pixels or percentages.<\/li>\n<\/ul>\n\n\n\n\"style\n\n\n\n

        Customizing the Icon settings<\/h3>\n\n\n\n

        These settings refer to the last pagination button, which contains the icon. They are:<\/p>\n\n\n\n

          \n
        • Background Color<\/strong> and Icon Color<\/strong> to choose the icon\u2019s colors or take the standard one.<\/li>\n\n\n\n
        • Icon Size<\/strong> and Icon Box Size<\/strong> toggles and fields to specify the icon and its box sizes in pixels or percentages (both are responsive).<\/li>\n\n\n\n
        • Border Type<\/strong> drop-down menu chooses the icons border type from the options: None, Solid, Double, Dotted, Dashed, and Groove.<\/li>\n\n\n\n
        • Width<\/strong> fields to specify the four options (left, right, top, and bottom) for the icon width (responsive).<\/li>\n\n\n\n
        • Color<\/strong> to choose the icon border color or take the standard one.<\/li>\n\n\n\n
        • Border Radius<\/strong> fields specify the four icon borders radii in pixels or percentages (responsive).<\/li>\n\n\n\n
        • Gap Between Text and Icon<\/strong> toggle to specify the distance in pixels or percentage between the text and icon (responsive).<\/li>\n<\/ul>\n\n\n\n\"previous\n<\/div><\/div>\n\n\n\n

          That’s all about the Posts Pagination<\/strong> widget\u2019s settings.<\/p>\n","protected":false},"excerpt":{"rendered":"

          Read about the Posts Pagination widget usage, its peculiarities, and settings.<\/p>\n","protected":false},"author":12,"template":"","format":"standard","builder-category":[],"feature-category":[547],"article-category":[438],"yoast_head":"\nPosts Pagination Widget Overview- Help Center<\/title>\n<meta name=\"description\" content=\"The tutorial overviews the Posts Pagination widget usage, its peculiarities and settings.\" \/>\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\/features\/posts-pagination-widget-overview\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Posts Pagination Widget Overview- Help Center\" \/>\n<meta property=\"og:description\" content=\"The tutorial overviews the Posts Pagination widget usage, its peculiarities and settings.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/crocoblock.com\/knowledge-base\/features\/posts-pagination-widget-overview\/\" \/>\n<meta property=\"og:site_name\" content=\"Help Center\" \/>\n<meta property=\"article:modified_time\" content=\"2023-04-21T10:46:41+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/11\/posts-pagination-widget-activation.png\" \/>\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=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/features\/posts-pagination-widget-overview\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/features\/posts-pagination-widget-overview\/\",\"name\":\"Posts Pagination Widget Overview- Help Center\",\"isPartOf\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\"},\"datePublished\":\"2023-01-27T16:41:33+00:00\",\"dateModified\":\"2023-04-21T10:46:41+00:00\",\"description\":\"The tutorial overviews the Posts Pagination widget usage, its peculiarities and settings.\",\"breadcrumb\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/features\/posts-pagination-widget-overview\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/crocoblock.com\/knowledge-base\/features\/posts-pagination-widget-overview\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/features\/posts-pagination-widget-overview\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Features\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/features\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Posts Pagination Widget\"}]},{\"@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":"Posts Pagination Widget Overview- Help Center","description":"The tutorial overviews the Posts Pagination widget usage, its peculiarities and settings.","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\/features\/posts-pagination-widget-overview\/","og_locale":"en_US","og_type":"article","og_title":"Posts Pagination Widget Overview- Help Center","og_description":"The tutorial overviews the Posts Pagination widget usage, its peculiarities and settings.","og_url":"https:\/\/crocoblock.com\/knowledge-base\/features\/posts-pagination-widget-overview\/","og_site_name":"Help Center","article_modified_time":"2023-04-21T10:46:41+00:00","og_image":[{"url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/11\/posts-pagination-widget-activation.png"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/crocoblock.com\/knowledge-base\/features\/posts-pagination-widget-overview\/","url":"https:\/\/crocoblock.com\/knowledge-base\/features\/posts-pagination-widget-overview\/","name":"Posts Pagination Widget Overview- Help Center","isPartOf":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#website"},"datePublished":"2023-01-27T16:41:33+00:00","dateModified":"2023-04-21T10:46:41+00:00","description":"The tutorial overviews the Posts Pagination widget usage, its peculiarities and settings.","breadcrumb":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/features\/posts-pagination-widget-overview\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/crocoblock.com\/knowledge-base\/features\/posts-pagination-widget-overview\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/crocoblock.com\/knowledge-base\/features\/posts-pagination-widget-overview\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/crocoblock.com\/knowledge-base\/"},{"@type":"ListItem","position":2,"name":"Features","item":"https:\/\/crocoblock.com\/knowledge-base\/features\/"},{"@type":"ListItem","position":3,"name":"Posts Pagination Widget"}]},{"@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\/features\/33747"}],"collection":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/features"}],"about":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/types\/features"}],"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=33747"}],"wp:term":[{"taxonomy":"builder-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/builder-category?post=33747"},{"taxonomy":"feature-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/feature-category?post=33747"},{"taxonomy":"article-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article-category?post=33747"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}