Don Caprio

Adding Pagination (Numbered Navigation) to MobilePress

You are here: Home / Blogging / Marketing / Wordpress / Adding Pagination (Numbered Navigation) to MobilePress
Posted by Wale Adekile . Posted on: at .

I’ve always loved MobilePress plugin because it’s so easy to customize and if you know some basic WordPress tags, you can make your blog’s mobile version look just the way you want. You can edit MobilePress colors, add thumbnails / featured image and integrating google adsense for mobile is really easy. I’ve successfully added a cool pagination (numbered page navigation) to my own mobile version. You can go to the homepage to check it out.

How to add numbered page navigation to mobilepressHow to add Numbered Page Navigation (Pagination) to your MobilePress Theme

1. Install and activate WP PageNavi. Of course, the pagination won’t show yet on MobilePress but we’re gonna make that happen in just a couple of minutes 🙂

2. Log in to your cPanel file manager and navigate to this file:

…public_html/wp-content/plugins/mobilepress/system/themes/default/header.php

3. Edit the file and search for this:

</style>

4. In the line just above that, past this code:

.wp-pagenavi {
padding: 10px 20px 10px !important;
display:block !important;
clear:both !important;
}
.wp-pagenavi a ,.wp-pagenavi span.pages, .wp-pagenavi span.extend {
color:#333333 !important;
text-shadow:0px 1px #F6F6F6 !important;
padding:6px 9px 6px 9px !important;
border:solid 1px #B6B6B6 !important;
box-shadow:0px 1px #EFEFEF !important;
-moz-box-shadow:0px 1px #EFEFEF !important;
-webkit-box-shadow:0px 1px #EFEFEF !important;
background:#E6E6E6 !important;
background:-moz-linear-gradient(top,#FFFFFF 1px,#F3F3F3 1px,#E6E6E6) !important;
background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#FFFFFF),color-stop(0.02,#F3F3F3),color-stop(1,#E6E6E6)) !important;
font-size:12px !important;
margin-right:3px !important;
text-decoration:none !important;
}
.wp-pagenavi a:hover {
color:#fff !important;
text-shadow:0px 1px #4876C9 !important;
border-color:#3D6DC3 !important;
background:#5A8CE7 !important;
background:-moz-linear-gradient(top,#C2E0FF 1px,#84AFFE 1px,#5A8CE7) !important;
background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#C2E0FF),color-stop(0.02,#84AFFE),color-stop(1,#5A8CE7)) !important;
color:#FFFFFF !important;
box-shadow:0px 1px #E7E7E7 !important;
-moz-box-shadow:0px 1px #E7E7E7 !important;
-webkit-box-shadow:0px 1px #E7E7E7 !important;}
.wp-pagenavi span.current{
padding:6px 9px 6px 9px !important;
border:solid 1px #DCDCDC !important;
color:#fff !important;
box-shadow:0px 1px #E7E7E7 !important;
-moz-box-shadow:0px 1px #E7E7E7 !important;
-webkit-box-shadow:0px 1px #E7E7E7 !important;
margin-right:3px !important;
text-shadow:0px 1px #4876C9 !important;
border-color:#3D6DC3 !important;
background:#5A8CE7 !important;
background:-moz-linear-gradient(top,#C2E0FF 1px,#84AFFE 1px,#5A8CE7) !important;
background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#C2E0FF),color-stop(0.02,#84AFFE),color-stop(1,#5A8CE7)) !important;
}

5. Now open and edit index.php located in that same folder

6. Search for this code:

<?php if (mopr_check_pagination()): ?><div id=”indexpostfoot”>
<p><?php posts_nav_link(‘ &#183; ‘, ‘Previous Page’, ‘Next Page’); ?></p></div>

7. Replace the one above completely with the code below:

<?php if (mopr_check_pagination()): ?><div id=”postfoot”>
<p><?php if(function_exists(‘wp_pagenavi’)) { wp_pagenavi(); } ?></p></div>

8. Save the file and check your blog.

You should repeat steps 5, 6 and 7 for archive.php and search.php to complete the whole thing. If you followed the guide closely, you should now have a paginated mobilepress. You can also customize the look and feel of the numbered navigation if you’re good with CSS.