Wordpress Tips

How to connect WordPress and Flash – part #1

Feeleep on Jun 23, 2009

Tags: dynamic content, how-to, wordpress flash

There’s quite easy way to connect WordPress and Flash. I’m talking about pulling dynamic content to Flash, the way you insert swf to your site is just another story. In both cases you’ll need swfobject.js in order to follow standards-friendly method of embedding Flash. I have never tried to use any of WordPress available plugins, somehow I rather include it manually, so at this point I’m not sure whether it’ll work with plugin. I guess it should.

What’s the purpose of embeded Flash file?

Are you about to replace standard, HTML navigation with Flashed one? Do you want to make some recent posts slider in sidebar? Maybe some cool tag cloud in footer? Flash can be added whenever you like and do whatever you like. The most important fact about Flash is that it’s capable to load and process XML and that’s exactly how we are about to exchange data between WordPress and Flash. Once the data has been loaded into Flash options to display it on some non-standard and interesting way are endless.

Our task: Create latest Posts list

For the demonstration purpose we are about to generate the list of latest Posts and send it to embeded Flash file. Each list item will have a title, post date, number of comments, thumbnail image (if any), post category and a link back to post details.

Preparing backend file

Let’s create and save in our theme’s folder new file called ‘flash_recent.php’. I don’t know which theme you are using but it doesn’t matter in deed, it’ll work with any properly activated WordPress theme. Our new file should be able to connect to database and get required information. In the same time we’ll output results in standard XML format readable to Flash.



<?php

 // get connected
  require_once( '../../../wp-config.php' );


 // variables
  $xml = "";
  $num_of_posts_to_display = 5;


 // query posts
  query_posts( 'showposts=' . $num_of_posts_to_display . '&post_type=post&post_status=publish&order=DESC' );


 if( have_posts() ) : while( have_posts() ) : the_post();
  // category ID
  $category = get_the_category();
  // get first thumbnail path
  preg_match_all( '|<img.*?src=[\'"](.*?)[\'"].*?>|i', $post->post_content, $m );
  // format XML
  $xml .= '<item>';
  $xml .= '<title>' . $post->post_title . '</title>';
  $xml .= '<postlink>' . get_permalink() . '</postlink>';
  if( $m[ 1 ] ) $xml .= '<image>' . $m[ 1 ][ 0 ] . '</image>';
  $xml .= '<category>' . $category[ 0 ]->cat_name . '</category>';
  $xml .= '<catid>' . bloginfo( 'home' ) . '?cat=' . $category[ 0 ]->cat_ID . '</catid>';
  $xml .= '<date>' . date( 'M j, Y', strtotime( $post->post_date ) ) . '</date>';
  $xml .= '<comments>' . $post->comment_count . '</comments>';
  $xml .= '<excerpt>' . get_the_excerpt() . '</excerpt>';
  $xml .= '</item>';
  endwhile; endif;


 // output results
  echo $xml;


?>

In order to check whether an output is OK you should type in Browser’s address bar full path to ‘flash_recent.php’ file. For eample: http://yourdomain.com/wp-content/themes/some_themeName/flash_recent.php.

What next?

Well, next time we gonna learn how Flash can handle parsed XML. I bet many of you already know how but for the sake of those who doesn’t – expect to find an answer in part#2 of this tutorial.

Share with others...

Comments (10)

Track comments via RSS 2.0 feed. Feel free to post the comment, or trackback from your web site.

Kepler Fontenele on Jun 25, 2009
Tks for the post.
Looking forward to see the part 2 of this tutorial

Cheers.
Kepler Fontenele on Jun 27, 2009
Tks that is the answer for my on question

change the line

// query posts
query_posts( ‘cat=4&showposts=’ . $num_of_posts_to_display . ‘&post_type=post&post_status=publish&order=DESC$’ );
jlo on Jul 7, 2009
any chance of getting a part 2 of how to add this info into flash as well as a adding the first 2 lines of body text for each post? i am new to xml / php working with flash so it is not that intuitive for me. thanks
Connect WordPress and Flash on Jul 9, 2009
[...] how-to, wordpress flash 0 Finally, part 2 of this tutorial is here. Part 1 can be seen HERE. There you can find out how to prepare and format data for Flash and now we are about to do [...]
Timo on Nov 1, 2009
I don’t know anything about PHP.

Could you tell me how to display all the posts? So how do I set the ‘$num_of_posts_to_display’ to all posts instead of 5?

And is it possible to show the post ID in the xml?
Feeleep on Nov 1, 2009
I guess you should replace number 5 with -1 and all the posts will be pulled from database. If you want to read more about ‘query_posts()’ function please refer to http://codex.wordpress.org/Template_Tags/query_posts. Hopefully it helps!
Timo on Nov 2, 2009
At the moment I fixed it. Well I actually substring it in flash to get rid of it. So the xml mark up is correct for flash.

But do you know where it comes from?
rumi on Nov 20, 2009
thanks…best lesson!
jon on Mar 5, 2010
Any examples of this in action? a demo website or something?
Feeleep on Mar 6, 2010
Yes, have a look:

http://themeforest.net/item/sofa-designer-folio/30472

or

http://themeforest.net/item/sofa-designercorner/33817