Build 10 games and learn game development along the way in this fast paced game development course

Get the source code of 12 commercial games, loaded 50+ million times, and learn the secrets of game design

Learn how to make a successful Flash game from a real world example. Fully commented source code

Create realistic Flash physics games from scratch with advanced features, from Angry Birds to Crush the Castle

Creation of a Flash arcade site using WordPress – step 2

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:

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

and just after it write

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

Your single.php file now will look like this:

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

and just after it add

to add the thumbnail near the title

You index.php now is coded this way:

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!

Rate this post: 1 Star2 Stars3 Stars4 Stars5 Stars (43 votes, average: 4.65 out of 5)
Loading ... Loading ...
Learn how to make a successful commercial Flash game from a real world example: get the fully commented source code of Globez, a Flash game played millions of times which generated a four figure income. Limited copies available.

Get it now
Be my fan on Facebook and follow me on Twitter! Exclusive content for my Facebook fans and Twitter followers

This post has 53 comments

  1. JDog

    on July 27, 2008 at 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 27, 2008 at 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 27, 2008 at 8:31 pm

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

  4. Help!

    on July 27, 2008 at 9:01 pm

    I dont see any custom fields

  5. Help!

    on July 27, 2008 at 9:16 pm

    ok nvm…

  6. Kilroy

    on July 28, 2008 at 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 28, 2008 at 4:31 am

    This.

    This is awesome.

  8. FrozenHaddock

    on July 28, 2008 at 5:01 am

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

  9. km603

    on July 28, 2008 at 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 28, 2008 at 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 28, 2008 at 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 30, 2008 at 8:17 pm

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

  13. Makzan

    on July 31, 2008 at 9:18 am

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

  14. Tj

    on August 3, 2008 at 5:58 am

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

  15. PPCInformer

    on August 5, 2008 at 3:19 am

    Nice work mate , have to try this soon.

  16. Creation of a Flash arcade site using WordPress - step 3 : Emanuele Feronato

    on August 7, 2008 at 8:16 pm

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

  17. Andrés

    on August 16, 2008 at 7:24 am

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

  18. danny

    on August 17, 2008 at 3:23 pm

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

  19. autoverleih

    on August 20, 2008 at 10:30 am

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

  20. Bob

    on August 22, 2008 at 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!!

  21. Nas 4 Games

    on October 5, 2008 at 7:39 pm

    thx man for the tutorial

  22. The Big Cheese

    on November 19, 2008 at 4:59 am

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

  23. Hacer un sitio de juegos con WordPress | Ayuda WordPress

    on December 14, 2008 at 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 […]

  24. Rake girl

    on December 18, 2008 at 8:12 pm

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

  25. emanuel mocean

    on January 29, 2009 at 7:14 pm

    Big thanks from my part too .

    but I have a small problem.
    The game I used for this tutorial happened to have a width of 800 and got out of screen .Any ideas ?

  26. Games Arcade Website powered by WordPress | Sam Burdge

    on February 28, 2009 at 6:05 pm

    […] Creation of a Flash arcade site using WordPress […]

  27. Google Maps, Buscador de Numeros Celulares

    on March 22, 2009 at 12:27 am

    […] Creation of a Flash arcade site using WordPress – step 2 … […]

  28. WordPress Tips for 7/27 @ Tadus

    on May 4, 2009 at 7:26 am

    […] Create a Flash Arcade site using WordPress: This set of instructions will help you convert a simple WordPress blog into a Flash arcade site. Pretty cool with detailed instructions on the transition. […]

  29. Tony

    on May 31, 2009 at 9:38 am

    This is a great resource. Creating a flash arcade website with WordPress looks like a good way to go. Alternatively, a great resource you can goto is http://www.8hourArcade.com/ . This tutorial will walk you through creating an arcade flash game website using PHP Arcade Script in a short 8 hour day. It is a very thorough site. They talk about setting up your server, installing your arcade, and promoting your arcade.

    Great stuff.

  30. Ken

    on August 4, 2009 at 11:58 am

    I am thinking of switching to WordPress for my flash arcade, after reading your inspiring walk-through, great post!

  31. k?z oyunlar?

    on October 4, 2009 at 7:56 pm

    thank you for games

  32. Robert Craig

    on December 17, 2009 at 9:46 pm

    OK I have played with this for a few days now and am really happy with the results so far.

    Do you have a plugin for the highscores? Can you share how you pulled them in to keep a table?

    thanks for an awesome plugin!

  33. Frank

    on January 9, 2010 at 4:11 am

    Great detail. Thanks for the great step by step setup. Thanks. Had a site up in running in a few hours including tweaking the site with extra security.

  34. justgaming

    on March 13, 2010 at 6:07 am

    I have 2 of my sites with this template running now. Thanks. It has been a lot of fun doing the setup.

  35. idic

    on March 14, 2010 at 4:14 pm

    Looks like this site is also based on wordpress: http://highscoregaming.net
    And they are usin mochi media games.
    Cheers idic

  36. moinca

    on April 26, 2010 at 8:38 am

    Nice tutorial! I have my wp flash game site now:D, http://www.0000park.com,thanks a lot.

  37. Aurora Designs

    on June 4, 2010 at 11:46 pm

    woo hoo im all exited now with wordpress.

  38. MMORPG Liste

    on June 30, 2010 at 5:47 pm

    Great article you have. I was looking at a site today that can help me creating flash arcade games on my wordpress blog. I want to add games, and I found your tutorial. Excellent article you have. Thank you for sharing this info.

  39. arieff

    on July 20, 2010 at 3:35 am

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

  40. Ricky Davis

    on July 29, 2010 at 5:53 am

    This looks fun. I havent really tried installing a game on my wordpress blogs but I`ll give this a shot. Really, it seems cool. Thanks for the tip!

  41. Frogger Games

    on August 6, 2010 at 12:39 am

    It’s much easier to embed swf files and games on the newer versions of WordPress. As long as you’ve saved your .swf file somewhere on your HD, you can start a new post, click insert media, pull up the swf file and boom, you’ve got a shock wave flash game right in a post. No code involved whatsoever.

  42. Jackie

    on August 26, 2010 at 2:21 pm

    The instructions are so simple and easy to understand. thanks for the article

  43. WPArcade

    on September 18, 2010 at 10:09 pm

    Very nice and very clear instructions. Thx

  44. Necesito un loader para juegos

    on January 28, 2011 at 6:49 pm

    […] XD. Y no es nada dificil, yo segui este tutorial y la pagina me quedo muy bien. Revisalo. Creation of a Flash arcade site using WordPress – step 2 – Emanuele Feronato Responder Citando   + Responder al Tema « Tema Anterior | […]

  45. Hanjans

    on April 23, 2011 at 7:18 am

    Warning: array_keys() [function.array-keys]: The first argument should be an array in /home/triqui/public_html/emanueleferonato.com/wp-content/plugins/wp-syntax/geshi/geshi.php on line 2020

  46. hasan

    on October 22, 2011 at 2:48 pm

    very nice thanks !!!

  47. zac efron

    on January 3, 2012 at 4:10 am

    Great article, there seems to be a lot of errors at the top of the article tho.

  48. new apple iphone 5

    on January 9, 2012 at 10:07 am

    Great article, there seems to be a lot of errors at the top of the article tho.

  49. Chemical change of matter

    on February 21, 2012 at 4:55 pm

    Awesome topic bro for my flash site , thx a bunch

  50. mbc3 gmaes

    on July 27, 2012 at 2:12 am

    thank u sir
    i will try

  51. sunny Tewathia

    on January 2, 2013 at 1:35 pm

    I gonna create my first flash game website through this way. Thnks

  52. online games

    on April 19, 2013 at 9:22 am

    Nice topic to craete flash game. Now, i can have mine too.

  53. Y8

    on December 3, 2013 at 12:06 pm

    Thanks for detailed manual.

Thank you for the download!!

I hope you will find it useful and make something interesting out of it

To keep up to date with the blog, why don't you like my Facebook page and follow me on Twitter?

Want to learn more? Don't miss this:

Learn how to make a successful commercial Flash game from a real world example: get the fully commented source code of Globez, a Flash game played millions of times which generated a four figure income. Limited copies available.

Get it now

×