U5I Blog

Turn Wordpress into a Flash Game Site

Posted on the September 24th, 2008 under WordPress by admin

Just too lazy lately. I had made a flash game site using wordpress 3 months ago, and I wanted to write a post about it so that other people would know how to do the same thing. However, just too lazy. Finally. the post is here.

The game site i made is: KM603 Flash Game. I think many people already knew and posted tutorials about how to turn a wordpress into a game site. My method here, will be more or less the same as others.

Getting Started.

1. Install wordpress, add some categories.

2. Download and then activate plugin: Kimili Flash Embed (use to display flash game)

3. Download and then activate plugin: More fields (use to add custom fields easily)

Setting Up.

1. Use More fields to add 2 key words. Key 0: image, key 1: swf (more details see the image below)

Save it. Go to “Write”, you should see a box with title “Game” and 2 text fields there.

Adding Games.

1. Have a swf flash game and a thumbnail ready on your hard drive.

2. Go to “Write”

3. Input the game title. Input the game description in the editor. Add some tags if you want. Choose an appropriate category.

4. Upload the swf file. Copy the relative path. eg: wp-content/uploads/2008/07/dropoff.swf

5. Paste the relative path to the swf text field on the Game box.

6. Upload the thumbnail. Copy the relative path. eg: wp-content/uploads/2008/07/dropoff.jpg

Note: Do not include you domain name when you copy the path. The reason for it is that, you don’t need to update all the paths one by one when you change you domain in the future.

See the attachment for the detailed example.

Showing the thumbnail, flash game.

basically, you need the following code the display the thumbnail for a game: (within the main loop in index.php and archive.php)

<img src=”<?php echo get_option(’home’); ?>/<?php $values = get_post_custom_values(”image”); echo $values[0]; ?>”>

you need the following code to display the flash game swf file: (in the single.php)

[kml_flashembed movie="<?php echo get_option('home'); ?>/<?php $values = get_post_custom_values("swf"); echo $values[0]; ?>” height=”500″ width=”585″ BGCOLOR=”#000000″/]

the code makes use of the Kimili Flash Embed plugin, make sure you have it active.

Modifying your template:

Now your wordpress can show thumbnails and flash games. It is time to do some modifications to you template so that you site would not look like a blog anymore. You need work hard a bit and use your creativity.  On my game site, you can see it displays 16 thumbnails on the homepage, and 4 in a row. The following code can achieve it. Of course, if you use CSS, the code would be much simpler.

<div class=”title”>
<h1>Latest Games</h1>
</div>
<?php $i = 1; ?>

<!–the loop–>
<?php if (have_posts()) : ?>

<table width=”100%”><tr>

<?php while (have_posts()) : the_post(); ?>

<?php $values = get_post_custom_values(”image”); ?>

<?php if ($values[0] !=”") {?>
<td class=”tdcel” valign=”top”>
<!–post title as a link–>
<a href=”<?php the_permalink() ?>” rel=”bookmark” title=”<?php the_title(); ?>”><img src=”<?php echo get_option(’home’); ?>/<?php $values = get_post_custom_values(”image”); echo $values[0]; ?>” class=”img” width=”100″ height=”100″></a>
<h5><a href=”<?php the_permalink() ?>” rel=”bookmark” title=”<?php the_title(); ?>”><?php the_title(); ?></a></h5>

</td>
<?php } ?>

<?php if ($values[0] ==”") {?>

<?php $i = $i - 1; } ?>

<!–new row–>
<?php if((($i)%4 == 0) & ($i != 1)) { ?>
</tr>
<tr>
<?php } ?>

<?php $i = $i + 1; endwhile; ?>

<!–add empty cell–>
<?php $i = 4 - ($i - 1)%4; while ($i!=0): ?>
<td></td>
<?php $i = $i - 1; endwhile; ?>

</tr></table>
<!–end of table–>

It is a bit too complicated, I suggest you to use CSS. I am just too lazy to do it again.

So, I think that’s pretty much about it. Hope this article will help and save you time.