WPDesigner

This is the first in a series of tutorials on how to increase the readability of your web design using available typographic knowledge.

As noted previously, fluid or liquid designs can aid tremendously in the design of a page. But if you’ve ever tried to follow a long discourse that someone has posted on an internet forum, you quickly realize the major disadvantage:

It’s hard to read.

Column widths, or their “measure” in design-speak, have a tremendous impact on the readability of a particular design. While no hard and fast rules exist, there are two not-exactly-rules that you can follow to make your designs as readable as the daily news. (more…)

First, bookmark the WordPress theme check list. Second, here are some more items to add to your check list.

Cross version (Backward) compatibility

If you can make your design work across multiple browsers then why not enable your theme to work across multiple versions? Not all WordPress blogs sport the latest WordPress version anyway.

For one, is your search form using

or

? I can’t tell the difference between the two because I’m PHP clueless, but I know that wp_specialchars work with 2.0, 2.1, and 2.2.

For another example, are you using

or

? Wp_list_cats is the older of the two, which is the one that works with 2.0, 2.1, and WordPress 2.2.

For more new versus old functions, read Lorelle’s Template Tag and Function Changes.

Have you tested your theme?

You never know what bloggers are going to use your theme for and what features they might turn on. I’d recommend installing WordPress locally (on your computer) in order to easily test it. Here’s how to install WordPress locally on Windows or Mac.

After installing WordPress, create filler content posts, about 11 or 21 of them so you can test the

function for the Previous Page and Next Page links. Make sure one of the filler posts have a long title that takes up at least two lines so you can test the line height of the post title when it’s time to use CSS.

Within one of those filler posts, you should test your images. One photo aligns left, another aligns right, and another one in the center (see example). Below are my codes for styling images within a post.

img.centered{
display: block;
margin-left: auto;
margin-right: auto;
}

img.alignright{
padding: 4px;
margin: 3px 0 2px 10px;
display: inline;
}

img.alignleft{
padding: 4px;
margin: 3px 10px 2px 0;
display: inline;
}

.alignleft{
float: left;
}

.alignright{
float: right;
}

The use of

,

, and

is based on Kubrick.

Within a different post, test the order and unordered lists (see example). There’s more stuff to test, in example: blockquotes, code, and headings (h1, h2, h3, h4, h5, h6).

Horizontal menu - If your theme has a horizontal menu, make sure you apply

to it. And, don’t hard code any link within the horizontal menu. For example, don’t link to the About page using

; use

or something like that. If you do use a horizontal menu, don’t forget to test

in the regular sidebar listing. The best way to do it is to create multiple levels of links (see example).

With this check list combined with the last one, did I leave anything out?

Do you want comments on your blog posted without reloading the page? You can achieve that effect by implementing Ajax comments. There are two ways to do it. The first is installing a plugin and second is learning how to integrate Ajax commenting manually.

Ajax Comments 2.0 Plugin

If you don’t want to do it manually then Mike Smullin’s Ajax Comments 2.0 plugin can help you setup Ajax commenting in less than five minutes. Installation is simply uploading and activation. Note: Spam Karma does not work well with this plugin. Mike suggests that you use the Authimage plugin instead of Spam Karma.

Manual Ajax Comment Integration Tutorial

For the do-it-yourselfers, Safirul Alredha has a step-by-step tutorial on how to integrate Ajax comment. This tutorial assumes that your

file is based on the WordPress default theme, Kubrick,

file, which would be true for most free themes.

It’ll take you a little over five minutes to integrate Ajax comments manually, without making a mistake.

Currently, Wpdesigner uses the Ajax Comments 2.0 plugin. Test it for yourself by posting a comment.

update: Ajax Comments has been turned off.

Let me start out with my own wish list.

1. Circular navigation and the option to turn it on and off - I wouldn’t know where to even begin with this. It would be unbelievable if the WordPress team could tack this on for the future. Here’s my example of a circular menu (created in Photoshop):

   

2. Dynamic sidebars - You’re already moving sidebar widgets up and down, back and forth. Why not apply that feature to the actual sidebar content? Allow users to rearrange sidebar content, not just from the Sidebar Widgets page. Check out the iTheme by NDesign Studio for an example.
3. New SEO-friendly structure - Although Google loves blogs and not many bloggers actually care about SEO (search engine optimization), it would be nice to go to sleep knowing that your blog’s theme is SEOed. For one thing, WordPress uses H2 for sidebar titles, when it should be using H3 or no heading tags at all. Sure, you can change this by using a
   functions.php

   file and tell it to adjust the tags before and after sidebars titles, but it’s a pain if you have to do that with every theme.

That’s all I can think of for now. Do you have a WordPress theme wish list?

How many times have you typed up a post and published it, only to wish that you could style that post just a little differently than the others. One example might be a special announcement post that maybe you wanted to highlight with a unique background color. Well we are going to take a look at one method of doing this in Wordpress.

Before we get started on the details I’d like to direct you to a short read in the Wordpress documentation on the

tag. I’ll wait…

Welcome back! Having read that maybe you noticed something interesting about one of the examples given for the tags usage. This tag can be used as a unique anchor identifier for each post. It can be used anywhere that you can place an ID or CLASS. Take the example they demonstrated:

I’ve highlighted the important section above. The example headline has been given a unique attribute ID using the posts numerical ID within the name so that we can reference it individually within a stylesheet.

Now that we’ve seen that lets look at an example using a common theme that you can reference. On a default install of Wordpress you should have Kubrick installed. Log into your Wordpress Admin. Now go to Presentation: Theme Editor: Select Kubrick in the drop down menu: Main Index Template. If you scroll down while browsing the index you should see the following:

We see the familiar tag again and this time it is styling the post as a whole rather then an individual headline. How does this look when we publish? Kind of like this:

Notice the unique ID of post-150. Each post that is published will have its own number (ie. 151, 152, 153, etc.) corresponding to that individual post. Now all we need to do is style it. To do this just open up your stylesheet and reference that attribute within the stylesheet. So in the case of Kubrick it could look something like this:

You could even style any specific headlines within the above ID for that post like so:

One last note in regards to using this when creating your templates. In XHTML, the ID attribute must not start with a digit. Since

returns the post ID as number, you should include at least one alphabetical character before using it in an ID

attribute, hence the use of “post” within most templates.

Well thats it for now. We are going to come back to this later and take a look at a more flexible way of styling individual posts, because as you can imagine, your stylesheet could get quite bloated if you styled a large amount of posts using this method. But it does work great for those few posts that you need styled differently and I encourage you to give it a try.

I’ve never been tagged before, blog-meme tagged that is. Nathan Rice tagged me after he was tagged by Brian Gardner. Although I’m not a successful designer, I’m taking advantage of this opportunity to answer to some questions because these questions brought back great memories.

1. How did you get started in the business?
I actually remember exactly how I got started, not in the web design business, but in website development. Back in 1999, seventh grade, a friend in science class, Alex, wrote a site address (URL) on a scratch paper, handed it to me, and told me to go there because it was his website. When I came home from school, I went to it, and despite that it was the most unorganized and ugliest thing I’ve ever seen in my life, I loved it! I thought it was so cool! Friggin’ amazing! My inner-geek kicked in! The guy had his own website. I couldn’t believe it. Remember, this was eight years ago. It’s hard to get me pumped like that these days.

Afterwards, I came across this website program called, Trelix Web. Remember Trelix Web? It came with Windows ME. After completing my first site, which was about Dragonball Z and anti-Pokemon images, using Trellix Web, I had to search for a host. Back then, I didn’t even know what FTP was, just a total newbie. Fortunately, Trellix Web hooked me up to Fortune City. Yes, my first site was hosted on Fortune City. Their service required a banner displayed on top of every page in return for free hosting, bothered me to the last frame, and iframe.

Next, I joined the rat race for “good, banner-less, free web hosting” and hopped onto the cool-Javascript-effects bandwagon. For several months, I was addicted to Javascript, animated GIFs, DHTML, and trying out free web hosts. I went through Geocities and Angel Fire like butter. For the oldschools, don’t forget Tripod, my first PHP host.

Man, that was good times. When you came to my site, you had to answer a Javascript prompt like, “What is your name?” And that was it, I didn’t use your name for anything else. I didn’t even know what your name was. You just had to answer it for no friggin’ reason.

While hosted on Tripod, I introduced myself to PHP, went on HotScripts for scripts to install, like a guestbook script. Guestbooks were popular back then, before the blog commenting system came along, your site was nothing if you didn’t have a cool looking guestbook.

From guestbooks, I went up a level to installing forums, phpBB at first, and then I came across news scripts and content management systems (CMS), which were basically your average blog platforms back then. Stuff like Gray Matter, b2, SimpleNews, Mambo, Drupal, and a lot of other stuff I can’t remember. I went through so many CMS and news scripts that I got bored of HotScripts.com.

After all the experimenting with scripts, coding, and web hosts, I took a break, a very long break, then another break because my computer crashed, twice. I didn’t get serious about web development and making money online from it until late 2005. From there, I experimented with more blog platforms and finally settled down with WordPress around the middle of 2006.

That’s it. That’s how I got to where I am today.

2. What kept you going in those early years?
Like many other young web designers and coders, I was just curious. There was always more stuff to learn. I went from using Trellix Web, to learning HTML, CSS, then XHTML, and a little PHP. If I need to expand my skill-set right now, I would delve deeper into PHP and Javascript.

3a. Did you ever feel like you weren’t good enough or you would never make it in this industry?
Similar to Nathan Rice, I was never good at creating cross-browser sites. While applying for freelance jobs, I was always intimidated by clients that wanted cross-browser compatibility. I didn’t really know what it was all about, specifically how to squash IE bugs.

3b. How did you work through that?
To this day, I still don’t know how to squash IE bugs. I haven’t learn any CSS hack. Fortunately, I didn’t have to hop from freelance project to freelance project. I spent some time experimenting with XHTML and CSS. Didn’t really read any tip or tutorial on cross-browser compatibility, I just knew that I had to make my site look the same across multiple browsers and started testing with Firefox and IE.

In my opinion, Firefox and IE are what cross-browser really comes down to. There’s no point in squashing every bug in every available browser. You’d be wasting your time. If you’re really patient then go ahead and test for Opera and Safari too.

4. Do you look at others today and think “Wow, I wish I were that good”?
You bet. I’m a coder, not a designer. In my opinion, I’ve never designed a professional looking layout before. I envy all designers that can produce professional quality designs.

5. How do you measure success?
I wouldn’t know.

6. By your standard, do you think you are successful?
I’ve never been successful. Well, at least, I don’t feel successful. My problem is I’m too ambitious.

I don’t have anyone to tag yet.

To speed up the process for the Seven Deadly Sins (SDS) theme series, I’m making this post to get the final batch of suggestions for those upcoming themes. I want to get all of them released within this month and taking suggestions one by one is not going to cut it.

The next theme will be Lust, then Wrath, Envy, Gluttony, and finally Sloth. Please post your suggestions through commenting and label which theme your suggestion is for. For example:

“Lust: I think it should have…”

What do you do when

doesn’t work? The safest and easiest way to get your main column and sidebar column to match, height-wise, is to use a background image in order to hide the actual lengths of the columns.

Apply a background image to the wrapper

using CSS:

That background image codes should go in your

file. The example above assumes that your background image sits in the folder named, images.

To create or design the background image, use a design software like Photoshop. (That’s what I use.) Create a new file with a width that matches the sum of the main column and sidebar column widths. For example, if your main column is 500px (5 inch) wide and sidebar is 200px wide, and there’s no margins in between the two columns, then your overall width is 700px. That’s how wide your background image should be.

Once the background image is applied to the wrapper

, it’ll repeat itself over and over again to cover the entire length of both columns. So really, all you would need, in this case, is a 700px (width) by 1px (height) background image.

Note: If you use float left or float right for any or both main and sidebar columns, you must use

for the wrapper

too. Otherwise, your background image for the wrapper

will not display correctly.

Preview Pride

Author information

Designed and coded by Small Potato

Theme Description

The second release of the Seven Deadly Sins series, Pride is a three-column, fixed-width theme, compatible with WordPress 2.0.x, 2.1.x, and 2.2.

Although it seems graphic intensive, Pride is a lightweight theme. Excluding the heavy footer background image, Pride uses less than 9kb of images. There are instructions in the readme.txt file on how to switch to a less heavy footer background image.

Files

• Download Pride

Author’s Note

I’m jealous of bloggers that get to use this theme. The only thing that’s stopping me from using Pride for Wpdesigner.com is the need to keep Wpdesigner’s unique design.

Despite that my previous theme was a three-column, I changed Pride from a two-column to a three-column theme because you’ll ask for a three-column version anyway. Why waste my time on something that you don’t want you know? If you’ve been looking for a double right sidebar theme from Wpdesigner, this is it. I also changed up the header to expand across the whole page because the short header felt trapped and cluttered. Here is Pride in it’s three-column glory.

This is not a beginner level tutorial. If you don’t know anything about XHTML and PHP, you will get lost.

Recently, I learned how to manipulate custom fields from theundersigned.net. Today, I finally switched from excerpts to custom fields to display theme thumbnails on Wpdesigner. I’m talking about the three theme blocks in the header. Each block has an image, the theme’s name, theme author’s name and link, and the download page link.

(more…)

I don’t know what’s up with the date button, but you seem to really love it. Yea, you! Today, we’re going to learn how to create a date button for WordPress. Here it is in the three simple steps:

First - Type the code

(Do not copy and paste. Type it out.)

For organization sakes, here’s how it should look like in your source codes:

What the codes actually mean:

<div class=”post-date”> - I’m starting a box or DIV named “post-date.” I could’ve named it “little-potato.”

<div class=”post-month”> - Within the post-date box, I’m starting another box for the month.

<?php the_time(’M') ?> - Here’s where I use the PHP function the_time(’M'), to call for the abbreviated month name. For example: JUN for June. On my date button example, it’s JUNE instead of JUN because I haven’t coded it to call for the abbreviated version.

</div> - The month box ends here.

<div class=”day”> - The day box starts here.

<?php the_time(’d') ?> - Using the PHP function the_time(’d'), I’m calling for the day number, which will be a two-digit number. For example: 03.

</div> - The day box ends here.

</div> - There’s nothing else to add to my date button so I’ll end the post-date box or DIV here too because I have to close everything in the order that I open them.

(For more display options for the date, go to php.net.)

Second - Create the background image

You’ll need some kind of design software, like Photoshop, to design your date button background image. Here’s my date button background image:

Third - Style it

This step requires you to know a little bit about CSS and it depends on personal preference because your background image will be different from mine. But, here is the basic:

date_button_template.gif should be the name of your image. images/ is the location of the image folder. If you store your images in a different folder, change images/ to match the location of your image folder.

The Pride theme, which includes the use of a date button, will be released soon.