There are a gabillion ways to modify WordPress sites, ranging from complete customization of the CSS and PHP to simply downloading ready-made themes. With so many resources available, it didn’t make sense for me to reinvent the wheel when customizing my own WordPress-powered site. However, as a designer, I still wanted to play a more active role in the actual site design.
I ended up choosing the Sandbox theme as a starting point for my latest customization. It essentially provides a clean slate with a nice amount of tags, IDs and classes to target with CSS. Getting started with the Sandbox theme admittedly took some preparation. Even though it might exist somewhere out there in the tubes, I had no luck finding documentation outlining the Sandbox theme output. Since knowing the structure is kind of important to me when trying to add styles, I decided to create my own structural diagram. Since it helped me visualize how to add some style to the Sandbox theme, maybe it will help someone else, too. Building on that, I have also created a blank CSS template (probably more useful than the diagram) that actually goes with the Sandbox theme output.
I hope the Sandbox structural diagram or Sandbox style sheet can prove helpful to someone else. Please feel free to use or abuse either at your discretion!
Some notes:
- Both of these documents are starting points only. They also apply mainly to the home page, but are easy enough to build on for sub pages.
- The diagram is just that – a diagram only. It doesn’t contain any code related to the actual Sandbox output.
- I swapped out the #header page links with category links for my site, but the structural diagram shows the default output using page links. This was changed by slightly tweaking the PHP, a relatively simple process for those so inclined.