Creation of a Flash arcade site using WordPress - step 2

July 27, 2008 by Emanuele Feronato
Filed Under Php, WordPress •  

In this step, we'll see how to configure WordPress to turn it into an arcade site.

Remember that my final goal is to self-populate my arcade site with MochiAds feed but if you understand how does it work, you can easily custom it to meet you needs.

Just another WordPress blog

This is how every blog comes to life.

Download WP and install it.

Categories

Now it's time to add categories to the blog.

In the administrator panel I added all MochiAds game categories.

Let's see them all: Action, Adventure, Board Game, Casino, Driving, Dress Up, Fighting, Puzzles, Pimp my / Customize, Shooting, Sports and Other.

I also added a categoy called "Leaderboard enabled" where to file all leaderboard enabled games.

Adding a game

Now it's time to add a game. I'll add Jamag.

There are many ways to add a game at this point, but I want to do it in a way that will be easy to automate once I'll parse MochiAds feeds.

First, let's see the JSON feed of Jamag:

PLAIN TEXT
CODE:
  1. {"rating": "Everyone", "updated": "2008-07-19", "popularity": null, "description": "Jamag = Just Another Mouse Avoider Game\r\n\r\nBut with something new...", "key_mappings": "", "height": 500, "game_url": "http://www.mochiads.com/games/jamag", "slug": "jamag", "tags": ["mouse", "avoid", "avoider"], "instructions": "Control the red circle with the mouse\r\nCollect purple circles, avoid blue ones\r\nEvery 10 circles collected there will be an explosion\r\nUse it to wipe away blue circles\r\nPress mouse button to activate bullet time\r\nThat's all... it's just another mouse avoider game...", "uuid": "89285254-78b1-3248-9db3-f5ab67ecc542", "author": "Triqui", "control_scheme": "{\"fire\": \"na\", \"jump\": \"na\", \"movement\": \"mouse\"}", "author_link": "http://mochiads.com/community/profile/Triqui", "feed_approval_created": "2008-05-17T14:32:26.644771-08:00", "name": "Jamag", "swf_url": "http://games.mochiads.com/c/g/jamag/jamag_secure.swf", "recommended": false, "thumbnail_url": "http://cdn.mochiads.com/c/g/jamag/_thumb_100x100.jpg", "created": "2008-05-17T12:00:43.262589-08:00", "categories": ["Action", "Other"], "game_tag": "5596fb87fd0f2de1", "leaderboard_enabled": true, "zip_url": "http://cdn.mochiads.com/c/g/jamag.zip", "width": 500}

This code has been already explained in step 1, so let's jump directly to the post I am writing:

The title of the post (1) is the name field of the feed

The post itself is made by the description field (2), the more tag (3a/3b) and the instructions field (4).

Remove the \r\n from description and instructions, making new lines with your keyboard. Every \r\n is a new line.

Switching your edit area to HTML (5) could help you.

The publication data of the post (6) must be the same as the created field and the Tags are the same of the tags field (7).

Check all categories that match with categories field and check "Leaderboard enabled" is the leaderboard_enabled field is set to true

When filled all these fields, most bloggers just click on "Publish" and the post goes live.

We have to go more in-depth and use the Custom Fields in the Advanced Options

Custom Fields

WordPress has the ability to allow post authors to assign custom fields to a post. This arbitrary extra information is known as meta-data.

Meta-data is handled with key/value pairs. The key is the name of the meta-data element. The value is the information that will appear in the meta-data list on each individual post that the information is associated with.

You can read the full docs about meta-data at Using Custom Fields WP guide.

These are the custom field I added:

the Key field contains the name of the feed field, while the Value field contains the value of the feed field.

I wanted to save author name, swf and thumbnail urls, game tag and swf's width and height.

Finally it's time to publish the post.

The game

This is how our entry looks like in the home page

and in the post page

Everything seems to be ok but we can't play the game... we need to get meta-data and display the swf.

To fetch meta values I'll use the get_post_meta() function:

get_post_meta($post_id, $key, $single);

$post_id is the ID of the post you want the meta values for.

$key is a string containing the name of the meta value you want.

$single can either be true or false. If set to true then the function will return a single result, as a string. If false, or not set, then the function returns an array of the custom fields.

So in our case to get the movie width I'll use

get_post_meta($post->ID, "width", true);

Now it's time to edit the theme.

Editing the theme

With your favourite ftp client, go into the directory you installed the blog in, then follow this path: wp-content/themes/default then edit single.php.

single.php is the file that handles the post itself.

find

PLAIN TEXT
HTML:
  1. <div class="entry">

and just after it write

PLAIN TEXT
PHP:
  1. <embed src="<?php echo get_post_meta($post->ID, "swf_url", true); ?>" menu="false" quality="high" width="<?php echo get_post_meta($post->ID, "width", true); ?>" height="<?php echo get_post_meta($post->ID, "height", true); ?>" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />

to embed the swf with name, height and width according to post's meta-data.

Your single.php file now will look like this:

PLAIN TEXT
PHP:
  1. <?php get_header(); ?>
  2.  
  3.     <div id="content" class="widecolumn">
  4.  
  5.     <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
  6.  
  7.         <div class="navigation">
  8.             <div class="alignleft"><?php previous_post_link('&laquo; %link') ?></div>
  9.             <div class="alignright"><?php next_post_link('%link &raquo;') ?></div>
  10.         </div>
  11.  
  12.         <div class="post" id="post-<?php the_ID(); ?>">
  13.             <h2><?php the_title(); ?></h2>
  14.  
  15.             <div class="entry">
  16.  
  17.                 <embed src="<?php echo get_post_meta($post->ID, "swf_url", true); ?>" menu="false" quality="high" width="<?php echo get_post_meta($post->ID, "width", true); ?>" height="<?php echo get_post_meta($post->ID, "height", true); ?>" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
  18.  
  19.                 <?php the_content('<p class="serif">Read the rest of this entry &raquo;</p>'); ?>
  20.  
  21.                 <?php wp_link_pages(array('before' => '<p><strong>Pages:</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>
  22.                 <?php the_tags( '<p>Tags: ', ', ', '</p>'); ?>
  23.  
  24.                 <p class="postmetadata alt">
  25.                     <small>
  26.                         This entry was posted
  27.                         <?php /* This is commented, because it requires a little adjusting sometimes.
  28.                             You'll need to download this plugin, and follow the instructions:
  29.                             http://binarybonsai.com/archives/2004/08/17/time-since-plugin/ */
  30.                             /* $entry_datetime = abs(strtotime($post->post_date) - (60*120)); echo time_since($entry_datetime); echo ' ago'; */ ?>
  31.                         on <?php the_time('l, F jS, Y') ?> at <?php the_time() ?>
  32.                         and is filed under <?php the_category(', ') ?>.
  33.                         You can follow any responses to this entry through the <?php post_comments_feed_link('RSS 2.0'); ?> feed.
  34.  
  35.                         <?php if (('open' == $post-> comment_status) && ('open' == $post->ping_status)) {
  36.                             // Both Comments and Pings are open ?>
  37.                             You can <a href="#respond">leave a response</a>, or <a href="<?php trackback_url(); ?>" rel="trackback">trackback</a> from your own site.
  38.  
  39.                         <?php } elseif (!('open' == $post-> comment_status) && ('open' == $post->ping_status)) {
  40.                             // Only Pings are Open ?>
  41.                             Responses are currently closed, but you can <a href="<?php trackback_url(); ?> " rel="trackback">trackback</a> from your own site.
  42.  
  43.                         <?php } elseif (('open' == $post-> comment_status) && !('open' == $post->ping_status)) {
  44.                             // Comments are open, Pings are not ?>
  45.                             You can skip to the end and leave a response. Pinging is currently not allowed.
  46.  
  47.                         <?php } elseif (!('open' == $post-> comment_status) && !('open' == $post->ping_status)) {
  48.                             // Neither Comments, nor Pings are open ?>
  49.                             Both comments and pings are currently closed.
  50.  
  51.                         <?php } edit_post_link('Edit this entry','','.'); ?>
  52.  
  53.                     </small>
  54.                 </p>
  55.  
  56.             </div>
  57.         </div>
  58.  
  59.     <?php comments_template(); ?>
  60.  
  61.     <?php endwhile; else: ?>
  62.  
  63.         <p>Sorry, no posts matched your criteria.</p>
  64.  
  65. <?php endif; ?>
  66.  
  67.     </div>
  68.  
  69. <?php get_footer(); ?>

Now that's how your post will look like:

We have our game embedded!!!!

In the same way we are going to edit index.php (the file that handles the blog main page) located at the same path, find this line

PLAIN TEXT
PHP:
  1. <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>

and just after it add

PLAIN TEXT
PHP:
  1. <img src = "<?php echo get_post_meta($post->ID, "thumbnail_url", true); ?>">

to add the thumbnail near the title

You index.php now is coded this way:

PLAIN TEXT
PHP:
  1. <?php get_header(); ?>
  2.  
  3.     <div id="content" class="narrowcolumn">
  4.     <?php if (have_posts()) : ?>
  5.  
  6.         <?php while (have_posts()) : the_post(); ?>
  7.  
  8.             <div class="post" id="post-<?php the_ID(); ?>">
  9.                 <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
  10.                
  11.                 <img src = "<?php echo get_post_meta($post->ID, "thumbnail_url", true); ?>">
  12.  
  13.                 <small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small>
  14.  
  15.                 <div class="entry">
  16.                     <?php the_content('Read the rest of this entry &raquo;'); ?>
  17.                 </div>
  18.  
  19.                 <p class="postmetadata"><?php the_tags('Tags: ', ', ', '<br />'); ?> Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?>  <?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?></p>
  20.             </div>
  21.  
  22.         <?php endwhile; ?>
  23.  
  24.         <div class="navigation">
  25.             <div class="alignleft"><?php next_posts_link('&laquo; Older Entries') ?></div>
  26.             <div class="alignright"><?php previous_posts_link('Newer Entries &raquo;') ?></div>
  27.         </div>
  28.  
  29.     <?php else : ?>
  30.  
  31.         <h2 class="center">Not Found</h2>
  32.         <p class="center">Sorry, but you are looking for something that isn't here.</p>
  33.         <?php include (TEMPLATEPATH . "/searchform.php"); ?>
  34.  
  35.     <?php endif; ?>
  36.  
  37.     </div>
  38.  
  39. <?php get_sidebar(); ?>
  40.  
  41. <?php get_footer(); ?>

and looks this way:

So we ended having a game listed in the blog.

During next step, we'll automatically insert all 2000+ existing MochiAds games in the blog and check for new games every day.

Then, it's "just" a matter of playing with theme configuration and css and we'll have our WP arcade running!

Improve the blog rating this post
Tell me what do you think about this post. I'll write better and better entries.
1 Star2 Stars3 Stars4 Stars5 Stars (32 votes, average: 4.69 out of 5)
Loading ... Loading ...

» WordPress themes are designs for WordPress - one of the most popular blogging software nowadays.
You will be pleasantly surprised by WordPress Themes provided by Template Monster. All of them are of professional design and high quality.

24 Responses to “Creation of a Flash arcade site using WordPress - step 2”

  1. JDog on July 27th, 2008 3:21 pm

    Thats really realy good, but how do intend on making an income from this blog since wordpress doesn’t allow Google Adsense ? Infact that was the main reason I moved to Blogger.com. Your Emanuele, you know what your doing !!!

    keep up the good work, i’m intrigued !

  2. JustAnotherCommenter on July 27th, 2008 4:52 pm

    A blog hosted by Wordpress for free can’t have Adsense but you can download Wordpress and install it on your own hosting and have Adsense. Emanuele notes in the tutorial that you need to ‘download’ Wordpress and install it so I believe he is talking about putting it on his own hosting.

    I don’t know for sure but I don’t think you could have enough flexibility to truly utilise Wordpress as a flash arcade with Wordpress’ free hosting (or Blogger.com), due to the possible limitations on customisation and the limitations on the hosting side. Having full access to your site with paid hosting opens up a lot in the way of tracking and managing things. So I think it is pretty essential to have your own hosting for a flash arcade venture really which can become quite demanding if you really want substantial traffic and then having the ability to oversee things becomes essential (read the other post on this blog about managing server load with a Wordpress arcade for example). Plus with any sort of free hosting you’re pretty much at the whim of the free provider and don’t have as much room for complaint when everything goes down or is suspended for whatever reason. With Adsense, in-game ad revenue and anything else, the paid hosting should pay for itself after awhile. Or if it doesn’t then the site just needs to be promoted more.

    Anyway this is a great tutorial! Thanks so much for going into detail on things and providing screenshots. Looks like it’s surprisingly quick to get things rolling on a Wordpress arcade. I look forward to seeing how things go on the customisation side and other aspects. Good luck!

  3. comment on July 27th, 2008 8:31 pm

    instead of 2000 posted, your site goes down for stealing candystand game or other copyright-ations!

  4. Help! on July 27th, 2008 9:01 pm

    I dont see any custom fields

  5. Help! on July 27th, 2008 9:16 pm

    ok nvm…

  6. Kilroy on July 28th, 2008 1:38 am

    There is a gaming site called Fyrebug that uses Wordpress as the basis for it’s Flash Game site. Here’s an example of a page http://www.fyrebug.com/2008/07/23/obama-vs-america/ I checked the style sheet and it is definitely wordpress.

  7. FrozenHaddock on July 28th, 2008 4:31 am

    This.

    This is awesome.

  8. FrozenHaddock on July 28th, 2008 5:01 am

    I’ve got my second WP installation up and running, ready for part 3.

  9. km603 on July 28th, 2008 7:42 am

    Good Job, The tutorial is so detailed.

    Actually, I also turned my WP into a flash game site last month.

    http://www.cellkat.com/

    But i was too lazy to write out the full tutorial. XD

    Actually, you can use some plugin to make your life easier. (like adding custom fields)

  10. Stefano on July 28th, 2008 5:56 pm

    But this way you just “embed” the games in WP pages, you aren’t downloading games to your own server wich, if I understood right, is required to earn $$ from MochiAds…
    …or am I missing something?

    Stefano

  11. Emanuele Feronato on July 28th, 2008 6:01 pm

    You’re right stefano, anyway if you want to host your own games just insert in the swf_url value the path to games hosted on your server.

    Later I’ll make an option to download games and copy to your directory.

    Anyway, I think the best revenue will come from ads rather than 10% commission MochiAds gives to publishers.

  12. Gmcosta on July 30th, 2008 8:17 pm

    when the next steps goes live on the site ?
    Thanks!

  13. Makzan on July 31st, 2008 9:18 am

    Thank you Emanuele Feronato. I am looking forward to reading your step 3 tutorial. ^.^

  14. Tj on August 3rd, 2008 5:58 am

    Thanks for the tutorial. Can’t wait to learn how to auto feed these games.

  15. PPCInformer on August 5th, 2008 3:19 am

    Nice work mate , have to try this soon.

  16. Andrés on August 16th, 2008 7:24 am

    Los invito a visitar mi sitio web de juegos hecho totalmente en wordpress: http://www.juegosflash.cl

  17. danny on August 17th, 2008 3:23 pm

    i can’t find were it says custom fields, can someone link me to a screen shot or something?

  18. autoverleih on August 20th, 2008 10:30 am

    Thanks to the article, Now there is more reason to comment than ever before!

  19. Bob on August 22nd, 2008 9:57 pm

    Dude I don’t know how to say thanks!
    my English is not good to say something better than that.
    just A REALLY BIG THANKS!!

  20. Nas 4 Games on October 5th, 2008 7:39 pm

    thx man for the tutorial

  21. The Big Cheese on November 19th, 2008 4:59 am

    I’ve definitely got to put an arcade on my blog, it’s awesome!

  22. Rake girl on December 18th, 2008 8:12 pm

    EXC!! thanks for sharing that tutorial..i definitely will put an arcade on my blog site..
    jan

Leave a Reply




Trackbacks

  1. Creation of a Flash arcade site using WordPress - step 3 : Emanuele Feronato on August 7th, 2008 8:16 pm

    [...] Before starting, I made some changes to the way of inserting posts described in part 2. [...]

  2. Hacer un sitio de juegos con WordPress | Ayuda WordPress on December 14th, 2008 11:21 am

    [...] que ha elaborado Emanuele Feronato en el que explica paso a paso, con códigos y capturas, como crear un sitio especializado en juegos Arcade en Flash con WordPress. El proceso requiere de campos personalizados, configuración de categorías e inclusión del [...]

Posts