This week saw the arrival of 3 new gadgets to my clutches.  A laptop (works really hence the ‘mostly’), my new iPod nano (after much deliberation as to which to buy) and an portable, external hard drive for carrying my documents and files around with me.  So how has mu experience of using these gadgets gone then?

Lets start with the laptop.  Although it shames me to say it I purchased a PC rather than a Mac.  The reasons were simple.  The laptop will be used to power the interactive whiteboard and work and the classes I teach all use Windows.  Therefore I could hardly demonstrate on a Mac and then let them use Windows.  Also price was a consideration.  I have to say though that I have regretted ever moment since the purchase.

Lets get this straight first of all, that if you want a laptop then the Toshiba Satellite Pro A300D is a good buy.  With an AMD Turion x 64 2GHz processor (Dual Core) and 3GB ram along with its 160GB hard disk the computer is great and provide ample computing power in order to do most tasks.  This is not were my fault lies.  As most laptops do these days, it came with Vista.  No problem there until you get to the fact that it was Vista Home Premium and you cannot marry Home Premium with a domain.  Therefore I would have to be wiped and rebuilt using Windows Vista Business (which can’t play DVDs and so on….).

The process seemed simple, you shut down, insert the Windows Vista Business DVD, reboot from the DVD drive and then let the disk do its job answering a few question here and there.  Then we booted and finished you download all the drivers from the Toshiba website, install them and hey presto you have a great spec laptop hooked up to the domain and away you go.  If only it was that simple.  Installing Vista Business was fine but the drivers afterwards, not so good.  I couldn’t get the display to work (in fact it is still not working properly - see below) and also the wireless card was not working and I just kept getting an error messages saying that the hardware was not present.  Armed with this failure I decided to plug in an Ethernet cable straight into the router (the LAN driver was fine) and then see if Vista could find the drivers itself.  It managed to find the Wireless Drivers but not the graphics card.  Therefore I went straight to the ATI website for the latest drivers.  I selected the one that it said on dabs.com were I bought the laptop, however although it displays correctly on the laptop I cannot get the external display to the projector to display in 16:9 aspect ratio or even letterbox mode.  I have had to settle with the projector cutting off the start menu!

Hassle from the word go are these PCs.  If it was an Apple you would literally just put the disc in and press go.  Petty we are not using Mac’s at work.  Talking Mac brings me onto Gadget number two for the week - the iPod.

In the end I decided to go for the iPod Nano 3rd generation (the square one).  They were going cheap on Apple’s refurbished stock store and therefore I picked up the 8GB model for less than £75.  Great value.  First impressions are good.  It is slim and small with excellent quality music and video playback.

Finally today my external hard disk arrive.  I went for a Seagate Freeagent portable drive with a 250GB capacity.  Again I have only had limited use so far but it is small and seems to connect to the laptop fine, which is what I intend to use it for.

P.S. sorry to Lisa Bettany for the title of this post, but it just seemed appropriate.  Visit her blog and you will see what I mean.

First of all let me get this straight.  I love Safari - great browser and I loath Internet Explorer with a passion.  But Firefox has that little bit extra, that makes it the browser of choice for me.  So why is it that Firefox is the browser that I choose to use all the time?  Here we explore the benefits of using Mozilla Firefox over any other browser.

There are the obvious advantages that are advertised all over the Firefox website such as the increased speed and security and the great built in browser search features that let you search sites you have already visited before.  But to be honest it is not these functions that excite me.  As a web designer I think that Firefox lends the greatest helping hand yet when it comes to coding a site.  Frankly I can remember how I coped without the Firefox addon called Firebug.

Firebug is quite simply amazing.  So what does it do?  Well it enables you to debug your code when creating a site that is otherwise very difficult.  It also enables you to check which pieces of the code are doing certain things and it also tells you which part of the style sheet is responsible for styling any area of the page.  It is a remarkable little plugin or addon for Firefox that makes my life a whole lot easier.  It integrates really well with the browser in that you can have it at the bottom of the screen as a bar or you can use it in its own window when viewing the code for sites.  Another great feature is that you can even edit the HTML code and CSS styling in the Firebug window and the changes are reflected in the web pages itself.  This is great for checking whether some code with work on not before committing to it for real.

Firebug is a truly magnificant piece of software running as an addon for Firefox 2 and 3 that is a must for all web developers and designers.  It saves you masses of time, and I recommend downloading it today.

So, we have created the header and the index.php file and now it is time to code your sidebar.php file in order to press on with the custom theme.  In this tutorial I will show you how to code your sidebar so that it is fully widgetized and also how to make that it works with no widgets.  This post is a follow on post from “Your Theme’s Index File“.

The first thing to do then is to create a new php and save it in your theme’s folder with the name sidebar.php.  This is the file that WordPress will look for when we call the sidebar.  Then we need to think about widgetizing the theme.  If you are not sure what this means, it is simply a way of making your sidebar editable without actually having to edit the php code itself.  So first of all you need to start by opening a new div called sidebar.

<div id=”sidebar”>

</div>

<div style=”clear: both”></div>

Everything else in the tutorial will sit between those sidebar opening and closing divs so that it is inside the sidebar.  The last line of code is because you are probably going to want your sidebar to appear to the left or right of the main content area i.e. one to float left and the other right or visa versa.  This code will clear the two floating areas and is necessary for your theme to render correctly.

Now for the widgetizing of the sidebar.  The code below is added so that WordPress knows which part of your sidebar is widgetized.  Therefore anything in between this code will be editable in your WordPress dashboard from the Design and Widgets section.

<?php if ( function_exists(’dynamic_sidebar’) && dynamic_sidebar() ) : else : ?>

<?php endif; ?>

Now we can put some things in the centre of this code that will only display if we are not using any widgets.  As soon as a widget is used then this code will not be used and it will only display the widget or widgets that you have selected.  Now we can add some code inside this to display a list of categories, if widgets are not used (note I have no displayed the entire code for sidebar.php including the parts above too.

<div id=”sidebar”>

<?php if ( function_exists(’dynamic_sidebar’) && dynamic_sidebar() ) : else : ?>

<ul>

<?php wp_list_cats(’sortcolumn=name’); ?>

</ul>

<?php endif; ?>

</div>

<div style=”clear: both”></div>

The last thing that need to be done is to create the widgetized function in your functions.php file which allows WordPress to understand what you want to happen in the sidebar.  To do this you need to create a file called functions.php and then save this in your themes folder.  Then add the following code to the file:

<?php if ( function_exists(’register_sidebar’) ) register_sidebar(); ?>

That’s it.  You should have a fully functioning sidebar on your blog.  Check out the next tutorial on finishing off your themes code by creating a footer file.  I will write that soon, in the next few days.

Sunday afternoon and before the Grand Prix started I decided that it was time to construct some of the baby furniture that we purchased the other week from Ikea.  So, screwdriver in hand I hauled the cot upstairs, having already constructed the chair the other day and opened up the instructions.

Me traditionally are not that good with looking at instructions, but experience has taught me that with these things it is crucial.  I have to say that the more I buy from Ikea the more I am thoroughly impressed with them.  As it turns out the screwdriver was not needed, in fact no tools at all because Ikea make things extremely simple to construct and all the necessary tools and fittings are included with item.

The cot was a doddle to put together, once I had the side of the correct way around!  It has a floating floor in that you can change the height of the cot very easily for when baby is smaller and larger. It was quickly ready for the forthcoming arrival of little baby Harry and solid as a rock (well not quite but ample for a 6 - 8 lb baby!).  I looks great next to the rocking chair, which is really a relaxing comfort spot for mum and dad after a long day working or baby sitting.

A few months ago my mobile phone contact was coming to the end and therefore I decided to look around for some cheaper deals.  Also with mobile broadband growing and growing all the time I thought that I should give that ago to.  I found that Three were the best in terms of price and I thought that 5 months on I would reflect on the service I am getting.

When the Three company first came out a few years ago now there were the inevitable poor reviews of a second rate service and therefore I was wary at first about using them.  However it seems that recently they have improved the level of their coverage and I knew one or two friends that had mobile phones on the Three network.  Therefore I decided to take a look.  Wanting both a new phone contract and a start with mobile broadband I thought that I was in a better position and I was right.  Therefore I was set up with a £12 a month phone contract (100 mix and match) and a half price mobile broadband deal at £5 per month (1GB download limit).  This is excellent value for money at just £17 per month for the two contracts.

So five months on, what has been my experience of using Three?  Well I have to say that overall they have been excellent (touch wood!).  I have always managed to get a very strong signal with my mobile (Nokia 6288) and I have had a consistent 1MB broadband connection with the mobile surfing.  There has only been one occasion when the broadband was slow (around 70kbps).

So what are my top tips for buying mobile broadband?

• There is nothing wrong with Three mobile broadband and it provides excellent value for money (cheaper that their competitors)
• A 1GB limit is plenty as long as you are not going to be using your mobile broadband for watching BBC iPlayer our YouTube videos etc.
• You won’t use it as much as you thought you would, so don’t spend too much on it - a 1GB limit is fine
• Try signing up with a new contact as a new customer as there are significant savings to be made.

So we have started our stylesheet, we have created our header.php file and now we are up to creating the index.php that will make up the main post section of our new WordPress theme.  This post will guide you through creating your index.php file.  This is a follow on post from “Creating Your Header File“.

The index.php file is the main file that your theme will use for all pages/posts unless you create other custom templates for example, archive and categories.  Therefore this is the file (along with style.css) that is needed in order for WordPress to recognise your theme as a viable theme to activiate.  The first thing that we need to include on this file is a link to the header.php file.  To do this we need to add the following code at the very top of the index.php file:

<?php get_header(); ?>

This calls the header of the page.  It is now underneath that, were we can start to code what we want to show on our main index page, or the homepage of your blog.  You will probably want your blog to have a main posts area and a sidebar section and therefore we need to created the page divs for these areas.  The sidebar divs will be on the sidebar.php file (see the next tutorial), but here we can include the main content div.  Therefore we can add something like this:

<div id=”content”>

We will style this div later so that it looks correct.  We now need to include what is called the loop.  This is a little piece of WordPress code that looks for your posts and then you tell it how to display them inside the loop.  In order to inser the loop we add this code next:

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
//do stuff here
<?php endwhile; else: ?>
<p><?php _e(’Sorry, no posts matched your criteria.’); ?></p>
<?php endif; ?>

This code queries the database for your post and then displays them where is says “do stuff here” (we will code that bit next).  If there are no posts that match the query then it displays “Sorry, no posts matched your criteria.” in paragraph tags.  So then now you need to decide what you want to do where it says do stuff?  What do you want to display for each post thay is returned?  Usually you would have the following:

<h2><a href=”<?php the_permalink(); ?>”><?php the_title(); ?></a></h2>

This code with display the title of the post in h2 tags as a link to the permalink page of the post itself.

<?php the_content(); ?>

This code will simply display the content of the post.  This is what is written in the text editor in the write post/page section of the WordPress dashboard.

<p>Written by <?php the_author(); ?> in <?php the_category(’ ‘); ?> | <span class=”comments”><?php comments_popup_link(’No Comments &#187;’, ‘1 Comment &#187;’, ‘% Comments &#187;’); ?></span></p>

This code does a number of things.  First of all it display the author of the post and then the categories that the post was published in.  It then displays a link which states the number of comments that are made on the post which links your to the permalink page for the post and goes straight to the comments section of that page.  The <span class=”comments”> is simply there so that this link can be styled later.

So if you have managed to get all you just need to finish off your page now.  The final couple of things to do are to call the sidebar and the footer, as well as closing the content div.  Therefore your final code should look lie this:

<?php get_header(); ?>

<div id=”content”>

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<h2><a href=”<?php the_permalink(); ?>”><?php the_title(); ?></a></h2>

<?php the_content(); ?>

<p>Written by <?php the_author(); ?> in <?php the_category(’ ‘); ?> | <span class=”comments”><?php comments_popup_link(’No Comments &#187;’, ‘1 Comment &#187;’, ‘% Comments &#187;’); ?></span></p>

<?php endwhile; else: ?>
<p><?php _e(’Sorry, no posts matched your criteria.’); ?></p>
<?php endif; ?>

</div>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

Why not take all this in again by using the video screen cast below:

Get the latest Flash Player to see this player.

Yesterday Apple announced the new iPod Nano.  I don’t know about you but it only feels like two minutes since the last release of the Nano?  Anyway I just wanted to write this post for two reasons.  Firstly to give my first impressions, and secondly to get your advice.

So the new iPod Nano.  Looking at the photos and watching the Keynote speech from Steve Jobs on the Apple Website, it seems that they have gone back to a design that is more like the 2nd generation design - the longer and thinner look.  There are some added features but to be honest are they features that we really want?  HD video on an iPod?  I have to say that my first impressions are that I think the old iPod design is better, what do you think?

The thing is what to do.  I have an iPod 60gb of which I only ever seem to use around 20GB, unless I fill it with video for a holiday.  Therefore do I try and flog my iPod and buy a new nano?  Or should I flog my iPod and buy one of the older nano, in the style that I like better?  Decisions, decisions.  Your thoughts, as always are welcome.

In this third part of the Creating Your Custom Theme tutorials we are going to concentrate on creating the header.php file that is needed in your custom theme.  This post is a follow on from “Creating Your Theme Stylesheet“.

The first thing that you need to do is to create a blank file, either in your text editor, or like me in a web editor such as Dreamweaver.  Now save this file as header.php in your themes folder.  The code below is what I always use in my header.php file and below I will explain what this does.

Lines 1 -5 are the standard HTML header lines that are located in most HTML files that are created these days.  It is only after this that things start to become a little differnet.  Line 6 sets the title of your pages.  In this case it is the name of your blog that you set in the settings pages, followed by the title of the page, which is set from the post/page panel.  You may want to change these round so the page title displays first, thats up to you.

Lines 7 and 8 are setting the character set and also simply providing some feedback to WordPress about the generator of the site.  These are not essential.  However line 9 is very important as this sets the link to your themes stylesheet and without it your site will look very differenet.

The next three lines (lines 10 -12) link your sites feeds.  WordPress generates three different feeds for your blog.  These are rss2, rss and an atom feed.  What these lines of code do is link the feed to this page so that when you click on the feed link (in the address bar in Firefox and in the toolbar in IE7) you are asked which feed to load.  These are important too.

Finally there are two lines of code one which is needed for pingbacks to work and the other that is simply to assist search engines in finding your archives as including the code that is on line 14 will mean that you archives (monthly) are listed in the head section of the site.

After this code all you need to do is close the head tag () and then you can start coding your page.  Here we are going to make a simple site were we have a header section, including the name of the blog, a content area for the posts and pages to go, a sidebar to include things like archive and category links and then a footer section.  Underneath the header section we are also going to include a page navigation menu which will make use of the wp_list_pages() function in WordPress.

When using the wp_list_pages() function we need to decide exactly what we want to display in terms of pages.  In this case I want a list of the top level pages (i.e. no sub pages), without a title and I want to able to change the order of the pages using the page order within the WordPress write panel.  To do this I would beed to include the following code:

It is also important that list pages function is enclosed in a <ul> tag.  If this is not done then your page will not vaildate and also Internet Explorer will display you page list incorrectly.  So that is it for your header.php file.  You can save this and then upload it to your server ready for use when the rest of the theme files are created.  Why not watch the video below which demonstrated the explanation above.

Get the latest Flash Player to see this player.

This post follows on from “Creating Your Own Theme“.  In this tutorial I will show you how to set up the folders for your new WordPress theme and also how to create the all important style.css file which contains the information about your theme as well as the style rules for the design.

The first thing you need to do is to open your wp-content/themes folder and create a new folder naming it the name of your new theme.  In this example we will simply use the name test-theme.  They create a blank file (you can even do this in notepad. The information below is the important code that must go at the top of your style.css file.  This tells WordPress important things about your theme such as its name, who wrote it and a link to the authors website.  The code that you need to add to the very top is:

/*
Theme Name:
Theme URI:
Description:
Version:
Author:
Author URI: http://
Tags:
*/

You need to fill in the appropriate information when adding it to your stylesheet.  Once you have this code at the top you can then save your stylesheet.  You must save it in your themes folder inside the wp-content/themes folder of WordPress.  You must also name the file style.css.  This is the name the WordPress looks for and therefore it is important that the name is correct.  The video below demonstrates this:

Get the latest Flash Player to see this player.

The final thing that needs to be done in order to finish of the stylesheet is that you need to take a screenshot of your design.  You should then name this screenshot.png and then save this again inside your new themes folder.  This is the image that is used to show a thumbnail of your theme along with the information you have just entered at the top of the stylesheet when you activate your theme in the WordPress design tab from the admin section.

In the next tutorial we will concentrate on the header.php file of your theme and get that coded to make you a custom theme.

There are many different WordPress themes in the WordPress theme directory over at wordpress.org.  However all to often themes can just be that little bit different to how you want them to be.  Therefore this post forms part of a series of posts on how to make your own WordPress theme.  Follow along to create your own theme if you like.  Today we are starting with the the anatomy of a WordPress theme.

A WordPress theme is way of styling your website or blog to get it looking just how you want to look.  The great thing with themes is that you can change your theme without having the change or recreate the content of your site.  A theme is basically a collection of different files and images, along with some CSS in order to style it.  Lets take a look at the files that you will need in order to create a working theme.

• header.php - this file contains the <head> tag of your site.  This includes the title of your pages and also information that links your themes stylesheet and RSS feeds.
• index.php - this is the main homepage of your blog or website and contains the code that pulls your posts into your blog
• single.php - this is the template file that is used to display a single post, often called the permalink poage, and includes the comments others have left and the comments form (these pull comments.php - see below)
• sidebar.php - most blogs or websites contains some sort of side column with links to categories and/or pages etc.  This file provides this functionality
• footer.php - a footer is a great way to show brief information about your the site author and any terms and conditions or copyright information etc.
• comments.php - this is the file that is used when you are adding comments to your blog, so it list comments that are already made and also contains the comment form
• page.php - this page is similar to index.php but allows you to have pages (rather than post) looking slightly different as all pages on your site use this template if it is included in your theme.
• style.css - this is the stylesheet for the them that contains all the style information as well as the theme name and author etc.

So that is basically the anatomy of a WordPress theme.  In the next post in this series we will concentrate on the style.css file and getting that ready with your basic information.