WPDesigner

This is the unofficial 33% release of my upcoming ebook. This part is called How to Design a WordPress Theme.

The next two parts are How to Slice a Wordpress Theme and How to Code a WordPress Theme.

The .zip file is 8.51 MB. Inside, you’ll find a PDF file containing design instructions, a folder of images (step-by-step screenshots), and a PSD file for you to mess around with. To use the PSD file, you’ll need Photoshop. Here’s the PDF file for you to preview, but you should download the screenshots and PSD file for the instructions to make sense.

About the instructions, they assume you have no prior knowledge of Photoshop so it’s pretty detailed. I’d suggest printing all of the instructions (15 pages) before working on this tutorial.

Again, this is a partial release of the entire book on how to create a WordPress theme from scratch. The entire book is still scheduled to be released within this week, but it looks like I’m going to need more time, longer than I originally announced. I’m doing the best I can to release this book as soon as possible (right now is 4:35 am), but I need to make sure it’s something I can be proud of so please hang on for several more days.

Update: I’m using OpenOffice.org to export the tutorial as a PDF file, but I can’t find the PDF security options. If you can show me where to access it, please post your instruction as a comment. Thank you.

Below is a list of my favorite Sandbox skins from the Sandbox Design Competition, listed in alphabetical order. I included notes written about each one while judging for the competition. View all 46 skins. Which ones are your favorites?

(The competition and judging period is over. According to the guidelines for judges, I’m allowed to publish this post. See who won.)

Diurnal

DIURNAL PROs:

• Well spaced
• Fluid width
• Valid CSS, light weight
• Use of CSS imports for additional features
• Wide image doesn’t break layout

(more…)

TemplatesBrowser.com/wordpress-themes/ is a WordPress theme download site, re-distributing hundreds of modified themes while piggy-backing the theme authors’ credit messages in the footer to link back to TemplatesBrowser.com.

Other than ripping off GPL and even Creative Commons themes, it isn’t safe to use themes modified by Templates Browser. They don’t simply link back to their own site. They also package encoded, hidden ads via the themes’

files.

Additional Readings:

• WordPress & Joomla users beware!
• Beware of TemplatesBrowser.com

One of my favorite WordPress template features is the ability to customize category templates to cater specific categories of your choice.

Here’s my default category template. It simply displays excerpts:

Here’s my customize category template for category ID #2. This one is actually a theme gallery template:

So, how do you manipulate category templates? Simple, duplicate your default

template (or

in some cases), add a hyphen and a number to the name of the new file. For example:

. Then, start customizing the template for the new file.

The number attached to the file name should be the ID of the category that you want to target.

WP-Sticky is a plugin by Lester Chan, used to sticky blog posts that you want more attention for. If you sticky a post, it’ll stay at the top of your blog page, regardless of its published date.

That is especially useful if you publish multiple times per day with the need to feature one important post. You could simply publish the most important post in the morning, sticky it, and continue publishing instead of waiting to publish the most important one as the last post, just so it would be the first blog post your visitors see.

To install it, you simply download, unpack, and upload its folder to your Plugins folder. To use it, while editing or publishing a post, go to Post Sticky Status and select the status.

(There’s an additional feature, Announcement. Announcement posts show up above Sticky posts, which I guess… is useful for highlighting the most important post of all stickied posts.)

Beyond what WP-Sticky was built for, there’s a

function that you can use to mark your stickied posts. By default, that function outputs texts only. For example, it’ll output Sticky or stickied posts and Announcement for announcement posts. You can customize it to output XHTML too.

How is that function useful for you in terms of design? Well, here’s your typical posts listing template:

What if we insert the

function as a CSS selector like this:

After inserting it, you end up with:

Now, you have a conditional CSS selector that will only appear for posts marked as Sticky. That alone gives you lots of options to customize. You can use different background colors, images, and etc. to highlighting Sticky posts. Here’s an example of highlight a sticky post with a background image:

Or, you could simply highlight it by changing the back color like this:

It doesn’t stop there. You can go on to customize post title link color, font size, line-height, and etcetera. Also, you don’t have to use the

function as a conditional CSS selector. Remember I mentioned that you could customize that function to output xhtml too?

Here’s how:

. Everything in the first set of single quotes appear before the word Sticky or Announcement; everything in the second set of single quotes appears after the same word.

For example:

. You would end up with

.

Warning: If you’d like to test this plugin, do not copy and paste my codes. I posted my codes as texts, not actual codes, so copy and pasting will not give you the proper format.

Theme Information

• Author: Small Potato
• Description: Envy is a blue, two-column, widget-ready, private theme, modified for public use.
• Disclosure: This theme comes with two links in the its footer (
  footer.php

  ) to credit WordPress, and this blog. You may keep or remove them.

• License: Creative Commons Attribution-Share Alike 3.0
• Preview Envy WordPress Theme
• Download Envy

For two months now, you’ve been egging me to release this theme. It’s only right that I release it as Envy of the Seven Deadly Sins theme series.

Although this public release is far from the original debut, I’d like to think it’s still a good looking theme, great for blogs that need lots of main-column space.

Changelog:

• August 09, 2007 - Removed link to Wpdesigner forums in the comments template.

Man! Wpdesigner is approaching version seven already? I need to quit re-designing my own blog so often. Check out the preview for version seven.

This re-design is more of a tweak than a full makeover. The structure, pretty much, stays the same. Sorry to blue potatoes out there. The blue color scheme is gone. I’m into red nowadays.

And, it’s the red description area of the design that I like most. When you arrive at this blog or will arrive, automatically, you have to something to focus on and the description tells you exactly where you are and what you’re looking at. By the way, that description message will vary depending on which part of the blog you’re browsing. For example, when you browse the themes archive, it’ll say something like, “You’re browsing my themes archive. Here’s the most downloaded theme and blah blah blah…” I’ll also use that area for important updates that need to be stickied.

Because this re-design is so simple, it’s very easy to switch its color scheme, which is convenient for participating in stuff like Pink for October. (It’s not enough to switch your blog’s colors. I think Pink for October is a waste of time if you don’t actually donate toward breast cancer or do something more to raise awareness.)

Overall, I’m loving the new look and can’t wait to make the switch. Although this version borderlines the wayyyy-too-plain look, it’s clearer, less overwhelming, and easier to use than the current design.

After the switch, I need your help to improve on what I have so far to create a better browsing experience for you. If you like something or don’t like something, let me know.

After taking a short break for my cousin’s wedding and to take some time off from blogging to refresh my mind and to re-think which direction I should take Wpdesigner.com, I’m back and with lots of updates, feeling very positive and ready to get back in the swing of things.

(In the photo to the left of this paragraph, I wasn’t thrilled about having to dress formally for the wedding. The last time I wore a tux or suit was back in 1996.)

First update, Scott Wallick invited me to become a judge for the Sandbox Design Competition. Design or entry submission period ended and judging began yesterday. Along with ten other judges, I’ll do a thorough inspection in the next several days to determine the winners; I’ve already picked out my favorites.

Second update, from now on, this blog will publish at least nine blog posts per day. Along with WordPress hacks, modification case studies (for example, using WordPress to power a CSS gallery), plugin integrations, and WordPress themes, you can stay tuned for design tutorials, blog usability tips, and many other blog design related toys.

Third update, once again, this blog will be redesigned. The current design is clean, pretty, and easily recognizable, but it’s not usable and that alone trumps all the opposing positives. The re-design, which is something along the lines of an advance Wrath, will be unveiled in the next several days.

Fourth update, within this week, I will finish up the free ebook on how to create a WordPress theme from scratch. The book will cover everything you need to know about designing, coding, and WordPress templating or theming. If you’ve signed up to give this book a test run, expect an email from me on Saturday or Sunday. If you didn’t, sign-ups are closed and you’ll just have to wait until next week to get the book.

Fifth update, I will complete the Seven Deadly Sins theme series within the next two weeks. So far, Greed, Pride, Lust, and Wrath have been released. The next in line is Envy.

As far as where Wpdesigner.com will go from here, expect this blog to turn into a complete WordPress portal with its focus still on WordPress themes and blog design.

p.s. - Here’s another photo for you.