Taking Your Camera on the Road

In order to make any adjustments to the HTML of your new WordPress site and Theme, you have to find the references to the styles in the php code of each page section. In WordPress 1.2, this was easy because most of the information was found in the index.php page. With WordPress 1.5, everything is divided up among the different sections with the new modular template files. One CSS style will start in one template file and end in another, passing through two other template files on their way to the closing tag. This can make it difficult to track down your WordPress Theme CSS styles.

I’ve gone through the list of php files in the Classic Theme and Default Themes and used those as a base from which to modify my web page styles. Every WordPress Theme should have these base core CSS styles, but they might not be the same, and they might not be in the same template file. But this list may help you track them down.

Here are the php WordPress template files in which you will find the following styles:

index.php

H2
post
H3
storytitle
meta
storycontent
feedback

header.php

rap – begins
H1 header
content – begins

sidebar.php – dependent upon theme

menu
categories
search
archives
meta

footer.php

credit
cite

comments.php

comments
postcomments
commentlist
author
email
url
comment

comments-popup.php

comments-popup
H1 header
all comment styles (see above)
credit
cite

I’ve been poking at this WordPress Theme of mine for a few days and all the little nitpicky stuff is getting me down. There are a lot of major and minor things to clean up. And I’m totally not happy with how FireFox is handling my old layout. In fact, I’m disgusted with my old layout. Guess it’s time to really do what I want to do.

While working on my CSS design experiments a few years ago, I also put together some serious state-of-the-art web page layouts and designs. Unfortunately, most browsers couldn’t keep up with it. Too graphic heavy and too many bells and whistles. It’s been about three years now, so I figured that if people haven’t upgraded their browsers to at least something that is two years old, they never will and I can only do so much for them. It’s time for me to get more serious about my own web page design and design for ME and not to make it simple simple simple for the rest of the crowd.

I decided that I wanted to try to create a fixed background image of our trailer meandering down the Talimena Skyline Drive in Arkansas for the main and category pages. Over that, I wanted a translucent filter which would allow the content to sit on a semi-opaque white background when it moved over the content. This way, when the viewer scrolls down the page, the content moves but the image doesn’t. Eric Meyers has the most wonderful example of how this works on his site.

I did all kinds of things, trying this and that, changing the colors, opacity, and nothing was good enough. And it would look great in Internet Explorer and crap in Firefox, and then crappy in IE and wonderful in Firefox. It was all close, but it just didn’t have the punch I wanted. I also really loved having nothing but black text on a white background for the long, wordy articles I tend to write. Clean and simple while still having a kick. I wanted to get back to our roots, life on the road and photography, so I wanted to look more “photog” than “educational”. The opaque background for the text didn’t work. It was messy and hard to read.

Brent, my hero, finally convinced me to make the background image fade into the background so the header area would feature the photograph fading to white and the majority of the background would be white, allowing the text to be against a white background. Brilliant. Totally brilliant. He knows nothing about how all this works, but he can take one look and come up with the solution. One more reason why I keep him around and adore him desperately!

So I slammed the photograph into PaintShopPro and fought for ages to get the fade right, creating graduated filter after filter after filter to drop the photograph down to white without leaving a line or making a mess of it. And then I had to test each one to see how far down it would go before it interfered with the text. Then back to the drawing board, literally. Finally I got it right.

Not long after, someone emailed me that they are using a super wide screen resolution and the photograph hangs off into white background when the screen width reaches the end. After a lot of new research, I set the image to be 1024 pixels wide based upon the widest average screen width in use. I thought that would be plenty. Because I set the font of the header information to white, to contrast against the photograph in the background, when the screen stretches all the way across beyond 1024 pixels, the floated text floats all the way over to the right with white text on white background. Not a good combination. This brought a great deal of angst.

I hate websites which decide the width for me, leaving blank edges all around. I like fluidity and elasticity in web page design, using up the whole screen real estate, or not, dependent upon the user not my design. Screens that now reach over 1024 pixels wide is a lot of wide screen real estate to cover. So, after years of working to tweak my lovely layout to be fluid with the screen widths, I’m back to debating about how to deal with screen width issues again.

After consulting with some pro designer friends of mine, I come up with a temporary fix. I set the background image to repeat horizontally for ever and ever. It isn’t good, it isn’t pretty, but it works. If I decide to leave it this way, I will probably soften the right edge to blend better with the left edge as it repeats. The challenges a web designer is faced with. Or I set it to 1024 pixels wide, let the user make it narrower if needed, and the wide screen user can suffer with empty space on the right side of the page….what to do? I’ll debate before I decide. The majority of Internet users are still stuck on 800×600 though use of larger screens are rising quickly.

Linking Graphics and Images in WordPress

After dealing with the background, I started to work on each individual post to make sure all of the HTML imported correctly, fix any bugs, and make sure that the links to the graphics still worked. This was a little more of a challenge than I thought.

Years ago, I’d set up my photographs and images in their own folders. From inside an article, the links to the graphics were set with relative links. This means that instead of having them linked via an absolute link like "http://www.examplesite.com/images/ball.gif", if the article was in the “Learn” folder and the subfolder “Biz” for articles about the business of nature photography, the relative link for the graphic would be "../../images/ball.gif". The dots and slashes instruct the browser to look for the graphic two directories up to find the images directory and the graphic would be in there.

With the move to WordPress, the issues of relative links gets kinda thrown out the window. My Theme template files are in a sub-sub-subdirectory of the root. So would the relative link have three sets of ../ in order to get the image? Nope. Figuring this out took some detective work, though.

When someone visits your WordPress site, the literal address is aimed at the index.php in your root directory. This template file, while called index.php isn’t actually the “real” index file. It features instructions that basically say “go get the templates and fill them with information from the database and pretend that everything is generated from the root directory unless you have instructions otherwise.”

So it grabs the index.php from your theme folder which is usually at something like:

http://www.example.com/wordpress/themes/mytheme/index.php

Let’s work this out then. The root index.php leads to the Theme index.php and the actual “web page” information is pulled from the database to generate the page, so what should the link be? From the Theme or from the root?

From the root. Even though your information gets pulled from different sources, the root file that controls all the action is still based in the root directory. So the relative link for images has no use for the dots and slashes since it will look for the images directory from the root.

To ensure that they are found from the root, you can add a slash to the beginning of the link like this:

/images/ball.gif

This forces the browser to look at the root directory first for images.

This led to my first lesson in doing a search and replace in the database to get rid of all those dots and dashes in the image links.

UPDATE wp_posts SET post_content = REPLACE (
post_content,
'<img src="../',
'<img src="');

Looks simple, but it took me a couple hours to figure this little SQL query statement out. I’m totally new at this MySQL database stuff, though I have years of experience with MSAccess and other databases, this is different.

The query basically instructs the database to look in the wp_posts table in the post_content field for any occurrence of the first line of <img src="../ and replace it with the second line of <img src=" to fix my little problem. Little did I realize that this piece of code and I would become very intimately acquainted.

I did a search for one set of ../ and then for another, to make sure I got all the ../../../ sets. Cleaned it up in seconds. Wow! Powerful little query, but it can easily search and replace the wrong thing and screw things up. I started making frequent backups of my database to make sure that I had something to go back to if I did mess it up. And I did, but everything was all fixable.

As I looked through each post, I realized that my bullets weren’t showing up. I had copied over my list CSS directly from my old site and the relative/absolute link thing hit me here again. The style.css is called directly from within the header to the style sheet in my Theme. This means that the style sheet looks for its links from the folder the Theme resides in, because that is where it also sits. Any link from within the style sheet has to be directed from that folder to the image folder or the spot within your site that the images sit…messy.

A command decision had to be made. I recommend that if you are using any graphics in your CSS, like backgrounds, replacement graphics for the lists or headings, put them in the same folder as your style sheet to ensure easy loading. Or in a subfolder of your Theme folder. Big lesson learned. This is much easier.

Another Image Link Solution

While working on the test site, I had a terrible time dealing with all of these relative links for images, before I figured out about the search and replace query in the database. So if you aren’t ready, like I was, to do a massive search and replace in your database, then you can use the following tip.

In the header.php template file, just before the style sheet reference in the head, paste the following line, changing the appropriate information to suit your needs:

<base href="http://www.yourdomain.com/wordpress/"/>

This directs your url references so you can use relative links that will not work from where the page is but from the base reference. You can then use relative links like this:

<img scr="wp-images/bicycle/bike1.jpg" alt="photograph of a Schwin bicycle">

And the graphic will be found as if it was in:

<img scr="http://www.yourdomain.com/wordpress/wp-images/bicycle/bike1.jpg" alt="photograph of a Schwin bicycle" />

Lacking Links

Now that the background was finally set, and I could see the images on my site, it was time to look at the header title, article heading titles, text, and links since they lay on top of the background.

The colors in the photograph of the road winding down Talimena Drive is wonderful, fall colors, and it blended down wonderfully into the white. But the text that laid over it before it reached the pure white included the title of the article or page title (category, archives, etc.), the top text of the sidebar, and the beginning of the article. I knew the colors needed to be earthy, since that was represented in the background, but which colors to choose?

I tried everything. White was great across the top for the header, giving enough contrast for the letters to show up, but white wouldn’t work for the mid to total white range. I tried earth tones like browns, and greens, but they blended in with the photograph. Not enough contrast. I tried a dark green on the heading titles and could see them fine in the content that went into the white background, but I couldn’t see them against the photograph. I tried a light green, but it looked awful against the white, though it did stand out against the photograph. I didn’t want to push the whole content down to where there was more contrast in the photograph, and I didn’t want to bring the white gradient up any further. ARGHH, the compromises we have to make in design.

I discovered several color helping sites that really gave me a lot of assistance in figuring out the color scheme, but it wasn’t until Brent stood behind me again, the unassuming brilliant designer that he is (but don’t tell him because he doesn’t know), and said, “Make the titles a deep red, not purple and not orange, but a rust base red. And then match the links to those colors.”

Through the use of the following color scheme sites, I was able to finally pick a good color scheme to set the links and heading colors.

• Online Color Scheme Generator
• Wellstyled.com’s Color Scheme Generator 2

We found a good red and I set the styles, so now I needed a good link hover color. Brent recommended that I turn “red into gold” which worked wonderfully for the links in my sidebar and throughout the document against the white background, but the h3 heading for the title of the article sat in the background photograph and the gold color on the hover made the title disappear into the photograph. Not enough contrast. GRRRR.

We hit the color schemes again and finally found a lighter red color that worked wonderfully as a slight contrast shift for the link hover. The rest of the links will feature the gold hover color.

We decided to keep the “earthy” tones and set the sidebar titles and “box” lines in a rich green color, which adds to the fall, natural colors throughout. I love it.

Step-by-step, this WordPress Theme and site is coming together.

Moving On To the Structure

Well, I can finally “see” my new WordPress test site. It isn’t as pretty as I want, but it is getting there. Now that the core stuff is there, it’s time to attack the HTML, PHP, and structure of the site again and really pull all of this together to be the site look and feel that I want.

With the move to WordPress v1.5, things are a little more challenging for creating a CSS file. As I mentioned, the header, footer, index page, and other elements are now divided up into pages which are “included” in the main index.page. A div or class will start in one template file and finish in another, so things get a little crazy and confusing.

I realized that the effort to install Apache, PHP, MySQL and WordPress to my computer to help me create my new WordPress site look and Theme was not the way to go. Everything in WordPress is done “online” and I needed to tweak my Theme without being online all the time.

I created a test story content and pasted it into a WordPress entry, filling in the title and choosing a few random categories. I used different headings all the way from H1 to H5 so I would see what the Theme I’d chosen would do with them, adding nonsense text between the headings. I created a list, then a couple of nested lists, going a few layers down, so I could see what would happen with those styles. I added some graphics, and basically made it look like a regular one of my articles. I saved the post and then viewed the file on my test site.

Viewing the source code, I copied it and pasted it in a new text file I saved on my hard drive in the WordPress directory where my test theme was located under the name “testing.html” – not on my site. Using the ability to view web pages from a hard drive, I knew I could work with this test file on my computer and not consume bandwidth and waste time with frequent uploads of the modified style sheet and html page as I work on it. I found out later that this technique is called a sandbox.

The style sheet link in the head was changed to the local style sheet file in the testing.html, and then the step-by-step process of modifying the CSS file begins.

Sorting the Style Sheet

The first thing I noticed is that the style sheet was sorted alphabetically. Why anyone would do that….well, that’s another topic, anyway, I wanted to “see” my page via the CSS so I quickly went through and grouped related things together with headers. For instance, I wanted the core structure of my site all together, so that when I changed the width of the sidebar, I could change the width of the content without jumping from “s” to “c”. If I want to change of my headings, I want all my headings in one place so I can make sure that the font size of H2 is larger than H3 which is larger than H4, and so on. Once that was done, I started with the basic elements.

Starting simply, I changed the basic font in the body tag, and then in the paragraph tag, which is grouped with the list and feedback tags in the classic layout. These can be changed and separated later. I also added a font in the header to control the look of the header differently from the rest of the page.

The next step was to identify which section is which. I went through the structure tags and for every ID and major class I gave it a colored border like border: solid 1px red to help identify which CSS selector referenced which section.

After viewing the file with the new borders put in place, I now had a different color around each section. I identified which section was the header, sidebar, footer, content, and so on, and went back into the style sheet and put comments in to help me know which style matched which section, like this:

/* header styles */
#header {margin:10px; padding: 5px; ...}

As I went along, if I found some styles that would go in the header, then I moved them in the style sheet to the header section, same with the footer, content, and so on, grouping related styles together.

I always call the sidebar the sidebar in my styles, but I found that the sidebar in this theme is called menu, identified by the colored border around it. With the sidebar/menu outlined, I now knew basically its dimensions. It was on the right side of the page and I wanted it on the left. So I moved it by changing the position to the left side of the page. The main content area is now overlapped and the width is screwed up, but one thing at a time.

As I went through the CSS, I found the reference to the calendar. Since I won’t be using that, I deleted all the calendar style codes, but left the reference in the html. Right now I’m concentrating on the style sheet and not touching the html. I will get to that later. One thing at a time.

I changed the header to be 100% across and the height to be 120px. This makes room for the banner graphic from our old site set in the background. There is no H1 style code in the style sheet, but it does appear in the header – in fact, it is the header, listed as <h1 id="header">. This makes the header interesting as it will shrink or expand based upon the font size and the amount of text that wraps around, though it can be influenced by the specific height of the DIV. Since the H1 tag is the header, the only text in the header would be inside of the H1 tag. This makes it a little limiting. I may have to change this when I get to the html.

Now, the main content has to be modified to move over to the right to accommodate the new placement of the sidebar. I changed the CSS to match our unique page layout design that I developed. I guess it’s not so unique any more. I spent months developing it for our site and writing about it, and now, four years later, it’s a standard and not much different from WordPress’s core Themes. It was sure innovative at the time, but I guess I was ahead of my time. Anyway, the text in the content section went right up against the edges of the box, so I added padding to give it some “room”.

There is a lot more that I will need to fix in the sidebar/menu, but right now, things need to be fixed in the main content area.

The Content Section

Links are very important to the success of a page and I love the links I had set up with my old website, so I just popped them back in. They feature several characteristics dependent upon what they do. Here they are:

a {color:#0000CC}
a[href], a, a:visited, a.external:link, a:hover, a:active {text-decoration:none}
a {border:0;margin:0;padding:0}
a:visited {color:#006699}
a:hover {color:#003399; background:#CCFFFF; border-bottom:2px solid #003399; border-top:2px solid #003399; border-left:0; border-right:0}
a.external:link, a.external:visited {border-bottom:0.05em dotted}
a.related:link, a.related:visited {font-weight:normal}

I will tweak with these when I get the rest of the styles done, but for now, I’m happy with the familiar. Ah, I made a note to remember to set the links in my sidebar menu to either have or not have the borders on the hover characteristic as they will be influenced by these links. I make so many notes as I go through this…but I have to. There is so much to do and the memory…well, it is whelmed by all the stuff on the “to do” list.

Then I add my list from my old site, but changed to match the new selector names. I like my link graphics, so I decided to keep them for now, too. They look like this:

.storycontent ul li, .storycontent li.number {list-style-type:upper-alpha}
.storycontent ul {margin:0.3em 2em; list-style-position:outside; list-style:url(ball.gif) disc; font-size:98%}
.storycontent ul ul {margin-top:0.3em; list-style:url(bullet.gif) square; font-size:96%}
.storycontent ul ul ul {margin-top:0.3em; list-style:url(ball1.gif) circle; font-size:95%}

You noticed I kept them in the storycontent section. I wanted them to stay there and not be inherited in the sidebar menu’s set of links. This is planning ahead, and learning from lessons I made in the past.

The headings are a bit more challenging. The top three (h1, h2, and h3) are assigned to specific information. H1 is the site title and represents the entire header. H2 is the date and H3 is the story title. I will be moving the date and will want it small, so I’m going to do some fiddling with these defaults.

I want to change the H2 to my story title and have the H3 be the sub-sections within the article. I will then use H4 as a sub-subsection, stylized very simply. The H3 heading I’ve designed to be very distinctive and I like it. I use a repeated graphic, one of our nature photographs, in the background and change it according to the seasons. It is styled like this:

h3 {clear:right; color:white; font-size:140%; font-weight:bold; padding:8px; margin-top:1em; margin-left:-10px; background:url(h3icebar.gif) repeat #000099}
h3 a {color:white}
h3 a:visited {color:white}

I am also particularly fond of the design of my blockquote. I discovered part of it while working on my CSS experiments and then tweaked it to suit my own needs. It features two sets of opened and closed graphic quote marks around the quote, with the author’s name in small italics. Since I already have all my blockquotes stylized within the content I’m uploading to the database, I decided to keep my blockquote design. I simply replaced the default blockquote with mine. For reference, here it is:

blockquote {color:navy; font-style:italic; font-size:105%}
blockquote i {color:#3366CC; font-style:normal; font-size:70%; text-align:right}
#nickwrapper {display:block; position:relative; width:80%; margin:10px 0px 10px}
blockquote.nick {margin:5px 0px; background:transparent url(quotel.gif) left top no-repeat}
blockquote.nick div {padding:0 53px; background:transparent url(quoter.gif) right bottom no-repeat}

The layout in the HTML is:

<div id="nickwrapper">
<blockquote class="nick"><div>You have learned something, and I have learned something.<br />
Too bad we didn't learn it sooner.<br />
We could have gone to the movies instead.<br />
<i>Balki Bartokomous, TV show: Perfect Strangers </i></div></blockquote></div>

I also added a bunch of details from my old site that include specific text colors, boxes for highlight content, and other elements that add to the overall look of the page. I simply copied and pasted these into the style sheet. They will appear with the content which already holds these HTML and CSS references in my articles imported last week into the database.

Now to the really challenging aspect of the style sheet in WordPress – the Sidebar Menu!

The Sidebar Menu

The menu hosts some oddities that make working with the styles different from most containers. The whole thing is set up inside a series of nested lists. Nested lists, like the table layouts of old, can be a nightmare unless properly laid out. Since nested lists inherit style values from the list style above it, it can be difficult to create truly distinctive looks for each section. WordPress tries to make this easier by using classes for each section, but it is still challenging if your desire is to create distinctive looks for each section.

Here is the basic and very simple layout of the nested lists that come with the default setup of WordPress to help you keep track:

#menu
#menu ul
#menu ul li - Heading Title: Categories
#menu ul ul li - Links List Under Categories
#menu ul ul ul.children - Sub-List Under Categories (for subcategories)
#menu ul li - Heading Title: Search
#menu ul ul li - Links List Under Search
#menu ul li - Heading Title: Archives
#menu ul ul li - Links List Under Archives
#menu ul li - Heading Title: Meta
#menu ul ul li - Links List Under Meta

See the repeating patterns? If you change the look of #menu ul ul li, you change the look for each section featuring that selector reference. If you want a different look for your Categories list and a different look for your Archives list, WordPress tries to make it easier because, while they are not listed in the style sheet of this theme, they may be in others, so you need to know or make sure each section features its own ID. They are:

#categories
#search
#archives
#meta

To change the look of the list identified as “categories”, type in #categories in your style sheet and then make the modifications you want. Same for the rest of the list. This way, you can have your categories be a large font with a blue background, and the rest of your lists feature smaller fonts with pink backgrounds…or whatever. Experiment with different looks to get the one you want.

To add to the confusion when it comes to stylizing the style sheet, you need to understand that these are nested lists of links which inherit the “parent” style. This makes the issue of styling these doubly hard.

Links typically have their own style. They have an inactive, static look before they are clicked, a style when the mouse moves over the link, and another style after the link has been visited. Because you are dealing with the issue of the parent/child relationship of the nested list and the fact that these are links, we got the link styles actually becoming the parents to the list, which makes the list become a child, and each nested list has it’s own parent/child issues within it. Oh, boy!!

Try to following the bouncing CSS drama for the sidebar, if I can explain it well enough.

links/anchors

The links tend to be set for the entire document, which would make their styles become the parent to the links within the menu. If you want them styled differently, each style, as listed below, must feature its own link style.

#menu

The ID for the entire section is #menu. It sets the whole look for the entire sidebar menu including the background, fonts, sizes, etc. To change the overall look for the entire sidebar menu, make changes here. For text and non-list and non-link items, the codes within the menu style will become the parent style for the sidebar.

#menu ul

This is the opening of the list and sets the overall look of the entire list under the menu style. If you have an unordered list list within your content, it will look different from this list, unless you have the list styled on its own and not under the content style (such as #content ul. If you don’t, the styles for the ul become the parent to this list. If you are having a problem trying to adjust the look of the sidebar/menu list, check for the parent ul for the source of the trouble.

From here, any changes to the relative font size, type, or style will be given to the list unless specifically modified in each section. For examples, if you set the font to be 90% of the basefont of the rest of the document, and set the font to 80% in the next list, the font size will actually be 80% of the 90% parent of the 100% grandparent (so to speak) style, making the font actually 70% of the base font, which is pretty small. Play around with creating different looks, but remember, the ones below (children) start from the references created here.

#menu ul li

This is the first actual list of links. WordPress uses this to establish the look for the Categories, Search, Archives, and Meta titles or headings. Remember, these are the static headings that give these titles, they are not actual links. The actual li tags are labeled with IDs relative to their type, be it Categories, Archives, Search, and Meta. Because these are all connected via their own list, when you change the #menu ul li style, you change all of them. But you can individualize these headings, but remember, they inherit the layout of the #menu ul li so play around with this to make each section different. To change the look of the links below the headings, you need the next style.

#menu ul ul

This establishes the outline of the first list of links to actual information. If you want this list area to have a specific background color or image, or be highlighted in some way, this is where you make those modifications. For example, if you want your overall background for the sidebar menu to be yellow and yet you want each section of links to be in a box with a background color of green, you would change it here. You influence the look of the actual list links in the next section.

#menu ul ul li

This section is the sub-list of the main list and contains the specific categories under Categories, the months under Archives, and so on. This section formats the look of the items, which are links, in the list itself. If you would like the list to have bullets, graphic images, or default squares or discs, you set this information here. Remember, these lists are lists of links and while you can change the look of the lists, you need to change the look of the link features elsewhere.

#menu ul ul li a:link

If you want to change the look of the links in the list of links under the different titles, this would be the most basic link style you would add. It might look like this in the style sheet:

#menu ul ul li a:link {color:red; font-weight: bold}

Because the above #menu ul ul li only stylizes the “look” of the list and not the link itself, you have to change the look of the link here.

#menu ul ul li a:hover

When the mouse moves over a link, you can change the way the link looks by styling the hover attribute. Many people choose to have an underline appear, or to have the colors of the words change. Others get more dramatic and have the background color change, too, or any combination of these. Beginners often set the hover to “bold” when the link isn’t bold when resting. When text is bolded, it adds weight to the size of the font and makes it slightly larger. This sudden enlarging of your text pushes the other content around, often causing the whole page to jump around a little. Be sure and bold both the inactive link (anchor) and the hover to make it stay the same size if you want the look to be bold. From there, use your imagination.

Here is an example of a basic hover effect and how to use it with this style:

#menu ul ul li a:hover {color:purple; background: yellow; text-decoration:underline}

Remember, if you have a straight a:hover styled elsewhere, it will become the parent to this style and you have to check there if you have styling problems with this link style.

#menu ul ul ul.children

Many people want to have their list of main Categories also feature the subcategories. This list of links become the “children” of the list. To stylize their specific look, which is typically to make them smaller and feature a different bullet, you make those modifications here. For example, if you had a Category called “WordPress” and you wanted two subcategories called “Themes” and “Plugins”, they would be the “children” categories and styled under this style. To style the links, the style would look like this:

#menu ul ul ul.children a:link {color:green; font-weight:normal }

To style a specific group of links, remember they have their own CSS ID, so to change the Categories section, remembering that this section has style parents that have to also be taken into consideration, it might look like this:

#categories li a:link {color:green; text-decoration:none; font-weight:bold}
#categories li a:hover {color:red; text-decoration:underline; font-weight:bold}

Using any of the specific ID tags such as #categories, #search, #archives, and #meta, you can more specifically change the look of the list and the links in each of these sections. Again, they inherit the styles from their parent #menu ul ul li a but you can still customize them if you override these styles. Experiment to get the effect you want.

Our List Of Links Menu

I really wanted to keep our sidebar layout. This involved a little more messing around with the CSS and the HTML. I needed to have the list of Categories be distinctive from the rest of the lists. WordPress already gives the different sections in your menu list of links identifiers which are not listed in the default classic style sheet. They require adding, so I added them, messed around for an hour with great frustration and then gave up. I was beaten down by the parent/child relationship of the styles. It’s so damn confusing.

The problem comes from the “inherit”. In the default layout, there are four main link lists and their sublinks listed under each. Each inherits the look of the one above it, and modifications to each one means battling with the parent style. I want the #categories and #search to look different from the others, and the others to have their own consistent look. Fighting browser bugs and the frustration of these nested inheritances, I decided to say “hell” with the nested links and I dropped them. I set up divs with the ID for each section and having a simple non-nested list underneath each one. This way, I have much more control over the end results and I don’t have to battle with the nested list/links parent/child thing. This meant I had to go into the HTML to change the codes. I decided to change them first in my test file so I could experiment some more, and then I’d make sure and make the same changes in my sidebar.php template file – another thing to add to my growing list of things to remember.

Remember, this WordPress Theme is for ME and not for the public, so I can do whatever I want. But it does give you, the innocent bystander, the idea that other options are out there.

The Footer

The footer by default in the classic WordPress theme is the credit. The same was basically true with the simple theme I’d chosen to slice and dice. Since the link to WordPress is in my meta section of links in the sidebar/menu, I wanted my own set of links at the base. I dug into my old site’s footer codes and replaced them in the footer section on my test page. When I tweak and mess with them to get them right, I’ll move them over to the footer.php template file. Another thing to add to my growing list of things to do.

Cleaning Up the Mess I Made

As you can tell, nothing remains of the original theme I used as a starting place. I’ve hacked and whacked it into my own design. In short, I’ve made a big mess of things. Now that all the styles have been set, it’s time to clean them up. Yes, there is still more tweaking and fussing to be done, but the core work is now done and the test page is starting to look like something I can work with.

To start cleaning things up, I went through the style sheet and deleted all of the colored borders I’d originally put in to help me find the different sections. Since I pretty much know where everything is now, I can get rid of these. If need help locating an area in the future, this is an easy thing to add.

Then, I double and triple checked the look to make all the little parts look like what I wanted. Sure enough, some little annoyances slipped in, but now I had something I was familiar working with, so it only took a few minutes to fix it all up. The tweaking of the CSS can go on forever.

Now it was time to attack the style sheet. I’m sure that you, like me, made notes all over the place, adding spaces and indents – well, the thing is a bit of a mess. I had notes in there left over from dealing with the nested lists in the sidebar that said things like “Damn category links are here” and “Third level nested list styles here”. I cleaned these up pretty quickly. To clean the extra and unwanted spaces, I used a simple search and replace to get rid of triple line breaks and spaces at the end of lines and so on, working the data into a format that I’m comfortable with. Some like having their CSS styles spaced just so with indents, I like clean and simple.

If you choose to optimize your style sheet, to clean it up and condense it by removing unwanted spaces and elements, do so very carefully. I recommend a multi-stage effort. Unless you are very familiar with CSS, just clean up the excessive spaces and tabs and leave the code alone. If you are experienced with CSS, you probably already know what to do, but I’ll remind you anyway. Go through the code and condense redundant declarations into a single reference with multiple selectors.

As you become more accustomed to CSS, you can get really drastic about cleaning house. I have a detailed explanation and resources to learn even more in our article on Optimizing Your Web Page.

Now that I’d set up the core look for the website theme, and cleaned up some of my mess, it was time to attack the HTML…oh, boy, more fun!

Wouldn’t you know it. Here I am, working my buns off to learn how to use WordPress, importing massive old articles into the database, playing around with a test site, and I’m about ready to make it go public, and WordPress releases not only a new version, but a humdinger of a new version. It requires some rethinking as well as re-tooling.

I began by installing a new test site with the new version. I tried the “normal” method of installing WordPress 1.2.2 and then “upgrading” to 1.5 but it didn’t work. After two days of messing around with it, I finally deleted everything in the directory, dropped (deleted) the tables in my database created by 1.2.2 and did a clean install of just WordPress v1.5. Worked like a charm.

The first thing I saw when it worked was the WordPress Administration’s new feature called the Dashboard. This seems to be recent posts from the developers’ forums to help you keep up with the changes and things you need to know. Nice feature, and a nice way to keep in touch with what is going on with the WordPress Community. I like it. I then went through and clicked every tab and every subsection tab to see the changes in the new version and to make all the little fussy changes and adjustments to make the site “mine”.

There are a lot of new features and the Page feature is a big improvement and change. This allows you to set up independent customizable pages that will still communicate with your database information, but they can be unique in and of themselves. The Pages work outside of the WordPress Loop and is used to create pages that don’t “fade with time” like “About”, “Contact”, “Events” and so on. This will be perfect for all of the administrative web pages I need like my own “About” and “Contact”, but also my Policies, Accessibility Policies, Reprint Requests, What’s New, and Copyright. I started to make a list as I thought of the different ways I could use this new feature.

In order for the new Page feature to work properly, the .htaccess file must be read/writable, so be sure and change it to at least 666 in order to work. When you create a new Page, it writes to the .htaccess file to add the file to your server’s redirects and rewrites. If you change the page in any way, you will have to update the changes in your .htaccess file. I learned the hard way.

Wow! WordPress Themes

In the past, everything in WordPress radiated from the index.php file in the root directory. Imagine my surprise after installing WordPress v1.5 to find that the index.php is only 4 lines long! After some digging through a lot of information, I learned that the new version uses Themes for its layout and presentation styles. Each WordPress Theme has its own index.php file found within their appropriate theme directory under the wp-content directory. And the index.php isn’t just the only file. It is now divided up into modular template files, with each “section” having its own template file.

This is actually brilliant as it protects your files from being written over during updates, and it allows you to make changes to the header or footer but not the rest of the page, but it takes a little hunting and a little learning to figure out how they all work together and how you can make them work for you. Make sure that you are working in the right Theme template directory, and that you have backups of the originals…just in case. Another lesson learned the hard way.

I realized quickly that I would have to create my own WordPress Theme as the ones that were out there were nice, but not “me”. This is the beginning of the fun part – oh, and if I have any hair left on my head when we’re done, please remind me I said this was supposed to be “fun”.

Cleaning the Template Files

I spent a lot of time redoing the template files for the theme “base” I finally decided upon. I wanted to start with as clean a plate as possible and so I hunted through the available themes and found something that had the “look” I wanted with a header, footer, single sidebar, and a wide content area. Luckily, I found Simple Clean by Rohit Kumar on the WordPress Theme Contest site. It features no graphics, no bells or whistles, just nice clean layout for me to totally change. While I tweaked and bent it into my own design, so much so that there is no evidence of Rohit Kumar’s Simple Clean theme at all, it was a great core to work with. It was a place to start.

The first thing I did was to get rid of all the horrid tabs and spaces all over the template files. While tabs within HTML and PHP are considered “standard”, trying to read through code that is tabbed 10 tabs over from the left margin makes me nuts. Things get all scrambled as text editors try to figure out what to do with all those tabs. So I got rid of them all. Remember, this is a WordPress Theme for ME, not for anyone else to use and not for release to the public. I can do whatever I want to my Theme.

I found that once I did a search and replace for all those spaces and tabs, including spaces and tabs at the end of a line of code before the line break (what good do those do anyway?), my template files shrank down tremendously. Smaller the file, faster it loads.

Now I needed to go through and make sure I knew what everything was. This wasn’t as easy as I thought it was going to be.

I posted a test post and viewed it as a web page in my Internet browser. I hit “View Source” to look at the code and printed that out. Step by step, I went through all the many pages and made a comment note about which section was which and what style applied to which section. For instance, in the header of the page, there is a CSS div called header, but there is also an H1 heading inside of the div. I made a note of where that div started and ended with a red pen on the paper. Above the header div, I found that there was a rap div and I had to go through, counting every div, to find the ending of the rap div at the end of the entire page. Since all it says there is </div>, which is useless information, I made a note that said “end of rap code”. Very simple. I traced every div and class that I could and then labeled which section I thought was which.

Then I went into my theme folder and started with the header.php template file. I traced the information in the template file through my generated HTML page. Sure, there was more information in the HTML page than in the template file, because the template file had code that generated the information from my database, but I could follow enough to figure out where the rap and header and so on began, and made a note at each place.

Just below the body tag in the header.php template file, I typed in a comment like this:

<body>
<!-- header begins -->

At the end of the header.php template file, I added another comment:

<div id="content">
<!-- sidebar ends and content in index.php begins -->