Skip navigation

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?

Graphic representing the use of character entities hearts in text to jazz up content

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

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

Smilies in WordPress 1-6WordPress 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:

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

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


Site Search Tags: , , , , , , , , , , ,
Copyright Lorelle VanFossen

7 Comments

  1. Posted October 21, 2005 at 11:31 pm | Permalink

    So helpful! As someone with really no knowledge of html etc, I was able to customise my site pretty much the way I liked – thank you so much

  2. Posted June 5, 2007 at 1:48 pm | Permalink

    Thanks for this tutorial.

    I have written a wordpress theme design and development tutorial, feel free to read it

  3. ThemeJournal
    Posted December 26, 2008 at 5:18 pm | Permalink

    I think this guide is not complete. What about color sets?

    • Posted December 26, 2008 at 6:45 pm | Permalink

      Colorsets are new in web design. Yes, they can be used, and this isn’t a guide. It is an article on the details to pay attention to when it comes to designing a WordPress blog. Colorsets are not for every web design.

  4. Posted January 18, 2009 at 2:26 am | Permalink

    all good advice. thanks.

  5. Posted February 12, 2009 at 8:35 am | Permalink

    apparently, the credit crunch has given birth for new ways for teens to make moneyhttp://gemini-tattoo.blogspot.com

  6. Alain
    Posted July 21, 2013 at 7:13 am | Permalink

    Wow, I really loved the Online Color Scheme Generator. What a great tool to have. I can’t wait until I discover more amazing tools as I continue reading your blog. Thanks a million.


23 Trackbacks/Pingbacks

  1. [...] WordPress Design Details [...]

  2. [...] I dealt with a lot of basic design elements found within a WordPress Theme such as “Navigating Your WordPress Site”, “Problem Solving the WordPress Header”, “Dissecting the WordPress Post Title Link”, and many other “WordPress Design Details”. [...]

  3. [...] WordPress Design Details [...]

  4. [...] Design ALL The Design Details: While a minimalist Theme might be minimalist because it hosts the bare minimum of design details, it might not. Don’t make that assumption until you’ve looked under the hood. Your web design might need a better reference as a template for filling in all the design details. Make sure you include every design detail to ensure every element on your WordPress Theme design is designed. [...]

  5. [...] WordPress Design Details [...]

  6. [...] WordPress Design Details [...]

  7. [...] WordPress Design Details [...]

  8. [...] need a better reference as a template for filling in all the design details. Make sure you include every design detail to ensure every element on your WordPress Theme design is [...]

  9. [...] blog, what elements do you look for to help you move? Next and previous links? Tags? Categories? What compels you to dig deeper into a blog for more [...]

  10. [...] WordPress Design Details [...]

  11. [...] WordPress Design Details [...]

  12. […] WordPress Design Details […]

  13. […] WordPress Design Details […]

  14. […] WordPress Design Details […]

  15. […] WordPress Design Details […]

  16. […] WordPress Design Details […]

  17. […] WordPress Design Details […]

  18. […] WordPress Design Details […]

  19. […] WordPress Design Details […]

  20. […] Choosing a WordPress Theme […]

  21. […] WordPress Design Details […]

  22. […] WordPress Design Details […]

  23. […] all alike. Some may appear to be on the surface, but when you dig through the different page views, pay close attention to the details, especially navigation, to make sure that the usability functions on this Theme are what you want […]

Post a Comment

Follow

Get every new post delivered to your Inbox.

Join 21,178 other followers

%d bloggers like this: