Theme name is Ureeka. This theme were free. First time i get this theme were from www.web2feel.com, but as the footer, this theme were created by www.FabThemes.com.
The themes is just like Books Case that mounted on wooden wall. Its a simple theme with nice looking layout. One thing that atract my eyes is, when we move our cursor above the book, it will looks like the book cover were opened, and show the title.
When we use this theme, there is 2 area that we can post.
1. Post as blog, using “Posts” in wordpress as usual
2. Post as book, you should use add “Book feature”
Theme Feature :
- This theme already adopt TimThumb script, that will resize the image into the proper size, and save it on cache folder inside your theme folder.
- Behind Cover book, it can show Title of the book, and Author for that book. To show the author name, you need to add a custom field with name “w2f_author” and fill the value with the author of that book.
For further use, you also can use this theme to another kind of web, as example, use this theme for Sell DVD (amazon store).
Books Store theme for WPRobot use
Lets try to modify this theme for WPRobot use. Follow this step by step guide, and read carefully. As always, this is just example how to do the process, if you got any trouble with this tutorial, you can use the comment feature, or use contact page.
Download this Ureeka Theme here
First Step :
Change the feature of the theme, so it the main page will show “normal post”, not Book Page.
Open the index.php file, and you will see some part of this :
<?php
$home_count = get_option('uree_home_count');
$temp = $wp_query;
$wp_query= null;
$wp_query = new WP_Query();
$wp_query->query('posts_per_page='.$home_count.'&post_type=book'.'&paged='.$paged);
?>
<?php while ($wp_query->have_posts()) : $wp_query->the_post(); ?>
<li id="post-<?php the_ID(); ?>">
<div id="post-<?php the_ID(); ?>">
<div>
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2>
</div>
<span><?php $writer=get_post_meta($post->ID, 'w2f_author', true); echo $writer; ?></span>
<a href="<?php the_permalink() ?>"><img src="<?php bloginfo('stylesheet_directory'); ?>/timthumb.php?src=<?php get_image_url(); ?>&h=190&w=150&zc=1" alt=""/></a>
</div>
</li>
The script number 6 is the key to show what kind of post that will used.
The original script is : $wp_query->query(‘posts_per_page=’.$home_count.’&post_type=book’.'&paged=’.$paged);
Change to : $wp_query->query(‘showpost=.$home_count.’);
Second Step :
Change the Auto thumbnail script.
Script that works to show the thumbnail is script on line 15. get_image_url();
To modify this script, open the “functions.php” file. You will see something like this :
function get_image_url(){
$image_id = get_post_thumbnail_id();
$image_url = wp_get_attachment_image_src($image_id,'large');
$image_url = $image_url[0];
echo $image_url;
}
That functions above will show any image that uploaded on your website. If we use WPRobot, and did not want to save the image into our server, the original script would not show the thumbnail.
Change that functions above with this script :
function get_image_url(){
global $post, $posts;
$first_img = '';
$first_img = $matches [1] [0];
echo $first_img;
if(empty($first_img)){ //Defines a default image $first_img = "/images/default.jpg";
}
return $first_img;
}
This script were same like my previous post here :
Automatic Thumbnail using functions
Third Step :
If you still do that two step above, and try to run your website, you will not see the thumbnail. That is not caused by a wrong step, but the TimThumb script still not works optimal. The original timthumb script also only works for some image that stored inside your own server. That’s why we must modify it.
Open timthumb.php file, and you will see some of this script :
// If ALLOW_EXTERNAL is true and ALLOW_ALL_EXTERNAL_SITES is false, then external images will only be fetched from these domains and their subdomains.
if(! isset($ALLOWED_SITES)){ 'flickr.com',
'picasa.com',
'img.youtube.com',
'upload.wikimedia.org',
'photobucket.com',
'imgur.com',
'imageshack.us',
'tinypic.com'
);
}
The picture from amazon did not show, because there is no URL that inserted to this timthumb.php. Modify that area, into something like this :
// If ALLOW_EXTERNAL is true and ALLOW_ALL_EXTERNAL_SITES is false, then external images will only be fetched from these domains and their subdomains.
if(! isset($ALLOWED_SITES)){ 'flickr.com',
'picasa.com',
'img.youtube.com',
'upload.wikimedia.org',
'photobucket.com',
'imgur.com',
'imageshack.us',
'images-amazon.com',
'tinypic.com'
);
}
Add “images-amazon.com” is the key here.
After modify all three step above, try to run your website, and it will works like magic.
If you have trouble when doing this tutorial, use the comments area below.
BTW, if you want to see the demo site, see this site : Civil Engineering Handbook