Book Image

WordPress and Flash 10x Cookbook

Book Image

WordPress and Flash 10x Cookbook

Overview of this book

WordPress is much more than just a blogging platform now. This flexible CMS is the power behind millions of URLs, including blue-chip companies, small business, and personal websites. Flash is a world-famous multimedia platform. This book will show you the best of the proven and popular strategies and techniques to deliver rich multimedia content, which will let you sail through the world of Flashy Wordpress with ease.This book will take you through clear well-formed and comprehensive recipes, through the most essential and useful Flash multimedia tools for Wordpress available today including plugins for images, audio and video, as well as projects you can do yourself in Flash. It helps you to create a Wordpress website full of Flash content. We show the big picture by providing context, best practices and strategies. Detailed instructions are provided for each section. This book provides you with the shortlist of the most essential Flash tools for creating a dynamic and media-rich website or blog, and shows you how to implement these on your site. The sections on Flash are intended to give you the option to create custom .swf files, giving you an alternative to plugins that already exist. The book will show you how to configure Flash content in your WordPress site/blog for maximum SEO, introduce Flash content to your Wordpress with and without plugins, import image feeds, use lightbox effects, and much more.
Table of Contents (17 chapters)
Wordpress and Flash 10x Cookbook
About the Authors
About the Reviewers
WordPress Resources
Flash Resources

Chapter 1. Leveraging Flash in WordPress

In order to set up the self-hosted version of WordPress (WP), you need a host that supports PHP (v.4.3+) and MySQL (v. 4.1.2+). If you want to set up multiple WordPress installations (or use other database-driven software), you will probably want a host that offers multiple MySQL databases.


We suggest a Linux-based (Apache) server. Make sure you get enough storage—at least 1GB. Additional utilities that are helpful for WordPress-based sites include PHPMyAdmin (for working with your database) and SimpleScripts (for installing and updating WordPress).

In this chapter, we will cover:

  • Developing a strategy with Flash and WordPress

  • Embedding a .swf: via Kimili plugin

  • Adding Flash detection with SWFObject 2.0 and embedding the .swf

  • Adding Flash detection with Flash-generated JavaScript and embedding the .swf

Developing a strategy to use Flash & WordPress

Identify your user level and a specific application. Develop an SEO strategy. Determine what files need to be configured and modified to achieve your goals.

Getting ready

There are an unlimited number of ways to use WordPress and Flash together. The needs, ideas, and abilities of no two users will be the same. The limits are determined by you—by your skill level and the goals you set.

The first step is to identify your level of familiarity with the Web and Multimedia design software. Be honest in your self-assessment—and don't be discouraged, no matter where you are starting today. Understanding your user level allows you to set reasonable expectations. Take a look at the following figures to understand your user level. With practice and experience, by accessing the many free resources available online and through training tools (such as this manual), you will increase your level of proficiency.

You may be a new blogger, or may have been blogging for years. You may be an admin user supporting a team using WP for business or organizational needs, a theme designer, or a plugin developer. This book is written with you in mind, assuming that you are familiar with WP basics, or are willing to become so.

How to do it...

Flash takes care of your dynamic media needs, and WordPress makes it easy to administrate your site. The way to use them together is with SEO in mind.

In terms of density of information presented to a search engine, Flash is not as effective as XHTML, in spite of recent advances. A Flash animation can have a description tag, however, properly marked up XHTML that uses<h1> and<h2> to emphasize keywords and phrases, as well as including links to and from authoritative sources, will still have more SEO value when compared to a .swf.

Many industries and audiences expect or require Flash animations. Your marketing and SEO strategy should determine how you mix WordPress and Flash. The goal is content that people can read and enjoy that is also understood by engines and robots. For those of us who administer or develop websites, ease of use is also a consideration.

How it works...

In your design, when blocking in space for animations, consider how they are both dynamic and static. An animation does what it does, however lovely it is, and nothing more. Once a user has seen the animation, there is often no reason to pay attention to it again. WordPress offers dynamic content—areas of the page that highlight and excerpt the most recent content from different areas. This encourages users to revisit and explore your site for new content and to pay special attention to dynamic content areas. While an animation measures change in frames per second, WordPress allows your users to measure the changes made since their last visit. In this sense, Web 2.0 represents a true change in technology—transforming the screen itself into an animation that you program—simply by publishing new content.

So, some Flash is almost always fine. But too much Flash is less useful to search engines, relative to XHTML. Additionally, Flash animations generally take more time to update than regular WordPress content.

There's more...

There are other ideas about how to combine Flash and WordPress, which we will touch on in later and more advanced chapters. Our approach should be applicable to the majority of users.

Where to place the .swf?

Flash media can be included anywhere in a WordPress theme: in the header, in a post or a page, in a sidebar, or in the footer. It takes some time to become familiar with your theme files—determining which PHP templates are called when different parts of the screen are clicked. An overview of how WordPress works is useful.

A theme has at least three views, which represent the steps to a given piece of information, moving from home page to a category to a post.

A WordPress home page is traditionally a dynamic display of updates from interior sections (like a dashboard). It can also be a static page. It's often named index.php or home.php.

The category archive view is a dynamic display of the posts in a category. It sounds complicated, but it is logical. When a user clicks on a category, not one piece of information is returned, but many. This template is called category.php.

The archive view is so named because, though this piece of information may be featured in other parts of the site, the user has now arrived at the URL for an individual post. The URL can be used in links or bookmarks to refer back to this specific piece of information. Typically, the format is a long-reading pane.

page.php, sidebar.php, header.php, and footer.php work just like you'd think.

Edit and debug with Firebug

Knowing which PHP templates create pages on your blog is the first step to inserting a Flash animation directly into theme files. The next step is to determine specifically which<div> will contain the animation. Firebug helps us match up the correct<div> tag with the correct PHP template.

Get Firebug here:

Firebug is an add-on for Mozilla Firefox. This handy tool allows you to see the CSS and XHTML that make up any page by context-clicking (right-click in Windows or Ctrl-click for Mac) and choosing "Inspect Element." The window splits at the bottom. Bring your mouse down to the bottom-left pane. Hovering over a<div> tag causes the screen to be highlighted: blue for<div> width and height, purple for margins, and yellow for padding. Clicking on the blue <div> tag loads the bottom-right pane with entries from the CSS stylesheet that control its appearance. It is helpful to have such a visual representation to understand the structure of a site.


Viewing the source (PC: Ctrl-U/Mac: Cmd-Opt-U) of a WordPress blog can be a confusing experience. Keep in mind that the XHTML output is different than the component PHP. Your templates are not what you see when you "View Source"—rather, you are seeing the result of dynamic PHP calls as XHTML, styled according to CSS. This is what makes WordPress dynamic—there are no webpages. There are only PHP templates waiting to output your website, recreated each time as the most recent content.

Additional utilities

There are additional utilities we will be using throughout this book; a FTP client and a text editor are required for intermediate to advanced applications. Dreamweaver is an excellent tool for coding, if you have it. A fast running stand-alone text editor specific to coding has its own merits. Here are open-source utilities for Mac and for PC:

FTP Client: FileZilla,

Text Editor: Windows comes with Notepad and Mac has TextEdit, but these text editors are not set up to code for the Web. A text editor for coding gives you access to many additional tools and options, such as line numbers, keyboard shortcuts, and auto-formatting.

See also