Customizing WordPress 2.7 default theme

As of Dec 31, 2009, I have moved on to using WordPress 2.9 with the default theme.  Some  modifications were made.  The modifications made are:

  • Added a menu bar below the default header
  • Added space between paragraphs

These can be found at http://aprivatebeach.com/blog/2009/12/customize-wordpress-2-9-default-theme/.  All the modifications listed below works fine on WordPress 2.9.

I have decided to move on to customizing WordPress’ default theme after understanding how CSS works.

This blog has been using the default theme since WordPress 2.7 first came out.  After understanding how to do changes in SEO Basics 1.1.1, I had the knowledge to do changes to the basic theme.

These customizations also work on WordPress 2.8.

Important Notes
Adding a custom image for a header
Change blog background color
Increasing the space between the title and the stuff below
Adding a dropdown menu to your pages
Moving the drop down box to the right and add some text
Adding a favicon (favorite icon) to a WordPress blog

Important Notes

Anything between the /* */ is not code but comments.  They were put there by me to document what I did.  If I do not add the comments,  I will not know what I did at a later date.

For example,  /* Begin Typography & Colors
Changed background: #d5d6d7 url(‘images/kubrickbgcolor.jpg’);*/ shown in the code below is a comment put in by me, so I know what I did.  This is ignored by the computer.

Do not cut and paste the code.  WordPress, in some cases, will not paste the code properly.  Therefore, if you cut and paste the code, I cannot guarantee the code will work.  Typing in the code by hand is the best way.

If you want to know why, you can read the article at http://aprivatebeach.com/blog/2008/11/wordpress-263-bugs/

Adding a custom image for a header

When you look in the /wp-content/themes/default/images folder of your WordPress installation, you will find several pictures files.  The one that you need to change is kubrickheader.jpg.

The dimension of this picture is 760 wide x 200 tall.  Therefore, to put your own custom logo, you will have to replace that file with your own.  Ensure that your logo is 760×200.

My logo for reference can be downloaded at http://aprivatebeach.com/kubrickheader.jpg.  It is exactly 759×200.  I tried to get as close as possible.

Under Settings -> General, you will have to erase the Blog Title and Tagline.  If you don’t, it will show up on top of your custom image.  If you are able to, you can try to somehow incorporate the Blog Title and Tagline into your custom logo.  As you can see, I was not able to.

Change blog background color

Looking at the code snippet below which is from the Appearance -> Editor ->  Stylesheet (style.css), you will notice that I replaced #d5d6d7 url(‘images/kubrickbgcolor.jpg’) with background: #B0E0E6.  By default, it uses a color with the kubrickbgcolor.jpg picture.  I changed that to a sky blue which is #B0E0E6.

A complete list of colors that work can be found at http://www.w3schools.com/css/css_colornames.asp

/* Begin Typography & Colors
Changed background: #d5d6d7 url(‘images/kubrickbgcolor.jpg’);*/
body {
font-size: 62.5%; /* Resets 1em to 10px */
font-family: ‘Lucida Grande’, Verdana, Arial, Sans-Serif;
background: #B0E0E6;
color: #333;
text-align: center;
}

Increasing the space between the title and the stuff below

Under Appearance -> Editor -> Stylesheet (style.css), you can edit the following in bold to push the sidebar, front page articles, and the single article down.  In the case below, I pushed them all down 200px.

/*  Added margin
This is the margin for the sidebar.  Moves the sidebar down by increasing
The first margin value. */
#sidebar {
margin: 200px 0 0 0;
font: 1em ‘Lucida Grande’, Verdana, Arial, Sans-Serif;
}

/* Changed padding from 0 to 200px
This increases and decreases the size of the main page post section*/
.narrowcolumn {
float: left;
padding: 200px 0 20px 45px;
margin: 0px 0 0;
width: 450px;
}

/* Changed padding from 10px to 200px
This is the page that shows the post */
.widecolumn {
padding: 200px 0 20px 0;
margin: 5px 0 0 150px;
width: 450px;
}

Adding a dropdown menu to your pages

You have two options available to you when doing this.  I prefer using option #2 because it is easier, but it is up to you which one you want to use.

Option #1 using PHP

http://php.about.com/b/2006/04/20/drop-down-menu-redirection.htm

This is broken down into two parts.

For the first part, what you need to do is copy and paste the code into header.php.  This is located under Appearance -> Editor -> Header (Header.php)

Copy and paste the code near the bottom of the code as shown below in bold.  You will have to change the http://aprivatebeach.com/ to the pages that you want to link to.

<div id=”header”>
<div id=”headerimg”>
<h1><a href=”<?php echo get_option(‘home’); ?>/”>php bloginfo(‘name’); ?>
<div class=”description”><?php bloginfo(‘description’); ?>
</div>
</div>

<form action=”jump.php” method=”post”>
<select name=url>
<option value=”http://aprivatebeach.com/blog”>Blog</option>
<option value=”http://aprivatebeach.com/blog/about”>About </option>
</select>
<input type=”submit” value=”Take me there”>
</form>

<hr />

For the second part, you will have to create a jump.php file using a text editor such as notepad.  save the file as “jump.php” and save it into the directory where you installed your blog.

The code that you need to put into jump.php can be found at http://php.about.com/b/2006/04/20/drop-down-menu-redirection.htm.  Although I could just put it here, I like to give credit where credit is due.

Option #2 using Javascript

http://www.pageresource.com/jscript/jdropbox.htm

Pageresource.com is closed.  Therefore, WebsiteSetup.org is the new website.

What you need to do is copy and paste the code into header.php.  This is located under Appearance -> Editor -> Header (Header.php)

Copy and paste the code near the bottom of the code as shown below in bold.  You will have to change the http://aprivatebeach.com/ to the pages that you want to link to.

<div id=”header”>
<div id=”headerimg”>
<h1><a href=”<?php echo get_option(‘home’); ?>/”>bloginfo(‘name’); ?>
<div class=”description”><?php bloginfo(‘description’); ?></div>
</div>
</div>
<FORM name=”guideform”>
<SELECT name=”guidelinks”>
<OPTION SELECTED value=”http://aprivatebeach.com/blog”>Blog
<OPTION value=”http://aprivatebeach.com/blog/about”>About
</SELECT>
&nbsp;&nbsp;

<INPUT type=”button” name=”go” value=”Take me there” onClick=”window.location=document.guideform.guidelinks.options[document.guideform.guidelinks.selectedIndex].value”>
</FORM
>
<hr />

Moving the drop down box to the right and add some text

You may notice that your drop down box is too far to the left.  If you want to push it over, you will have to add a space or also known as &nbsp;

Therefore, to format your drop down box correctly, you will have to do the following shown in bold.  I also added some text to make it prettier:

For option #1 using PHP above:

<form action=”jump.php” method=”post”>
&nbsp;&nbsp;    Where do you want to surf today?
<select name=url>
<option value=”http://aprivatebeach.com/blog”>Aprivatebeach’s Blog</option>

For option #2 using Javascript above:

<FORM name=”guideform”>
&nbsp;&nbsp;    Where do you want to surf today?
<SELECT name=”guidelinks”>

This will push the drop down menu four spaces to the right.  If you want to push it farther, you can add more $nbsp;

Adding a favicon (favorite icon) to a WordPress blog

I added a favicon to my blog.  If you look to the left of the address bar, you will notice a small picture there.  There are lots of favicons for download online.  Furthermore, there is lots of help online to create one. The code in bold below is the line added to add a favicon to my WordPress blog.  Look for the following below:

In order for you to do this, the code needs to be added to the header.php file located in Appearance -> Editor -> Header (header.php) under the<?php wp_title(‘«’, true, ‘right’); ?> <?php bloginfo(‘name’); ?>.  Remember to change the http://aprivatebeach.com/beach-icons/Beach-music-icon.gif to the address that has your icon.

<?php
/**
* @package WordPress
* @subpackage Default_Theme
*/
?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” <?php language_attributes(); ?>>

<head profile=”http://gmpg.org/xfn/11″>
<meta http-equiv=”Content-Type” content=”<?php bloginfo(‘html_type’); ?>; charset=” />

<title><?php wp_title(‘&laquo;’, true, ‘right’); ?> bloginfo(‘name’); ?>
<link REL=”SHORTCUT ICON” HREF=”http://aprivatebeach.com/beach-icons/Beach-music-icon.gif”>

If you have an questions or comments, you can write a comment below.  All responses for clarification of the above instructions maybe added to this post.  I do the best I can to make this easy to understand for all, but I can always do better with your input.

Thanks,

David

signature

Leave a Reply