From SiteGrinder to WordPress
15 Aug 2009I’d like to jot down some experiences using SiteGrinder 2 and how one might integrate it into a WordPress theme. Specifically I am interested in using SiteGrinder’s “-grow” hint to allow for WordPress content. So far my experience has been that it’s a slightly challenging maneuver.
This is still REALLY rough, but here’s what I’ve discovered so far. My overall plan involves modifying an existing WordPress theme so that the WordPress header and footer are more or less replaced with the SiteGrinder header and footer. You can also do this with SiteGrinder’s -xmedia hint and the “require PHP” option, but I’ll save that for another post.
Steps
- Design a site in Photoshop. Think in terms of (a) the stuff at the top of the page, (b) where the WordPress content will go, and (c) what stuff will get pushed down when the WP content grows.
- Draw a text box where the WP content in its own layer. Add the hints “-text” and “-grow” to the end of this layer’s name. Layers with content above this text box will not get pushed down with the WP content. Also, any layers with stuff that vertically intersects this text box will not get pushed down. But any layers with stuff below the text box will get pushed down as the WP content grows. Put the text “FOO” in that text box.
- Run the SiteGrinder plugin and build the site. This will give you (a) an HTML file named after your photoshop file, (b) a common.css file, and (c) a media folder with all your SiteGrinded images.
- Install a simple theme on your WordPress site. We’ll remove the header and footer, so pick one based on the middle bits. Or duplicate one of the default themes and edit the top comments of “style.css” in order to give it a distinct theme name.
- Upload the media folder and the common.css file to the theme’s directory on the web server.
- Open up the WP theme’s header.php file. Add a link to the new common.css file after all the other .css includes. You know, something like:
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/common.css" type="text/css" media="screen" /> - Open the SiteGrinder HTML file and copy the code beginning from (but not including) the <body> tag, through to the word “FOO”. Back in header.php, paste in the SiteGrinder html you copied, right at the end of the file.
- Disable the theme’s header elements by enclosing them in comments: <!– –> Leave in the container, content divs?
- Open footer.php. We’re going to copy some more code from the SiteGrinder html file, so make sure that’s open too. Copy the SiteGrinder html from the text “FOO” through to just before the </body> tag. Paste it into footer.php at the top of the file.
- Disable the theme’s footer elements with comment brackets.
- In some case you may have to change the name of a SiteGrinder div such as “footer” if the name is already in use in the php file. Make sure to change in the common.css file too.
Still Very Rough, not meant for actual use yet.
Special Note to frustrated users of require PHP! If you can’t figure out where the option to choose “require PHP” is, then you’re like me and probably wasted shit-tons of time searching the forums for where it is. You click on the thing everyone tells you to click on, but all it says is “No Match”. WTF? Well, it turns out you have to type the name of a php file (eg, “wtf.php”) into the text field first, followed by clicking Update. Then everything changes, and “require PHP” is automatically selected. Pretty intuitive huh?! No, not really. YAY!