Archive for Kasper Sorensen

WordPress Theme Wrap Up (part 2)

As I said in part one, this wrap up is going to be a two part series. This one is about evaluating my personal experience of creating a WordPress Theme from scratch. This is all about the Collaborate Theme so if you don’t want to hang around, feel free to go elsewhere.

I am very happy with the final result for many reasons. First of all I think it comes very close to what I originally proposed. I had some doubts when mocking up the wireframes as to whether the horizontal division of the layout would in any way work. I know some themes already use this kind of division, but from what I have seen the content would still be in columns.

Secondly the learning curve for this project has been very steep. Although I don’t intend to release any more WordPress theme in the near future, I will certainly enjoy my experience when it comes to designing custom template files for client’s WordPress sites.

The whole theme is designed according to W3C standards and validate against both CSS 2.1 and XHTML 1.0 Strict. One exception to this is one the single post pages where the comment form is displayed. There is one element in the form attribute that won’t validate: The “aria-required” attribute is not yet supported. Because of accessibility issues (especially in AJAX) I have chosen to leave it in there. In time when HTML 5 gets released properly it will validate, but until then, it won’t.

Bugs

Though I felt the theme was pretty solid when I first released the beta version on the WordPress community site, the testing still revealed a lot of bugs. My CSS though valid, included some CSS 3.0 selectors and values that are not yet supported and these had to be discarded. As they only applied to browsers that supported them I didn’t lose much in removing them.

Another bug was the trackbacks, they would break the layout if the title of the trackback was too long. Solution: use of CSS and a simple PHP if statement to separate the trackbacks from the comments and style them accordingly.

After testing the theme with the widgets and a few plugins, I found that the WP-Gravatar plugin actually caused the layout to break. As this plugin is a third party addon, there wasn’t much I could do about it other than inform my users.

If you are still interested in the theme, go to the official release post!

/Kasper – on Twitter and Delicious

WordPress Theme Wrap Up (part 1)

My WordPress Theme is now officially out of Beta and in version 1.0. It is called Collaborate and can be seen in full flavour here or downloaded here.

I have split this wrap up into two parts. One about you and one about me, sounds fair right! This first one will be all about what YOU can learn from me and my experience developing my first theme.

First of all: It’s not as difficult as it looks!

The above statement should obviously be seen in the right context. If you are comfortable with WordPress’ template system and have modified or even build your own template files from scratch, then it shouldn’t be a problem. If you have never done anything to your template files and just downloaded and installed them, then you might be better off trying to modify a few templates and learn the codex before creating your own theme. You don’t have to know a lot of PHP, but if you want some specific functionality it does help with some prior knowledge of this language.

The Process

Requirements

The first thing I would have liked to know about before hand was the requirements that WordPress have set out for themes. WordPress simply won’t accept your theme if you don’t meet these. It gives a good foundation to start with to make sure you take everything into account before starting to plan your theme.

Planning

Probably the most important thing; plan everything before you start. You need to have a checklist for everything that needs to be in your theme. You don’t know where your theme is going to be used, so make sure it can handle everything: Nested lists, parent child categories/pages etc. As long as you are aware of it and inform the users of it it’s not a big problem. You save user a lot of time downloading and installing your theme if you just tell them up front.

Design Wireframes/Mockups

4blue-mockupwireframeThis goes hand in hand with the planning stage. Have your checklist besides you while you design your mocks so you can check it off when ever you have included an element in the design. One thing I didn’t include in my mockups was the list of categories and tags on every single post page. It was a design decision to leave them out, but then I saw that WordPress requires them to be there and I had to find a spot for them at a point were I considered the theme done. You want as few of these surprises as possible, otherwise your theme quickly starts to look cluttered. Think about how many ‘different’ pages you want, do you want a different home page and how do you want to display your single post pages and archives, the more uniform all these pages are the easier for you.

The Checklist

Ideally every single element that WordPress uses should be included in your checklist but most importantly are content elements: The elements that authors are likely to use from within the post editor. This includes <ul><li><h1>-<h6><ol><em><a>.

Other important elements include sidebar items, page lists, categories, archive pages and search results. This is a sample of the html page WordPress uses in their theme previewer, if you look through the HTML and use these elements as your checklist you should be covered.

Widgets

Widgets sound like an awful technical term. But it isn’t as complicated as it might appear. As long as you design your theme having in mind that the whole side bar is an unordered list and every single list item is a separate sidebar widget. Every widget is optimized to work with this markup. So just imagine your markup like this and you will be fine (see next paragraph for how to make you theme accept widgets).

<ul id="sidebar">

<li id=”about”>

<h2>About</h2>

<p>This is my blog.</p>

</li>

<li id=”links”>

<h2>Links</h2>

<ul>

<li><a href=”http://example.com”>Example</a></li&gt;

</ul>

</li>

</ul>

Widgetizing Your Theme

If you follow the above example you literally only need to add four lines of code to your templates and your theme is automatically widget ready. First if you haven’t already, create an empty php file in your theme directory and call it functions.php. It should have the following two lines at the top:

<?php

if ( function_exists(‘register_sidebar’) )

register_sidebar();

?>

Then go back to your sidebar and add the following two lines so your sidebar now looks like this:

<ul id=”sidebar”>

<?php if ( !function_exists(‘dynamic_sidebar’)

|| !dynamic_sidebar() ) : ?>

<li id=”about”>

<h2>About</h2>

<p>This is my blog.</p>

</li>

<li id=”links”>

<h2>Links</h2>

<ul>

<li><a href=”http://example.com”>Example</a></li&gt;

</ul>

</li>

</ul>

That’s it your sidebar will accept widgets. You can do more advanced stuff with this markup, you can even add a second sidebar like I have done in my theme or change the markup structure through your functions.php file. Look through this article for more info or take a look at my functions.php file.

/Kasper – on Twitter and Delicious

Collaborate WordPress Theme Official Release

Collaborate Theme

I am very excited to announce the Collaborate WordPress Theme is now out of Beta an into its 1.1 version. Don’t waste your time, download the theme or go have a look at the live demo page.

Front Page

Front Page

Single Post

Single Post

Comments Tempalte

Comments

How to use the Theme

The theme works right out of the box, if you are not familiar with the installation of themes, have a look at the official WordPress article.

The theme uses two separate sidebars.

You will find both sidebars listed in the widgets section of your admin panel. They are named ‘Home Page’ & ‘Post Page’. The first one is for using widgets on your home and archival pages. These will show up underneath the posts dividing the page horizontally. The second one is for using widgets on your individual post pages. This is more like your regular sidebar with the widgets listed vertically at the right underneath each other

The WP-Gravatars Plugin

This plugin is not yet properly supported by WordPress 2.7 and you will have to make some manual modifications if you still want your theme to validate.

Sub Front Page

I recommend using the WP-Gravatar plugin to show the recent comments on your home page. Just install the plugin, select the widget and display it in your ‘Home Page’ sidebar. BUT! Don’t activate the authors profile widget! This will break the layout. Read the next paragraph to learn how to further customize.

/Kasper – on Twitter and Delicious

Standing on the Shoulders of Giants

lifehackerFor this blog I want to talk about, how I went about designing my theme in a bit more detail. I have touched upon this briefly before, but in this post I will be more specific.

Standing on the Shoulders of Giants essentially means, building upon work that has already been done. You don’t always have to create something that is entirely new and inventive. OK it’s not bad if you can come up with something that is just that. Butt more often than not, you will waste your time
and money doing something that other people have already done.

When I start planning for a project I always try and get a sense of what is out there already. But I also do this frequently throughout the development and design process. If I run into a situation or a problem, where I need a solution, I will look around and see how others have solved it.

In my design I wanted to find the best place for my navigation and how it should be implemented. I specifically looked at the search bar, how prominent it should be? how important would it be for my users. All this would take months to research if I had to do it on my own.

Rather than do that, I had a look at other collaborative blog designs to see how they used the search bar. These blogs are some of the most popular on the web, so I trusted them to give me the solution. It turns out that they ALL had the search bar very very near the top of the page. I effectively decided to build my design around the search box, and made that together with the categories, the absolute first priority of the design.

WordPress Search Box

WordPress have two search boxes that can be used. You can hard code the search box into your theme, or you can use a search widget. The difference is essentially that widgets can be controlled
by the user, and the hard coded search bar is controlled by me. Because this feature is so prominent for this theme, I decided to hard code this search bar into the theme. It is always good to give the user control, but in this instance I trusted my own judgement to be the best thing for this particular theme.

searchform

Luckily WordPress already provide a search form that calls the database and searches through all the post in the database. This comes with all default Wrodpress Themes and the php files is called ‘searchform.php’. Now to include that in the coding of your theme, you use the php include statement. You can then call the php file by using:<?php include (TEMPLATEPATH . '/searchform.php'); ?>

Breaking that apart; The include statement tells the server to include a particular page here. The between the brackets you tells the server exactly which page to include. Here we have provided a URL that uses the TEMPLATEPATH function that is build into WordPress. When this is parsed by the server WordPress exchanges the word ‘TEMPLATEPATH’ with the absolute path, to the directory in which your theme is placed. The in this directory the server looks for the files called ‘searchform.php’, and then include all the code from this file, into the current page as XHTML code.

The alternative is to just hand code the snippet from the searchform.php file into your current php file. But the advantages with having a separate file for the search bar, is that you only have to type in one line of code every time you want to use it. This makes it easy to reuse the search form over many pages. And equally handy is it if you want to change some of the code, you don’t have to go back and change 5-6 pages or more, you just change that single searchform.php file and it will automatically update on the other pages when it’s parsed by the server again.

/Kasper – on Twitter and Delicious

Planning and Managing Projects

Planning and managing projects can sound really dull and it almost certainly makes you think of piles and piles of administrative paperwork. But it doesn’t necessarily have to be, in fact when you are working on your own or in small groups; I think you can do too much planning and managing. Planning is always good, but if you do too much it can start to detract from your final outcome. You get set in stone and try to work around your planning in order to make it fit your project instead of using that time creatively on your project.

There are many tools and charts out there that will help you manage your projects. But if you were to use all of them, you could do nothing but plan. I think it’s important to filter out and selectively decide what planning and management you want to apply to a particular project. There was a great article on FreelanceSwitch the other day about pricing freelance work. This could be applied directly to you planning of the project, larger expensive projects involving a lot of work needs to planned more carefully than quick and cheap work.

I have personally found that most of the planning that you do with using charts is exactly the same planning that goes on in your head when you start thinking of a project. Most of these criteria are the source of your project idea. Why did you get the idea ion the first place, because you saw some kind of gab in the market or someone asked you to do it.

I think these charts are great for larger projects to manage people and tasks. For freelancers and smaller companies I think there main use is to show to clients. It shows that you are professional and they can see approximately how long a project will take.

I have included some of my charts below which I have made to analyse my WordPress Theme project. I’m glad that I didn’t do this at the beginning of my project, because I think that would have limited my creative process. I simply didn’t know enough about the possibilities of this projects until I started working with it in detail.

SWOT Analysis

A SWOT analysis measures a business unit, a proposition or idea; a PEST analysis below measures a market.

Strengths Weaknesses
  • Better usability
  • Easier to navigate
  • Better design
  • Improved author profiles
  • Niche market
  • Content specific
  • Limited scope for design
  • Customization could break layout
  • WordPress specific
  • Small market
  • Can’t offer 24/7 support
Opportunities Threats
  • Expandable market
  • Community development
  • Limited competitions
  • Self branding
  • Recognition
  • Competitors
  • Future software upgrades
  • Untested model

PEST Analysis

The PEST analysis measures the market and the users of your product.

Political Economical
  • GPL Licensing
  • Open Source Movement
  • Comment moderation
  • Freelancers
  • Web Professionals
Social Technological
  • Bloggers
  • Online community users
  • Open Source movement
  • Form strong community bonds
  • Tech savvy
  • WordPress users
  • Untested model

Gantt Chart

Developed by Henry Gantt as a tool for displaying the progression of a project.

kasper-gantt-chart

/Kasper – on Twitter and Delicious

Project Overview

My project ‘WordPress Theme’ is well underway, so I thought it was time for an overview of were I’m at and what’s to come.

My theme was meant solely for this blog at the beginning of the project. But as I started to look into other collaborative blogs I found that other collaborative blogs share the same problems as our blog. – No real overview of the latest posts and long columns of categories.

Often the volume of postings on these blogs makes it difficult to quickly get an overview of the latest entries, – and even harder to find the latest from your favourite author.

My proposal is now to create a theme aimed at collaborative blogs. The front page will be very different from the independent blog posts as it will serve as an overview page. It will show extracts from the latest posts in two columns making it easier to see without having to scroll as much. The categories are placed horizontally at the top providing quick access to the navigation.

Every author will have the possibility to upload a photo that will be shown next to their posts. This will give visitors a quick visual reference when scanning the page for posts from a specific author. Underneath the posts on the front page will be a horizontal sidebar. The widgets that normally go in the sidebar have been moved underneath the main content; I have changed the layout to be horizontal instead of the normal vertical sidebar.

The single pages are more like normal blog post pages. They will have a two column layout and the comments beneath the main content. I have done this mainly because people are familiar with this style which will make usability easier. Secondly there won’t be as much content to deal with on individual pages. Its main purpose is to isolate the single post and let people comment on it.

Colour Scheme

The colour scheme of the website is a chapter on its own. I really struggled to come up with a decent colour scheme. I even at one point thought of providing different colour schemes and let the user select which one to use. I knew from the beginning that I wanted black text on white background no matter what. As this is theme it has to fit many different web sites and a lot of different content. A white background ensures that most images and content will stand out on a bright background that gives good contrast.

The colour scheme went from brownish to green before I finally settled for a variation in blue. I will spare you all of my hair tearing thoughts of the process and just show the different mocks I came up with.

1mockup 2green-mockup1 3green-mockup-single 4blue-mockup 5blue-mockup-single

/Kasper – on Twitter and Delicious

Use CSS to Style Columns

So why would you want to style your list items as columns? Well, good question! Let me just give you a few examples: If you like me are designing a layout for a WordPress blog that has a LOT of categories, you might not want that list to go way off your page. Other blogs might have the same problem with their blogroll, your blogroll grow over time and at some point it will get longer than you might like and split it up in two columns.

But the same technique that is used in this example can also be applied to navigation. You can use this method to create a horizontal navigation bar, and if you have many links, you can have the links align nicely underneath each other.

OK, you probably want to get going, it’s very simple and easy. Actually we are only really using a few basic CSS properties and I will go over them in detail in this article.

Just an aside here before you start coding your CSS; a good practice before you start coding is to reset all the known default browser style. These differ a lot from IE6/7 to Firefox to Opera, Safari etc. Eric Meyer has taken the time to develop a stylesheet that will do just that for you, just grab a copy of the file, and use the ‘@import’ command at the begging of your CSS stylesheet to import the file.

Let’s start out with our markup then, a simple list you can get here. It’s just a simple list of the categories on this site.

  1. First thing we want to do is set a width of our container and centre it. You don’t have to if you are doing this in your sidebar, just set the width.
  2. #categories {
    width: 980px;
    margin: 10px auto 0;
    }

  3. Next thing is to set the list-item elements to actually make the colums. We float each single list item that will make every category ‘jump’ up to the right of its preceder. We will also give it a width of 136px (this is essentially the width of the coloumn), and push the columns a bit apart by giving them a right matgin of 3px.
  4. #categories li {
    float: left;
    width: 136px;
    margin-right: 3px;
    }

Well that’s basically it, we now have a set of columns, but to make them visually appear better we will do some extra styling.

  1. Give the line a height of 1.7em
  2. #categories ul {
    line-height: 1.7em;
    padding:0 0 0 5px;
    }

  3. Make the font a bit smaller, capitalize the words and make it bold.
  4. #categories li {
    font-size:11px;
    text-transform: capitalize;
    font-weight: bold;
    }

  5. Finally style the links and give them a hover style.
  6. #categories li a {
    color: #000;
    text-decoration: none;
    }
    #categories li a:hover {
    color: #999;
    text-decoration: none;
    }

You can suit the final styling to your individual needs; you can also make the columns wider or narrower if that’s what you want. If you are making it in a sidebar you will probably only want to have 2 columns, if you are styling a navigation bar, you might want to have more.

If you are interested you can download the full stylesheet and compare it to your own.

/Kasper – on Twitter and Delicious

Wireframe to Mockup to XHTML

Up until now I have spent a lot of time getting to grips with the basic in and outs of WordPress themes. I understand how important it is that your theme is widget ready and that it is flexible and easy to customize.

Having finished my wireframe and being pretty satisfied with my initial mockups, I can start moving on to the actual theme creation. I have had some difficulties coming up with a colour scheme that I liked, it’s gone from brown to green and now it’s blue. I have come up with two complete mocks; one for the front page and one for the individual post/archive/search pages.

The single pages are different because I need to make room for the comments section. People are used to comments at the bottom of every article, so I will keep them there.

I will have to shrink the main content area to make room for a sidebar on the right. This will hold the sidebar information related to the post being viewed. I intend to ship the theme with sidebar items such as related posts, most recent post and comments etc. These can of course be changed or swapped by using widgets.

Preparing the Markup

Now it’s time to get into the actual coding of the theme. The main challenge at the moment is getting the bottom section of the front page and the single pages styled. The hard part is that the XHTMl needs to be uniform for all the items. I have to style every item the same no matter the content. In other words, the styling needs to be strong enough to hold most of the generic content you find in a WordPress sidebar.

Automattic, owner of WordPress, recommends using a simple <ul><li>link</li></ul>

markup to make it compatible with widgets. I won’t be able to comply with that due to the horizontal layout of the theme. I will make use of one of their alternative versions which will include the use of the <div> tag and some additional php coding in the optional functions.php template file.

/Kasper – on Twitter and Delicious

Talking to WP Theme Developer Justin Tadlock

As I said in one of my first posts, I really wanted to get in touch with Justin before getting too much into WP Themes. I have used some of Justin’s articles and tutorials before, especially his series on using custom fields are very useful for learning about the power of this feature. He kindly answered some of my questions and provided some really helpful links for further exploration.

What is the main advice you would give to someone who is creating their first Theme?

My main advice about creating your first theme is to just get the basics down. Learn from the Default WP theme. It’s a good example of a very basic theme. Don’t try to get too fancy with all kinds of neat features.
Know the Codex. That’s the single best thing you could do:
If nothing else, you should know how to find things quickly there.

If you’re looking to do this more long term and would like to build up a presence within the community, then you need to have a support system set up. Also, make sure you put your theme on WeblogToolsCollection.com.

Are there any “Rules” you have to follow?

The only rules you should try to strictly follow are these (especially the Plugin API stuff)

How do you publish your themes? Purely on your own site or do you make them available on WordPress.org as well.

I’ve never put any themes on WP.org because some of mine are too complex for the basic demo they have set up. Magazine-type themes definitely won’t look good there because, most of the time, options must be set before using the theme. I do plan on adding my next theme there though.

What are your thoughts on Premium Themes vs. Free Themes?

Premium vs Free? Mostly, I think you should do whatever you want, but I don’t like to see users getting ripped off because they bought a crappy theme. More thoughts on this:

http://justintadlock.com/archives/2008/05/29/screw-the-premium-theme-market

http://themeshaper.com/blog/the-ethics-of-premium-wordpress-themes/#comment-5101

Anything you want to add?

I also had a forum member ask about learning to develop with WP. I have a pretty lengthy answer with lots of links that you should bookmark.

If anyone is more interested in the stuff Justin does, then follow his tweets and his bookmarks and make sure you add his blog’s RSS feed to your reader.

/Kasper – on Twitter and Delicious

Understanding Widgets – My Next Step

I have never really thought of what widgets where, even though I have used them on many occasions. I have used WordPress to create many websites, and customized themes in all kinds of areas. Normally though, I just create my own template files within the WordPress theme folder and just hard code all the “widgets” like categories and blogroll into the template files. Unfortunately it’s not that easy when you are dealing with a complete WordPress Theme.

If you want to make a theme popular there are a few things you have to keep in mind. WPDesigner has a nice list of stuff that can help make a theme more popular. Number three on the list is:

Is it generic? Your free theme will not be used by one client. It’ll be used by thousands of clients. It’s very important to keep all features generic. Stay away from hard-coding anything and stay away from too many non-customizable graphics.

Generic is probably the single most restraining word when designing themes, they have to be fluid and able to accept the most ridiculous content. You never know if someone wants to call their blog: http://llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch.co.uk (Yes that is actually a working URL, and a village in North Wales). Returning to Widgets, you have no control over what widgets are going to be used with your theme, there a many widgets available to choose from, but the most common are: categories, archives, blogrolls etc. To quote one more of the important popular theme steps:

Is it widget-ready? The widget plugin now comes with WordPress so this is an obvious one. There’s no more reasons to not widgetize your theme.

Automattic has some great info about making your theme widget ready which will come in useful. Making a theme ready for widgets is all about wrapping code in CSS classes and id’s and then have some kind of uniform styling for them. What I’m most concerned about is that widgets can contain so many elements from text to images, and that might make the horizontal division hard. It will at least be hard to make it look good.

/Kasper – on Twitter and Delicious

« Previous entries