I expect the answer is that whatever theme you have was developed using Wordpress’s default theme as a framework.

What makes more sense semantically is that on the homepage the website name is the h1, but on all other pages the page title should be the h1.

Here are a few snippets that can be used on every Wordpress powered site, from blogs to portfolios, e-commerce to magazine – there are just some things that defy genre.

Logo is a link but not on the homepage

It is a popular convention that a website’s main logo should link back to the homepage and most sites have that down. However, as Webcredible rightly point out, a page should not link back to its self – that just doesn’t make sense and can cause usability problems.

So, here is the snippet that will make sure that on the homepage the logo is the h1 and on all other pages it is a link that takes the user back to the home page.

<?php if (is_front_page()) { ?>
	<h1><?php bloginfo('name'); ?></span></h1>
<?php } else { ?>
	<a class="faux-h1" href="<?php bloginfo('url'); ?>">
		<span><?php bloginfo('name'); ?></span>
	</a>
<?php } ?>

Note that I have used is_front_page() as opposed to is_home() – this is to ensure that any Wordpress powered sites that use a static page as their front page still benefit.

To go with that here is the CSS – note that I have styled the h1 and a.faux-h1 the same. The user will see no difference but semantically the code makes far more sense.

#header h1, #header .faux-h1 {
background:url('images/logo.gif') no-repeat;
width:200px;
height:50px;
display:block; /* For the A tag */
}

Single post & Page title is not a link

Continuing on the idea that on the homepage the site title is the h1 but on all other pages the page title is the h1, in all of your templates (404.php, archive.php, archives.php, fullwidth.php, links.php, page.php, search.php, single.php, sitemap.php, etc.) replace your title with this snippet:

<h1><?php the_title(); ?></h1>

You might not be keen on the fact that your page title was perhaps a h2 on the homepage and is now a h1 on the single post page which could affect the size or overall styling so try attaching a class of .post-title - this will give you the opportunity to style the post titles to look the same in the CSS no matter what tag they are using and still remain semantic.

Adopting this method with all your templates should now mean that you have a more standard structure. For example, on a search results page the h1 is "Search results" and the individual post titles are h2s, just like on your archives and the homepage.

However, sometimes I want a wheel that I can edit by changing the hues or blocking out some colors so I can use the wheel in presentations to clients or colleagues.

After much googling I couldn’t find any PSD or AI color wheels so I made them myself and here they are for you to download.

Download color-wheel.zip

In the PSD each segment of the wheel is a shape layer so you can change the hues with ease. I have included labels for each of the hue, tint, tone and shade areas. There are also layer styles which you can easily switch on for blocking out colors.

The AI has each segment as a separate shape and the labels are also included for each of the hue, tint, tone and shade areas.

You might also be interested in:

• Color wheel and colour theory;
• Color inspiration around the web;
• Color Angels;
• Color scheme designer;
• Color theory for designers; and
• Color theory cheat sheet.

Updates

18 Mar 10 – Download now includes AI version of the colour wheel as well as the the PSD version.

Accomplice helps you shape your organisation and workforce to deliver in the most efficient way. Primarily working across the East Midlands with the NHS and its partners, Accomplice offer cost-effective organisational development solutions.

This is the second refresh I have completed for Accomplice. The first refresh involved rebuilding the site for Wordpress based on the current Dreamweaver design. This time we completely reassessed the navigational structure, content and resources to make sure users could easily access all of the great content that had been previously hidden away.

There was a concern that the previous content did not fully show the capabilities of Accomplice. My tasks involved copy editing page content, articles and resources then presenting this newly exposed content in the best possible way to demonstrate Accomplice’s products, services and roles.

New features include a refreshed grid-based design, task based navigation, and increased use of posts for new and republished articles and events, as well as company news.

Future plans for the site include case studies to enrich the portfolio and more details on the roles that Accomplice can play in your NHS organisation.

URL: http://www.accomplice.uk.com

This sparkly theme has features including post images, threaded comments and drop down category menus. It has been tested on Wordpress 2.9 in Firefox, Safari, Opera, Chrome and IE6+.

The layout is based on the 960.gs vertical grid and the baseline.css horizontal grid. There are some neat CSS3 enhancements including RGBA transparency, text shadow and rounded corners.

Glitter is simple enough to be used for any type of blog, but the cute and girly style makes it ideal for the personal blog of a mommy, craft enthusiast or even a teen blogger.

View the demo | Download the theme

Key features

• Grid based design;
• RGBa transparency;
• Text shadow;
• Rounded corners;
• Large glitter background image;
• Drop down category menus;
• Post images (small on post listings, large on single post page);
• Smooth scrolling on “jump to top” and “reply” links;
• Threaded comments;
• Full width, sitemap, archive and links page templates;
• Supports Firefox, Safari, Chrome, Opera and IE7+; and
• Supports IE6 without drop down menus.

Notes

• Post and page content area is 600px wide; and
• Sidebar content area is 280px wide.

Upcoming features

In the next release (once Wordpress 3.0 is released) I hope to include the following features:

• Custom menu navigation;
• Excerpt styling for posts and pages;
• Theme options including different backgrounds; and
• PSD file download.

If you have any suggestions for the next feature release of Glitter please leave a comment below.

I have also decided to take down my old themes and rebuild some of theme with the latest features. They are all quite old now and just aren’t up to scratch for anyone looking for a new wordpress theme but hopefully they’ll be back up soon!

Updates:

• 17 MAR 10 – Version 1.1 released including hanging ordered lists and improved dropdown menu for 3rd and 4th level categories.

The team required a website that provided a public facing source of information on the team, news, events and transactions such as donations and membership payments. The site also needed to be flexible to accommodate future features such as a discussion forum and merchandise shop.

I designed and built a wordpress theme around the existing team mascot, Nyx, designed by pin up illustrator Charlotte Thomson. Features include flexible home page widgets for features, donate button and individual member pages.

Discussion forum and online shop soon to be launched.

URL: http://nottinghamrollergirls.com/

The latest project with BSO included a custom wordpress theme with jQuery features including carousel and smooth scroll.

This wordpress theme was based on a header design by Geo C and developed by myself into a wordpress theme. Key features of the site are the events calendar and lyrics archive.

The design theme was then extended across the BSO network to reskin the gallery and audio explorer.

URL: http://doghousegallery.net/blog

Previous work for BSO:

View the demo | Download the demo

I first got the idea for horizontal stripes from Elliot Jay Stocks‘ book, Sexy Web Design, where he produces a web design that has horizontal stripes running off the browser page. I then implemented it myself in the design of oldschoolnodoubt.com.

More recently, Neutron Creations launched a new design, again by Elliot Jay Stocks with CSS implemented by Ben Bodien which features the effect both horizontally and vertically.

Right stripes

Here’s the html for a stripe that starts in the middle and heads off to the right side of the screen, let’s keep it simple:

<div id="container">
<p class="horizontal right">Horizontal stripe</p>
</div>

Here’s the css:

.horizontal {
width:100%;
position:absolute;
margin:20px 0;
padding:20px;
}

.right {
left:50%;
margin-left:-100px;
text-align:left;
}

Ok, let’s break down the css. Firstly width:100%; this will make sure that your stripe is always the width of the user’s browser so, no matter how humongous their screen is your stripes will always go off their page.

In order to make sure we can start the stripe from wherever we like we use position:absolute; and use margin:20px 0; to place it vertically. Finally, we use padding:20px; because, well, everything needs a bit of padding.

Now we position the stripe horizontally. For a stripe that heads off to the right we set left:50%; which will give you a stripe that starts in the exact center of the page and continues on forever.

But, I want my stripe to start off center, in fact 100px towards the left of where it is now so I set margin-left:-100px;. If I want it to be off center and 100px towards the right I will use margin-left:100px;.

I then align my text with text-align:left; because I want the text to be next to the end of the stripe.

At this point you probably have a long stripe that heads off in the direction you want but you also have a horizontal scrollbar and that’s rarely a good thing. So now we need to do some work on the container div to get rid of that scroll bar.

Here is the css to go with that:

#container {
width:100%;
overflow:hidden;
position:relative;
height:200px;
}

We want the stripes to head off the browser page so the containing div must be the full width of the browser with width:100%; and in order to get rid of the scroll bar we use overflow:hidden; hiding the excess of the stripe.

You will now have a blank screen beacuse the stripes have a position:absolute; and as there is no content in the containing div we need to set a height:200px; and position:relative; to make sure that the stripes are visible.

Left stripes

To acheive a stripe that starts on the left and stops in the middle I add replace the right class with a class of left on the p:

<div id="container">
<p class="horizontal left">Horizontal stripe</p>
</div>

I then reverse all the right stripe styling:

.left {
right:50%;
margin-right:-100px;
text-align:right;
}

Please note: If you are using an inline element (span, strong, em, a), instead of the p to create your stripes you will also need a display:block; in your css.

19 FEB 10 – EDIT: Added a demo suitable for download.

22 FEB 10 – EDIT: Credited Ben Bodien for the CSS implementation of Neutron Creations.

URL:

Tasks: Design and custom Wordpress theme built using CSS.

Pink Party Nottingham, a charity event took place on October 28th 2009 at Fire&Ice, West Bridgford in aid of Breakthrough Breast Cancer. This year’s event raised a whopping £1,500 towards a cure for breast cancer. The website features blog posts, opportunity to purchase tickets plus twitter and flickr feeds.

The business required a new, closed to public, extension to their current, public facing, website especially for clients to create and update learning logs online. These logs would be used to document and help clients reflect on their progress in their development.

I installed Wordpress Mu and Buddypress to create the Learning Haven, a social network where users can have profiles, post status updates, create blogs, comment on peer blogs and join groups.

URL:

Tasks: Custom wordpress theme built using CSS based on the owner’s design.

Just No Doubt a fansite dedicated to an amazing band – No Doubt. You will find here all the latest news, high quality pictures, downloads, media and lots more.