I like making things as easy as possible, so every time I try to set up a decent “CMS” for doing demos on this site, I end up trashing everything a couple days later. I think I have something that’s useable this time though. It’s roughly based on Chris Coyier’s CSS-Tricks examples section. I think I’ve seen him talk about his method of posting demos before, but I can’t seem to find where that might have been.
Normally, I would turn to WordPress for my online publishing. With all the new features in the past year, WordPress can be form-fit to really anything you could need to publish on the web. I’m going a little simpler than that this time though.
I set up a pretty simple file structure of folders and template files that will be the base of my examples. The file structure is as follows:
- examples
- _images
- _template
- index.php
- style.css
- header.php
- footer.php
- base.css
The idea is that I can duplicate the _template directory and have a pretty good base to work with. The header.php, and footer.php files are just templates, along with style.css. Those will never change, unless I’m re-theming the examples section.
Just as if you were theming WordPress, header.php contains all the stuff that should come at the beginning of every page while footer.php contains the stuff that should go at the end – like the Google Analytics code.
I use PHP includes to include these in _template/index.php and put the actual content in the middle – again, just as you would if you were working with WordPress. The big difference here is that instead of having nice functions to include the header and footer, you just have to use PHP’s built in include function – the same thing is happening though. In my case, I use a variable called $title in the header file to set the title and fill the sub-title of the page, so I have to make sure I have it set before I call include('../header.php');.
It’s important to know how PHP includes work – especially in relation to specifying stylesheets. In my header.php, I’ve got a block that looks like:
<link rel="stylesheet" href="../base.css"> <link rel="stylesheet" href="style.css">Since I’m including header.php in index.php, I have to remember that all the file paths are relative to index.php if I’m referring to them in HTML, not the header file.
Now all I have to do is post things that need demos.