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!

  • 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 !

  • JustAnotherCommenter

    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!

  • comment

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

  • Help!

    I dont see any custom fields

  • Help!

    ok nvm…

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

  • This.

    This is awesome.

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

  • 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)

  • 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

  • Emanuele Feronato

    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.

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

  • Makzan

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

  • Tj

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

  • Nice work mate , have to try this soon.

  • Pingback: Creation of a Flash arcade site using WordPress - step 3 : Emanuele Feronato()

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

  • danny

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

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

  • Bob

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

  • thx man for the tutorial

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

  • Pingback: Hacer un sitio de juegos con WordPress | Ayuda WordPress()

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

  • emanuel mocean

    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 ?

  • Pingback: Games Arcade Website powered by WordPress | Sam Burdge()

  • Pingback: Google Maps, Buscador de Numeros Celulares()

  • Pingback: WordPress Tips for 7/27 @ Tadus()

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

  • Ken

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

  • thank you for games

  • 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!

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

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

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

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

  • woo hoo im all exited now with wordpress.

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

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

  • 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!

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

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

  • Very nice and very clear instructions. Thx

  • Pingback: Necesito un loader para juegos()

  • 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

  • very nice thanks !!!

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

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

  • Awesome topic bro for my flash site , thx a bunch

  • thank u sir
    i will try

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

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

  • Y8

    Thanks for detailed manual.