Anatomy of a Magazine Style Premium WordPress Theme - Part 2: DOMTab, Tabber, more

In continuing our efforts of slicing and dicing a Magazine style WordPress theme, we come to a very interesting juncture with Java interfaces. This probable is the most ubiquitous feature of most all magazine themes. If you think about it, it makes sense that magazine style themes use this non-obtrusive code to help manage content.

DOMtab interfaceThese sidebar tabbed interface gives you the most bang for you buck in terms of digital real-estate. Granted that it will not necessarily minimize bandwidth usage by loading the page any faster, but nonetheless provides an alternative to having the entire content load on each and every page (even where …

Anatomy of a Magazine Style Premium WordPress Theme - Part 1 “The Loop”

Let me say it for the millionth time “content is king” and we all know that, don’t we?

featured wordpress postsSince content is the most important part of a site, your WordPress powered theme must emphasis on its presentation. Most cookie cutter themes come with a post list that runs based on the time your posts were published, in other words a chronological list of posts irrespective of its importance. Let’s face it, not all posts are created equal. Some posts are special, some are important and then some not quite so. Why then should all posts get the same treatment?

Magazine styled themes do a fine job of addressing this by introducing the featured …

Sandbox (CSS) Design Competition Pre-Submission Checklist

For those making the final submission of your CSS designs for the competition either tomorrow or the day after, I compiled this quick (should take less than 15 minutes) and a short checklist to help ensure your theme gives the rest a run for the money. At the risk of being called “Captain Obvious”, here it is:
Style
Hierarchy: Make sure your h1, h2… are all styled using commonsense formats to create a meaningful visual hierarchy. Sandbox does not use h2 in the sidebar like the Widgets do, so think about both scenarios, that is, users using your theme as is and those using sidebar widgets. (Time: Should take you less than 1 minute for this)

Dropdown menu usage: If you plan on using the default dropdown in Sandbox, leave the pages list intact for IE 6 users. If you plan on hiding the sandbox_globalnav, the div id is “menu”, make it “display: none;”. (Time: Again, should take you less than 1 minute to check)

Sandbox (CSS) Design Competition Tutorial

This ‘how to’ tutorial was written for beginners/users designing a Sandbox based theme/CSS redesign using minimal CSS hacks and imagery. The objective of this exercise was to do “as little work as possible” while ensuring the result appears “significantly different” from the starting template. This is not the end-all strategy to design a Sandbox theme/skin, but merely a guide to get started. Enjoy.

Tools needed: Notepad, FTP (SmartFTP or similar) and PhotoShop or similar (any image editor should do).

In less than a couple of weeks, the Sandbox theme competition will decide a winner, but if you are anything like I am, you would probably wait to the very last day to create and submit your entry. So I feel it’s the perfect time to have a “how to” demonstrating the endless possibilities of CSS redesigning for those procrastinators waiting for a sign to get started. And no, this demo theme will not be submitted to the competition but will be released freely for Sandbox users sometime soon. Here’s a quick reminder of the rules.

Just to briefly touch on the Sandbox theme, as described by its creator(s), “The real feature of the Sandbox is its markup. The use of class-generating functions in key elements (the body, post div, and comment li elements) creates the most extensible WordPress theme available”. So all you need is some basic understanding of CSS and you should be ready to roll.

How to make your Codes “Friendly”

Have you found yourself wanting to display a piece of code in your blog post or a comment form that left you stripping off elements or re-pasting it over and over only to find that the code is actually being executed? I run in this issue a lot while replying to support questions, so I conveniently remove the < and > of all php script to allow the codes to show, this however cause more harm than help to the novice user and the experience is never that pleasant. Help is finally here!

A combination of using the “code” tag and converted the base code by using this cool converter called Postable makes for a delightful masterpiece that users can share, copy and paste without any hassles and guesswork. Here’s how you go about it.