This is continually updated guide and checklist for everyone working with the Sandbox theme.
Basic Structure
- div#wrapper [.hfeed]
- #header
- h1
- div#blog-description
- div#access
- div.skip-link
- sandbox_globalnav() [div#menu]
- div#container
- div#content
- div#nav-above [.navigation]
- div.nav-previous
- div.nav-next
- div#post-the_ID() [sandbox_post_class()]
- h2.entry-title
- div.entry-date
- div.entry-content
- div.entry-meta
- span.author (.vcard)
- span.cat-links
- span.comments-link
- div#nav-above [.navigation]
- div.nav-previous
- div.nav-next
- div#nav-above [.navigation]
- div#content
- div#primary [.sideabar]
- ul.xoxo
- li#pages
- li#categories
- li#archives
- ul.xoxo
- div#secondary [.sidebar]
- ul.xoxo
- li#search
- li#rss-links
- li#meta
- ul.xoxo
- div#footer
- span#generator-link
- span#theme-link
- #header
Guide
- Default Stylesheet Typo: Open style.css, change
span.req-field
to
span.required.
- Drop-down Links: By default, the style sheet makes the child-page links, for the horizontal menu, display as drop-down links. That does not work in all browsers. Fix it or don’t display child-page links at all. To not display them at all, add
depth=1
to
wp_list_pages()within functions.php or use
display:none;in style.css for the subsequent list items.
- Comment on Pages: Allow commenting on certain Pages by adding a custom field. Key =
comments
. Value = (any text you want).
- Dynamic Classes: On the front, archive, and search pages, post listing uses
div.post
. On Page pages, it uses
div.page.
- Page Heading Selector:
h2.page-title
replaces
h2.entry-title - Archive Headings: Archive pages use
H3
instead of
H2for entry titles.
- Comments Template: Comments [
div#comments-list
] and Trackbacks [
div#trackbacks-list] are separated. If you want to style for both, use
div#comments.
- Custom CSS: If you aren’t using any of the default Sandbox layouts then remember to remove the CSS import in the default style.css file. For example:
@import url(‘sandbox-layouts/2c-l.css’);
.
- Containging Floats for Background Image: If you want a background image behind #content, #primary, and #secondary, apply
clear: both;
to #footer and use the background image on #wrapper instead of #container. Then, give #wrapper
overflow: auto;.
Templates and Pages to Style and Validate
- 404.php
- archive.php
- archives.php
- attachment.php
- author.php
- category.php
- comments.php
- no comments
- logged in
- must login
- password protected
- footer.php
- index.php
- links.php
- page.php
- search.php
- sidebar.php
- single.php
If you find any mistake in this guide, please post your correction in the comments.