Create a wordpress showcase theme

by krike in Tutorials / wordpress on 12 Jul 2009


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

Written by krike

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet nisl nisl. Ut interdum libero vitae quam ultricies et lacinia elit aliquet. Praesent tincidunt, sem tempus feugiat feugiat, turpis tellus scelerisque erat, sit amet feugiat neque arcu ac lectus. Sed at mi et elit interdum scelerisque vitae eu felis.

krike has written 77 posts.

  • Pingback: Create a wordpress showcase theme | CMS tutorial site | wpden

  • Premium WordPress Themes

    Thank you for this article. If you seek Premium WordPress themes you should a check out.

  • ElenaLisvato

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

    • http://blog.cmstutorials.org krike

      @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.

  • StupidBoy

    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 ???

    • http://blog.cmstutorials.org krike

      @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.

  • Hamed

    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

    • http://blog.cmstutorials.org krike

      @Hamed: I couldn’t find a plugin yet, however this might interest you ->
      if this is what you asked for?

  • Hamed

    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

    • http://blog.cmstutorials.org krike

      @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

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

  • Hamed

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

    please see :

    • http://blog.cmstutorials.org krike

      @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.

  • Hamed

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

    • http://blog.cmstutorials.org krike

      @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.

  • Hamed

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

    one question:
    How to set chmod files in XP?

    • http://blog.cmstutorials.org krike

      @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.

  • Hamed

    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/

    • http://blog.cmstutorials.org krike

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

  • Hassouna

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

    • http://cmstutorials.org krike

      @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

  • http://freestylewordpressthemes.com patrick

    thanks a lot for your tutorial , i will try it

    • http://cmstutorials.org krike

      @patrick: no problem :)

  • Devid Jhon

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