Thanks to Lorelle’s comprehensive list of almost all available Sandbox theme CSS selectors, my Sandbox K2 skin now is officially my Sandbox’s lab rat. The style sheet itself turn to 18kb in size and half of it are selectors with empty properties.
So today lesson is ‘Forget is_ use display: none’.
It sounds lame alright, but the advantage is that you don’t need to touch your WordPress PHP templates but instead do it through see as as CSS. Furthermore, sometimes you don’t have any choice.
What you need to know
Basically, you need to understand and know what WordPress Conditional Tags are.
The Conditional Tags can be used in your Template files to change what content is displayed and how that content is displayed on a particular page depending on what conditions that page matches.
This could be confusing and I can’t blame you. Sometimes I had problem with WordPress Conditional tags too.
Forget is_
Usually if you want to display something on Single Post Page, in template we use is_single(). Rather than messing around with your template, let’s do it through some CSS magic.
By default in Sandbox theme, sidebar Category list and Archives are displayed on every page. For example, I wanted to show the Category list and Archives on every page but NOT on Single Post Page. In your CSS,
.single .category-links, .single .archive-links {
display: none;
}
Notice that .single represent is_single(), Category list represent by .category-links and Archives represent by .archive-links So now, if you view your Single Post Page, Category list and Archives will not be visible.
Well that sounds easy right? Let’s do something a bit complicated. Next example, I would like to display Category list and Archives ONLY on Paged and Search Result Page. In your CSS,
.wordpress .category-links, .wordpress .archive-links {
display: none;
}
.paged .category-links, .paged .archive-links, .search .category-links, .search .archive-links {
display: block;
}
Take note: .wordpress class exist on every page on Sandbox theme, so we could use it to define a global styling. Nice eh?
How do I know which selectors does the page belongs to?
The easiest way is to view your page source and refer to the classes that are assigned to the BODY tag from your browser. For example:
<body class="wordpress y2006 m08 d10 h05 home paged">
So, the page refers to Paged page on 10th August 2006 viewed at 5 a.m, sort of the same like is_paged() && is_home().
Referring to WordPress Conditional Tags in the codex probably would be a good idea. From the all available Conditional tags, remove is_ and (). For example, is_single() becomes .single or is_search() becomes .search. Anyway, I was nice enough to do this for you:
is_home()=.homeis_page()=.pageis_archive()=.archiveis_date()=.dateis_search()=.searchis_paged()=.pagedis_attachment()=.attachmentis_404()=.four04
But wait, there’s more can be found in Sandbox theme readme.html in ‘Class functions’ section.
List of available sidebar item
I don’t know whether to call it items, modules or block but it’s that stuff that crowding your sidebar.
Default Sandbox sidebar item according to class or ID.
-
.sidebar .pagenavList of available pages and also the page navigation at your sidebar. Remember to use
.sidebaror it will also affect Global Navigation. .category-linksCategory list
.archive-linksBlog archives by year
.blog-searchSidebar search form.
#linkcat-1Link list or mostly known as Blogroll. Replace 1 according to the Link Categories ID
.feed-linksYour blog RSS feed links — ‘All posts’ and ‘All comments’.
.meta-linksMeta stuff like Login and Register
Default Sandbox sidebar item with Widgets enabled according to ID.
#text-1Text widget. Replace 1 with your text widget ID.
#categoriesCategory list
#archivesBlog archives by year
#pagesList of available page and also the pages navigation on your sidebar.
#calendarWordPress default calendar. Does anyone use this anymore?
#recent-commentsYour blog recent comments
#recent-postsYour most 5 most recent posts
#rss-1RSS Feed Widgets. Replace 1 according to your RSS widget ID.
#metaMeta stuff like Login and Register
#deliciousYour del.icio.us bookmark.
#google-searchGoogle Search widget.
Skinning Sandbox theme is like doing your MySpace layout, except its easy. Please remember these methods are to be used if you have no other choice.
Have fun!
Great stuff, I’ve been planning it all in my head since the themes was announced. Just need to sit down and get styling.
Would a different style for asides simply be achieved by using the .category-aside class?
Saracen, depends on your category slug. If you category slug for Aside category is aside then it would be
.category-asideSandbox is fantastic. From what I can see, you could set a specific style on specific days or months using the body classes, great for special occasions. Then you can also have multiple different types of post, not just one asides category. You’ve also got the ability style pages differently. I think adding an ordered post count (starting at 1) could allow you to display any number of posts in full and the rest as titles only.
This theme is a great development for Wordpress.
Thanks for the nice write-up, Zeo. I hope the tables in the Sandbox readme.html have proven helpful. Lorelle, actually, is talking of working out some documentation for the Sandbox, given the need for basic instructions to details on some of the more advanced functions.
Maybe you’ll get a
divfor Christmas, so to speak. ;-)