I have spent most of the last week coding sites in WordPress for various clients, however for this last site that I am currently coding all that is needed is the theme rather than the site content itself.  This posed a problem so I went looking for a solution.

It is very hard to code a site when you have no content to fill it with, in fact I would go as far as saying it is virtually impossible.  Therefore I went searching for some standard content that I could import into WordPress only to draw a blank.  With this in mind I decided that I needed to produce my own file of standard content that could just be imported into WordPress using the import feature.  This would save endless amounts of time so instead of having to fill sites with blurb I could simply import a file and hey presto.

It then struck on me that maybe the WordPress community would want this file to so I have decided to make it available to download right here.

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.

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.

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.

I often get asked and also see in the WordPress forums online, about how make it so that the header of your WordPress blog is clickable to a link (like having the green highlighted area below clickable), probably your home page link, as many don’t have a home page as such, rather their latest posts.  Well here is how I always do it.

It involves changing a small piece of code in your themes header.php file.  In there, more often than not there will be a div tag with an ID called ‘header’.  If will probably look like something like this:

<div id="header"><h1><?php bloginfo('name'); ?></h1></div>

What you need to do is to change this piece of code to include a small piece of Javascript to makes the entire header div tag clickable to a link that you specifiy.  For example if I wanted to make the header tag clickable a go to the google homepage I would replace it with this code:

<div id="header onclick="location.href='http://www.google.com/';" style="cursor: pointer;"><h1><?php bloginfo('name'); ?></h1></div>

This will make the entire header section of your site clickable and link to the google homepage.  Basically it is the following code that is important:

onclick="location.href='http://www.google.com/';" style="cursor: pointer;"

It is this code that needs to be added inside the header div tag, changing the URL to they location where you want the click to go to.  Many want this to be the homepage of their blog, so simply replace www.google.com with the URL of your blog.

And that’s it, an easy way to make the header div of your blog clickable to any site or link that you want.

As you will undoubtedly know WordPress is a great web publishing tool but one of the things that really excites people is that fact that you can extend WordPress’s capabilities with a multitude of ‘plugins’ that give your WordPress site extra capability.  In fact there are so many plugins out there that they is probably one for what you want WordPress to do.  So here are my favourite plugins anyway.

Akismet

This comes with your WordPress download but is really essential in stopping SPAM appearing on your site through your comments.  On the old version of Penny4Them I think that Akismet had stopped about 14,000 comments in about 6 months!

All in One SEO

SEO or Search Engine Optimization is important if you want to get your blog appearing in the search engine ranking near the top.  This plugin handles a lot of the behind the scenes stuff for you.  For example it adds the meta tags at the top of the page and makes your post/page titles and little more search engine friendly.

Google XML Sitemaps

Linked to the above really.  This produces an XML sitemap of your website and the Google can quickly see all the pages and posts on your site in one file.  Really easy to use and setup to.

Dagon Design Form Mailer

This is a really simple plugin that allows you put a very simple but effective contact form on your site.  There are lots of contact form plugins out there but this is by far the easiest to use if you just want a simple form for people to get in touch.

Subscribe to Comment

This plugin allows readers of comments to subscribe through email to a particular posts comments.  That way when someone else comments on the post the reader is informed that there has been another response so they can keep up to date with the conversation.

Breadcrumb Navigation XT

Fewer and fewer sites these days are choosing to use a breadcrumb to aid navigation but I have to say that I am a fan of them and included one on this site.  This plugin takes care of it all for you.  Really easy to use and very effective.

Limit Posts

There have been many times when I have been designing that I want an area of the site that displays posts but I don’t want them to get to long.  Therefore instead of having to insert the more tag (which I found myself forgetting to do) this plugin automatically cuts your posts at a length you specify and that way keeps your design looking good.  I use it on Equal Design and Education Themes.

Flickr RSS

This plugins uses the RSS Feed of your photos on Flickr in order to show your latest photos on your blog.  You have control of which user account the photos come from as well as the size and number of photos to display.

As I have said there are hundreds of plugins for WordPress and there is a good probability that there is a plugin for the function that you want to add to your blog.  Take a look at the plugins available on the Wordpress Website or do a Google search for what you are looking for.

Penny4Them started out in the summer of 2006 as a small site where I stored some photographs of friends and family so others could see what was up to.  Since then it developed into a proper blog, using WordPress as the platform for publishing. Today I am launching Penny4Them version 2.

I have had the previous design (which is still available in Old Penny4Them Archives) since January of 2007 and therefore I thought that it was about time that it took on a new look.  The original design was based on the Fasttrack theme by Sadish, and having learnt so much about Wordpress and CSS in the last few years I thought that I should have a custom design.  I have created many sites over the last 6 months working with Matt Shepherd as Equal Design, however I wanted something that was a little different from what we had created before.  I wanted something a little more ‘Grungy’.

After about 4 weeks of research and testing different designs in Fireworks and Photoshop, I give you Penny4Them version 2.  This will include all the usual stuff that I have been posting about over the last 18 months or so, however there is going to be more.  I am adding a specific WordPress section (available as a link at the top of the blog) where I intend to share some of the things that I have learnt about this great publishing platform over the years.  I often look at the Wordpress Forums in order to try and help others out and I find myself helping the same problems over and over again.  Therefore this should tackle some of those issues.

So there it is - Penny4Them version 2.  I am sure that it will evolve little bits and bobs over time, adding this and that and taking bits away to get it just right.  However I am pleased with it.  What do you think?  Your feedback and comments as always are welcome.

P.S. the old posts and comments are all still available and working on the old site in the Old Penny4Them archives, just in case you are wondering what has happened to them all!