[Note: The following is the thought process I went through as I slowly turned my site over from static HTML to WordPress, a database driving PHP-enabled site management system built originally for bloggers. Following along with this, you will learn that many of my first assumptions turned out to be wrong, and others were smack right, but I’ve left the process of discovery stay within these articles to help others. If you need specific help with WordPress, or to validate any of my finds or miss-finds, please check the WordPress Codex, the source of WordPress documentation, and/or the WordPress Support Forums. Enjoy the ride!]
Next, I had to learn more about how WordPress works and what features and capabilities it has, and how to make it do what I want.
To begin the process, I had to break down the elements in my static site and then learn how WordPress could reproduce them, be it a built-in function or a plugin, or, yikes, if I had to write my own code. It also meant examining the features of my site and making some compromises. Some aspects might not easily transfer over, so what am I willing to change or give up in order to make this work?
Layout of Our Site
Thank goodness I spent the past couple of years totally converting our website over to CSS and leaving tables behind. This will make the conversion of the layout much easier. I also have designed our site to be fairly traditional in form but untraditional in CSS and HTML structure and I’m really proud of what I accomplished, so I want to keep a lot of that layout code.
I went through the HTML of the our site and broke it down into sections. Here is a breakdown of the sections and the equivalent CSS default or template in WordPress (if available) set in brackets:
- Body [body]
- This is the HTML area where I set my defaults for the rest of the page, establishing the base font, the color of the font (changeable on specific tags), and the background color.
- Wrapper [rap]
- This is the outside of the page that holds all the data inside. This is also the place where I put the CSS code that will adjust my page to suit the needs of the different Internet browsers out there. Microsoft Internet Explorer may be most popular, but it reads HTML and CSS a little differently than Mozilla, which reads it differently than Opera, and so on. I hate to retro-code or do backwards-compatibility, but it’s important to me to have as many people as possible view our site without things sliding off the page.
- Header [header – bloginfo()]
- On my site, the header displays the head graphics and web site title, and is seen on every page throughout the site. The same is said for WordPress, though they use the H1 tag in the header and I use the H1 tag as my article title. This will require some serious modifications for me.
- Content [content]
- In general, this is the area that holds all the content seen on the page. The title of the article (story), the subtitle, author, and the article contents. WordPress includes dates and times, the category the article is stored under, and other information that I will have to debate over – to include or not to include – as I customize my new site. WordPress’s content DIV also includes a CSS class they call “meta”, which is really confusing since they include the editor and category information and not META as in meta tags like keywords, description, etc. This was not a good choice in the name of these CSS classes as they are very confusing.
- Heading Tags
- This is an area that may require a bit of a debate in my mind. To get approved by Bobby’s Accessibility Validator, and other strict validators, the order of your header tags must be chronological. H1, H2, H3, H4, etc. According to the WordPress Codex article on CSS Selectors, H1 is for the site title, H2 is the dates of the posting and the title of the comments section, and H3 is the story title.
For the designer playing with the CSS, we have to remember to be careful changing these. These are also targets, the landing zones for links. For instance, the
id="comments"in the comment section isn’t just for applying CSS styles to the H2 heading. It is a marker for the place you land on when you click the “Leave a comment” link within the document. If you remove the ID, you loose the link. Still, you have some options for making changes.For me, the site title isn’t a headline but its own separate line without a header code. For WordPress, it is a heading. For me, the title of the article is H1 and the subtitle is H2 and H3 is a section title and H4 is a smaller sub-section. I don’t want the dates displayed on the new site unless they specifically apply to the article’s value. Most of the things we post are timeless. Just because people are switching from traditional cameras to digital doesn’t mean that the Rule of Thirds goes out the window. So why should I give such importance to the date and time and give it a header tag? To just skip the H2 in the generation process would make the tags go from H1 to H3 and some validators would protest. As I become more familiar with how WordPress works, I need to figure out a way to change this.
- Sidebar [menu]
- Our site features fixed links on every page to our main categories, the contact and about us pages, the blog, and a search feature and link to our site map. Underneath those are customized links to articles under specific categories and subcategories, including articles we want to highlight. WordPress has these features and these should be much easier to do in the new version 1.5 (aka 1.3) than they were, so I’m looking forward to taking advantage of these.
Under those links are some other features that might require a little more thought. We feature three random rotating javascripts to create two sections. The first features one of our nature photographs with a nature or photography oriented quote. The second one features a photography or travel tip of the day. I’ve found a WordPress plugin script that might be able to recreate these for me, but it is designed to do one thing on each page and I’m asking it to do three on each page. I might have to mess with it.
- Footer [credit (v1.2) – footer (v1.5)]
- I still have to do some research on this, but the footer in WordPress is called the “credit” in version 1.2 and “footer” in version 1.5. In our footer, we feature links to our main categories and specific pages like “contact”, “about us”, “links”, “site map”, etc. It also holds our copyright information and the date the page was last modified. This isn’t information so important to the viewer, but it helps us monitor what needs updating. These should be easy to incorporate into the “credit” or footer that comes with WordPress.
WordPress includes a few other DIVs (sections) that our site doesn’t. They are Feedback or Comments, and Calendar, though I’m sure I’ll find more. Currently, I don’t see a need for the calendar on our site since we don’t have scheduled activities and our content is not “timed”, but we do want the feedback on our articles so I’ll be modifying the look but not the actions of the feedback section to match our site layout and look.
Now that I have the sections lined up with WordPress’ default sections, it’s time to tackle categories.
Developing Categories
In WordPress, it seems you can have unlimited categories, which is one of the reasons I decided to try to use it as a Content Management System (CMS) for our website. It also uses subcategories. Ours are fairly simple. We created a bunch of “ings” to describe what we are “doing” on the road. Going, Doing, Being, Living, Telling, Asking, and Learning make up the seven core categories, with Home to tell people about us and how to function on our site. From there, we’ve broken these down into subcategories. For example:
- Learning
- Photography Technique
- Photographic Composition
- Photography Equipment
- Photography and Weather
- Business of Nature Photography
- Basics of Nature Photography
- Networking for Photographers
- Natural Wanders (locations)
Now, some of our categories relate to one another and I need to find a way to have them make an appearance alongside of their related content. For instance, Natural Wanders is actually an important subcategory of our Going Zone since it relates to photography as you “go” on the road, highlighting specific locations and giving photographic advice. This is also educational information that needs to be accessible from the Learning Zone because you are “learning” how to photograph in different locations. I have to figure out how to cross reference these in WordPress.
In reading information about WordPress, I’ve seen a lot of bloggers mention they have 20, 30, and even more than 40 categories. I would like to image they mean categories AND subcategories, but I think they mean categories. Let’s have a little reason here, folks. The more categories, the longer the list, the less likely people will scroll down a list of 40 items, no matter how exciting your website is. Find a way to group things together. We went around in circles as to how to group articles since we cover so many topics. The “ings” was a unique way of doing it, ahead of its time actually, so think about how you use your categories and how to help the user get to the information they are interested in. We have eight, and I think that is too many sometimes. You can have dozens of subcategories, don’t forget.
The new version of WordPress (1.5) permits generation of specific individual Pages for specific needs. I might just want to use these Pages to make my Learn category pages look different or generate different information from my Living category about living on the road. I might not, but this ability means categories have new meanings when it comes to laying out the foundation of your site. What categories you want to show up where and when is an important part of your site’s planning. I still have to learn more about this new feature, though, to see if it will work for me.
Organizing Links
This might not be the right time and place to think about it, but before I install WordPress and start recreating it to fit my needs as a Content Management System (CMS), I need to think about all the billions of links I have on my site. Some are incorporated into the data and some are just piles of lists. I want to do something about the Lists of Links.
My dream is to have my lists of links in a single database table, set up with fields to denote the category and subcategory, and sub-subcategory. For example, in my series on validating and optimizing your web page, I have a page with a section on validating the code behind your web page and I have a list of links after it that are appropriate to those requirements. On the same page is another section on web page size standards with its own set of helpful links. There is another section on testing your web page for accessibility standards and another set of links.
In my dream world, I want to be able to say “put link list from category “learn” and subcategory “web” titled “accessibility standards” HERE” and have it work. The query would pull this specific information from the table and bingo – I would have my list. I can put it anywhere I want. This can be done by PHP and MySQL and is a fairly simple request, but how to do this without messing up WordPress code…I have more to learn.
Still, while I’m thinking about categories, and the content within those categories, I need to start thinking about the other elements within my content and how to deal with those. After all, a CMS is supposed to SAVE you time and effort. There’s a lot I still have to learn about WordPress, and how to force my site into it’s parameters.