Create WordPress Post Thumbnail

So you’re wondering how everybody has that thumbnail for all of their posts in their blog’s homepage?

Well, if you’re using WordPress 2.9 (or above) then this will be a simple work for your theme. Otherwise, you would be doing extra work in preparing your theme (by means of using custom field feature).

Two things that you will be working on, are:

1. Your functions.php
2. Your corresponding theme file (for instance: the index.php)

functions.php

There are two things that you can define in your theme’s functions.php file. First is the function activation line:

add_theme_support( 'post-thumbnails' );

That line will enable Post Thumbnail User Interface (inside your dashboard) for both Post and Page content types. From now on, you can see an entry field – usually on the right side of your posting screen – for “Featured Image” selection.

Now the second thing is the dimension of your thumbnails

set_post_thumbnail_size( 50, 50 );

You have two options here: box-resizing and hard-cropping. Box resizing shrinks an image proportionally (that is, without distorting it), until it fits inside the “box” you’ve specified with your width and height parameters. For example, a 100×50 image in a 50×50 box would be resized to 50×25. The benefit here is that the entire image shows. The downside is that the image produced isn’t always the same size. Sometimes it will be width-limited, and sometimes it will be height-limited. If you’d like to limit images to a certain width, but don’t care how tall they are, you can specify your width and then specify a height of 9999 or something ridiculously large that will never be hit.

Read more

CSS Tips: Class or ID?

I work a lot with websites, and I’m having this fond for WordPress engine since the  most thing that I should work with is how to re-design a theme. I’m not so good with image manipulation or graphic design, hence I work a lot with CSS and the template parts.

CSS (Cascading Style Sheets) is used for styling the site (HTML) elements. By declaring how an element should look (or behave), the work is becoming less. Name it fonts size, colors, how images looks, and event positioning certain elements, all is become much easier once the styling has been declared.

Styling the elements can be done either generally, or specifically. For instance when you declare a single CSS for <p> tag, then every time you use that instance it will styled as you declared. But when you need to create a different looks for another <p> tag somewhere on your page, then you can be more specific by using an ID or a Class.

The easiest way to tell the difference is by looking at the CSS part of your website. An ID is noted by using “#” (hastag symbol) while a Class is noted by using “.” (period symbol).

Read more