My Transition to WordPress

I am a designer with a solid understanding of HTML and CSS. Prior to this project, in order for me to create a dynamic web site I had to hire a web developer to write, primarily in PHP or JavaScript, code for the back-end. With my limited resources I could not afford custom programming for my own web site, a plight I share with some of my clients.

WordPress

Over the past few years I have witnessed WordPress sites leap beyond merely blog-based sites to providing dynamic web experiences previously offered only by writing custom code. WordPress is an open sourced Content Management System (CMS) application written in PHP code. The complied PHP code produces HTML files styled with CSS to be viewed in a web browser. The quality and the level of expertise in the documentation on the WordPress site convinced me to try it as the foundation of my web site because it offered me these important benefits:

• Easily manages content using CMS.
• Automatically creates links to deep layers of information within the site and an archive.
• Provides built-in search.
• Effortlessly imports and exports data to and from external sites.
• Provides a rich interactive environment well suited to encouraging conversations and debates.
• Affords efficient SEO.

I am of that generation of designers who are completely self-taught in all things digital. Working in solitary confinement the only way I know how to learn something new is to roll up my sleeves, assign myself a project and do it.

Sadly, out of the abundance of material on the subject I couldn’t find anything written especially for designers like myself, who were transitioning from creating static HTML sites to dynamic PHP sites. Articles were either too simplistic or too complex. I instinctively felt I could not possibly be alone in this migration. This article assumes the reader is familiar with HTML and CSS.

How Hard Could WordPress Be?

The very first step after installing the WordPress application required me to choose a “Theme”. But wait, I am a designer! I have my own ideas as to the look and feel. Don’t I want to produce my own theme? I knew that CSS still determined the look of the HTML elements used. What exactly did the “Theme” do?

The first hint that I was in foreign territory was the confusingly vague definition of a “Theme” on the WordPress site. I struggled to comprehend what I needed to do to create the design I wanted in WordPress. Would I need to modify the PHP files? I knew that would be beyond my skills.

The Default Theme

I began by assigning the default WordPress theme to my site. Automatically, pages were created such as home, search results, error results and archive all styled with the default theme. Wow, seeing the result of the default PHP code was really cool. If this was a static site I would have laboriously hand coded each one of those pages along with all of the links. Great, but how do I make the default theme look like my design?

The source code of my auto-generated pages had quite a few div tags. All were automatically assigned IDs and/or classes. It is these HTML elements that I style with CSS to create the look of the web site. Where were these div tags in the WordPress CMS? Until I understood how the PHP was creating the divs I could not begin to style the content.

I turned to Google to find a clear explanation of how WordPress “Themes” “skinned” the web site. Instead of an explanation I found pages upon pages of free WP theme designs. Every one already had a design and none appeared very flexible in changing the design. I do not consider only being able to change the color of the background or headings that flexible.

Rip It Apart

The best way to figure out how something works is to tear it apart and put it back together again. I ripped the source code to shreds not only of the default theme but also several free themes. Through this process I grasped the basics of the relationship between the PHP templates and the CSS file. The theme’s PHP had to be a robust and flexible enough framework to allow me to design whatever I wanted without modifying the PHP code. Therefore I needed a theme with a framework that had my requirements built into it and provided a CSS file with all of the auto-generated HTML elements defined. I was also working within the tight constraints of a zero budget since I was not willing to spend more than my time on this project. Therefore the theme also had to be open sourced and free. The hunt was on.

Blank Slate

I found (I am sure there are far more) two options. One is the popular Thesis, but it comes at a cost. Therefore it was eliminated for not meeting my budget requirement. The other was the free, open sourced Hybrid Theme. Hybrid had exactly what I was looking for in the “Skeleton” child theme. The Hybrid theme’s PHP framework had SEO built in and was flexible enough to create any type of site I desired. Plus the child theme Skeleton, which was made for designers like me, had the essential CSS file with all of the visual hierarchy of the HTML elements devoid of style attributes ready to be styled. It literally was a blank slate. Now that I had a theme it was time to start my web site.

The Breakthrough

I soon realized that I needed reliable help to understand how to use WordPress and my theme. I was astounded by the overwhelming amount of useless and inaccurate information there was on WordPress, all of it generated by amateurs pretending to be experts. Reluctantly I gave in blowing my budget of zero by shelling out $25 for the Hybrid Theme forum support option. Unable to preview the forum, I was worried that my questions would languish unanswered or, worse, being a novice I would be snubbed. I was completely wrong. The members were genuinely helpful even to novices such as myself with quick responses and frequently the theme’s creator, Justin Tadlock, would answer with the solution. Unquestionably, the support option was worth every penny.

When I found this image on the Hybrid forum it brought everything into focus for me. I admit that I needed someone to draw me a picture. I always created a similar layout for my HTML pages, but now it was the PHP and not me generating the divs. In this image the content boxes are labeled with the div’s IDs and class lables showing me the structure of the page. The elusive “widgets” now made sense to me.

Widgets

Widgets are used to add blocks of content to a WordPress page. I used quite a few to create this web site. For example I used “primary” widgets to place content on the top part of my sidebar. To place content on the yellow part of my footer I used “subsidiary widgets”. The breadcrumbs were placed in the “utility before content” widget.

When I add a widget the only way that I can find the class or ID label is to view the source code. Again it is because it is WordPress, not me, generating the code. Usually the class label is a meaningless name such as “text-1”. But it is this class label that I need to style the widget’s content with CSS.

Since I like clean, well-organized code I hated losing control of labeling and commenting with these auto-generated HTML elements, IDs and classes. It was was a major sacrifice for the benefit of a dynamic web site. Through trial and error I settled on the following process for working in WordPress:

• Place the final copy and possibly images into the WordPress CMS.
• Wrap HTML code around content.
• Preview in browser.
• Copy and paste the Page Source code into a HTML document.
• Use this HTML file as a preview in Style Master to create the CSS styles.
• Work back and forth between the HTML file and the CSS until you have the HTML elements with IDs and classes and the CSS ready for preview.
• Upload the final CSS file to the server and transfer the changes to the HTML into the WordPress CMS.
• View in browser.
• Test the code in Litmus.
• Fix bugs and make edits until done.

A Plugin

Now I that had a basic page formatted, tested and looking the way I wanted I hit another wall. I didn’t want every page to look exactly the same. For example, compare this post’s sidebar with the one on the About page. How and where did I give the directions to the widget telling it on which page I want it to appear?

I was learning that if I cannot find in the CMS how to do something then maybe it requires a Plugin. By extending the PHP code plugins provide a wide variety of uses, such as telling a widget which page to appear on. The list of the plugins I used on this site can be found in my Toolbox. I found them all in the WordPress Plugin Directory.

Fits and Starts

Since I approached the WordPress CMS knowing exactly how I wanted my site to look and what I wanted it to do I felt like the various pieces I needed were scattered about the “Dashboard” like hidden Easter eggs. This frustrating hunt caused me to end most days pleading, “Just tell me HOW!” Daily I took my questions to the Hybrid support forum and WordPress documentation. Both sources were invaluable to me as I progressed in developing this project. Every step of the way I tested my work on Litmus.

I have been creating web sites since 1994 and unfortunately I carry baggage full of bitterness towards IE that occasionally clouds my judgment. As I was working on this project I felt I was spending too much time fixing bugs for IE6. At this writing IE6 is 20% of the browser market. In November of 2009 when it was 23% I decided it was not cost effective for me to continue to support it. If I was infatuated with WordPress before this decision I fell head over heels in love, for sure enough, there was a plugin to the rescue— Anti Internet Explorer 6 Plugin.

All told it took me about a month to get the basic site functioning with WordPress. I feel that it was well worth my effort to learn how to work with WordPress. I have already started my second WordPress site. I still have a great deal more to learn. Please, share your thoughts, experiences and any questions you may have.