Turn your wordpress blog into a games arcade!
This beta version WordPress plugin, WP Games Embed, makes it easy to embed games into your WordPress blog by using shortcodes in your posts and pages. WP Games Embed is intended to be able to support content offered by the various free games sites out there using the codes or downloads they provide.
FEATURES
4 Different views:
- Grid view - a grid of thumbnail images linking to each game (can be restricted to a single category or parent category)
- Category view - this view includes a medium sized image and a written description of the game
- Single page view - the page where you play the game itself
- Featured Game view - this view is similar to category view, but allows you to pick the games yourself to create your own 'Featured Games' page.
Different embedding modes:
- iFrame embedding - embed iFrame content using code provided by free games sites, or use this method to display games from your own server where an html file has been provided with the free game download.
- Flash embedding - embed Flash content using embed codes provided by other sites, or embed flash games directly from your own site. You can even upload them easily using the wordpress 'Add Media' tool.
WORKING EXAMPLE
Visit Zap Gamez Arcade to see an example of the plugin in action.
INSTALLATION
- Download the plugin from the link at the bottom of this page
- Upload the wp-games-embed.php file to your wp-content/plugins folder.
- Activate the plugin from the Plugins page in WordPress.
USAGE
Use shortcodes to embed games into your posts, or to create a grid of thumbnails on a page or your home page.
Embedding a game in a post:
Shortcode: [game /]
Additional attributes:
- width - the width of the game
- height - the height of the game
- src - the url of the game (html file for iframe embedding, swf file for flash embedding)
- flash - if set to true flash embedding will be used, if set to false iframe embedding will be used. (default=false)
- thumb - the url of the thumbnail image (70px x 60px)
- main - the url of the large image (appx 300px wide)
- title - the name of the game!
- description - your description including controls etc.
- featured - whether this should be formatted as a featured game. (default=false)
- game_url - only to be used in Featured mode (when featured is set to true). See the shortcode examples below for more details.
Shortcode Example 1 (embedding game as iFrame):
[game width="640" height="480" src="http://www.example.com/games/pacman.html" thumb="http://www.mysite.com/images/pacman-small.jpg" main="http://www.mysite.com/images/pacman-medium.jpg" title="PacMan" description="This is a great game! Use the arrow keys to play." flash="false"/]
Shortcode Example 2 (embedding game as Flash):
[game width="640" height="480" src="http://www.mysite.com/games/pacman.swf" thumb="http://www.mysite.com/images/pacman-small.jpg" main="http://www.mysite.com/images/pacman-medium.jpg" title="PacMan" description="This is a great game! Use the arrow keys to play." flash="true"/]
Creating a grid of thumbnails on a page:
Shortcode: [get_latest_games /]
Additional attributes: list_category - the category id for the games you want to appear in the list.
The list_category attribute makes it possible to display the latest games under a certain category e.g. 'Arcade' or the latest games under all categories. Simply set up a main category called 'games' and then create all your games categories (action,adventure,sports, etc.) as sub-categories.
Shortcode Example 3 (thumbnail grid):
[get_latest_games list_category="2" /]
Creating a Featured Games page:
Shortcode: [game /]
Additional atrtributes: (see above)
The important attributes for creating a features games list are 'featured' which should be set to true, and 'game_url' the url where the game can be played on your site.
Shortcode Example 4 (featured games):
[game main="http://www.myblog.com/uploads/pacman-medium.jpg" title="PacMan" description="This is a great game! Use the arrow keys to play." featured="true" game_url= "http://www.myblog.com/games/pacman/" /]
[game main="http://www.myblog.com/uploads/donkeykong-medium.jpg" title="Donkey Kong" description="This is a great game! Use the arrow keys to play." featured="true" game_url= "http://www.myblog.com/games/donkey-kong/" /]
DOWNLOAD THE PLUGIN
Hi this is a great tutorial. I’m currently using nextgen gallery but want to try your gallery on my sister’s blog…so using the built in image features of WP seem to be the best solution. What you have here should be perfect for her. Great job. One question, If I wanted to have the images themselves link to the next image…how wold i do that?
hay that’s the cool one,but how to create thumbnail picture in random,place in sidebar or in home page header,thaks b4
This worked perfectly for me … except, for some reason I can’t get the image captions to display. Any thoughts why they might not be coming in?
Wonderful Tutorial, at last I found it, I am going to try this in my blog.
Great Going
Thank you for this tutorial, it helped me immensely.
First let me say, I am an experienced computer/internet user, however my developer side is still just an apprentice. But as a user, the second I saw white and other colored text on black background, I closed it and went on. I decided to come back and let you know because I’m sure I’m no the only one who’s done so. You might want to see what other developers think and if this technique is advisable. At least my eyes are hurting right now. Peace.
Hi, excellent function to output the all thumbnails to attachments.php Would be amazely cool to adapting it to single.php. Is there any way to output all thumbnails the same way for single.php?
Very helpful. Thank you!
Helpful stuff, exactly what I needed!
Hi, nice tuto ! I just want to say I think the function array_navigate / prev_att_link / next_att_link could be done with one line of code ! See the wordpress function : wp_link_pages(); (http://codex.wordpress.org/Function_Reference/wp_link_pages) and to see an exemple you can look the code of the attachment.php twentyten wordpress theme.
Sorry, it’s not wp_link_pages () but previous_image_link(false) and next_image_link () with false option to insert the title : http://codex.wordpress.org/Function_Reference/previous_image_link
This tutorial is good. But it difficult to read because of the page color. Font size if too small. As a web developer I Suggest you to make your template white color. and big font size.
When I split an article into 2 column the first row of the second column start one line bottom.
How can I prevent this?
Thank you. I appreciate your job and I’ll use it when this “bug” will be take off.
Great work!
Thanks manos! Taking the two leading spaced off the end of the functions.php file worked great. Thanks!
Thanks for the thumbnail function! Works great!!!
The selecting of text with your particular color scheme is hard to see though!
Excellent work =)