Adding Top Frame to Allow Switching Between Demo Sites

**paraditutorials** · Jul 3, 2009 14:54

I'm a self taught web designer and I've come to the point where I need to learn something new: Frames. I'm starting to sell wordpress themes and I need to create a Frame that will allow users to switch between demo themes they would like to view and possibly purchase. A great example of this can be found here: woothemes.com/demo/?t=35

Now I looked up a tutorial to explain everything and even viewed some source code (shown below).

Code HTML4Strict:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 
<head>
<title>Presto Themes Demo</title>
<link rel="Shortcut Icon" href="http://.../images/favicon.ico" type="image/x-icon" /> 
<meta name="description" content="Presto Themes Demo" />
<meta name="keywords" content="prestothemes, themes, wordpress" />
</head>
 
<frameset rows="36,*" frameborder="0" border="0" framespacing="0">
    <frame src="/...php/" name="switcher" scrolling="no" noresize>
	<frame src="UntitledFrame-1" name="main" scrolling="auto" noresize>
</frameset>
 
<noframes>
      <p>Sorry, your current browser does not support frames!</p>
</noframes>	
 
</html>

My question is this: How do I set this up and where do I store the file with the above code?

First off, I will be making a new Wordpress Install for each theme and uploading them to the following addresses:

mysite.com/demo/news
mysite.com/demo/music etc

So I'm guessing in the code supplied above, I will need to have some index.php or something for the "Frame Source" that will generate the top bar drop down menus for switching? Where will I store this file in my directory?

**AlexDawson** · Jul 3, 2009 16:51

paraditutorials, Do yourself a favor and go as far away from frames as possible, not only are they deprecated (the W3C - people behind HTML have essentially outlawed its use) it causes a heck of a lot of accessibility and usability issues and all in all, damages your website. Using frames used to be popular in the 90's but using them today is an extremly bad move which will make you seem unprofessional as a result. (Sorry this sounds so harsh but using frames is pretty much a capital sin amongst developers and designers these days).

**Black Max** · Jul 3, 2009 19:35

Agreed. The same goes for iframes, though there are those who still like them.

You might be tempted to do popups instead. Don't.

I'd do separate pages and let users switch back and forth with appropriate breadcrumb links or whatever before I'd do a framed setup.

**paraditutorials** · Jul 3, 2009 21:32

Wow, at first I was like "OK guys" i get the point, haha, but thanks for warning me. I think I learned my lesson quick on that one!

How about this idea then:

At the top of each demo theme, I simply use HTML/CSS to style my own "theme switcher" top bar with my logo and all and have a drop down selection to switch between themes? Each demo theme will be interlinked and each theme will have the same HTML/CSS at the top. I think that will work just fine.

The only problem with this approach is that the user will always have to scroll back to the top to select a new theme, as it won't stay on 'top' in the frame as they scroll down.

**bluedreamer** · Jul 4, 2009 03:44

Originally Posted by paraditutorials

At the top of each demo theme, I simply use HTML/CSS to style my own "theme switcher" top bar with my logo and all and have a drop down selection to switch between themes? Each demo theme will be interlinked and each theme will have the same HTML/CSS at the top. I think that will work just fine.

The only problem with this approach is that the user will always have to scroll back to the top to select a new theme, as it won't stay on 'top' in the frame as they scroll down.

A select box would be a perfect solution.

Yes people would normally have to scroll back to the top of the page to chnage the demo but there are a couple of possibilities;

1. Add a second select box in the footer
2. Make the "top bar" containing the select box static so it's in view all the time

**paraditutorials** · Jul 4, 2009 06:24

1. Add a second select box in the footer
2. Make the "top bar" containing the select box static so it's in view all the time

Brilliant. I think that will most definitely work. I was thinking last night though, if I set this up on my first demo theme and then a month later release my second theme, I will have to log into the first demo theme to add the links to the second theme and then log into the second demo to add all the links to the first demo theme. So the more themes I add, I have to always update every single demo theme to make sure they have all the new links.

Is there a way to have every demo theme point to 'one' file that I can update somewhere on my server just once?

User Tag List

Thread: Adding Top Frame to Allow Switching Between Demo Sites

Thread Tools

Display

Adding Top Frame to Allow Switching Between Demo Sites

Bookmarks

Bookmarks

Posting Permissions