Posts Tagged ‘Wordpress’

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

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

Scamper the Web and New Media Blog

As stated earlier I’m developing a WordPress Theme for this website. I have been applying SCAMMPER to my initial idea and these are the thing that I have come up with.

Substitute: The first thing to do will be to come up with a design that will fit the blog. In that process I would substitute the current colour palette and come up with one on my own.

Combine: As this blog have so many categories and covers such a large range of subjects, I will try and combine this list with the Archives list in one column. Because the blog covers so many subjects, I have to assume that the web site will attract a very varied audience. By combining the archives and categories in one column, it will make it easier to find the subject you are interested in.

Adapt: To accommodate for the extra column, I will adapt a three column layout. This will separate the categories and archives from the rest of the content making it even easier to find.

Magnify: In order to make room for the third column I will increase the width of the layout. This will give me more space sideways and utilize the screen real estate of the wide screen monitors better.

Modify: I will modify the current links associated with the tags in each post. At the moment the links point to the official WordPress site, it would make more sense if the links pointed to internal posts on this site.

Put To Other Use: The theme I come up with in the end could possibly be used on all the WordPress blogs out there, just like all the free themes. It is not limited in its use in terms of how many websites can use it. The only criterion is that the website use WordPress.

Eliminate: I will try and eliminate the use of Javascript currently used in this theme. This will improve loading times, and accommodate for users that might have Javascript turned off in their browsers.

Rearrange: I will rearrange the position of the elements used on the blog. This includes search bar, meta data, the calendar etc.

/Kasper – on Twitter and Delicious

First Steps Towards the WP Theme

As I mentioned in my last blog post, I would have liked to talk to Justin before starting out on my WordPress theme adventure. I did try to get in touch with him, but he is a busy man and has not had the time to get back to me. Hopefully I will be able to talk to him a bit later on in the process. So when I couldn’t get in touch with an expert I had to figure out the answers to my questions on my own.

Where to start?

WordPress for starters, is basically a publishing platform normally associated with blogging. In order to understand how a Theme works, you can say that a WordPress blog consists of two separate things: The content; text, images, videos etc. and The design; header image, background, link colour etc. the design is what we call a theme. The theme is totally separate from the content, that’s why you can change the look and feel of you blog without changing the content.

This is what WordPress says about Themes

“Fundamentally, the WordPress Theme system is a way to “skin” your weblog. Yet, it is more than just a “skin.” Skinning your site implies that only the design is changed. WordPress Themes can provide much more control over the look and presentation of the material on your website.”

Before getting into all the advanced stuff with coding and all that, you need to know what kind of theme you want to design. Most themes are pretty generic in the sense that they fit many wordpress blogs. When creating a theme think about in what context it is going to be used, do you want it to be used on many blogs, or is it for one particular blog. My theme will specifically be targeted at this blog, this means that it will probably include elements that will only have relevance to this blog and it’s content.

What you need!

Even though a WordPress Theme is only about presentation you still need the full WordPress blog to fully develop your theme. As WordPress is a CMS that runs on a server, you will need to install one on your personal computer. I will not go into too much detail about this, people that want to create WordPress themes, would be familiar with installing WordPress either on a local server or remote.

Cre8te-design has a pretty useful list for what you need when stepping into the world if WordPress Themes. If you are familiar with the concepts and software mentioned here, you should have no worries in attempting to create your own theme.

Templates…

Are basically what you will be working with throughout the process, you will not modify any WordPress files, you will only work with you own template files. That is why your theme can be used with any Wordpres blog out there. You can download templates from the official WordPress Theme Directory. This will give you an idea of what is about and what you will be working with. It is also a good place to get inspiration for new themes.

Also follow my progress on Twitter and Delicious

/Kasper