WordPress Design Details

Completely redesigning an entire WordPress Theme requires familiarity with web page design, CSS, XHTML, and web page structure. We’ll talk more about that in later posts, but for now, let’s make some changes to your WordPress site that are small and easy to do. We’re going to change a few of the design details.

To help you find the little details you might want to change, take time to look at the Codex article, Finding Your CSS Styles to help you find the CSS bit you want to change. All of the styles mentioned herein, except those involving changes the template files, require editing of the style.css for the WordPress Theme you are using. If you change Themes, these styles will not be visible on the new Theme, but you can copy them over or change the new Theme’s style sheet if you want to keep the design details.

Fonts

A very important detail that is easy to change on your site are the fonts. The look, style, and size of the fonts on your site or blog dictate the readability of your site as well as the “tone”. Serif fonts like Times Roman tend to look “official” while sans-serif fonts like Verdana, Arial, and Helvetica can look clean, yet informal.

Codestyle’s Windows Web Font Survey Results offers a view of many of the most common fonts found on the web. While viewing that page, if you have that font installed on your computer, you will see the font. If you don’t, the font will appear as Times Roman, so this is a good test to see which fonts you have installed on your system.

In the Codex article, Playing With Fonts, there are instructions on how to change the font throughout your site. You can set a base font for the entire site, which allows individual areas to have different fonts. but if a font is not designed, the base font would be used. Here is one example:

body {font-family: Verdana, Arial, Helvetica,

       Futura, sans-serif; 

       font-size: 1em; color:black; }

  #menu {font-family: "Comic Sans", Impact, Tahoma, 

        sans-serif; font-size:1em; color:blue; }

The default font is the first one but the menu area would be different. You can add fonts anywhere you want, but remember, like adding spices to your cooking, too many spices can ruin the taste of the food, so keep your fonts to a tasteful number.

Fun Symbols and Characters

Did you know that you can jazz up the little details of your site or blog with character entities, also known as character codes? These are codes that turn into symbols. Fun Character Entities discusses many ways of using character codes to add some fun to your design. For example, instead of a comma or the word “and” between the various categories you have a post assigned to, you can use a heart symbol?

Using the category list template file, the code looks like this:

<?php the_category(' &hearts; ') ?>

WordPress also uses smilies (smileys) in posts to add some fun to a post. You can turn this feature on in your Administration Panels > Options. You can enter smilies in two ways. In pre 1.6 versions, just type in the semi-color and ) to create a winking smilie automatically. In WordPress 1.6, the smilies are available in the WYSIWYG view of the Write Post panel and with one click you can enter the smilie into your post.

Go For Colorful

While you may like the Theme you have chose, you might not like the color scheme and wish to change it. This should be an easy task, but some WordPress Themes based upon the Default WordPress Theme use graphics to recreate colored background areas, so check thoroughly through your CSS and your Theme’s readme file to determine if it uses colors or background graphics for floods of color on your site. If it uses graphics, then you can make new graphics with different colors to achieve the same effect. If it uses color references, then you can just change the color.

Developing a Colour Scheme will help you pick a color scheme with various references to websites featuring color themes, schemes, coordination, and help on choosing colors. I personally enjoy using Online Color Scheme Generator as it provides coordinated and complementary colors in an easy-to-use online chart. Simply copy the color code and paste it in your style.css style sheet in the appropriate spot, such as:

#menu { margin:0; padding: 5px; background: #33CCFF;}

You can set colors in your fonts, background elements, header, footer, lists, headings, titles, anywhere you want. Just use them wisely as too many colors can be overwhelming, and too few might be too boring. But have fun with colorizing your site.

Changing the Read More

One of the most requested design details people want to change is known as the Read More link which is seen on mult-post views, web pages which showcase more than one post. Under the summary or excerpt is a link that basically says “read more” or “continue reading”. You can change this to look like anything you want and have it say anything you want.

Customizing the Read More takes you through the process of modifying the Read More link. In general, the link looks like this and is found in your index.php or any of the mult-post template files such as category.php, archives.php, and search.php.

<?php the_content('Read more...'); ?>

Inside of the template tag where it says “Read more” you can change that to anything you want, like “Want to know more, then click here” or “Got your interest? Read on.”

To style it, add a CSS span:

<?php the_content('<span class="readmore">Read more...</span>'); ?>

Then add CSS style to your style sheet for readmore like:

.readmore { text-align:right;

   font-size: 90%; }

Changing the Header, Header Art, and Header Image

The first thing that most people want to change is the header. In the article on the WordPress Codex called Designing Headers, step-by-step instructions take you through the entire process of modifying the most common WordPress header code structures and designs.

It can be very easy if you are using a Theme based upon the Default WordPress Theme. There is a utility program called Kubrickr that you can download and run on your site. It simply asks you to supply a new image file name for the header and then switches it for you, so you do not have to dig into the code. If all you want to change is the header image, this is fast as simple.

Many people like showing off their photographs and so they add a rotating image in the header that changes the image on every page refresh. There are several of them, but they basically work on the theory that you replace the image link in the header.php template file with the rotating PHP script and then put all the images you want rotated within your header in a folder called something like /images/headerimgs/ and the script will randomly choose from among those:

<img alt="A Random Header Image" src="/images/headerimgs/rotate.php" />

You can also use the rotating header image PHP script in your CSS styles for the header as a background image:

#header { background: url(images/headerimgs/rotate.php); ...}

Some of the PHP scripts and plugins to create a random image in your header include:

• Photomatt’s Random Image Rotator
• Image Rotator PHP from Automatic Labs
• WordPress Randomize Plugin

These are just examples of the simple things you can do to change your WordPress Theme. Stay tuned for more on WordPress Themes.

Digg | Del.icio.us | BlinkList | Furl
Spurl | Reddit | Simpy | RawSugar

---

Site Search Tags: wordpress, themes, design, layout, web, web+design, styles, stylesheet, details, designers, text, headings
Copyright Lorelle VanFossen