Create a wordpress showcase theme

by krike in Tutorials / wordpress on 12 Jul 2009

1. Tutorial This will be our end result In this tutorial we will be using the wordpress default theme to show you how easy it is to create a showcase theme. First replace the narrowcolumn class in your style.css with the following Open index.php and find the code in the image below. Replace it with [...]

1. Tutorial

This will be our end result

endresult_showcasetheme

In this tutorial we will be using the wordpress default theme to show you how easy it is to create a showcase theme. First replace the narrowcolumn class in your style.css with the following

.narrowcolumn {
float: left;
padding: 0 0 20px 15px;
margin: 0px 0 0;
width: 540px;
}

Open index.php and find the code in the image below.

post_class

Replace it with this code.

<div class="showcase">

Add the following styles to your stylesheet.

.showcase
{
width: 250px;
height: 270px;
float: left;
border: 1px solid #CFCFCF;
margin: 4px;
padding: 4px;
}

.showcase h2
{
padding: 2px;
margin: 0px;
}

.showcasethumb
{
width: 230px;
height: 160px;
}

Back to index.php find the following code

<?php the_content('Read the rest of this entry »'); ?>

Replace it with

<?php $homethumb = get_post_meta($post->ID,'homethumb', true);?>
<img class="showcasethumb" src="<?php echo bloginfo('url')."/wp-content/uploads/".$homethumb; ?>.jpg" alt=""/>

2. Usage

First create a 230*160 image preview, when creating a new post upload your preview image.

image_title

Copy paste the title of the image (see picture above) in your new post as a new custom field, call that custom field homethumb and click add custom field.

homethumb_customefield

3. Plugins to install

As you can see from the end result preview we have some star ratings, you will need to install a plugin for this. The plugin name is WP-PostRatings by Lester Chan, you can install it by going to the plugin section of your site, go to add new and type WP-PostRatings in the search. Then just click install

WP-PostRatings

In the index.php find the following code

postmetadata

Below add

<?php if(function_exists('the_ratings')) { the_ratings(); } ?>

I modified the settings of the rating plugin so it would show only the star rating and no text. You are free to do whatever you want.

4. Examples

Author:

Christophe (aka krike) is a Web designer & developer living in Belgium. He spends most of his time working with Wordpress, CodeIgniter & Photoshop but also helping beginners take their first step in the development world.

Related posts

23 Comments

  1. Create a wordpress showcase theme | CMS tutorial site | wpden on 25 Jul 2009

    [...] more here: Create a wordpress showcase theme | CMS tutorial site Share this on del.icio.usDigg this!Buzz up!Stumble upon something good? Share it on [...]

  2. Premium WordPress Themes on 29 Jul 2009

    Thank you for this article. If you seek Premium WordPress themes you should a check out. http://elitewpthemes.com/

  3. ElenaLisvato on 06 Aug 2009

    Wow! Thank you! I always wanted to write in my site something like that. Can I take part of your post to my blog?

  4. krike on 07 Aug 2009

    @ElenaLisvato: Thank you for the comment. But no you can’t copy a part of the post, you can however link to our blog post.

  5. StupidBoy on 23 Aug 2009

    How can i creat wordpress showcase in cagetories
    I did following your turorial , and i done succesfull , but when i click in the cagetory , the layout is not the same
    how can i change layout become showcase ???

  6. krike on 23 Aug 2009

    @StupidBoy: When you browse for an archive or category it will use archive.php of your theme instead of your index.php. So you would have to apply the same changes, you made in index.php, to the archive.php. Also apply the same changes to search.php as it (I guess) should use the same layout.

  7. Hamed on 14 Sep 2009

    Hi
    Please help me :
    What kind of plug-in this sites has used for showing the themes ?

    http://www.freewordpressthemes.com
    http://fab404.com
    http://newwpthemes.net
    http://www.logoinstant.com

    Thanks

  8. krike on 14 Sep 2009

    @Hamed: I couldn’t find a plugin yet, however this might interest you -> http://www.plentyofcode.com/2007/09/website-screenshot-capture-with-aspnet.html
    if this is what you asked for?

  9. Hamed on 14 Sep 2009

    Thank you , but it’s not
    I’m looking for a plug-in which build a gallery for me like this site: http://www.freewordpressthemes.com

    I’m used wordpress CMS
    please recommend me a Appropriate plug-in

  10. krike on 14 Sep 2009

    @Hamed: we’ll just follow this tutorial to create your own showcase, you can customize it the way you want, if you want 3 blocks next to eachother just make the width smaller. or you can go to http://themeforest.net/?ref=krike and purchase a premade showcase theme like I did for my other site http://iv-designs.org

    If you really want a plugin I suggest using files flutter http://flutter.freshout.us
    it allows you to create other post methods with upload, and much more…

  11. Hamed on 15 Sep 2009

    I did following your tutorial , but I Don’t have any image:

    please see : http://muscle.persiangig.com/image/anothere/5.jpg

  12. krike on 15 Sep 2009

    @Hamed: Did you grab the right custom field in the index.php of your file? (post_meta(…., “name of custom field”,…))
    you did followed this tutorial by the letter? I mean with that if you used the same custom fields name? you copy pasted the file title, etc… ??

    if you followed everything correctly it should work, unless your image was not uploaded, check with your ftp.
    My files are uploaded in the uploads/ folder but you can change that in settings->miscellaneous, check if you have the option “Organize my uploads into month- and year-based folders” selected. Because then your file would be in uploads/2009/09/yourimage.jpg and the path in the code I provide won’t work.

  13. Hamed on 15 Sep 2009

    Thanks a lot
    I’m use wordpress 2.8
    do you think the problem is here?

  14. krike on 15 Sep 2009

    @Hamed: no, I use 2.8.4. it should work normally. can you give me a link? so I can have a look at it.

  15. Hamed on 16 Sep 2009

    unfortunately ,I,m using local host on the windows :(

    one question:
    How to set chmod files in XP?

  16. krike on 16 Sep 2009

    @Hamed: if you use wamp you can set your server online and people can access your site using your ip address instead of localhost. And normally you should not chmod when working locally. at least I never had to, but you can always right click your map click properties, click on the button advanced and check “folder is ready for archiving”

    you can always send me a copy of your theme at idealvisions@live.com and I can have a look at it.

  17. Hamed on 16 Sep 2009

    Mr krike
    Thanks so much from your help
    I found a plug-in Which makes a showcase theme easily
    plug-in “WP Post Thumbnail”
    http://wordpress.org/extend/plugins/wp-post-thumbnail/screenshots/

  18. krike on 16 Sep 2009

    @Hamed: your welcome :) glad you found what you were searching for

  19. Hassouna on 05 Jan 2010

    Hi
    can You help me to do this in my blog ?
    http://www.e3lnt.com
    thanks

  20. krike on 05 Jan 2010

    @Hassouna: I’m currently working on a few projects so I will not be able to do it for you. The purpose of the tutorial is to try it yourself

  21. patrick on 25 Nov 2010

    thanks a lot for your tutorial , i will try it

  22. krike on 25 Nov 2010

    @patrick: no problem :)

  23. Devid Jhon on 05 Mar 2011

    Good concept about wordpress showcase theme. I like to read this concept. Thanks!

Drop us a word

Spam Protection by WP-SpamFree