Posts Tagged ‘theme’

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

Advertisements

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

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