This bit of code will display your geotagged flickr photos on a google map. I use this in the sidebar of one of my blogs.

You will need your own API key. Get yours here.

The geoFeed can be found at the bottom of your flickr page .

Once you have this information replace the sections in bold.

<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAA-W9uqIa2PP530F8zDw7ifhTU7ZIBfnHw4wAfJHH0RagnnLKqYRRMSJ_Im0zVLMtCE6XFGDom2iMmrA" type="text/javascript"></script>

<script type="text/javascript">
var map;
var geoXml = new GGeoXml("http://api.flickr.com/services/feeds/geo/?id=38083777@N08&lang=en-us&format=rss_200");
function loadMap() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(51.26835954379726, 1.1254119873046875), 10);
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.addOverlay(geoXml);
}
}
</script>
<div id="map" style="width: 300px; height: 500px"></div>
<script type="text/javascript">setTimeout("loadMap()", 1);</script>

There is another way of doing it, simple go to maps.google.com and paste the georss feed url into the search box and click search, you can then embed it using an iframe. I couldn’t use this method on my other site because of some weird bug with adbrite!

Select standard as your experience level.

The code wp-o-matic gives you looks like the following:
*/20 * * * * /usr/bin/curl http://www.blah.com/blog/wp-content/plugins/wp-o-matic/cron.php?code=xxxxx

You only need the http://www.blah.com/blog/wp-content/plugins/wp-o-matic/cron.php?code=xxxxx part. Paste that into the command to run field and select how many minutes/hours/days you wish it to run, then click save.

When you go to add another cron job the wp-o-matic job should have been saved and appear as “entry 1″ in the Cron Manager.

Depending on the type of database your using this is what your variable will look like.
$db_url = ‘mysql://username:password@localhost/databasename’;
$db_url = ‘mysqli://username:password@localhost/databasename’;
$db_url = ‘pgsql://username:password@localhost/databasename’;

In the case of my localhost install that line would be:
$db_url = ‘mysql://root:root@localhost/drupal’;

Drupal being the name of my database. Username and password are always root with mamp.

I have my other blog set to update twitter when I add a new post to wordpress – but I didn’t want to have to go to Flickr and click “blog this” every time I upload a photo from my iPhone. I know I could just upload to wordpress but I dont trust my host enough so I always want to have as few files as possible to move hosts quickly!! – bad experiences ¬¬)

To cut a long story short heres what I do to autopost Flickr posts to WordPress:

Clone this yahoo pipe. I cloned and modified this from Manifest DeNsity.

Edit the pipe and replace the fetch feed with the url found at the bottom of your flickr page.
The structure will be something like this:

http://api.flickr.com/services/feeds/photos_public.gne?id=38083777@N08&lang=en-us&format=rss_200

Find your ID here.

Save the pipe and run it. Click the “Get an RSS” link and burn that feed using Feedburner. Under the Optimize tab enable smart feed, this neatens the RSS feed up. You could skip this step but if you find theres some problems with importing the posts it could be because of this.

Install WP-O-Matic and follow the setup instructions. I’ve set my cron job to update every 6 hours. More info on how to do this can be found here

In the wp-o-matic admin add a new campaign using the feedburned URL. Select the Category you wish to post into – and your done!

When your working on a design and you want to try out a particular font the last thing you want to do is close Photoshop and reopen it this little trick will let you reset your fonts and add any new ones you’ve installed to the font list.

I always start a new text layer – otherwise your paragraph/character settings are lost on your current text selection (press T and click anywhere on the document) then go to Window > Character

Click the little icon with the three lines and the down arrow in the top right hand corner of the Character Pallet, then select Reset Character and all your new fonts will be added to the list!

This is what the skirt will look like:

1. Buy a length of material from a fabric shop – it can be whatever you want. I bought a metre and a half just to be sure I had the right amount.

Lay out the material and fold it lengthways so you have a long thin rectangle

3. Measure using a piece of string from above your hips (the widest bit) to wherever you want the skirt to end.

Tie the piece of string to a pen/pencil/fabric marker and starting where you know the pen wont go over the edges of the material draw a semi circle.

Cut along this line – you now have a circle – but don’t unfold it yet!

4. Fold the circle in half vertically and then diagonally.

5. Cut a rounded quarter circle about 2inches from the point of the folded fabric – you should have two concentric circles.

Then all you need to do is force yourself into it – head first! You may need to make a slight rip in the waist to get in but once you’ve done that it’s easy enough to get in and out of it!

Take one cheap bottle of vodka:

and lots of skittles:

Separate all the purple and green ones – because apparently their mean or something. And add the remaining ones to the bottle.

They all dissolve into this:

I have a feeling tomorrow night could be messy!

You can view the final theme here.

I’m going to assume you have basic skills when it comes to web design or at least some concept of design! No tiny fonts and clashing colours here please! You’ll also need to have wordpress installed. Please also keep this page open, its the most useful thing when making themes!

Some other useful pages are Using Themes, Theme Development and Templates.

Navigation

• Initial Design
• CSS fundamentals
• 2 column layout
• 3 column layout
• style.css
• header.php
• index.php
• footer.php
• sidebar.php
• List Pages
• Search Bar
• Archives
• Monthly
• Recent Posts
• List Categories
• List Links
• Display Calendar
• comments.php
• page.php
• Custom Pages
• Styling the Template
• Positioning
• Final Stylesheet
• Download the finished product

I’m working with wordpress here but the design concepts and the coding remain the same for all platforms, the only things that differ are the template tags, but we’ll get onto those later.

First you need to know what you want your blog to look like. I usually do a mock up in Photoshop, its easy to modify and expand upon. (If you don’t have Photoshop you can use paint shop pro or the gimp)

For some ideas have a look at my inspiration tag on del.icio.us.

Open Photoshop and Create a new document, I usually make mine 1000×700, it helps having a widescreen laptop here! Because this is a blog I’m going to go for a simple two column layout with a header on the top.

Now I have a rough idea of what I want my site to look like, I’m going to start coding it.

First though I need to explain a bit about the structure of the site. I find it really helps to visualise CSS.

This is effectively the stylesheet I’ll be using, in graphical form. A great way to understand CSS layouts is to mess around with the CSS Creator, Its a great starting point for any website.

A 3 Column layout uses the same ‘container’ principal.

Login to your FTP and navigate to your wordpress installation directory, go to wp-content/themes and create a new folder, call it whatever you want. This is the folder where we will start building your site.

Firstly make a file called style.css and add the following to it.

	/*
	Theme Name: eruanna.net
	Theme URI: http://www.eruanna.net
	Description: eruanna.net theme tutorial
	Author: Hannah
	Author URI: http://www.eruanna.net
	*/

These is needed in order for you to be able to select the working theme in wp admin.

The first section of the theme we’re going to work on is the main page, this is the section people see first.

This is ‘included’ in all pages using a php include. It helps to maintain consistency throughout the site. Everything in this file will be included in the site – this can be very useful.

Create a new file in your folder, call it header.php. Add this to your header.php page.

	<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
	   "http://www.w3.org/TR/html4/strict.dtd">

	<html lang="en">
	<head>

This is called a doctype, it tells a validator which type of markup your using. In order to have valid markup this must be present, you can find out more about doctypes here

   <title><?php wp_title(); ?> <?php bloginfo('name'); ?></title>

This is our first example of a template tag. This is wordpress’s way of calling up a set of variables you have defined in the various options in the wordpress admin.

	<!-- Meta Data -->
	   <meta http-equiv="Content-Type" content="text/html; charset=<?php bloginfo('charset'); ?>" />
	   <meta name="generator" content="WordPress <?php bloginfo('version'); ?>" />
	   <meta name="description" content="This is a tutorial on how to create a wordpress theme" />
	  <meta name="keywords" content="keywords, that, descibe, your, blog" />

Meta tags, Some people say their useless and that search engines ignore them, but I think their vital. They give search engines data to index your site.

	<!-- CSS -->
	<link type="text/css" rel="stylesheet" href="<?php bloginfo('template_url'); ?>/style.css" />

CSS, cascading style sheets should be the only thing applying style to your website. Without CSS a site should have a white background, black text and horrible blue links in a solid block of text.

	<!-- RSS Feeds -->
	   <link rel="alternate" type="application/rss+xml" title="RSS" href="<?php bloginfo('rss_url'); ?>" />

	<!-- Ping URL -->
	   <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

	<!-- Get Archives Tag-->
	   <?php wp_get_archives('type=monthly&format=link'); ?>

	<!-- Call to various plugin data -->
	   <?php wp_head(); ?>

	</head>

The rest of the information in the head tag, allows browsers to auto detect your RSS feed, your ping URL, archives and a little tag some plugins use.

Everything after this is setting up the content to be formatted with CSS.

<body>

<!--main width definition-->
<div id="container" >

<div id="Header">
<div class="name"><a href="<?php bloginfo('blog_url'); ?>"><?php bloginfo('name'); ?></a></div>
<div class="description"><?php bloginfo('description'); ?></div>
</div>	

<!--right container-->
<div id="main" >

As a general rule id is used for positioning and class is used within id, to customise text and links, etc.

So here is our header.php, save it to your theme folder.

	<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
	   "http://www.w3.org/TR/html4/strict.dtd">

	<html lang="en">
	<head>
	   <title><?php wp_title(); ?> <?php bloginfo('name'); ?></title>

	<!-- Meta Data -->
	   <meta http-equiv="Content-Type" content="text/html; charset=<?php bloginfo('charset'); ?>" />
	   <meta name="generator" content="WordPress <?php bloginfo('version'); ?>" />
	   <meta name="description" content="This is a tutorial on how to create a wordpress theme" />
	  <meta name="keywords" content="keywords, that, descibe, your, blog" />

	<!-- CSS -->
	<link type="text/css" rel="stylesheet" href="<?php bloginfo('template_url'); ?>/style.css" />

	<!-- RSS Feeds -->
	   <link rel="alternate" type="application/rss+xml" title="RSS" href="<?php bloginfo('rss_url'); ?>" />

	<!-- Ping URL -->
	   <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

	<!-- Get Archives Tag-->
	   <?php wp_get_archives('type=monthly&format=link'); ?>

	<!-- Call to various plugin data -->
	   <?php wp_head(); ?>

	</head>

	<body>

	<!--main width definition-->
	<div id="container" >

	<div id="Header">
	<div class="name"><a href="<?php bloginfo('blog_url'); ?>"><?php bloginfo('name'); ?></a></div>
	<div class="description"><?php bloginfo('description'); ?></div>
	</div>	

	<!--right container-->
	<div id="main" >

This is a bog standard index.php page, the main purpose of the index page is to display your posts. You’ll notice <?php get_header(); ?> this calls your header.php page and displays it as if it was there all along.

I started some div tags in the header, the content of the div is in the index.php page and the div tag is closed in the footer.php file. This is particularly helpful with the other pages in the template, single.php, page.php etc.

index.php is where ‘the loop’ comes in. Its just a fancy way of showing more than one post.

Again you’ll want to refer to The Template Tags for things you can add to your index page, I’ve included the most common ones, date, category, edit this link and comments.

	<?php get_header(); ?>

	<!--this is the loop-->
	<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

	<div class="postHead">

	<div class="title">
	<h2 id="post-<?php the_ID(); ?>">
	<a class="title" href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(''); ?>"><?php the_title(''); ?></a></h2>
	</div> <!--end title-->

	<div class="postinfo">
	Posted in <em><?php the_category(', ') ?></em> on <?php the_date(); ?>
	<?php comments_popup_link(__('Leave a Comment'), __('1 Comment'), __('% Comments')); ?>
	</div> <!--end postinfo-->

	</div> <!--end postHead-->

	<!--call to the posts-->
	<div class="post"><?php the_content('click to read more &raquo;'); ?></div>

	<?php comments_template(); // Get wp-comments.php template ?>

	<?php endwhile; else: ?> <!--ends the loop-->

	<!--this is displayed if you have no posts-->
	<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>

	<?php endif; ?> <!--ends the loop-->

	<!--navigation between posts-->
	<div class="navigation">
	<?php next_posts_link('&laquo; Previous Entries') ?><?php previous_posts_link('Next Entries &raquo;') ?>
	</div>

	<?php get_footer(); ?>

In the footer.php file we see another include, this time to sidebar.php. A footer is included for disclaimers etc and the container div is closed.

	</div> <!--end main-->

	<!--call to sidebar-->
	<?php get_sidebar(); ?>

	<div id="footer">
	This is an <a href="http://www.eruanna.net">eruanna.net</a> tutorial.
	</div>

	</div>
	<!--end container-->

	</body>
	</html>

This is where you can include lots of exciting Template Tags!

Start off your sidebar.php with the following.

	<div id="sidebar">

	</div>

From here you can add what you do and don’t need.

Firstly, how about a list of your pages?

	<ul>
	<?php wp_list_pages('title_li='); ?>
	</ul>

Your visitors are going to want to search your site, so include a search form too!

<?php include (TEMPLATEPATH . '/searchform.php'); ?>

You’ll need to create a new file, searchform.php and place this in it.

	<form method="get" id="searchform" action="<?php bloginfo('home'); ?>/">
	<input type="text" name="s" class="search" value="" />
	<input type="submit" id="searchsubmit" value="Search" />
	</form>

A list of Archives is useful too.

This will display a list of the last 5 months

	<ul>
	<?php wp_get_archives('type=monthly&limit=5&before=<li>&after=</li>'); ?>
	</ul>

or a list of your last 5 posts

	<ul>
	<?php wp_get_archives('type=postbypost&limit=5&before=<li>&after=</li>'); ?>
	</ul>

You might also want to display a list of Categories

	<ul>
	<?php wp_list_categories('title_li='); ?>
	</ul>

and finally, some links.

	<ul>
	<?php get_linksbyname('Categoryname', '<li>', '</li>', '', FALSE,
	'name', FALSE); ?>
	</ul>

You can also display the calendar.

<?php get_calendar(); ?>

The sidebar is where most plugin functions will be placed.

This is what my sidebar.php looks like now.

	<div id="sidebar">

	<h1>Pages</h1>
	<ul>
	<?php wp_list_pages('title_li='); ?>
	</ul>

	<h1>Search</h1>
	<?php include (TEMPLATEPATH . '/searchform.php'); ?>

	<h1>Latest Posts</h1>
	<ul>
	<?php wp_get_archives('type=postbypost&limit=5&before=<li>&after=</li>'); ?>
	</ul>

	<h1>Archives</h1>
	<ul>
	<?php wp_get_archives('type=monthly&limit=5&before=<li>&after=</li>'); ?>
	</ul>

	<h1>Categories</h1>
	<ul>
	<?php wp_list_categories('title_li='); ?>
	</ul>

	<h1>Links</h1>
	<ul>
	<?php get_linksbyname('Sites', '<li>', '</li>', '', FALSE,
	'name', FALSE); ?>
	</ul>

	<h1>Calendar</h1>
	<?php get_calendar(); ?>

	</div>

Thats your main bit done!

Obviously when you view your site it’ll be a complete and utter mess but we’ve still got more pages to do before we start styling it!

comments.php is one of the hardest files to get to grips with! I’ve edited this one and commented it as best I can, I wouldn’t worry hugely about customising it.

	<!--If theres comments - display them like this-->
	<?php if ( $comments ) : ?>
		<div class="singolocommento">
			<ol class="commentlist">
				<?php foreach ($comments as $comment) : ?>
					<div class="bubble">

	<li class="$oddcomment" id="comment-<?php comment_ID() ?>">
	<cite>
	<strong>
	<!--comment author and link to their site-->
	<a class="author" href="<?php comment_author_url(); ?>"><?php comment_author(); ?></a>
	</strong>
	<!--comment info-->
	<?php comment_date() ?>, <?php comment_time() ?> <?php edit_comment_link('edit', '', ''); ?>
	<br />
	</cite>
	<div class="commentText"><?php comment_text() ?></div>
	</li>
					</div>
				<?php endforeach; ?>
			</ol>
		</div> <!--end singleolocommento-->

	<!--this is what happens if theirs no comments-->
	<?php else : // If there are no comments yet ?>
	<p><?php _e('No comments yet.'); ?></p>

	<?php endif; ?>

	<!--start comment form-->
	<div class="commentEntry">
	<div class="title"><?php comments_number(__('No Comments'), __('1 Comment'), __('% Comments')); ?>

	<!--this is displayed if comments are allowed-->
	<?php if ( comments_open() ) : ?>
		<a href="#postcomment" title="<?php _e("Leave a Comment.."); ?>">&raquo;</a>
	<?php endif; ?>

	</div><!--end commentEntry-->

	<div class="postinfo">
	<br />
	<?php comments_rss_link(__('<abbr title="Really Simple Syndication">RSS</abbr> feed for comments on this post.<br />')); ?>

	<!--display this if pings are open-->
	<?php if ( pings_open() ) : ?>
	<a href="<?php trackback_url() ?>" rel="trackback"><?php _e('TrackBack <abbr title="Uniform Resource Identifier">URI</abbr>'); ?></a>
	<?php endif; ?>

	</div><!--end postinfo-->

	<?php if ( comments_open() ) : ?>

	<!--if you must be logged in to comment-->
	<?php if ( get_option('comment_registration') && !$user_ID ) : ?>

	<p>You must be <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?redirect_to=<?php the_permalink(); ?>">logged in</a> to post a comment.</p>

	<?php else : ?>

	<!--if anyone can comment-->
	<form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform">

	<!--get registered users info-->
	<?php if ( $user_ID ) : ?>

	<p>Logged in as
	<a href="<?php echo get_option('siteurl'); ?>/wp-admin/profile.php"><?php echo $user_identity; ?></a>.
	<a href="<?php echo get_option('siteurl'); ?>/wp-login.php?action=logout" title="<?php _e('Log out of this account') ?>">Logout ?</a></p>

	<!--If not Registered enter your info here-->
	<?php else : ?>
	<table border="0" width="70%" class="commentTable">
	<tr>
	<td valign="top">
	<input type="text" name="author" id="author" value="Name" size="22" tabindex="1"/>
	<br />
	<input type="text" name="email" id="email" value="email" size="22" tabindex="2"/>
	<br />
	<input type="text" name="url" id="url" value="URL" size="22" tabindex="3"/>
	<?php endif; ?>

	<!--comments textarea is shown to everyone-->
	<textarea name="comment" id="comment" cols="70%" rows="20" tabindex="4" value="your comment?"></textarea>
	<br />
	<input name="submit" type="submit" id="submit" tabindex="5" value="Submit Comment" />
	<input type="hidden" name="comment_post_ID" value="<?php echo $id; ?>" />
	<input type="hidden" name="comment_reply_ID" id="comment_reply_ID" value="0" />
	<?php do_action('comment_form', $post->ID); ?>
	</form>
	</td>
	</tr>
	</table>
	<p><small>
	<strong>XHTML:</strong> You may use these tags: <?php echo allowed_tags(); ?>
	</small>
	</p>

	<?php endif; // If registration required and not logged in ?>

	<!--this is what is displayed when comments are closed-->
	<?php else : // Comments are closed ?>
	<p><?php _e('Sorry, the comment form is closed at this time.'); ?></p>
	<?php endif; ?>

	</div> <!--end commentEntry-->

pages.php is the template which you want your pages to follow. Read more about pages here.
This is a simple page template.

	<?php get_header(); ?>

	<!--the loop-->
	<?php if (have_posts()) : ?>
	<?php while (have_posts()) : the_post(); ?>

	<div class="title"><?php the_title(''); ?></div>

	<?php the_content(); ?>

	<?php edit_post_link('Edit this entry.', '', ''); ?>

	<?php endwhile; ?>

	<?php endif; ?>

	<?php get_footer(); ?>

You can also create custom page templates, for specific requirements by adding the following to the top of a new .php file. You can then select the template name from the drop down ‘page template’ option on the ‘write page’ page. (phew!)

	<?php
	/*
	Template Name: Template Name
	*/
	?>

wow, we’ve made a wordpress theme! Well, almost – now we need to style it with the style.css file!

We’ve already created the beginnings of the style.css page, these variables are needed in order for you to be able to select the working theme in wp admin.

Use this CSS reference for help.

We’ll start by positioning all the elements. I showed in my diagram earlier.

	/*positioning*/

	#container {
	-moz-border-radius: 20px 20px 20px 20px;
	width: 80%;
	margin-left:auto;
	margin-right:auto;
	position: relative;
	background-color: #212121;
	padding: 10px;
	}

	#Header {
	-moz-border-radius: 20px 20px 20px 20px;
	background-image: url(headerurl) !important;
	background-repeat: no-repeat;
	background-position: bottom left;
	background-color: #212121;
	width: 100%;
	height: 160px;
	text-align: center;
	}

	#main {
	float: right;
	display:inline;
	position: relative;
	width: 70%;
	}

	#sidebar {
	float: left;
	display:inline;
	position: relative;
	width: 30%;
	}

	#footer
	{
	clear:both;
	text-align: center;
	width: 100%;
	}

I’ve included some snazzy CSS3 for rounded corners in this Read more here

Once I’ve positioned everything its time to work on the class divs.

The final stylesheet for this particular theme will look something like this.

	/*
	Theme Name: eruanna.net
	Theme URI: http://www.eruanna.net
	Description: eruanna.net theme tutorial
	Author: Hannah
	Author URI: http://www.eruanna.net
	*/

	/*positioning*/

	html, body
	{
	background-color: #282828;
	margin-top: 10px;
	margin-bottom: 10px;
	font-family: tahoma, verdana, sans-serif;
	font-size: 12px;
	color: #555;
	line-height: 18pt;
	}

	/*positioning*/

	#container {
	-moz-border-radius: 20px 20px 20px 20px;
	width: 80%;
	margin-left:auto;
	margin-right:auto;
	position: relative;
	background-color: #212121;
	padding: 10px;
	}

	#Header {
	-moz-border-radius: 20px 20px 20px 20px;
	background-image: url(http://localhost:8888/wordpress/wp-content/themes/55/header.gif) !important;
	background-repeat: no-repeat;
	background-position: bottom left;
	background-color: #212121;
	width: 100%;
	height: 160px;
	text-align: center;
	}

	#Header .name {
	color: #cefa48;
	font-family: "century gothic", sans-serif;
	font-size: 30px;
	font-weight: lighter;
	letter-spacing: 20px;
	padding-top: 80px;
	}

	#Header .name a {
	color: #cefa48;
	}

	#Header .description {
	color: #ccc;
	text-transform: uppercase;
	font-size: 10px;
	font-weight: lighter;
	}

	#main {
	float: right;
	display:inline;
	position: relative;
	width: 70%;
	}

	#sidebar {
	float: left;
	display:inline;
	position: relative;
	width: 30%;
	}

	#footer
	{
	clear:both;
	text-align: center;
	width: 100%;
	}

	/*posts*/
	.postHead {
	-moz-border-radius: 10px 10px 10px 10px;
	background-color: #282828;
	padding-left: 10px;
	}

	h2 a.title, h2 .title, .title, .wrap h2, .catlink, #newlink h2
	{
	padding-left: 0px;
	font-family: "century gothic", arial, georgia, sans-serif;
	font-size: 20px;
	color: #cefa48;
	text-align: left;
	font-weight: lighter;
	}

	.postinfo
	{
	font-size: 11px;
	font-family: "arial", "century gothic", sans-serif;
	font-weight: lighter;
	text-align: left;
	padding-left: 0px;
	color: #ccc;
	text-transform: lowercase;
	margin-top: -15px;
	}

	/*navigationlinks*/
	.navigation a {
	text-align: center;
	padding: 30px;
	margin-bottom: 15px;
	font-family: arial, sans-serif;
	font-size: 20px;
	}

	.navigation a:link {
	color: #cefa48;
	}

	.navigation a:hover{
	color: #111;
	}

	/*Sidebar*/

	#sidebar h1 {
	padding-left: 0px;
	font-family: "century gothic", arial, georgia, sans-serif;
	font-size: 14px;
	color: #cefa48;
	text-align: left;
	font-weight: lighter;
	}

	#sidebar ul {
	list-style: none;
	margin-left: -20px;
	}

	/*Comments*/

	#commentlist li , .singolocommento li {
	list-style-type: none;
	padding: 0px;
	width: 470px;
	}

	div.bubble {
	width: auto;
	margin-bottom: 24px;
	border: 0px solid #ccc;
	}

	div.bubble cite {
	position: relative;
	margin: 0px;
	padding: 7px 0px 0px 0px;
	top: 6px;
	background: transparent url(tip.gif) no-repeat 20px 0;
	font-style: normal;
	}

	a.author, a.author:active, a.author:visited {
	text-decoration: none;
	font-family: arial, "century gothic", georgia, "times new roman", sans-serif;
	font-size: 17px;
	font-weight: lighter;
	text-transform: uppercase;
	letter-spacing: -1px;
	color: #ec008c;
	}

	/* extras */

	a, a:visited, a:link, a:active { color: #ec008c; text-decoration: none; background-color: inherit;}
	a:hover{ color: #282828; text-decoration: none;}
	b, strong, em, i{ color: #4fd0ad; background-color: inherit;}
	u{ text-decoration: none; color: #d4eb89;border-bottom: 1px solid #d4eb89; background-color: inherit;}

	img {border:0px;}

	.search, #searchsubmit {
	width: 75px;
	}

	input, textarea, select {
	background-color: #282828;
	color: #ccc;
	font-size: 11px;
	font-family: "lucida grande", sans-serif;
	border: 0px;
	}

The final product!

You can download it here. View the Demo.

If there’s anything else you want to know please comment, If I’ve missed anything do tell me!

[tags]wordpress, theme, tutorial[/tags]

Sorry about the downtime yesterday – especially to all my hostees! May, Kai, Guy and Taylor. The server was being DOS’d apparently so they had to move us to a new IP. I guess thats the risk with shared hosting, if one person pisses off a hacker we’re all screwed! Now do you see why I don’t rely on my own server! I spent all of yesterday moving my files to my box.net account!

Without further ado, These are in no particular order.

1. Advanced Admin Menus
I worship this plugin! It converts all the sub links in your wordpress admin, under dashboard, write, manage etc into drop downlinks so you don’t have to click, presentations, wait for the page to load and then click theme editor. You just hover and select theme editor! Simple but SO effective.

2. Spotmilk
Beautiful with the above plugin – it makes the wordpress admin pretty, theres a blue theme and a black theme. (to get the black you uncomment a line of code – its easy enough to do)

3. Category Tagging
Creates a tag cloud with all your categories.

4. Comment Relish
Sends an email to a user on their first comment.

5. Digital Finger Print
Lets you find the people who steal your rss feed and display it on their site. You make up a random string of words and set up a custom google search to find them, if your reading my feed you’ll see some random words at the top of it, thats my digital finger print, Its actually a pretty good idea!

6. Enforce www. Preference
Does what its name implies, if someone goes to eruanna.net the url is changed to www.eruanna.net, I wanted some consistancy.

7. FeedSmith
Directs people to your feedburner feed not your wordpress /~rss one. So you can concentrate all your readers in one!

8. FlickrRSS
Everyone knows about this plugin, it shows your recent flickr photos on your website.

9. Full Text Feed
In wordpress 2.1 it automatically places a read more link after the first few lines in your feed, this gets rid of that nasty habit.

10. Sig2Feed
Allows you to add your signature to the bottom of your feed, or anything you want for that matter, images, links and text.

11. Sideblog
I’ve had a few people email me about this one so here it is. It shows a list of ‘mini updates’ in the sidebar instead of getting random @soandso comments from twitter! Its all managed from the wordpress admin.

12. Simple Tags
Adds technorati tags to the ends of your posts, if you remember to add them though!

13. Related Entries
Shows a list of entried related to the one your viewing.

14. WordPress Mobile Edition
I used to use this and I only just rediscovered it, it makes your site viewable on PDA’s and Smart Phones, it works, I’ve tested it!

15. WP-Grins
Lets you have clickable smilies in both the wordpress admin panel and the comments form. Especially useful if you’ve used my tutorial on Changing the Default WordPress Smilies.

16. WP Database Backup
Great for the paranoid like me! Emails a back up of your SQL database to you.

17. WP-Cache
Caches your site – particularly useful if your being dugg – apparently its helped but I’ve never been dugg so I wouldn’t know!

I’ll start this off with a bit of an explanation of what RSS is. It stands for Really Simple Syndication and its the best thing since sliced bread. If your not using it your actually driving away readers. Put it this way. How many sites do you visit on a daily basis? You want to read all of your friends entries, but your not going to go to each and every page all the time are you!? Not if you’ve got as many feeds as I do! With RSS you go to one page, bloglines or if you already have a gmail account (and who doesn’t!) you can go to google.com/reader and start adding feeds. To get you started my feed URL is http://feeds.feedburner.com/Eruanna (I use feed burner so I can manage my statistics.) The main advantage is that if you read those tween sites that use an awfully small font then you can actually read the posts in the feed reader.

If your using a hosted blog service like blogger, wordpress.com etc then you already have an RSS feed. There should be a link to it on your site, if your using wordpress then your feed is yoururl.com/feed

So firstly, if you’re not using twitter then your missing out on something theoretically pointless but really really addictive. So if you’ll look at my sidebar <– which I have my twitter feeding into.

Heres how I imported my twitter into my sidebar. (Alex Kings just released a flickr plugin
Download and install the FeedList Plugin. I tried to write my own but I gave up! Then activate it and in your sidebar.php page write the following:

<ul class="twitterFeed">
<?php feedList(array("rss_feed_url"=>"RSSURLHERE", "num_items"=>5, "show_description"=>false,"before"=>"<li>", "after"=>"</li>", "random"=>false,"sort"=>"none","suppress_link"=>true,"show_date"=>true));?>
</ul>

Add your RSS url into the specified space. and tada you’ve imported your twitter feed to your wordpress blog. There are many variables you can change but these are the ones I used.