One Year Anniversary Review: Designing WordPress Themes

WordPress Theme design is fairly unique in web design techniques as a WordPress Theme isn’t just about the design of the website, it is about web design based upon generated and controllable content. Programming code helps to create each page on a WordPress blog, influencing the look and feel of every element of a WordPress web page.

If someone wanted to, they could design a WordPress blog to look different on every page of the site. Every page view, every post view. An article on evergreen trees could feature green colored elements and tree background graphics, followed by an article about technology with high tech graphics, then an article about flying airplanes with airplane graphics and clouds.

Or they could easily develop a unique design for each category. If the article is in a category about airplanes, than every post in that category would feature clouds in the background, and every article in the tree category would feature trees.

Because WordPress works with dynamically generated content, anything is possible in web page design. Which makes writing about designing WordPress Themes challenging and exciting. There is so much to cover, the list never seems to end.

I decided to break up my one year anniversary review of web design into three parts: web design, designing WordPress Themes, and designing WordPress Themes for public use. Web design techniques are used in designing WordPress Themes, but designing WordPress Themes is very specialized web design. And designing WordPress Themes for public use is another avenue completely.

Here, I want to review articles I’ve written about designing WordPress Themes. Specifically, customizing WordPress Themes for your own personal WordPress blog. Designing for yourself means no limits as to what you can, or can’t, do. WordPress is wide open for you to rip and tear, twist and tangle, and screw up all by yourself.

In “One Year Anniversary Review: Choosing a WordPress Theme”, I covered a lot about how to choose a WordPress Theme. So let’s get started with articles I wrote over the past year on how to tweak your WordPress Theme once you have found it.

Finding Your Styles in WordPress

When it comes to WordPress Theme design, at the short end of the scale there is the tweak, a gentle nudge, shove, or twist in the look of an existing WordPress Theme. At the end of the scale is the “do-it-yourself-from-scratch” WordPress Theme, where you strip it naked and then build it back up from scratch.

At the gentle tweak stage, the hardest part for new WordPress users to do is find the little element they want to change from among all the codes and styles. It is often as small as changing the header art or adding a border, or even just changing the background color of an element. They don’t want to recreate anything, just make the title text green instead of blue, or the background yellow instead of pink.

In “Finding Your CSS Styles in WordPress”, I described a simple technique of how to find the little element you want to change and trace it back to your stylesheet (style.css) in your WordPress Theme so you can change just that design element.

In “The Secret of Successful Editing of WordPress Themes”, I revealed the best web design secret that’s not much of a secret any more.

With Firefox installed, there are a variety of powerful add-on features called extensions that will help you design your website or WordPress Theme. It doesn’t matter if you are trying to tweak the finest little detail, or shifting your sidebar from one side of the page to the other – these act like some of the most expensive HTML WYSIWYG web page editors.

Firefox Web Developer Extension is packed with the features you need to edit your WordPress Theme. There is a lot of documentation to describe all that it does, but here are just a few highlights.

• Edit Your CSS
  • Make live edits to the CSS style sheet of a web page.
  • View style sheet information for a web page.
  • View style sheet information for an element by clicking on the element
  • Add a style sheet from your computer to a web page to instantly change the look of a website.
• Highlight and Display Elements
  • Outline and highlight block level elements, deprecated elements, frames, links, and other tag and CSS elements.
  • Outline images which may need trouble shooting such as images without titles.
  • Locate broken or unfound images.
  • Display image dimensions, file sizes, and paths.
  • Outline other troubleshooting elements which lack titles, alts, or other HTML or CSS errors.



• Disable Elements
  • Hide images.
  • Disable Javascripts.
  • Hide background images.
  • Hide or disable animations.
  • Disable popup windows.
  • Disable cache and cookies.
• Validate HTML, CSS, Feeds, and Links.
• Display various page and screen sizes for testing.
• View W3C documentation for HTML, CSS, and other web page standards.

The Edit CSS and Validate are probably the two most powerful and most used tools. Let’s look at these specifically.

The power of “live editing” of your web page design is incredible. You can see the change, and can change back or make it better. It speeds up web page design by great leaps, allowing you to instantly see the impact of your design choices.

I dealt with a lot of basic design elements found within a WordPress Theme such as “Navigating Your WordPress Site”, “Problem Solving the WordPress Header”, “Dissecting the WordPress Post Title Link”, and many other “WordPress Design Details”.

Moving up the ranks to more intense WordPress Theme building, I wrote “Designing a WordPress Theme – Building a Sandbox” and “Designing a WordPress Theme From Scratch” to help you build your WordPress Theme from the ground up.

Changing the Look Through the WordPress Code

WordPress blogs are created with what is known as “dynamic content”, content and presentation based upon a combination of code instructions that ask questions. If X then Y. If X AND Y, then Z, and so on. Changing the look of a WordPress blog’s generated content starts with a request. Here are some examples:

• “I want only excerpts of my posts to show on the front.”
• “I want an advertisement to show between every 3 posts on the front page.”
• “I want my front page to be static, while still showcasing the latest posts from my blog.”
• “I want a picture next to every post excerpt on my front page.”
• “I want posts in the Y category to use a different style sheet so they look different.”
• “I want the sidebar to look different and have different information when viewing the X category posts.”
• “I want the Category pages to look different from the post pages.”

WordPress works with a combination of template files which host programming code based upon PHP programming called template tags and conditional tags which answer the questions asked of it with the requested generated content. This allows WordPress to be highly customizable and very flexible, if you are willing to dig into the code.

Luckily, there are some very creative folks out there who have written a lot of WordPress Plugins to help us answer many of these questions without digging into the code, but I’ve also highlighted techniques to help you learn how to do it yourself.

One of the most common questions is how to display post excerpts on multi-post views like the front page in WordPress. I explained how to do this in “Display Post Excerpts Only in WordPress”.

In “Creating Multiple Single Posts for Different Categories”, I showed you a simple way to create a different look for different categories. In “WordPress Category Feed Links in Your Post Meta Data Section”, we came up with a way of creating a sentence out of a list of feeds:

The challenge was to create a list of feeds by categories in which that particular post is found. In a post meta data section of a blog I’m developing, I wanted to showcase the category feeds for that post, in case people want to follow those particular categories. I could have put them in a list, but I wanted them to be in a sentence, a comma between each category…The feed links have a comma in between each category, and an “and” before the last category to set the category feed links into a sentence, not a list.

A lot of blogs feature live comment previews, showcasing the text the commenter is writing so they will know what their comment will look like before it’s submitted. This is a great feature for those who often get code posted in their comments, helping the commenters fix their code as they are commenting. In “Comment Live Preview Placement”, I discussed how to include live comment previews in your WordPress Theme design so the commenter can take advantage of the preview.

Personally, I like having comments and trackbacks separated in my comments list, and it took a while to come up with a good solution, which I shared in “Separating Comments and Trackbacks in WordPress – The Answer”.

I love challenges and recently I was challenged with a way to make information about a post author show up in a WordPress Theme outside of the WordPress Loop, which I explained in “Using Author Template Tags Outside of the WordPress Loop”. Another even challenging author issue came up with my genealogy blog. How to add dead authors to my blog authors and users. I uncovered the mysteries in “Blog Contributors – Wanted Dead or Alive”, and had some morbid fun while I was at it. In the future, I will use this information to create more customized author pages, so stay tuned for more on this.

Wow, that’s just a glimpse at some of the methods I helped answer your WordPress Theme questions over the past year. I wrote a lot more about various WordPress tips and techniques for using WordPress which I reviewed in “One Year Anniversary Review: WordPress Tips, Tricks and Techniques”. And as is traditional with all web page design efforts: if you break it, you have to fix it.

Breaking and Fixing Your WordPress Theme

Honestly, the answer to the Jeopardy question of “How does Lorelle know so much about WordPress?” is: because she breaks it. Breaking WordPress is a great way to learn about how it works, and no where is a WordPress blog broken easier than during the WordPress Theme design process.

In “My WordPress Theme is Broken”, I explained how WordPress Themes released to the public should work, but sometimes didn’t pass all the testing and inspections they should have during the development process:

Generally, before a WordPress Theme is released to the public it should have been thoroughly tested on different browsers and computers, and validated for errors. WordPress Themes usually break after the user gets in and messes with it.

If this isn’t the case, check to make sure that you followed the Theme author’s instructions to the letter. Consider downloading another version, making sure it is the most current version, and uploading it again. Make sure all the parts and pieces are in the right place and called the right names.

I highly recommend everyone put their WordPress Theme through validation tests before they start tweaking with them so they can rule out errors before they begin to create their own, compounding the problems.

One of the number one ways beginners mess up their WordPress Themes is by using their word processors to edit the Theme template files. Word processors automatically change quote marks, apostrophes and other characters used in code into “pretty quote marks” and “pretty hyphens”. When you copy and paste that text back into the template and upload it, since what was text is now a funky character code, the template breaks and things don’t work. To help you explore your options for non-word processing programs called “text editors”, the only programs that should ever see programming code and text, I did a little research and came up with a list of “Free Text Only Editors for Templates, PHP, HTML, CSS, and More”.

The second most common way things get flummoxed in a WordPress Theme is from validation errors, errors in the code or HTML structure that break web designs. A forgotten DIV, a misspelled tag, or some small error can send a web page design into a skidding wall crash. Sidebars slide to the bottom of the page or spread themselves across half the page overlapping other things. Your header text is now 30cm high when it should only be three. All kinds of funky things happen when a bit of code goes astray and I covered how to find and fix many of those in “Validating the Code Behind the Page” and “Conquering Site Validation Errors”.

Recently, I wrote about how to monitor a blog to watch for failures and breaks and offered a lot of help to WordPress users on “Fixing Your Broken Blog”:

Failures with your WordPress Theme come in a variety of flavors. They begin with simple errors in the XHTML/HTML or CSS. Most of these are visible errors, like the sidebar moving below the post or the footer showing up in the header. They can easily be detected visually, or through validation tests to determine what went wrong.

Errors in your WordPress Theme most likely to bring your site down include errors in the PHP coding of the WordPress Theme and modifications to the WordPress Themes by changing PHP code, template tags, and/or adding WordPress Plugin template tags. These errors usually return the line on which the error occurred, unlike errors which return a blank screen. Double check the code and/or remove it to see if that is the culprit.

Designing a WordPress Theme Opens a Whole New World of Possibilities

There is no doubt that working with WordPress has taken my own web design skills far above and beyond anything I imagined. I’ve been developing and designing websites since the first website on the web, so other than playing with CSS 3 and new accessibility and usability techniques, along with layering, there wasn’t much new on the horizon for me to learn until WordPress entered my life. It cracked open a whole world of possibilities in web design I hadn’t given much thought to.

Learning web page design isn’t difficult, if you stick to the basics of tweaking and fixing. To go beyond to develop full and expressive WordPress Themes opens a can of worms that can have you pulling your hair out and cheering for joy, all at the same time.

In the next two anniversary reviews, I’ll look at articles I wrote on designing WordPress Themes for public release and then covering the wide range of web design topics I wrote over the past year. Enjoy!

Articles about Designing WordPress Themes

• My WordPress Theme is Broken
• The Secret of Successful Editing of WordPress Themes
• Designing a WordPress Theme From Scratch
• Designing a WordPress Theme – Building a Sandbox
• A Guide to the WordPress Codex, The Online Manual for WordPress Users
• Navigating Your WordPress Site
• WordPress Design Details
• WordPress Template Files and Style Sheets – Give Them a Name
• Future of Header Art in WordPress 1.6?
• Show Just One Category in WordPress Categories
• Using Javascript in WordPress
• WordPress Tips and Tricks for Template Files
• Putting the Description Back Into Your WordPress Head
• Creating Multiple Single Posts for Different Categories
• WordPress Tips and Tricks for Style Sheets
• New Kubrick Header Switcher for WordPress 1.6
• Problem Solving the WordPress Header
• Separating Comments and Trackbacks in WordPress – The Answer
• Why Do You Comment in the Comments?
• Creating a Good Blog Archive
• How to Create Your Corporate Intranet Using WordPress
• CSS: Studying Your CSS Styles
• Secrets of WordPress Theming
• Finding Your CSS Styles in WordPress
• Free Text Only Editors for Templates, PHP, HTML, CSS, and More
• Breaking the Limits of Customizable WordPress Themes
• Archives Pages Tip from Photomatt
• Websites Pushing WordPress Beyond Its Limits
• WordPress Category Feed Links in Your Post Meta Data Section
• Web Page Design: Talking Only to Internet Explorer
• Comment Live Preview Placement
• Customizing RSS Feed Links for WordPress.com and WordPress Sidebar Widgets
• How Do You Choose a WordPress Theme?
• WordPress Sidebar Widgets Goes Full Version WordPress Plugin
• Designing a Theme to Include WordPress Widgets
• The Blog Widget Competition Begins
• Rules of Smart and Successful Web Development and Web Design
• How to Put Javascript in External Files
• Using Author Template Tags Outside of the WordPress Loop
• When the Blog Breaks: Fixing Your Broken Blog
• When The Blog Breaks: Site Monitoring
• Editing the Edit This WordPress Template Tag
• Dissecting the WordPress Post Title Link
• Canvas WordPress Plugin: Build Your Own WordPress Theme
• Display Post Excerpts Only in WordPress
• WordPress.com Custom CSS – All The Styles for the Sandbox Theme
• Using Author Template Tags Outside of the WordPress Loop
• Editing the Edit This WordPress Template Tag
• Dissecting the WordPress Post Title Link
• WordPress Category Feed Links in Your Post Meta Data Section
• Custom Search Engine Landing Page – Customized Welcome Mat
• Adsense Injection – Random Adsense Ads in Your WordPress Post Content
• Display Post Excerpts Only in WordPress
• Your Comment Has Been Moderated – Stay Tuned for Approval
• Using WordPress to Publish a Magazine or News Site
• Genealogy Blog: Blog Contributors – Wanted Dead or Alive
• One Year Anniversary Review: WordPress Tips, Tricks and Techniques

---

Site Search Tags: one year anniversary review, anniversary, review, articles, web design, webdev, website, design, blog, blog design, wordpress, wordpress themes, wordpress design, customizing wordpress, wordpress tips, wordpress help, wordpress techniques, styles, css, html, php, stylesheet, style sheet, blog building, blog creation, dynamic content, wordpress templates, template files, template tags, conditional tags
Copyright Lorelle VanFossen, member of the 9Rules Network