{"id":31341,"date":"2021-11-02T15:00:27","date_gmt":"2021-11-02T14:00:27","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=31341"},"modified":"2021-11-01T13:56:39","modified_gmt":"2021-11-01T12:56:39","slug":"add-numeric-pagination-wordpress","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/add-numeric-pagination-wordpress\/","title":{"rendered":"How to Add Numeric Pagination to Your WordPress Site"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]After running a WordPress blog for a while, the number of created posts tends to be too large to manage and fit onto a single page. Thus, webmasters have to think of ways of incorporating pagination into blogs, categories, tags, and archive pages to counteract this issue. Of course, doing so comes with clear benefits. Posts are displayed in batches, which puts <strong>less stress on the server<\/strong> and results in <strong>faster page load times<\/strong> than displaying all the posts at once. Furthermore, it makes your blog easily <strong>accessible for crawlers<\/strong> and <strong>more usable for regular visitors<\/strong> looking for a certain piece of information, especially if paired with a search feature.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Apart from that, pagination can also be used to <strong>break up long posts, pages or comment threads<\/strong> into several parts, making them easier to read. Therefore, it is no surprise that most WordPress themes come with some form of pagination. WordPress users whose theme doesn\u2019t offer that functionality or does, but one which doesn\u2019t fit the design of their website, will find this article useful. In it, we will explain how to add numeric pagination to your WordPress website, the most commonly used pagination type.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Without further ado, let us begin. Here\u2019s what we will be covering:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#add-pagination-using-wordpress-plugin\">How to Add Pagination Using a WordPress Plugin<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#add-pagination-using-custom-code\">How to Add Pagination Using Custom Code<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#hide-pagination\">How to Hide a Theme\u2019s Pagination<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;80px&#8221;][vc_widget_sidebar sidebar_id=&#8221;blog-magazine-banner&#8221;][vc_empty_space height=&#8221;80px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"add-pagination-using-wordpress-plugin\"><\/a>How to Add Pagination Using a WordPress Plugin<\/h2>\n<p>[\/vc_column_text][vc_column_text]As WordPress offers an abundance of plugins, it is easy to find one for nearly any purpose by simply searching through the repository on WordPress.org. This holds true for adding any kind of pagination to a WordPress website. We had no issue finding several pagination plugins, but the one we will showcase is called Pagination.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The <a href=\"https:\/\/wordpress.org\/plugins\/pagination\/\" target=\"_blank\" rel=\"noopener\">Pagination by BestWebSoft<\/a> is a freemium plugin used to <strong>add customizable numeric pagination<\/strong> to your pages, blog, archives, search results, authors, categories, and tags. It comes with a set of beginner-friendly settings for the position of the pagination, its parts, and design, while also providing a way to <strong>hide the existing theme-specific pagination<\/strong> if you choose not to use it. And, while most of the options are self-explanatory, its documentation will help you resolve any doubts regarding the options and their use.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Finally, the plugin allows more advanced WordPress users to <strong>add custom code<\/strong> to further adjust the pagination, as well as display it in custom locations using suitable code snippets. The premium version comes with multiple pagination options, compatibility with the Divi theme, and premium support. However, in this article, we will only be covering the free version.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]After <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-install-a-wordpress-plugin\/\">installing and activating the plugin<\/a>, <strong>navigate to Pagination &gt; Settings<\/strong>, which will take you to the Settings tab, where most of the configuration options are. The options are divided into three sections: General, Numeric Pagination, and Custom Styles, with the premium options being highlighted with a different color and inaccessible unless you upgrade.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Pagination-Settings.jpg\" class=\"attachment-full size-full\" alt=\"Pagination Settings\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Pagination-Settings.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Pagination-Settings-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Pagination-Settings-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Pagination-Settings-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;60px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"625\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Pagination-Settings-Preview.jpg\" class=\"attachment-full size-full\" alt=\"Pagination Settings Preview\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Pagination-Settings-Preview.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Pagination-Settings-Preview-300x193.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Pagination-Settings-Preview-768x495.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Pagination-Settings-Preview-620x400.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The configuration process starts with the General tab, where you can <strong>choose where you wish to display the pagination<\/strong> created by this plugin and <strong>where you wish to hide the existing pagination<\/strong> provided by your theme. <strong>The plugin hides the standard, theme-provided pagination<\/strong> by using CSS code with standard CSS classes as the relevant selectors. This option will work for most WordPress themes which use the same CSS classes.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]However, there is an additional option for themes which don\u2019t use those classes. More precisely, you can tick the checkbox next to the Hide Custom Pagination option and add one or more CSS selectors behind the custom pagination found on your website. For this section of the article, we didn\u2019t need to use it, as the theme we are using, called <a href=\"https:\/\/lekker.qodeinteractive.com\/\" target=\"_blank\" rel=\"noopener\">Lekker<\/a>, uses standardized CSS classes. However, this option can be an asset nevertheless. And, to properly use it, you will need to know how to inspect your website using developer tools, as well as a basic understanding of HTML and CSS code. For those unfamiliar with these concepts, we advise reading <a href=\"#hide-pagination\">the section on hiding theme pagination<\/a> at the end of the article.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"670\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Pagination-Settings-General.jpg\" class=\"attachment-full size-full\" alt=\"Pagination Settings General\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Pagination-Settings-General.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Pagination-Settings-General-300x207.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Pagination-Settings-General-768x531.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Pagination-Settings-General-620x429.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]In the next section, you can<strong> choose the position of the new pagination, whether you wish to enable the \u201cPage \u2026 of \u2026\u201d label, as well as the Prev\/Next links.<\/strong> For those links, you can also<strong> specify the labels<\/strong>, with \u201c&lt;&lt; Previous\u201d and \u201cNext &gt;&gt;\u201d being the default values. Furthermore, you can<strong> set up the page range<\/strong>, i.e. the number of page links that are shown before and after the current page number when the pagination is displayed on the website.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"598\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Numeric-Pagination.jpg\" class=\"attachment-full size-full\" alt=\"Numeric Pagination\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Numeric-Pagination.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Numeric-Pagination-300x185.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Numeric-Pagination-768x474.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Numeric-Pagination-620x383.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Finally, we must point out that if you choose the \u201cCustom function position\u201d as the value of the Pagination Position option, you should take a look at the Pagination subsection next to the main tabbed section which we are currently using. In this section, you are given <strong>suggestions of how to display the pagination in some custom locations<\/strong> (posts, multipage, and comments) using related code snippets. But, as we haven\u2019t used a custom pagination position for this article, we will not discuss these settings further.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"569\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Pagination.jpg\" class=\"attachment-full size-full\" alt=\"Pagination\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Pagination.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Pagination-300x176.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Pagination-768x451.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Pagination-620x364.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Having said that, let us proceed to the final configuration section called Custom Styles. To enable it, <strong>the checkbox next to the Custom Pagination Style option must be ticked.<\/strong> Then,<strong> you can set up various design options provided by this plugin.<\/strong> For the most part, we have used the default values, except for the pagination block width, but you can set the options as you see fit.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]We would like to clarify that <strong>these options only apply to the pagination section and its page links and labels:<\/strong> they aren\u2019t used for styling the various aspects of the pages where the pagination is displayed, as some of the option names might suggest. Having said that,<strong> after configuring the options within this section, click the \u201cSave Changes\u201d button<\/strong> to save all the option choices you have previously made.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"734\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Pagination-Custom-Styles.jpg\" class=\"attachment-full size-full\" alt=\"Pagination Custom Styles\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Pagination-Custom-Styles.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Pagination-Custom-Styles-300x227.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Pagination-Custom-Styles-768x582.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Pagination-Custom-Styles-620x470.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The plugin also offers other helpful options which we mustn\u2019t fail to mention. These include a way to<strong> reset all the option choices back to their default values<\/strong> as well as to <strong>insert CSS, PHP, and JS code<\/strong>. The former is achieved using the <strong>Default Settings<\/strong> option within the <strong>Misc<\/strong> tab, while the latter is achieved by adding the corresponding code within the suitable code subsections found in the <strong>Custom Code<\/strong> tab.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Finally, if you have any doubts regarding the plugin options, you can always <strong>access the plugin documentation by clicking the \u201cRead the instruction\u201d link<\/strong> which is found near the top of your screen, while within any of the tabs of the <strong>Pagination &gt; Settings section<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"429\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Misc-Default-Settings.jpg\" class=\"attachment-full size-full\" alt=\"Misc Default Settings\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Misc-Default-Settings.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Misc-Default-Settings-300x133.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Misc-Default-Settings-768x340.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Misc-Default-Settings-620x274.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"685\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Custom-Code.jpg\" class=\"attachment-full size-full\" alt=\"Custom Code\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Custom-Code.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Custom-Code-300x212.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Custom-Code-768x543.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Custom-Code-620x438.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]This concludes our overview of the plugin. The only thing that remains is to review the resulting pagination achieved by it. It is shown below.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"622\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Plugin-Pagination-Result.jpg\" class=\"attachment-full size-full\" alt=\"Plugin Pagination Result\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Plugin-Pagination-Result.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Plugin-Pagination-Result-300x193.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Plugin-Pagination-Result-768x493.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Plugin-Pagination-Result-620x398.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;78px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"add-pagination-using-custom-code\"><\/a>How to Add Pagination Using Custom Code<\/h2>\n<p>[\/vc_column_text][vc_column_text]Apart from using a plugin, you can add numeric pagination to your WordPress website using custom code. This method is, generally speaking, more appealing to intermediate and advanced WordPress users, as it comes with a prerequisite of having a considerable coding experience and overall WordPress knowledge. Nevertheless, it offers a way to <strong>implement the pagination exactly as you want it<\/strong>, without the use of any additional WordPress plugins which might slow down your website. We will cover it in this article, and let you decide which method is more appropriate for your website.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]There are a couple of things we must mention before delving into code. First, as a precautionary measure, we strongly suggest <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-manually-backup-wordpress-website\/\">making a backup of your website<\/a> before proceeding. And, as you will need to insert the code via FTP, we suggest brushing up on your <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-use-ftp\/\">knowledge of FTP<\/a>. Having done both, proceed below.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]For this article, we have created a simple PHP code snippet which will allow you to<strong> display numeric pagination<\/strong> on the blog page, search page, and archives, including categories, tags, author, and date archive pages. The code is given below.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">function qodef_custom_pagination() {\r\nglobal $wp_query;\r\nif ( get_query_var( 'paged' ) ) {\r\n$paged = get_query_var( 'paged' );\r\n} elseif ( get_query_var( 'page' ) ) {\r\n$paged = get_query_var( 'page' );\r\n} else {\r\n$paged = 1;\r\n}\r\nif ( is_front_page() || is_home() || is_archive() || is_search() ) { ?&gt;\r\n&lt;div class=\"qodef-custom-pagination\"&gt;\r\n&lt;?php echo paginate_links( array(\r\n'base' =&gt; str_replace( 999999999, '%#%', esc_url( get_pagenum_link( 999999999 ) ) ),\r\n'total' =&gt; $wp_query-&gt;max_num_pages,\r\n'current' =&gt; $paged,\r\n'prev_text' =&gt; '&lt;span aria-label=\"' . esc_attr__( 'Previous page', 'textdomain' ) . '\"&gt;' . esc_html__( '&amp;laquo;', 'textdomain' ) . '&lt;\/span&gt;',\r\n'next_text' =&gt; '&lt;span aria-label=\"' . esc_attr__( 'Next page', 'textdomain' ) . '\"&gt;' . esc_html__( '&amp;raquo;', 'textdomain' ) . '&lt;\/span&gt;'\r\n) ); ?&gt;\r\n&lt;\/div&gt;\r\n&lt;?php }\r\n}<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Let us now explain it.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The code represents a function called <strong>qodef_custom_pagination()<\/strong> that we created for displaying numeric pagination. This is achieved by calling the <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/paginate_links\/\" target=\"_blank\" rel=\"noopener\">paginate_links()<\/a> function in the code. Even though this function accepts a large variety of arguments, we have only used very few. These are the base of the pagination URL, the total number of pagination pages, the current pagination page, and the prev\/next text labels.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Specifically, we have used the <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/get_pagenum_link\/\" target=\"_blank\" rel=\"noopener\">get_pagenum_link()<\/a> function for the pagination URL, the<strong> max_num_pages<\/strong> property of the global <a href=\"https:\/\/developer.wordpress.org\/reference\/classes\/wp_query\/\" target=\"_blank\" rel=\"noopener\">WP_Query<\/a> object for the total number of pages, the <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/get_query_var\/\" target=\"_blank\" rel=\"noopener\">get_query_var()<\/a> function to get the current pagination page, and have specified the whole HTML structure of the prev\/next links, which are represented as left and right arrow, respectively.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Additionally, we have wrapped the code with an &lt;div&gt; element that has a CSS class of <strong>qodef-custom-pagination<\/strong>. This CSS class will be used for creating the code needed for the style of our custom pagination later.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Finally, the code is wrapped again with an <a href=\"https:\/\/www.php.net\/manual\/en\/control-structures.if.php\" target=\"_blank\" rel=\"noopener\">if statement<\/a>, to ensure that the code is executed only if certain conditions are met. More precisely, the pagination will be created only on the following pages: static homepage, blog page, search page, and archives, i.e. author pages, date pages, categories, and tags. And, since the code relies on the global instance of a WP_Query object, it will not work for any custom queries, i.e. for custom post type pages, their archives, and taxonomy pages. Meaning, the pagination will be displayed similarly to how it was done using the plugin mentioned above.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]This concludes our explanation of the code. However, for it to work properly, there are some additional things we must carefully elaborate on. These are where the code should be placed and how it should be called, i.e. executed.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Firstly, as our <strong>qodef_custom_pagination()<\/strong> function represents a PHP coding snippet, <strong>it should be added either to the functions.php file of your child theme or a <a href=\"https:\/\/qodeinteractive.com\/magazine\/wordpress-site-specific-plugin\/\">site-specific plugin<\/a>, via FTP.<\/strong> However, we will not go into details of how such code is added via FTP in this article. Instead, we will focus on the second aspect that is needed, i.e. its execution.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Specifically, <strong>for a custom function to work on a WordPress website<\/strong>, it needs to be executed in one of two ways: <strong>directly inserting the function call in the appropriate template file<\/strong> or by<strong> hooking the function onto an appropriate hook<\/strong>. Let us briefly go over both.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>The first method<\/strong> is the same as was suggested by the plugin we used in our previous section. More precisely, it <strong>involves inserting a similar code snippet inside a suitable template file via FTP.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">if( function_exists( 'custom-function-name' ) )\r\ncustom-function-name(\u2026);<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]This small pseudo-code snippet represents<strong> a simple way of calling a custom function<\/strong>, as long as it was previously defined. Of course,<strong> the custom-function-name part needs to be replaced<\/strong> with the relevant function name in both cases, <strong>while the three dots should be replaced<\/strong> with a parameter or an array of parameters which the function accepts, or removed if the custom function doesn\u2019t accept any parameters.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]As an example, the Pagination plugin we reviewed above suggested the following snippet, with the function being called <strong>pgntn_display_pagination<\/strong> and posts as the one parameter that is used.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">if ( function_exists( 'pgntn_display_pagination' ) ) \r\npgntn_display_pagination( 'posts' );<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]In our case, since the function is called <strong>qodef_custom_pagination<\/strong> and since it doesn\u2019t accept any parameters, we could execute it with this additional code embedded into a suitable template file.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">if( function_exists( 'qodef_custom_pagination' ) )\r\nqodef_custom_pagination();<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]That suitable template file could be the index.php, page.php, single.php, search.php, or some other template file, depending on the file structure of your theme. Thus, when executing custom functions this way, you should <strong>consult the authors of your theme regarding the correct file path and code snippet placement<\/strong> within that file.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]However, you should also know that this way of adding custom functionalities to a WordPress website is less advised in recent years as <strong>theme template files will get overridden by updates<\/strong>. Therefore, even though your custom function may be safely stored inside the functions.php file of your child theme or a site-specific plugin, its call that executes the function, i.e. the small snippet we previously mentioned, will need to be re-inserted inside the same template file after each theme update.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Thus, the process of maintaining the pagination, or any other custom functionality, is tiresome and difficult to keep track of. We will, therefore, also cover the second way of executing custom functions in WordPress, which is more widely accepted in recent years, despite being developer-friendly.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>The second way of executing custom functions is to \u201chook\u201d them onto appropriate WordPress hooks, which could be part of WordPress core files or custom-created using themes and plugins.<\/strong> Simply put, these hooks represent placeholders within the code that could be used to attach, i.e. hook onto, new custom functions which are created later by other developers or WordPress users.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The process of \u201chooking\u201d the custom function onto an appropriate hook is the same as placing the function call into the correct place within a specific template file. This means that the function will be executed in that place as if a function call was inserted there instead. The benefit of this method is that <strong>you can keep track of all the code more easily<\/strong> and <strong>your customizations are safe from updates<\/strong>. This way, you can keep both the custom functions and the added code lines which \u201chook\u201d them inside the functions.php file of your child theme or site-specific plugin, as the two suggested places for adding PHP code snippets.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]That said, let us explain how it relates to the <strong>qodef_custom_pagination()<\/strong> function we created for this article. First, let us note that there are two types of hooks \u2013<strong> action hooks<\/strong> and<strong> filter hooks<\/strong>. The former are used for adding new functionalities, while the latter are used for changing existing ones.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Since our custom function adds new pagination while not altering the existing pagination provided by the theme we used, that means we need to \u201chook\u201d our function onto a suitable action hook. To do so, we need to use the <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/add_action\/\" target=\"_blank\" rel=\"noopener\">add_action()<\/a> function, which is used in the following manner:[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">add_action( 'suitable-action-hook-here', 'custom-function-name-here' );<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Of course, you will need to replace the first parameter with a suitable action hook and the second with the name of your custom function. Similar to how it was done in the first way of executing custom functions, <strong>we advise consulting with the theme authors<\/strong> on finding a suitable theme-specific action hook.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]For our example, we have used the <strong>lekker_action_after_page_content_holder<\/strong> action hook, which is specific to the Lekker theme we used, while the function name is <strong>qodef_custom_pagination<\/strong>, as previously mentioned. Thus, in our case, the snippet looks the following:[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">add_action( 'lekker_action_after_page_content_holder', 'qodef_custom_pagination' );<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To use it, we needed to <strong>insert it either inside the functions.php file of our child theme or a site-specific plugin<\/strong>. As for the placement of this code line, it is most commonly added either directly above or directly below the function that it hooks, to keep the custom code snippets more organized. We have opted for the latter. Therefore, the complete PHP code snippet we used to display the pagination section on our website is the following:[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">function qodef_custom_pagination() {\r\nglobal $wp_query;\r\nif ( get_query_var( 'paged' ) ) {\r\n$paged = get_query_var( 'paged' );\r\n} elseif ( get_query_var( 'page' ) ) {\r\n$paged = get_query_var( 'page' );\r\n} else {\r\n$paged = 1;\r\n}\r\nif ( is_front_page() || is_home() || is_archive() || is_search() ) { ?&gt;\r\n&lt;div class=\"qodef-custom-pagination\"&gt;\r\n&lt;?php echo paginate_links( array(\r\n'base' =&gt; str_replace( 999999999, '%#%', esc_url( get_pagenum_link( 999999999 ) ) ),\r\n'total' =&gt; $wp_query-&gt;max_num_pages,\r\n'current' =&gt; $paged,\r\n'prev_text' =&gt; '&lt;span aria-label=\"' . esc_attr__( 'Previous page', 'textdomain' ) . '\"&gt;' . esc_html__( '&amp;laquo;', 'textdomain' ) . '&lt;\/span&gt;',\r\n'next_text' =&gt; '&lt;span aria-label=\"' . esc_attr__( 'Next page', 'textdomain' ) . '\"&gt;' . esc_html__( '&amp;raquo;', 'textdomain' ) . '&lt;\/span&gt;'\r\n) ); ?&gt;\r\n&lt;\/div&gt;\r\n&lt;?php }\r\n}\r\nadd_action( 'lekker_action_after_page_content_holder', 'qodef_custom_pagination' );<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]This has ensured that the pagination section was placed in the exact position that we wanted it to. And, if you opt for the same hook route, you need to make sure to replace the lekker_action_after_page_content_holder action hook with one specific to the theme you are using to achieve the same.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The only thing that remains now is to <strong>create the CSS code which styles it<\/strong> to your liking. Unfortunately, this is done on a case-by-case basis, which is why we can\u2019t suggest any code that would appeal to all WordPress users. Instead, we will include the styling code we created for the article so that you can adjust it according to your needs and <a href=\"https:\/\/qodeinteractive.com\/magazine\/wordpress-css-guide\/\">CSS knowledge<\/a>. Meaning the code shouldn\u2019t be simply copied and pasted, but expanded upon.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Having said that, the CSS code that we used for the article is given below.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">.qodef-custom-pagination {\r\nposition: relative;\r\nvertical-align: top;\r\nbackground-color: #eee;\r\nmargin: 48px 0 0;\r\npadding: 13px 0;\r\ndisplay: flex;\r\njustify-content: center;\r\nalign-items: center;\r\n}\r\n.qodef-custom-pagination .nav-links {\r\nposition: relative;\r\ndisplay: flex;\r\nalign-items: center;\r\njustify-content: center;\r\n}\r\n.qodef-custom-pagination .page-numbers {\r\nposition: relative;\r\nmargin: 0 7px;\r\npadding: 0 3px;\r\nfont-size: 22px;\r\nline-height: 32px;\r\n}\r\n.qodef-custom-pagination .page-numbers:first-child {\r\nmargin-left: 0;\r\n}\r\n.qodef-custom-pagination .page-numbers:last-child {\r\nmargin-right: 0;\r\n}\r\n.qodef-custom-pagination .page-numbers.next,.qodef-custom-pagination .page-numbers.prev {\r\npadding: 0;\r\nfont-size: 30px;\r\n}\r\n.qodef-custom-pagination .page-numbers.prev {\r\nmargin-right: 40px;\r\n}\r\n.qodef-custom-pagination .page-numbers.next {\r\nmargin-left: 40px;\r\n}\r\n.qodef-custom-pagination .page-numbers.current, .qodef-custom-pagination .page-numbers:hover {\r\ncolor: #e82a2a;\r\n}\r\n.qodef-custom-pagination .page-numbers.current::before,\r\n.qodef-custom-pagination .page-numbers.current::after{\r\nposition: absolute;\r\ncontent: '';\r\nwidth: 15px;\r\nheight: 7px;\r\n}\r\n.qodef-custom-pagination .page-numbers.current::before{\r\nleft: 0;\r\ntop: 0;\r\nborder-left: 2px solid #e82a2a;\r\nborder-top: 2px solid #e82a2a;\r\n}\r\n.qodef-custom-pagination .page-numbers.current::after{\r\nright: 0;\r\nbottom: 0;\r\nborder-right: 2px solid #e82a2a;\r\nborder-bottom: 2px solid #e82a2a;\r\n}<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]For the most part, the CSS code that we created for this article is rather simple, as it specifies the basic CSS rules for elements which are part of our custom pagination.The only thing that we will mention is the final part of the code. It gives the current pagination page number a custom design, created using borders of uneven length placed upon the ::before and ::after <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Pseudo-elements\" target=\"_blank\" rel=\"noopener\">pseudo-elements<\/a>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]With that being said,<strong> after you create the CSS code for your website in a similar manner<\/strong>, you should <strong>insert it in the Appearance &gt; Customize &gt; Additional CSS section<\/strong> or any CSS-inserting plugin you usually use. In our case, after inserting the above-mentioned code snippets, we have gotten the following result.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"634\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Custom-Code-Pagination-Result.jpg\" class=\"attachment-full size-full\" alt=\"Custom Code Pagination Result\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Custom-Code-Pagination-Result.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Custom-Code-Pagination-Result-300x196.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Custom-Code-Pagination-Result-768x502.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Custom-Code-Pagination-Result-620x406.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]While in most cases our work would be done at this point, there is one final matter we will elaborate on: how to hide the pagination provided by your theme and use the custom one created using either of the methods we discussed above.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"hide-pagination\"><\/a>How to Hide a Theme\u2019s Pagination<\/h2>\n<p>[\/vc_column_text][vc_column_text]To hide the default pagination provided by your theme using CSS, inspect the pagination section using the developer tools of your current browser first. This will help you understand the HTML structure of the pagination, as well as the website page as a whole, and will help you find a suitable CSS selector.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To do so, <strong>right-click somewhere within the pagination section<\/strong> provided by your theme and <strong>select \u201cInspect\u201d<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Hiding-Pagination-Inspect.jpg\" class=\"attachment-full size-full\" alt=\"Hiding Pagination Inspect\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Hiding-Pagination-Inspect.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Hiding-Pagination-Inspect-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Hiding-Pagination-Inspect-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Hiding-Pagination-Inspect-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]This will open your browser\u2019s developer tools in the Elements tab, exactly on the element you right-clicked. From there, <strong>inspect the HTML structure of that section<\/strong> by hovering over the elements. As you hover over them, they will be highlighted on the screen. After you<strong> find the exact HTML element you wish to hide with CSS<\/strong>, look for some specific attributes which you could use as CSS selectors. In most cases, those are the CSS classes and IDs of those elements. We will explain this using the example below.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]In our example, we have right-clicked on the <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Element\/div\" target=\"_blank\" rel=\"noopener\">&lt;div&gt;<\/a> element with the CSS class of <strong>nav-links<\/strong>, which is highlighted on the screenshot below. If we wanted to hide that element alone, we could use <strong>.nav-links<\/strong> as the CSS selector, where the dot (.) means that nav-links is a CSS class.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]However, in most cases, you will need to find the wrapping elements of the element you right-clicked on. This way, you can hide additional HTML elements that are part of that wrapping element or any unnecessary margin or padding added to that wrapping HTML element. In our case, the &lt;div&gt; element we right-clicked on is wrapped with a <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Element\/nav\" target=\"_blank\" rel=\"noopener\">&lt;nav&gt;<\/a> element which has two CSS classes \u2013 <strong>navigation<\/strong> and <strong>pagination<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Additionally, the &lt;nav&gt; element is also wrapped with a &lt;div&gt; element that has two CSS classes \u2013 <strong>qodef-m-pagination<\/strong> and <strong>qodef&#8211;wp<\/strong>. We can opt to hide either of these two wrapping elements. As both elements contain two CSS classes, we could target them using the .class1-name.class2-name CSS selector, for added precision. This means that, if we wanted to hide the inner wrapping element, we would use <strong>.navigation.pagination<\/strong> as the CSS selector, whereas if we wanted to hide the outer wrapping element, we would use <strong>.qodef-m-pagination.qodef&#8211;wp.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Hiding-Pagination-Inspect-Elements.jpg\" class=\"attachment-full size-full\" alt=\"Hiding Pagination Inspect Elements\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Hiding-Pagination-Inspect-Elements.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Hiding-Pagination-Inspect-Elements-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Hiding-Pagination-Inspect-Elements-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/11\/Hiding-Pagination-Inspect-Elements-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Having found a suitable CSS selector, you can hide that element quite easily. Users opting for the Pagination plugin can insert that CSS selector in the input field next to the Hide Custom Pagination option described above. However, you can also hide the pagination section with a simple CSS code snippet.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Here is an example of such a snippet:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">your-css-selector {\r\ndisplay: none;\r\n}<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Of course, you will need to<strong> replace the your-css-selector part with the CSS selector you previously found inspecting the HTML structure<\/strong>. In our case, we have opted to hide the outer wrapping element, represented by the <strong>.qodef-m-pagination.qodef&#8211;wp<\/strong> as the CSS selector. We have used the following code:[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">.qodef-m-pagination.qodef--wp {\r\ndisplay: none;\r\n}<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]to hide the default pagination provided by the Lekker theme that we used for this article.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]After creating a similar CSS snippet for your website,<strong> insert it into the Appearance &gt; Customize &gt; Additional CSS section<\/strong> or CSS-inserting plugin, next to the previously added styling CSS code. The pagination provided by your theme will then be hidden and you can use the newly created one.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">Final Thoughts<\/h2>\n<p>[\/vc_column_text][vc_column_text]In this article, we have described two methods of adding numeric pagination to a WordPress website. Even though intended for different types of WordPress users, they share some of the same steps: choosing the appropriate pagination options, displaying the pagination section on the website using code, and adjusting the design of the created pagination section.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Having exhaustively described all these steps, we are sure you will have no problem adding numeric pagination to your WordPress website using either method. Since we have also covered some advanced WordPress coding concepts, reading this article will help any intermediate WordPress users expand their existing knowledge. We suggest bookmarking this article, in case you ever need to add the numeric pagination in the future or simply to brush up on the knowledge you have gained reading it.[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Add numeric pagination to your WordPress website and improve loading times and overall user experience. We will show you how.<\/p>\n","protected":false},"author":11229,"featured_media":31380,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[46,27,135,4,13],"class_list":["post-31341","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-blogging","tag-content","tag-customization","tag-tips","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/31341","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/11229"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=31341"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/31341\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/31380"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=31341"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=31341"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=31341"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}