Adding Navigation to WordPress – lesson 20
To develop navigation, we need to add at least 15 test records and check, to in the admin panel, was specified in the settings. 10 entries per page. Settings -> Reading settings -> Display on blog pages no more 10 records.
If you have more entries than 10, then the user will only see the latest 10 added entries. To enable the user to view all entries, we can add navigation to the site.
First you need to add the pagination function to the archive.php file after the loop().
Until the pagination is displayed, since the pagination function() we haven't created yet. Now we have to create this function.
To add navigation, add a new folder named functions to your template folder. In the functions folder, add a new file called pagination.php.
Add code to pagination.php file:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<?php /** * @package WordPress * @subpackage my_theme_tmp */ //pagination function function pagination($pages = '', $range = 4) { $showitems = ($range * 2)+1; global $paged; if(empty($paged)) $paged = 1; if($pages == '') { global $wp_query; $pages = $wp_query->max_num_pages; if(!$pages) { $pages = 1; } } if(1 != $pages) { echo "<div class=\"page-pagination clearfix\">"; if($paged > 2 && $paged > $range+1 && $showitems < $pages) echo "<a href='".get_pagenum_link(1)."'>« First</a>"; if($paged > 1 && $showitems < $pages) echo "<a href='".get_pagenum_link($paged - 1)."'>‹ Previous</a>"; for ($i=1; $i <= $pages; $i++) { if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems )) { echo ($paged == $i)? "<span class=\"current\">".$i."</span>":"<a href='".get_pagenum_link($i)."' class=\"inactive\">".$i."</a>"; } } if ($paged < $pages && $showitems < $pages) echo "<a href=\"".get_pagenum_link($paged + 1)."\">Next ›</a>"; if ($paged < $pages-1 && $paged+$range-1 < $pages && $showitems < $pages) echo "<a href='".get_pagenum_link($pages)."'>Last »</a>"; echo "</div>\n"; } } ?> |
Go to the functions.php file and connect the file with the navigation function there as shown in the picture below:
|
1 |
require('functions/pagination.php'); |
Now, when the function is created and called in the archive.php file, on the site we can see the navigation.
Navigation works but doesn't look very nice, to design the navigation, I suggest adding styles to the end of the /wp-content/themes/my_theme_tmp/css/style.css file
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
/* pagination */ .page-pagination { padding: 10px 20px 10px !important; display:block !important; clear:both !important; } .page-pagination a ,.page-pagination span.pages, .page-pagination span.extend { color:#707070 !important; background:#FFFFFF !important; border-radius:3px !important; -moz-border-radius:3px !important; -webkit-border-radius:3px !important; border:solid 1px #DCDCDC !important; padding:6px 9px 6px 9px !important; margin-right:3px !important; text-decoration:none !important; font-size:12px !important; } .page-pagination a:hover { border-color:#202020 !important; background:#525252 !important; color:#fff !important; background:-moz-linear-gradient(top,#9F9F9F 1px,#6C6C6C 1px,#525252) !important; background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#9F9F9F),color-stop(0.02,#6C6C6C),color-stop(1,#525252)) !important; } .page-pagination span.current{ padding: 0px 9px 4px 9px !important; border:solid 1px #DCDCDC !important; border-color:#3390CA !important; border-radius:3px !important; -moz-border-radius:3px !important; -webkit-border-radius:3px !important; color:#fff !important; margin-right:3px !important; border-color:#202020 !important; background:#525252 !important; background:-moz-linear-gradient(top,#9F9F9F 1px,#6C6C6C 1px,#525252) !important; background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#9F9F9F),color-stop(0.02,#6C6C6C),color-stop(1,#525252)) !important; } /* pagination */ |
After not difficult work, we have excellent navigation.
I gave you the basic function for navigation and told you, how to embed it, whoever needs it can modify the function for your template. Good luck learning WordPress, and as always, I fix the files of the current lesson for you.
In the next lesson we will learn, how to do navigation in single.php file.
- Basic web design course;
- Site layout;
- General course on CMS WordPress and continuation of the course on template development;
- Website development in PHP.
