our thoughts

In my previous post on creating a theme, I deliberately kept things very simple in terms of both the design and the WordPress code (“the loop”).

One of the biggest strengths of WordPress is that a default install does give a nice looking blog. However, everyone else has the exact same nice looking blog and because of WordPress’ popularity, too many blogs all looking the same becomes not only boring but confusing for first-time visitors. Once people have been blogging for a little while, they quickly want to try new designs. There are some very nice freely available WordPress themes from minimal, pretty, dark to more complex ones. If you’re brand new to blogging, WordPress, web design and programming, starting off with someone else’s theme is probably the best way to learn.

However, changing the default (Kubrick) WordPress theme into your own design can be more hassle than it’s worth. The default theme has many template files and CSS bits and pieces to sort through and most of the time you’ll find yourself un-doing things, rather than creating them.

So, for the next step of this theme, I’ll need to think some more about what I want the pages of the blog to do, then figure out how to use WordPress code to get it to do this by either referring to the classic or default themes which come with WordPress and/or the WordPress documentation.

The things I’ll be doing are fairly common and copying and pasting across from the WordPress default themes will be the fastest way. The main thing to try and understand is the loop. If you delete part of that code, things will most likely break.

Things to initially get the theme to do:

  • Main page has:
    • a list of all the blog entries, titles of the posts go to their individual post pages (permalink)
    • display the number of comments on each post with a link to the comments section of the permalink page
    • At the bottom of the main page, display the number of pages of posts something like this: Page [1] 2 3 4
  • Permalink page has the post, then the comments, then the trackbacks, then the comment form.
  • Sidebar has information about me and a list of my favourite posts from my blog.
  • Footer has a contact form, a list of blogs I like to read, a list of my latest bookmarks.

Got any other suggestions for what the theme should do? Then the coding begins!

your thoughts

Adam Walker Cleaveland

January 21 2007

it would be great to see you include some type of Flickr side photo album or something….

for everything i love about wordpress—-incorporating photos into it is not easy (i miss my Typepad photo albums….)

D. Brent Miller

January 22 2007

Thanks for all your tips. I was leary, at first of installing WordPress on my web site(s), but with a “test” directory, I learned it was really quite simple. Now I am using other themes from this wonderful world of WP contributors, and sidebar widgets to tweak the look. I am also getting ready to install WordPress as my first line of web authoring for my other website–three total.

The one item that gives my web site a unique look is the header photo. I scour through my inventory of images looking for one that I can crop to panoramic. I resize the image, give it some personal credit, and then replace the appropriate named file within the theme. The great thing about this is that as I find new images in my travels, I can replace the header photo–as frequently as I want–giving the site a fresh look regularly.

It’s a perfect way to give my web site a look that looks like no other.

Thanks for your tips. Hope this helps others, too.

Brent

dean

January 22 2007

Hi Rachel,
As a designer who is learning WP, I’ve always been interested in tutorials that shows us how to understand the basic framework of WP template files and php code that comes along with it.

I found this site WP tutorial; http://www.texto.de/texto/how-to-design-your-own-wordpress-theme/

It’s not too bad but the guy is German so I sometimes I don’t understand everything that he is trying to say in English.

If you can take what he is saying and build on it, then that would be cool.

All the cool little widgets don’t mean much to me but just trying to teach us the basic framework and how the various php calls function with each other is always helpful.

Keep up the solid work. Love the baby step approach you are taking here.

Aurora

February 19 2007

Hi Rachel,

I just found your website and followed each steps of your WordPress tutorial, and I have to say that it is really simple to follow. I’ll come back for WordPress step 4 of course!

Here are some suggestions for the theme:

1) I’d like to know if I’ll be able to switch themes easily, without messing up the content of my website.
2) how to implement a Flickr widget that looks nice and works great :-) eventually add a system to be able to display a slideshow using the Lightbox technology (I just heard about this Javascript plugin and I think it looks great on websites)
3) Is there a way of changing the header .jpg everytime the user refreshes the page? If so, it might also be interesting to learn more about that.
4) Last but not least, advices on how to design a layout in Photoshop that works well as a WordPress layout.

Thank you for all the good tips you have provided so far!

Aurora

February 19 2007

One other thing that I would be interested in learning is how to create different sections on a WordPress website and keeping a consistent look throughout the pages. A good example: http://www.ndesign-studio.com/ (see sections “About”, “Portfolio”, “Icons”…)

Parth Mudgal

February 23 2007

nice blog. i will certainly book mark it. i also have a web site.
it is

http://nbhost.uni.cc

Regards

Dolly Yeo

July 17 2007

I like your blog, very specific and useful, will send your link to my webmaster. Education for me too. I am in the process of migrating from blogspot to wordpress; choosing a template and after choosing the color & column still cannot get one that looks’personal’, not commercial, hope my webmaster could get some tips from here. Thanks!

Dolly Yeo

July 17 2007

Thanks Aurora for sharing this :
http://www.ndesign-studio.com/

Just went in and the design is awesome:)

Elsewhere: Skype MSN Messenger Twitter Facebook