WPDesigner.com

In my previous post, the question came about if posts can be styled for a specific category. Well you’ll be happy to know that they can be by using the

tag. This handy tag can be used in a function, within The Loop, that allows you to do a few useful tricks. Before we get started lets take a quick trip to read what this tag is in the WordPress documentation here.

How are we going to use this tag? Well using the function below the tag will be used to pull out the category name of the post loop its contained in.

Having extracted the category name we can use it within a DIV as part of a name for an ID or CLASS. Lets be more specific and go through an example. Once again we will use the Kubrick WordPress template. (though most templates should work just fine.) 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: (more…)

Have you ever seen a website that has certain content on the sidebar of the home page, but a different sidebar is displayed when you’re looking at a single page? How about nice little welcome messages that go away as you venture into the site? It’s a pretty nice effect, and it’s quite simple to pull off. It does, however, require you to know a little about PHP, but fear not; if you only know HTML, even just a little, you might be able to get by with this trick.

On the Home page, you see featured themes:

…on single posts, you don’t:

The function that allows one to make such magical pages as those described above is called a conditional tag. This tag, as the name implies, tells the page to do things under certain conditions. There are many conditional tags, but the most popular (in my experience) is is_page.

(The full list of conditional tags is on WordPress.org.)

Home Page

The beauty behind the

function is that it can be executed many ways. Let’s say you want to welcome your visitors to your site on the home page, but you want that message to go away once they delve beyond that front page. It’s actually quite simple. Use the following code (and type it out; don’t be a copy-and-paster): (more…)

In my last tutorial, I explained some of the reasons behind the use of various line lengths, known as a column’s measure. I mentioned that a column’s line-spacing, or leading, plays a significant part in the choice of a line’s length. Line-spacing plays an important part in a lot of things typographically, as I’ll explain.

The first thing we have to recognize about line-spacing is that there is no one perfect setting. Each circumstance calls for a different use, so the trick is to find the basic principles involved.

So what is line-spacing to begin with?

Line-spacing, also known as leading, is the white space between each line of type in a paragraph. Adding or subtracting from this white space greatly effects the readability of the text, and being able to set it properly is essential to the readability of the design.

In CSS terms, line-spacing is known as the the

property. (more…)

First, design the tabs; I used Photoshop 7.0. Before any slicing, saving, or coding, here’s my tab design:

In the example above, no matter what the lengths of the links are, they all sit within tabs that have the same width. That’s because I plan on coding stretchable tabs. Once my tabs are coded, they’ll adjust themselves to the right widths.

What can you expect from looking at the design alone?
As a coder, I see:

• a Verdana font or typeface
• a bold 12 pixel font size
• non-underlined links
• two tab layers: blue and white

What I’m saying to myself:

• Alright, I hate coding horizontal menus (just kidding).
• I have to code the blue layer first.
• Menu link color is white.
• I have to code the white layer second.
• Menu link color for white layer is black.
• White layer indicate whether a tab is current.
• A current tab indicate which page the user is looking at.
• Forget the user! The user suck! Rock on animated GIFs! (just kidding…again)

(more…)

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…)

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.

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.

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.

The wp_footer() function is often used by plugins to insert PHP codes after everything else on your page. According to WordPress.org theme development documentation, you should place the wp_footer() function in the footer, which would be in the footer.php file.

One detail that WordPress.org doesn’t mention is that most plugins (i.e: Spam Karma 2, PodPress, and FireStats), using the wp_footer() function, tend to break your theme. A well-designed and well-built theme is nothing without a safely placed wp_footer() function.

Here’s my advice. Don’t place the wp_footer() function right before the end; that’s usually the closing body tag. Instead, place that function within a DIV or container. For example:

<div id=”container”>

Posts

Sidebar

<?php wp_footer(); ?></div>

If you do that, no matter what a certain plugin does to the footer of your theme, it doesn’t expand beyond the container or DIV containing the wp_footer() function. You can open up the footer.php file of the Greed theme for an example.

Update:
Place the wp_footer() function within a style-less container (usually the outermost div with no backgrounds and images) that your layout doesn’t depend on. Otherwise, you might end up with an incomplete layout while waiting for a slow loading plugin.

Thanks to Adam Freetly for the tip.

How many times have you installed a plugin, integrated it with your theme, decide to uninstall it, but then forget to remove its function within the theme?

Once you’ve un-installed a plugin, you have to go back to your WordPress theme to remove any trace of it, or else your blog would return “function doesn’t exist” errors.

In case you forget to remove all traces of a certain un-installed plugin, this is a quick tip to error-proof your future un-installation so your readers wouldn’t have to run across “function doesn’t exist” errors.

Let’s say you want to use the Author Highlight plugin, which adds a class to your comments, to style comments made by you. It wants you to add <?php author_highlight(); ?> to somewhere in the comments.php file. Instead of doing just that, here’s what you should add:

<?php if(function_exists(“author_highlight”)) author_highlight(); ?>

Don’t copy and paste the codes above, it will not work. Type it out.

You learned how to widgetize the sidebar during the tutorial series, but I never showed you how to turn on the widget plugin. Here it is:

Installation

• Download the Widget plugin from Automattic.com.
• Upload it to your wp-content/plugins/ folder.
• Go to the Plugins page of the administration panel.
• Activate the Sidebar Widgets plugin.

Customization

• Go to the Presentation page of the administration panel. If your theme is widget-ready, you will see the Sidebar Widgets link next to the Theme Editor link.
• Go to Sidebar Widgets.
• From there, drag the little boxes into the big box.
• Rearrange the little boxes to the order that you would like each to appear.
• Click Save Changes.
• If you leave the big box empty then your theme will use its default sidebar instead of the widgetized version.