How to Create WordPress Themes for a Wii - ChimpSimple Version

How To Create a WordPress Theme for Wii Browsers

Chris Finke has put together a nice WordPress theme that will display on a Wii as well.  I like his theme but I need a theme for a Kid’s Video site so I modified the code to fit my theme.

Here is the original post on how to modify a WordPress theme for the Wii. 

I didn’t understand all the steps so I documented them so just about anyone can understand them.

Download the Green Code theme as your base theme for creating the new WordPress Wii theme.

I have adapted this to a theme I made for the Wii Kids TV site.  This site has YouTube kid’s videos that can be watched on the Wii console.

So people would ask “Why would you do this?”

Because I didn’t want my 3 and 5 year old watch YouTube videos on my development server!  Not with Admin enabled at least …

So I made them a WordPress website that they can watch on their Wii console and I can keep on coding and developing portals … :))

Theme Demo
Wii Kids TV - PC version
Wii Kids TV - Wii version

Check it out and let me know what you think.

Remember:  Make a backup of the files/folder before you start making changes. 
It will save you a lot of time if you remove the wrong commands!

Steps to Create Your Own Wii WordPress Theme
Start with the Greencode theme and modify it to fit your theme.

1.  Copy the wii-style.css and print-stle.css (optional) from the Green Code folder to your theme folder.

2.  Copy the /images/wii.gif from the Green Code theme into your theme’s /images folder.

3.  Modify the header.php file in your theme’s folder.  Add the following code to the section:

if (isset($_REQUEST["wii"]) || (strpos($_SERVER['HTTP_USER_AGENT'], “Wii;”) !== false)){ ?>            /wii-style.css” type=”text/css” media=”screen” />                    } else {    ?>            ” type=”text/css” media=”screen” />            /print-style.css” type=”text/css” media=”print” />        } ?>  

This command checks the user agent and then decides which CSS page to display.  Here is the basic format of the script:


if (strpos($_SERVER['HTTP_USER_AGENT'], “Wii;”) !== false){
[... wii stylesheet ...]
} else {
[... regular stylesheets ...]
}

4.  Modify the wii-style.css file to exclude sections of the page you don’t want to display in the Wii version.  The most important line is line 75:

#shadow, #header, #sidebar, #respond, #commentform, #comments  { display: none; }

This line tells the broswer to EXCLUDE these section from displaying on the Wii.  You will need to modify this line to fit the sections in your theme.

Open your style.css file for your theme and find the sections you don’t want to display and then add the names to the command above.

If you aren’t very good at CSS like I am then make changes to the wii-style.css file and upload the file to your theme’s folder. 

Next load the web page in your browser and see what disappears from the page.  Remember use the “?wii=1” on the end of the URL.

After a few tries you will see what is being removed from displaying.

5.  Save the files and upload them to your theme’s folder.

That’s it!  Now try it on one of your themes for fun.