EvoBloggito

Child Themes: A Sanity-saving Approach to Redesigning/Hacking WordPress Themes

Author: Ray Gulick; Published: Oct 26, 2011; Category: WordPress; Tags: Child Themes, Design/Development, WordPress Themes; No Comments

A friend of mine, relatively new to implementing WordPress sites, emailed me yesterday asking for some advice. She was using Twenty-eleven as her base, and she had run into some problems bending it into the shape she wanted it. I called her and took a look at what she was doing. It became clear that the theme was already beginning to depart significantly from the original template code. Rather than creating a child theme, she was hacking page templates as well as CSS. Moreover, she sent me the Photoshop template that represented where she was headed, and I could not determine any relationship, structurally or visually, with Twenty-eleven. Twenty-eleven seemed to be the wrong theme for what she wanted to accomplish.

She wanted to know of a resource that would tell her how to get from the out-of-the-box Twenty-eleven theme to where she wanted to go with it. Lamely, I told her there was no such resource; no one could anticipate all the changes people would want to make and write a how-to covering them. Even more lamely, I told her she would just have to “hack away” and visit the Codex and wordpress.stackexchange.com when she encountered a problem. We briefly talked about child themes. Then she went away, disappointed.

As I thought about it, knowing I hadn’t been very helpful, I realized there was a basic mis-understanding about choosing a theme and designing around its structure and functionality. Someone had told her to design her theme in Photoshop, then select a good theme and hack it. Either they had not told her, or she had not understood, that theme selection is step one, then design should be based on that theme: utilizing its basic structure and incorporating whatever functionality it has that is useful for the particular site. I’m betting on the former: those of us with some experience are notoriously bad about skipping important bits of information when advising people with less experience.

Here is the list I sent her, suggesting she back up and start over:

1. Use the child theme approach, leaving the original theme and its functionality intact. Some themes get updated, fixing bugs or adding functionality. Using a child theme allows you to take advantage of theme updates while maintaining your look-and-feel. http://codex.wordpress.org/Child_Themes
2. Find a theme that is as close as possible, structurally, to what you want to end up with, and work within its structure as much as possible. Ideally, all you want to change is the appearance. This is like finding a house plan that suits you, then customizing it with floor coverings, wall coverings, paint, decor, and landscaping. Contrast the ease of that approach with starting with a 3/3/2 plan of a 1500-sq-ft single-story ranch, then changing it into a 2/2/2 plan of a 1800-sq-ft two-story Tudor; you probably should have started with a different plan.
3. Once you’ve settled on a theme, create a Photoshop design template based on screen shots you’ve made of the theme demo (some themes provide a design template). Add guidelines that define the header width, content width, sidebar width, etc.
4. Now you’re ready to design your theme.
5. Try to change only things that can be changed using CSS: backgrounds, typography, color, position, etc.* This approach lends itself to using a child theme.
6. Make a copy of the theme style sheet, make the changes at the top as described in Codex (above), and place it in a folder with a clever name, such as “mychildtheme.” Or even more clever, if you like. Upload the folder to your themes folder and activate the child theme. Hack away at the child theme CSS to implement your design changes (you may need to add an images folder to the child theme for background images). This is fun! Or at least, more fun than changing the ranch into a tudor.

*You can change column widths and position (structure) with CSS, but there are rarely only one or two places where those changes will need to be made. Can. Worms. You get the picture.

We launched a new website with new EvoGallery CMS WordPress theme

Author: Ray Gulick; Published: Feb 17, 2011; Category: Design/Development, WordPress; Tags: Design/Development, Theme Development, WordPress as CMS; No Comments

Visit the website»

Recently I launched a complete remake of my personal art site: raygulick.com. I’m an oil painter, and my painting site has needed an upgrade for at least 2-3 years. Some opportunities as a painter are beginning to come my way, so I had some motivation to redesign the website and, of course, I built it on WordPress.

I started out looking at existing gallery themes (there are literally hundreds), but could not find one that wasn’t over-complicated, under-documented, or both. In the interest of both saving some time and ending up with what I wanted, I decided to create my own gallery theme that suits the way I want to work and display my art. EvoGallery CMS was the result. It shares some characteristics with Evo4CMS theme, but there are significant differences in the grid and in functionality specifically suited for online galleries.

The theme has a deliberately stripped-down appearance that allows website visitors to focus their attention on the artwork. For now, the website utilizes only the homepage gallery, but as I need additional galleries, they can be easily added. “Sold” or “NFS” items can easily be indicated without having to create a new thumbnail image. Care has been taken to make the theme as quickly and easily “update-able” by artists (not normally HTML monkeys) as possible.

I’ve decided not to release EvoGallery CMS for public download while I mull over some business opportunities in which the theme may play a role.

Whew! Launching two websites in the same week

Author: Ray Gulick; Published: Jan 25, 2011; Category: Design/Development, WordPress; Tags: Design/Development, Marketing, WordPress as CMS; No Comments

We launched two WordPress-based websites this week, and I’m pleased with both. But I’m really happy double launches are an unusual event. So many things need to happen just before launch, in addition to the inevitable last-minute content changes, and two at once is pretty demanding.

The first site, launching Thursday evening, is The Hilltop Landscape Architects and Contractors. The Hilltop is the premier landscape company in New Mexico, both in residential and commercial landscaping. They decided a new website was in order to serve as the foundation for their marketing efforts. Their site is built on WordPress and includes a blog, several galleries (The Hilltop has great photos, and you should go check them out), and a New Mexico Landscaping Plants and Trees resource and reference. We will be working with them for the next several months, coaching them in making the most of their website in marketing their services.

The second site, launching just about 24 hours later, is Passages International. Passages provides green funeral products to funeral homes, allowing funeral homes to offer green funerals to the growing number of people who want them. Their website features product galleries, with plans to evolve toward taking wholesale orders online. Some related websites will follow shortly, including a site serving the United Kingdom and a site offering products for green pet funerals.

As demanding as the sites were as they slide down the rails together, the companies are both interesting and the people associated with them are great people. As such, these sites represent some of our best best work, much of it behind the scenes utilizing WordPress custom fields to expand its CMS capabilities.

Both sites were built on WordPress with our own Evo4 CMS theme. If you look at both, a similar structure can be detected, but the look and feel of the sites are completely different. Evo4 CMS gives designers a “blank canvas” on which to support almost any business’ branding and marketing needs, and launching these two sites together for two very different kinds of businesses allows us to highlight the theme’s flexibility.

Website Launch: FBT Architects in Albuquerque

Author: Ray Gulick; Published: Oct 22, 2010; Category: Content Management System, Design/Development; Tags: CMS, Design/Development, jQuery; No Comments

Visit fbtarch.com»

We launched FBT Architects’ website this week. It marks an increasingly rare (for Evo) instance of building websites with a custom-developed Content Management System, as we’ve moved primarily to WordPress as a CMS platform.

In this case, however, a custom CMS was necessary to allow FBT the ability to manage the portfolio thumbnail grid images the way they wanted to, arranging them easily and intuitively in the CMS admin area. Adding complexity to the arrangement is the website’s need to highlight thumbnails in the grid when a category of projects is selected, while also changing the list of projects below the thumbnail grid. Further complexity was added by the need to list projects for which there is no thumbnail or project description. A modified jQuery Slideviewer was used to animate the images on the individual project pages.

This is another website designed by Kilmer & Kilmer, Brand Builders, for which Evo provides development and programming services in what has become an ongoing relationship. Though I sometimes give them a slight ribbing for being print designers, they’re actually great to work with because they listen and adjust when I identify an accessibility or other web-related issue. Not all print designers will do that, and their clients suffer as a result. It’s a credit to Kilmer that they put client needs high on the priority list when designing a website, and it’s one of the reasons I like working with them.

Why Bad Websites Happen to Good Companies, Part 9: Having a Print Designer Design Your Website

Author: Ray Gulick; Published: Sep 9, 2010; Category: Bad Websites/Good Companies, Design/Development, Information Architecture, Usability; Tags: Accessibility, Design/Development; 2 Comments

It’s amazing to me that this still happens with a fair degree of regularity. It would seem obvious that print and the web are two distinct mediums requiring different expertise. But unfortunately, it’s not uncommon. Design-is-design-is-design to many people, and many of them continue to think of web design as “on-screen graphic design.” I’ve discussed this before. It has nothing to do with whether or not print design or web design is “harder” or “better,” but how they are “different.” Asking a print designer to design a website is much like asking an interior designer to redo your landscaping: different expertise and understanding is required. It’s also not the best idea to ask a web designer to design your annual report.

Before I go further, let me say I have worked (and continue to work) with some print designers who understand there are differences and do their best to approach web design differently and accommodate the needs of website visitors. They generally have accepted the fact that web pages must accommodate many different browsers and system settings, and that their work will not display uniformly to everyone who sees it. They recognize that on the web, information is more important than packaging if it comes down to a choice between the two, and they try to avoid ”designing in“ accessibility or usability issues. They take advice about aspects of their design that are problematic from a usability or information architecture perspective. I like working with those designers and in fact, they often push me to do things outside my “comfort zone,” which often leads to me learning something new.

What’s more important: design or information?

Many print designers see the web as a hostile environment for their visual “designs,” which they hold as the most important aspect of web design. It bothers these folks mightily that they cannot absolutely control how their design is rendered in visitors’ browsers. They have little or no understanding of how (or why) to provide for these differences, and often as not, cause usability or accessibility problems trying to control the “user experience,” by which they mean “visual experience.” There are still print designers (in 2010!) who set paragraph or headline text in photoshop and display text as images on their website (how else to make sure that everyone sees your carefully kerned 11.5 point Museo Sans on 18 point leading?).

But while visual design is important (I’m a designer too, and I believe in the power of design to influence thinking and behavior), it’s pointless if the ability for visitors to find, access, or utilize the information is compromised. The fundamental idea of the web is the ability to search and find relevant information. Design that interferes with that is not only a waste of time, but destructive to the purpose of your website. Good web designers understand that and learn techniques and design approaches that preserve and even enhance usability and accessibility.

Should an interior designer design your landscaping?

Even if you really like and trust your interior designer and you love what they can do to a room with color and fabric, do you really think he or she has an understanding of plants, soil, drainage, etc., that will result in a satisfactory landscape? They may love a nice landscape, and relish the challenge of working in a new medium, but the most likely reality is that there are big gaps in their landscape design expertise that you will have to live with in the finished landscape.

As with the example above, rarely do websites designed by print designers live up to expectations of usability, interactivity, search engine-friendliness, or information architecture, regardless of how nice they might look. The understanding of the web and expertise to leverage its ability to communicate, inform, and persuade is simply not present. Good web designers offer these things along with beautiful and functional design.

The above image represents my primary point that, while there is some overlap in knowledge and skills between print and web design, there are large amounts of knowledge and skill required for each discipline that are not common. There are, no doubt, some designers who have mastered both areas, but they are unusual and rare. While I started my design career in print, after focusing on web design for at least a decade, it’s difficult for me to change my perspective back to that required for really good print design; my design mindset no longer supports that perspective. I know from working with print designers that they have similar problems adjusting to a web perspective.

Bottom line: find a good web designer and put them in charge of your website design or redesign. And if your favorite designer is a print designer and you really want him/her to design your website, insist that they find a good web front-end developer to team with. You’ll get better results in how the site serves your visitors, which means your website goals are much more likely to be realized.