I received a very bizarre email this morning notifying me that their old blog appeared to have been hacked and some of my blog’s template was appearing at the top of another person’s blog.

Check it out » (it still appears to be there as of writing this post). I’ve never seen the blog before and it seems the most bizarre type of hacking that someone has done.

I’ve had people stealing my site’s design before a couple of times, but never seen something like this. Have any of you come across a similar scenario? Any plausible reason for it?

I’ve asked the site owner to remove my content as soon as possible.

Late last year I had the pleasure of working with the Participate Media team on helping re-design BuzzTracker, a news site which aggregates news from the blogosphere on numerous topics. The relaunched beta site is now live!

For more info, Alan posts about the redesign on their blog.

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!

This is part of a series of posts on how to create a Wordpress theme. See also: Step 1 and Useful Resources.

Now we have the basic layout (we could have spent a lot of time at this point working on the design), let’s turn it into a very simple Worpdress theme: an index.php file and a stylesheet, style.css.

What to put in each file:

style.css contains all the stylesheet information, I have cut and pasted this over from my original layout (see the code in the heaader). There’s also a few lines put up at the top which are used to describe your theme:

index.php is very similar to my original layout but with some minimal Wordpress code.

Use the Wordpress manual tag reference list, add tags to the HTML. I have used the following:

• <?php bloginfo('name');?> in the title of the page, pulled in from your Wordpress » Options » General settings.
  Why use code when you can just write the title in there? Later on, you may want different pages to have different titles and code can do this for you. Also, if you want to change your blog’s name later on, you can change it via the options page and not muck around in templates. Also, if you want to share your theme with others, you don’t want your blog name turning up everywhere!
• <?php bloginfo('stylesheet_url'); ?> is used for the stylesheet, instead of hard-coding in the location of it. If you share your theme with others, or move your blog, this will change automatically for you.
• <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
  <h2><?php the_title(); ?></h2>
  <?php the_content(); ?>
  <?php endwhile; else : endif; ?>

  This code tells Wordpress to display the title and content of the posts. It’s a very simple “Wordpress loop”. Wordpress will figure out what to show on different pages of the site as long as you have one of these loops in there. Basically, you can ignore understanding code in the first part of the loop and the last part - just know it needs to be there. The bit in the middle is where you get Wordpress to display your content. For my simple loop it is:

  <h2><?php the_title(); ?></h2>
  <?php the_content(); ?>

  In other words I use two Wordpress tags, the title and the content. There are plenty of other tags on the tag reference list that you can use in here.

Here’s the index.php template:

Download the zipped theme: summer-2007.zip

Install the theme (preferably on a test site since it’s a teaching template): unzip and drop the folder into your wp-content/themes/ folder.

Next step: Expanding out the template to have more functionality (e.g. linking to each post and having comments).

Think about what information you want to display, what you want to focus on, and how best to display it. Have a look at how other blogs lay out their content and think about what you like and don’t like about the layout (try not to focus on the design elements at this point).

For most blogs, this will consist of:

• Logo/introduction to a blog
• Main menu
• Blog posts
• Other content (photos, links, bio, music, books, archive links etc).

For this simple theme I’m making, I chose the following initial layout:

I’ll be making the footer quite large to organise some of the other content listed above.

Turning this into an XHTML/CSS template doesn’t need to be too difficult. A good place to refer to is this quick start guide where you can copy one of their templates into a text editor.

I’ve stripped this down to the bare basics, put in the different areas of my template and added in some very basic CSS to lay out the areas. This will be tweaked more later. See here » (and view the source code).