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 (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:
4. In the line just above that, past this code:
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:
<p><?php posts_nav_link(‘ · ‘, ‘Previous Page’, ‘Next Page’); ?></p></div>
7. Replace the one above completely with the code below:
<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.
Twitter: Okaztle
says:
Yeah! I have the plugin installed already and saw a page Navi on ma mobilepress but don’t like the look and deactivate it but now i think I’ll make a step with what i red here. Thank Caprio
Nice post….thumbs up don
their is no styles.css but style.css and that style.css contain only this
“/*
Theme Name: Default
Theme URI: http://wordpress.org
Description: The default MobilePress theme.
Author: Aduity
Author URI: http://aduity.com
Version: 1.0
Tags: mobile, mobilepress, light blue, grey, orange
*/”
Sorry ’bout that. It was supposed to be header.php , not styles.css
Twitter: Okaztle
says:
Alright, was wondering before.
Twitter: dekokoblog
says:
I like your series in Mobilepress. But Don please you have not answered my previous questions. How can I show my comment form in mobilepress by default and not by clicking “post a comment”
Essien recently posted..Sunday Jokes
Its really a interesting and informative post.Thanks for sharing buddy
Twitter: ho9jablog
says:
thanks don but pls If I place the code above style I get a series of code on my Blog please why is it so? Help me http://ho9ja.com
This tutorial was originally written for the old version of Mobilepress. TO make it work with the newer version, you have to place the code in the css file within that theme folder if you’re using a custom theme: wp-content/mobilepress/themes/%theme name%/css/style.min.css
Twitter: ho9jablog
says:
I pasted that long code above this in the css am I doin it right???? What am I to do again or should I remove it? *wrong place*?
/* General Styles */
body {background:#fff;font-family:Verdana, Arial, sans-serif;font-size: 1em;line-height: 1.2em;}
blockquote {border-left:4px solid #d54e21;margin:12px 8px;padding-left:4px;}
h1 {font-size:1.6em;font-weight:normal;line-height:1.6em;margin:0 0 10px 0;}
h2 {font-size:1.1em;font-weight:normal;line-height:1.2em;margin:0 0 10px 0;}
h2 a {color:#2583ad;}
h3 {font-size:1.0em;font-weight:normal;line-height:1.2em;margin:0 0 10px 0;}
p {color:#333;font-size:0.9em;line-height:1.2em;margin:0 0 10px 0;}
p a {color:#d54e21;}
textarea{width:90%;}
ul {list-style:disc;margin:0 0 10px 25px;}
ol {list-style:decimal;margin:0 0 10px 25px;}
ul li, ol li {color:#333;font-size:1.0em;padding:2px;}
.clearfix{clear:both;}