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.

WordCamp Albuquerque: beyond expectations by any measure (and some code)

Author: Ray Gulick; Published: Sep 19, 2011; Category: WordPress; Tags: Code, WordCamp; No Comments

I spent an amazing weekend with a bunch (more than 212) of WordPress folks in Albuquerque this past weekend. Which means that for the first time in a while, I didn’t spend the weekend catching up on what I should have been able to accomplish during the week. So I’m catching up today (mostly), but wanted to take time to share personal highlights:

• Getting to work with great folks from ABQ and Santa Fe, including organizers/iron women Karen Arnold and Jenifer de la Garza (and their ever-helpful husbands Al and Rudy, respectively); fellow presenters Aryon Hoselton, Damian Taggart, and Sean Wells; and volunteers Guy Olds, James Tucker, Mildred Griffee, and others I am no doubt overlooking (with apologies).
• Meeting Lance Willett (Tucson), Joseph Scott (Salt Lake City), and Kevin Conboy (Denver), all from Automattic. Great guys who contributed a great deal to the quality of the event.
• Meeting various attendees. Some who gave me their cards or have contacted me since WordCamp via email or a social media channel: Cara Christenson, Bill and Merry Stubblefield, Mark Carrara, and others.
• Giving my presentation to an appreciative and generous audience who participated and asked questions. Interrupted briefly by attractive redhead taking my picture (later tweeting about my resemblance to Eddie Izzard. Not researching Mr. Izzard: might not be a compliment).
• Getting to help some people in WordDoctor session, an event in which various designer/developers donned lab coats and sat at individual tables, with people bringing specific issues they were having with their WordPress blogs/websites.
• Participating in designer/developer forum Sunday with Aryon Hoselton, Kevin Conboy, and Joseph Scott. Again, generous and participating audience who made the session with their questions.

The entire event was characterized by generosity, from sponsors to presenters to volunteers to attendees. Truly beyond our expectations.

And to top things off, during a slow period in the WordDoctor session, Damian Taggart of Mindshare Studios (and his sidekick, whose name I cannot recall) resolved an issue I was having with a query on a client website. This is a query for showing current exhibitions (custom post type) for the Museum of Contemporary Native Art, part of IAIA. Custom field values for exhibition start and end dates are compared against today’s date. Any exhibition with the start date less than or equal to today and an end date greater than or equal to today will appear on the listing page. I guess I’m becoming a geek; only a geek could work a code snippet into a thank you post. For any designer/developers who might be reading:

<?php
    $paged = ( get_query_var('paged') ) ? get_query_var('paged') : 1;
    $today = date('Y-m-d', strtotime('-6 hours'));
    $currentexhibits = new WP_Query(array(
        'post_type' => 'exhibitions',
        'posts_per_page' => 6,
        'paged' => $paged,
        'orderby' => 'title',
        'order' => 'ASC',
        'meta_query'=>array(
        'relation'=>'AND',
            array(
            'key' => 'exstart-date',
            'value' => $today,
            'compare' => '<=',
            'type' => 'CHAR'
        ),
            array(
            'key' => 'exend-date',
            'value' => $today,
            'compare' => '>=',
            'type' => 'CHAR'
        )
    )
    ));
    if ($currentexhibits->have_posts()) :
    while ($currentexhibits->have_posts()) : $currentexhibits-> the_post();
?>

How to List Upcoming Events and Events Archive with Custom Post Types

Author: Ray Gulick; Published: Jun 27, 2011; Category: Content Management System, Design/Development, WordPress; Tags: Custom Fields, Custom Post Types, WordPress as CMS; 3 Comments

Recently, I had an opportunity to build an events listing that showed only upcoming events, with the next event appearing at the top. That’s pretty easy to accomplish. But I also wanted past events to disappear from the listing and show up instead on an events archive listing. It took a lot of searching and asking questions in two WordPress forums to piece together a query that worked.

First, I created a custom post type for events. Then I created a custom field called “order-date” to control ordering. Why a custom field? Why not rely on WordPress’ innate order-by-date function? Because WordPress uses the date posted, and it’s quite likely that events will not be posted in the order of their occurrence. But just as important, I needed the order-date to be the date of the event so we could use it to drop an event from the upcoming events listing and move it to the events archive listing. The custom field uses the Y-m-d date format for comparison with the Y-m-d format of today’s date.

Here is the query on the upcoming events listing template:

<?php
   $paged = ( get_query_var('paged') ) ? get_query_var('paged') : 1;
      $today = date('Y-m-d', strtotime('-6 hours')); //define “today” format; note timezone offset of -6 hours
      query_posts(array(
      'post_type' => 'events', //query “events”
      'posts_per_page' => 5,
      'paged' => $paged,
      'meta_key' => 'order-date',
      'orderby' => 'meta_value',
      'order' => 'ASC', //sort in ascending order
      'meta_query' => array(
         array(
         'key' => 'order-date',
         'meta-value' => $value, //value of “order-date” custom field
         'value' => $today, //value of “today”
         'compare' => '>=', //show events greater than or equal to today
         'type' => 'CHAR'
         )
      )
   ));
   if (have_posts()) :
   while (have_posts()) : the_post();
?>

On a separate template for displaying the archive listing, I made the following changes (highlighted in red) to display past events in descending order:

<?php
   $paged = ( get_query_var('paged') ) ? get_query_var('paged') : 1;
      $today = date('Y-m-d', strtotime('-6 hours'));
      query_posts(array(
      'post_type' => 'events',
      'posts_per_page' => 5,
      'paged' => $paged,
      'meta_key' => 'order-date',
      'orderby' => 'meta_value',
      'order' => 'DESC', //descending order
      'meta_query' => array(
         array(
         'key' => 'order-date',
         'meta-value' => $value,
         'value' => $today,
         'compare' => '<', //show events less than today (past)
         'type' => 'CHAR'
         )
      )
   ));
   if (have_posts()) :
   while (have_posts()) : the_post();
?>

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.