ThemeFrame has an ever growing amount of inline documentation and the online forums, a more dynamic and interactive way of exchanging questions and answers, tutorials and useful bits of information. The ThemeFrame support is community based with currently 3 admins and over 1,000 Beta users.
- A Windows (XP/Vista/7) or MAC (Mac OS X) computer
- Safari, Firefox or Chrome. This is not related to the browser compatibility of created themes. Those work in IE, too, of course.
- A sufficiently wide monitor, min. 1280 px., 1440+ recommended.
Before you can run ThemeFrame, you’ll need to install ONE (any) of these free local web server environments first:
ThemeFrame will run inside a browser window, and on top of one of the aforementioned local web server environments. It’s like running a web site on your desktop computer. Wamp/Xampp/Mamp/EasyPHP are also very useful for testing WordPress itself, WordPress themes (TF-created ones or other ones) and WordPress plugins on your local computer before going “on air” with them on your web hosting account. So while this requirement for ThemeFrame (having to install & run a local web server environment) might seem like a nuisance at first glance, it is actually a good thing to have for both web site owners and developers and something you would probably have installed anyway at some point. Wamp, Mamp, Xampp and EasyPHP are also easy to install.
- Download and install Wamp, Xampp, Mamp or EasyPHP
- Download and extract the ThemeFrame ZIP file.
- Put the extracted ThemeFrame directory /themeframeRC4/ (or similar name depending on ThemeFrame version) into the appropriate folder of the installed Wamp, Xampp, Mamp or EasyPHP
Place the extracted /themeframeRC4/ (or similarly named) folder inside the web folder of Wamp, Xampp, Mamp or EasyPHP, like this: Wampserver Xampp Mamp Windows C:\wamp\www\themeframeRC4 C:\xampp\htdocs\themeframeRC4 Mac OS X Applications/XAMPP/xamppfiles/htdocs/themeframeRC4 Applications/MAMP/htdocs/themeframeRC4
- MAC Users only: Open the file
Applications/MAMP/conf/php5.3/php.ini(MAMP users) or
Applications/XAMPP/etc/php.ini(Xampp users) with a text editor (i.e. “TextEdit”), scroll to the bottom of the file, add the following code and save and close the file:
magic_quotes_gpc = Off(This extra step for Mac users will be gone in the future)
- Start Wamp, Xampp, Mamp or EasyPHP
- Open a new tab in your Safari, FireFox or Chrome browser
- Enter the following URL into the browser’s URL field and press enter:
Open this URL in your Safari, FireFox or Chrome web browser: Wampserver Xampp Mamp Windows http://localhost/themeframeRC4/ http://localhost/themeframeRC4/ Mac OS X http://localhost:8888/themeframeRC4/ http://localhost:8888/themeframeRC4/
- You should see this in your browser now.
- Click the “Page Templates” button on the left, then (1) click on “index.php” to get this:
- Now let’s do some visual changes on the index.php page template. (2) Double- or right-click somewhere on the page template to open the CSS Inspector for that element , (3) change one or a few settings in the CSS Inspector and (4) click the “Save” button in the CSS Inspector.
- You can repeat the steps (2), (3) and (4) a couple times if you want to style a few more elements: Double-/Right-click something you want to change, edit it in the CSS Inspector, save it.
- There’s much more you could do but let’s try to get a theme with the few changes we just made. (5) Click the “Get Whole Theme as ZIP” button on top to open the ZIP dialog:
- (6) put a directory name for this theme into the text field and (7) click the “Download ZIP file” button.
- Log into the admin area of your WordPress installation and click the “Appearance” tab on the left if its sub menus (“Themes”, “Widgets”…) aren’t visible.
- (8) Click on “Themes“, (9) click “Install Themes“, (10) click “Upload“, (11) click the “Choose File” button, and after you’ve chosen it (12) click the “Install Now” button.
- To activate the new theme, (13) click “Manage Themes” and then (14) click the “Activate” link of the theme. Since we didn’t put a name and author etc… earlier in ThemeFrame, the theme will be listed as “YOUR-DIRECTORY-NAME” by Anonymous. You can configure this in ThemeFrame.
- Reload a front end page of your web site to see the new theme in action.