Jason was on WPwatercooler again. Summary.

The WPwatercooler is a great show, and I was on it again this past Monday with my BWAwWP co-author Brian Messenlehner. I may make it a habit to get on that show. And I may make it a habit to follow up each show with a summary of what went down.

The show topic was How do I make sure I don’t have to re-do my website just months after it’s done?

The consensus was that you can’t make a website that won’t require updates. But you can do a few things to prepare for future updates and minimize their impact:

  • Make sure you are using a good developer. Good developers will do things “the WordPress way” (e.g. using hooks and filters instead of hacking plugins), which will be less likely to be broken by plugin and core updates.
  • Make sure you are using a good designer. Good designers will simplify things and use proven methods that are less likely to be broken by software and browser updates.
  • Make sure your website has a purpose other than looking pretty. One year after your website goes live, it will probably be out of style… at least a little bit. But if you built a website that encourages people to call your sales phone number, it will still do that no matter what the design trends are.
  • Make sure you have a maintenance plan. In addition to having someone on call to perform WordPress upgrades, have a developer on retainer or on call to fix things if anything goes wrong.

We need to do a better job of communicating with our clients about what role maintenance will play in their website. There were a few analogies thrown around on the show (websites are like babies?). My favorite was to think about your website like a car bought on lease (get regular oil changes and be ready to trade it in every 2-3 years) instead of a used car you buy and run into the ground.

Mistake #3: Starting with Design

I’ll focus on WordPress sites and themes here, but this advice applies to any website built using an existing theme as a framework or just for inspiration.

I’m a big fan of using existing premium themes for WordPress sites. There are so many quality themes available now that you should be able to find something that fulfills 80% of the design and layout needs for your site. Tweak the colors and layout a bit, and only web designers will be able to tell that you didn’t design your website from scratch. (And only web designers will care.)

However, there is a mistake that nearly every client we use a premium theme for makes. They fall in love with the demo site and THEN think of things to put in each little widget area of the site.

That is, they start with design, then they supply the copy for the site.

It really should be the other way around: Write your Copy → Find a design for your copy.

Doing something like “mobile first website design” helps with this. Maybe we need “email first website design” where instead of a website, you write an email to explain your company (keep in mind your goal).

Start with words. Then build a website around those words.

The thing is all of those widgets may look nice, but they’ll detract from your #1 goal.

The best example of filling a design rather than using a design is with sliders. Sliders are cool. They work for a lot of site. But for most sites, they are just an excuse to put off figuring out your #1 goal and enter EVERY thing you want to say.

If slide 1 is more important than slide 2… then you shouldn’t have a slider. Just show slide 1 and keep it there.

Editing the StudioPress Lifestyle Theme

A client contracted us to make some updates to the StudioPress Lifestyle WordPress theme. I’m documenting the changes here so our client can possibly do this work themselves in the future, and it may also help others out there looking to tweak the StudioPress (or really any) premium theme.

Changing the Menu Colors

Changing the color scheme involves updating the style.css stylsheet and creating new versions of various images. I did a rough mockup of the color changes in Photoshop, and then went to work on the images.

To change the header and headline elements from blue to orange, I did the following steps to these files:  header.png, header_blank.png, logo_blank.png, headline.png, and topnav.png.

  1. Open the image in Photoshop.
  2. Goto Image –> Mode –> RGB Color to change the mode.
  3. Create a new layer on top of the background.
  4. Use the paint can tool to fill the new layer with your new color.
  5. Change the layer type from “Normal” to “Color”.
  6. (optional) If the brightness of the image is off now, create a new layer filled with the new color and change the layer type to “Luminosity”.
  7. Save the image for web as a PNG 24.

To change the background color of the higlighted/active submenu item, I changed the background color of line 381 (the “#subnav li a:hover, #subnav li:active” declaration).

You can also edit the navbar.png and navhov.png files to change the main menu.

Changing the Header

To change the logo from an image to plaintext, in the WP admin goto Appearance –> Lifestyle Theme Options and change the Header Blog Title setting from “Image” to “Text”.

You can also edit the file in the /images/psds folder to use an Image logo in the header.

Changing the Body/Page Background Colors

I used the Firebug plugin for Firefox to inspect the original website to find out where certain colors and styles were set in the style.css file.

Using Firebug, I learned that the body’s background color is set on line 19. I changed this color from #E2DDCB to #1462A6.

You could also do a search and replace, but this color was only used in one spot in the style.css file.

Moving inward from the background, the next band of color is actually the border of the “wrap” element. I changed the color of the border declaration on line 35 to #6595BF.

Changing Link and Text Colors

The hyperlink colors are declared between lines 40 and 60.  The lifestyle theme uses the same color for links and visited links. I wanted a different visited color, so I changed that section of code to look like this:

a {
color: #1462A6;
text-decoration: none;

a:visited {
color: #6595BF;

a:hover {
color: #6595BF;
text-decoration: underline;

a img {
border: none;

a:focus, a:hover, a:active {
outline: none;

To change the article heading link colors, search for “#content h1 a, #content h1 a:visited” and “#content h1 a:hover”. (I changed the colors around lines 586 and 595.)

Hiding the Post Meta (“by”, “posted on”, “filed under”, “tags”, etc)

I hid these using CSS. I added a “display: none;” line to the .date  declarations in style.css on line 779. To hide the tags (postmeta2) section, I add these lines under the .postmeta2 declaration around line 841:

.postmeta p,  .postmeta2 p {
display: none;

This will hide everything inside the postmeta2 section, but will still show the bottom border and bottom margin.

Changing the Sidebar

I removed the Blog Roll and Admin sections by commenting out lines 9 through 25 of the sidebar_right.php file in the theme directory.

I then added the following widgets:

  • I added a “text” widget to “Sidebar Top” with some Google Adsense code for a 300×250 ad.
  • I added a “text” widget to “Sidebar Top” with the title “Featured Video” and some embed code from YouTube. (Note: it didn’t seem to matter that the YouTube embed width was greater than 300 pixels. YouTube must size it to fit the page.)
  • I added a “recent posts” widget to “Sidebar Top” with the default settings.
  • I added a “text” widget to “Sidebar Bottom Right” with the title “Advertisement” and some code for a custom 120px x 600px ad.

Updating the Homepage

The first thing we need to do is enable the home.php file as a template for our pages. We need to change this line in home.php:

<?php get_header();  ?>


Template Name: Homepage

Save and upload the file. Now edit the “Home” page in WP and choose “Homepage” as the page template. Save the page.

To choose which blog categories are used for the featured content areas, in WP Admin goto Appearance –> Lifestyle Theme Options. Change the appropriate settings.

To get thumbnails to show up in the featured sections, add a custom field called “thumbnail” pointing to an image (70×70 pixels is good) to use. You can upload these images to the post first and then copy the src url.

To set the thumbnails for the last (bottom) featured section, use “hpbottom” as the name of the custom field.

Setting up the Featured Gallery (Fading Script)

The first step here is to install the “featured content gallery” plugin. (It wasn’t included with my install, but it’s a freely available plugin.) In the WP Admin goto Plugins –> Add New. Search for “featured content gallery”. Install the plugin. Activate the plugin.

Now goto Settings –> Featured Content Gallery and choose either the category or page/post IDs to use for the gallery. You must also set a height and width and text area height in the next section (I used 588 width, 400 height, 100 height for the text). I left the colors as default. Update the settings.

The last thing you need to do is make sure you upload a picture (mine were 588×400) and set a custom field called “articleimg” that points to the URL of the image you want to show up. The gallery will not show up unless you set this custom field.

Click here to get a copy of the StudioPress Lifestyle WordPress theme.

We’ve been busy rolling out new websites!

Stranger Studios has recently launched several great new websites. Check them out!

Philadelphia-area Dermatologist, Harriet Comite, came to us for a total revamp of her growing practice’s (Advanced Skin Care) existing website. The site is balanced in its appeal to masculine and feminine audiences and conveys loads and loads of information in an easy-to-digest format.
Learn more about this project »

Up-and-coming Kart racer Garrett Olsen needed a web home-base for his growing stardom. The site is built on the WordPress CMS to allow easy updating by the client and his web team. The site is also enhanced by the use of third party sites like Viddler and YouTube, and Flickr.
Learn more about this project »

A blog for hip parents to keep track of all that’s cool and “luxurious” for their growing families. The project includes our proprietary mailing list application (that we will hopefully make available as a WordPress plugin shortly), as well as integration with Feedburner for email delivery of blog updates.
Learn more about this project »

Stranger Studios has a heart! We helped develop a web presence for the Vanessa Péan Foundation to serve as a hub for all of the foundation’s many meaningful efforts.
Learn more about this project »

Easier Way to Implement Diggstyle

Way back, I wrote the tutorial on how to create a pagination scheme similar to the one that Digg uses. The code in the tutorial was meant to educate readers on how the algorithm works.

Meanwhile, I was using completely different code for my own projects. Typically I put all of the pagination code into a function (or PHP class), which makes it much easier to use in practice. Now I’ve made available a version of this function, which people should look to first if they want a quick implementation.

  • Download the PHP code for the function here: diggstyle_function.txt.
  • To use it make a function call like getPaginationString($page, $totalitems, $limit, $adjacents, $targetpage, $pagestring);.
  • $page is the current page number
  • $totalitems is the total number of items in the set. You usually get this from a SQL query.
  • $adjacents is the number of page links to put adjacent to the current page.
  • $targetpage is the URL you want to point to. e.g. index.php
  • $pagetext is the string used to append the page variable to the URL. e.g. ?page= or &p=
  • Use this style sheet.

Read the tutorial for more help and to see an example. For a real-live example, check out my Wine Log.

Also, Mis Algoritmos is at it again with a digg-style pagination plugin for Wordpress based on this code.

Pagination Update

Earlier in the year, I wrote a tutorial on how to create pagination similar to Digg’s. The article focused on the basic algorithm for displaying the pagination, and there was definitely some opportunity for improvement in its implementation.

Well, the improvements are in. We have a modularized PHP version and a Perl version. See the updated pagination demo page for details.

Self Portrait

I like this. Done in Photoshop. I traced a picture Kim took of me last month and did some simple coloring. I may add a little more detail to this yet. The face could use some work, and the shirt I’m wearing has this cool picnic-table-plaid that would look good in the picture. This is also a good candidate to turn into buddy icons, etc.


Jason Coleman


Illustration Inspiration

I’ve been doing some illustration work for a client who is self-publishing a book. I am doing the drawings completely in Photoshop with my handy Intuit Wacom Tablet (I have an older series 2 tablet) (thanks, Dad! – that was a great Christmas).

I’ve probably watched this video below at least 5 times since I started this work. Mike Krahulik, from Penny-Arcade, has mad skills with the pen. It’s a great inspiration, something to aspire to. I learn something every time I watch it. And the music isn’t too bad either (kuh-kuh-kuh Q-Unit!).

The video was first posted at Penny-Arcade on October 11th, 2006. In the blog post, Mike shares some pointers about his brush sizes (all defaults) and techniques. It’s good stuff.

More Netflix Attention Grabbers

If you thought the heart was eye-catching, check out these screenshots of the Netflix homepage. That black arrow pointing at the previews tab blinks when you load the page. The gift box in the upper right has a cool animated glow/glitter effect on it. Nice stuff. Is it too much?

netflix_previews.gif netflix_giftbox.gif

Michael Coffey, of Inertia Beverage Group, posted in November about the benefits of tricking your website out for the holidays. People are already in the shopping/spending mood, a little encouragment wouldn’t hurt.

It’s not too late. What changes can you make to your site? Will updating the Stranger Studios website help us get some new work?