SHOW FEATURED IMAGE / THUMBNAIL ON WORDPRESS MOBILE (MOBILEPRESS) HOMEPAGE

Seen mobile version of CYNAMIX BLOG with featured image / thumbnail shown on the home page and wish to do the same, here is what you need to do.

To start with this tutorial, you should already know what MobilePress is and already have it running on your server. If you don’t have this already, you should start with this: DOWNLOAD AND SET UP MOBILEPRESS

CYNAMIX MOBILE SCREENSHOT

If you have that in place already, you should also know that your WordPress theme must have the feature to let you set featured image when you are creating a post. Check the right hand side of your post editor to see if this feature is available. See image below to see what I’m talking about.

If it isn’t available, then you have to set it up. Here is How to Add Featured Image / Thumbnail Option to your WordPress Theme.

Login to the FTP Manager, WAP FTP or File Manager in cPanel Hosting or any means by which you can edit your WP files. I go through File Manager sometimes to edit my Files.

WARNING: ALWAYS BACK UP YOUR FILE BEFORE EDITING THE CODE!

STEP 1. Open the folder wp-content/plugins/mobilepress/system/themes/default.

Open the functions.php file and add the following code just before the (?>) closing tag. Save it.

add_theme_support ('post-thumbnails');
 set_post_thumbnail_size (44, 44, true);

NOTE: The Numbers 44, 44 is a combination of what the size of thumbnail will be on your Mobile Version. Width= 44px; Height 44px. You can edit this to your taste but the 44 x 44 looks moderate and nice.

STEP 2: Edit the index.php file, find the following code:

<div class="post">
<h2 class="title"> <a href="<? php the_permalink ();?>" title = "<? php the_title ();?>" accesskey = "<? php echo $ access_key; $ access_key + +;? > "> <? php the_title ();?> </ a> </ h2>
<p class="subtitle"> <? php the_time ('JS M y')?>. <? Php comments_popup_link ('0 Comments ', '1 Comment', '% Comments');?> </p>
</div>

Now replace the code above with the following code

<div class="post"> <table> <tr> width="44" <td valign="top" align="left">
<? Php if (has_post_thumbnail ()) {the_post_thumbnail ();} else {echo '<img src = "http://mobitricks.info/images/featured.png" alt = "'. Get_the_title. ' "Width =" 44 "height =" 44 "class =" wp-post-image "/> ';}?>
</td> <td> <h2 class="title"> <a href="<? Php the_permalink ();?>" Title = "<? Php the_title ();?>" Accesskey = "<? Php echo $ access_key; $ access_key + +;?> "> <? php the_title ();?> </ a> </ h2>
<p class="subtitle"> <? php the_time ('JS M y')?>. <a href="<? Php the_permalink ();?> <? Php mopr_check_permalink ();?> Comments = true"> <? Php comments_number ('0 Comments ', '1 comment', '% Comments');? > </a> </p> </td> </tr> </table> </div>

Do the same thing (step 2) on the file archive.php and search.php so that the thumbnails can also show there.

STEP 3: Add the following css code in header.phpfile before the tag

img.wp-post-image {
float: left;
margin-right: 2px;
width: 44px;
height: 44px;
padding: 1px;
border: 1px solid # ddd;

You can edit this CSS code to suit your website.

NOTE: For the featured image to show on your mobile version, you must set a featured image while creating a post. This is the reason you don’t want to skip any step. if your theme doesn’t have that feature, refer to the post I recommended at the start of this article.

IF YOU ARE AFRAID OF PLAYING AROUND WITH YOUR CODE, YOU MIGHT WANT TO USE THIS OPTION:

1. Log in to your cPanel and navigate to

./public_html/wp-content/plugins/mobilepress/system/themes/default/

2. Open header.php with editor and search for /* Structure */

3. Just below it, paste the following code:

img.wp-post-image {
float:left;
margin-right:2px;
width:50px;
height:50px;
padding:1px;
border:solid 1px #ddd; }

4. Save the file.

5. Still in that folder:

./public_html/wp-content/plugins/mobilepress/system/themes/default/

Upload the following attached files and upload them to that folder.
The files to download below are: (index.php, functions.php and archive.php)

DOWNLOAD HERE ==>  ARCHIVE.PHP   >>>  FUNCTIONS.PHP   >>> INDEX.PHP

When you upload them, you will be aked to overwrite the existing one. Do it and you have your new mobile WordPress (MobilePress) site with featured thumbnails.

These modifications will also show excerpts of your posts on the mobile version with a “read more” link to show the full post.

NOTE: For the featured image to show on your mobile version, you must set a featured image while creating a post. This is the reason you don’t want to skip any step. if your theme doesn’t have that feature, refer to the post I recommended at the start of this article.

Hope this helps!

Don't keep this to yourself, Share it with your friends with the Buttons below.