WordCamp, Carrington Theme, and Great Design

September 29th, 2008

Over the weekend I was able to go to WordCamp Utah and hear some great talks. I will have a more detailed write-up coming soon. Our weekly resources post will feature a lot of information from those talks.

  1. WordCamp Utah Video Stream – http://www.ustream.tv/channel/wordcamp-utah
    This has all of the videos from the conference. In particular check out Matt’s keynote address and Cameron’s talk on design. By far the best.
  2. Good vs. Great Design – http://cameronmoll.com/speaking/wordcamp/
    Cameron Moll is a great designer and very well polished speaker. He has a lot of things to say on the topic of design, and being a great designer. The link is to his slide deck for the talk. You can view the video on the uStream channel linked to above.
  3. Carrington Theme – http://crowdfavorite.com/wordpress/
    Announced by Alex King of CrowdFavorite during his talk at WordCamp, Carrington is a new kind of theme. Or rather more of a theme framework. They have a lot of great features and an interesting new approach to theme development. Here is what Matt says about it:  http://ma.tt/2008/09/carrington/

Posted in Resources | 1 Comment »

Creating a WordPress Theme Without Images

September 26th, 2008

What do I mean?

If you are creating a basic theme for distribution, consider designing it, or at least offering a variation of it, that is image free. As in style everything with CSS, and don’t resort to images for the layout and design.

Why do it?

Customization. It makes it so much easier for the novice user to change a bunch of color values in the CSS, and add in their own images, then to try and remove yours or change the colors. I have spent a lot of time re-skinning themes by trying to make sure that the images I use in a design match up with the original theme.

Also you will be surprised by just how much can be done with CSS without using images as a crutch. Often what the user is looking for in a theme is the functionality and layout, not the pretty styling (since everyone else who purchases the theme will have the same style). So make it easy for the user to get the functionality, remember after they purchase the theme, it is their theme, not yours. Design with the user in mind.

Who is doing it?

We are! Though the theme is not released yet (look for it in the next week or so). It is a theme that focuses on structure and functionality for a CMS style site. The look and feel of the theme can be changed in a few minutes, a new background image can be placed in easily, and then you have a totally new site, but with great functionality!

Also check out the News theme by Quommocation. It looks beautiful, has great typography and layout, and doesn’t use a single image (except for that post photo). Check out the Demo.

Anything else?

In attempting to try this style remember a few things:

  1. Comment your code. I have encountered lots of themes that have far too little commenting, but never a theme that has too much. Since we are creating themes for the purchaser, I would aim for too much commenting. Make that code very easy to understand.
  2. Separate out style code. Consider adding a section of your code for the colors and other aspects of the theme that can be changed. This will make it easier, instead of having to look through code for the :hover style on that <a> tag.
  3. Design places for images. Just because you don’t include images, doesn’t mean you shouldn’t make it easy for your user to. Consider making it so that you can add a background image to the <body> that will completely restyle the site, but without having to change any code. That would be a graphic designers dream come true.
  4. Focus on typography and spacing. These are the cornerstone of every good design. Get these right, and everything else will follow. Now you have to focus on them because you don’t have any images. Check out Khoi Vihn’s site Subtraction. Yes, he does use an image, but focus on the structure, typography, and grid. It’s beautiful.
  5. Think outside the box. CSS is powerful. Use it in new ways.

That’s your new idea for the week. Feel free to post any other examples or what you come up with in the comments. Enjoy!

Posted in Themes | No Comments »

Themes, Default Content, WP Coder, and Widgets

September 22nd, 2008
  1. How to Create a WordPress Theme From Scratch (Part 2) – http://nettuts.com/working-with-cmss/how-to-create-a-wordpress-theme-from-scratch-part-2/
    Earlier we posted a link to creating a WordPress theme from scratch. Here is the next part in that great tutorial.
  2. Easier Theme Development with Sample WordPress Content – http://wpcandy.com/articles/easier-theme-development-with-the-sample-post-collection.html
    Want to thoroughly test your theme for every situation? This post details how you can create sample content to make sure that your theme covers every angle.
  3. WP Candy Launches WP Coder – http://wpcandy.com/articles/wpcoder-affordable-psd-to-wordpress-coding.html
    As a bit of community news, the people behind WP Candy have launched WP Coder, a new PSD to WordPress conversion site. There prices look pretty good. If nothing else, the site design is worth looking at!
  4. Create a Widget Ready Footer in WordPress - http://help-developer.com/index.php/2008/07/creating-a-widget-ready-footer-in-wordpress/
    Widgets are powerful. Too often people don’t use them to their full potential. Take a look at this post to learn a new way to use them in your footer.
  5. Displaying WordPress Categories as a Drop Down Menu - http://anthologyoi.com/wordpress/displaying-wordpress-categories-in-a-horizontal-dropdown-menu.html
    Often for a good magazine layout instead of using pages, you will use categories. This post shows how to create that navigation.

Posted in Resources | 1 Comment »

Simple Breadcrumb Navigation

September 19th, 2008

Using a plugin is the most common way to create breadcrumb navigation. The most popular plugin is Breadcrumb NavXT Though this is a functional plugin, it is not the best (too many database queries as well as having to include a plugin with your theme is rather clunky).

This article:

http://www.kriesi.at/archives/wordpress-tutorial-simple-breadcrumb-navigation

Details how to do it in a simple, efficient way. It may not have as many features, but it gets the job done.

Posted in Quick Tips | No Comments »

Integrating Twitter Into Your WordPress Blog

September 18th, 2008

Twitter is the new cool thing. You can waste hours on it, or you can use it productively. Personally I like to use it as another way for clients to keep their site updated and fresh. This will help their customers see that there is a real person behind the company. But for it to be really visible you need to integrate Twitter into your WordPress blog. Luckily we have a plugin for this.

  1. Setup a Twitter Account. You can visit twitter.com to signup for an account.
  2. Download Twitter Tools. Twitter Tools is the plugin from Alex King, that we will be using to pull twitter feeds into your blog. Download Here.
  3. Unzip Files and Upload to Your Plugin Folder. If you are running a WordPress blog you should know how to do this. Pretty standard stuff. Now activate the plugin.
  4. Configure Settings. In your WordPress back-end go to Settings > Twitter Tools (make sure you activated the plugin first). Here you will need to enter your twitter login information. There are also a lot of other settings you can configure here. Personally I just want it to display, not create blog posts or anything like that. Configure to your hearts content.
  5. Displaying Your Tweets. If you want to display a list of Tweets (number configured in the settings page) then use this code:
    [sourcecode language='php']
    [/sourcecode]

    Now if you are just looking to display one tweet use this code:

    [sourcecode language='php']

    [/sourcecode]

  6. Enjoy! That’s all there is to it! You may want to change the settings some, as well as design some cool way for your tweet to display (default styling is lame!). Also check out J. Alexander Fine Woodworking for an example of Twitter in use on a blog.

Posted in Plugins | No Comments »

« Previous Entries