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 -->
Notice that the div for content begins in the header.phptemplate file but doesn't close there, similar to the rap div. I needed to know where to find the content div if I was having a style issue with that section, so in the index.php template file, I put this at the top of the file:
<!-- content div begins in header.php -->
I may move this so it sits together with the rest of the content, depending upon what I decide to do later, but for now, I needed to know where it was so I could track down what I was doing.
I went through every template file and did the same thing, based upon my notes in my printed test page. Now it was time to hit the < a title="article on designing the CSS in the WordPress Theme" href="index.php?p=594">CSS style sheet.