Woo Themes

Cutting edge Wordpress themes at a sensible price. Money well spent if you ask me!

Revolution

The premium themes that spawned many copycats, In my opinion this is style the best.

Theme Spinner

Another excellent website that offers lots of different layouts.

Premium Themes

You have to hunt around on this website to find the better themes but some, like Simple Site are very good.

Wordpress Themes Market

Another great selection of premium Wordpress themes that will leave you salivating.

Using Helper Styles

The first thing I always start my CSS file with other than the usual copyright and author information is a series of sanity saving rules. The first rule uses the star selector to reset all the padding and margins for all html elements so that you don’t have to keep doing this for every individual element. This not only cuts down on the file size of your stylesheet but also means you won’t be wasting time trying to figure out why your layout has lots of extra space in certain browsers.

I also set borders on all images to 0 so I don’t have to worry about them and the last two are common css rules that I’ll always end up using at some point. You could easily expand this section with any of your own commonly used css rules.

* {margin:0;padding:0;}
img {border:none;}
.clear {clear:both;}
.hide {display:none;}

Clearly Layout your CSS

Scanning through a long stylesheet isn’t much fun so it makes sense to structure your styles into a logical and easy to find way. I use the following comment headings to I can easily find sections when scanned through the stylesheet. It’s also worth noting that Stop Design’s tips on setting flags would improve this even more (see further reading for more details on this).

/* Layout
***********************************************/
#header, #nav, #footer etc
/* Typography
***********************************************/
h1, h2, h3, p etc
/* Lists
***********************************************/
ul ul li etc
/* Links
***********************************************/
a:link, a:hover
/* Forms
***********************************************/
form, fieldset, input, textarea etc
/* Tables
***********************************************/
table, th, td etc

Use Conditional Comments for IE Browsers

Lets face it most of our time as css developers is spent debugging IE browsers but having a stylesheet full of browser hacks isn’t the best way to ensure future compatibility. What if these hacks are broken when IE 8 is released for example?

I’ve been using conditional comments for some time now as they are simple to implement and are recommended by Microsoft as the best way to code css for each of its browsers. You can therefore ensure that these will be supported long term. Conditional comments should be placed in the head of your HTML document after your main stylesheet and typically I’ll place them in an include file so I only have to update one file no matter how large the site. See below for a typical example of how to add extra stylesheets for IE 6 and IE7.

<!--[if IE 6]>
<link rel="stylesheet" type="text/css" http://www.yourdomain.com/css/ie6.css" />
<![endif]–>
<!–[if IE 7]>
<link rel="stylesheet" type="text/css" http://www.yourdomain.com/css/ie7.css" />
<![endif]–>


I promise if you implement these simple techniques you’ll make the css development cycle quicker, easier and a lot more fun. I’d be interested to see what other techniques readers use to organise their stylesheets so feel free to add to this list in the comments. In the meantime check out the following further reading for some great tips on flagging and css shorthand techniques.

Further Reading

• Using Flags to Organise CSS
• CSS Shorthand Properties

Retro Fonts

DaFont - Superb website which has many retro fonts available for free download on MAC and PC. I’ve lost track of how many great fonts I’ve downloaded from this site.

Font Diner - Plenty of great fonts for free download here and the site is also a great example of that retro look.

Retro Clipart and Illustrations

Havana Street - Features some great retro illustrations and also has a free download so you can check out the quality of the artwork available.

Retro Art Ad - Large digital collection of authentic advertising artwork from the 30’s, 40’s and 50’s. Includes over 1800 images for purchase.

Pixel Decor - Ok its more 60’s and 70’s but its still a great range of retro icons, desktops and patterns.

Retro Colours

Art Deco Colours Combinations - A guide to Art Deco era color palettes.

Retro Websites

Altoids - A wonderfully atmospheric website that really gets the retro look just right.

Rejected Robot - Highly creative design with a sense of humour. This is one website that stands out from the crowd. The designer also has some great work in the portfolio.

WebDesigner.ro - I love the look of this one. Hints of communist propaganda, some great fifties fonts all presented in a clean and effective design.

Legendary Aircraft - This one just had to have a retro design didn’t it? Being a bit of a warbird fan I just couldn’t resist adding this one.

Darren Hoyt has created a very good tutorial on creating a scalable two tiered menu in Wordpress that you can implement on your Wordpress site. It looks great and even supports highlighting of existing pages.

Read the full “Creating Two-Tiered Conditional Navigation in Wordpress“ tutorial.

The latest version (currently v 9.9.0) is great but has been giving a lot of Pligg users trouble modifying it so that it is SEO friendly as a lot of the existing mods seem to be broken in this version. SocialCMSBuzz.com has luckily come to the rescue with an install of v9.9.0 that comes with all the SEO mods working, an additional 5 templates and a working image upload facility.

The those wanting more details the SEO modifications include;

• Pligg SEO Friendly Optimal Page Titles Hack
• Pligg Google SEO Friendly URL Rewrite Hack
• Removed the word /category/ from Pligg’s category URL’s

Visit socialcmsbuzz.com for all the details and download.

Whilst Wordpress is a great publishing tool it does have it’s challenges and one of my greatest concerns is always security. The Wordpress team of developers do a good job of releasing regular fixes but as always hackers inevitably find loopholes and exploits in each new version. Left in its default state Wordpress can prove particularly vulnerable so here is a list of simply steps you can make to ensure your Wordpress blog or website is hacker proof.

Step 1: Delete the Wordpress version information that appears in the header template.

This is the first step you should take as it tells hackers who view the source code of your Wordpress site what version your using. If they know the specific version then they may be able to exploit certain loopholes. Simply delete the string that looks like this (see below) in the particular theme folder you have installed.

<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" />
<!– leave this for stats please –>

Step 2: Ensure your plugins folder isn’t viewable.

Now this can be achieved in two ways you can simply upload an index file (i.e. index.html) in the plugins folder or make sure that directory browsing is turned off. If your using a web host that supports cPanel then this is straightforward as you can use the Index Manager to turn off indexing for the public_html folder where your web files are uploaded. If a hacker can see the plugins your using then they will be able to exploit potential loopholes in them.

Step 3: Restrict access to your wp-admin folder.

If a hacker knows your using Wordpress then they will be able to guess the login url for the admin area and this will expose your Wordpress login page to a lot of punishment. So its best to restrict access to this folder via IP address. Now if you have a static IP address then great otherwise this maybe tricky as your ISP may change this frequently and you’ll have to manually change your IP each time. To restrict access you can use the .htaccess file with the following code uploaded to the wp-admin folder.
order deny,allow
allow from 127.0.0.1 # Change this to your particular IP address
deny from all


Step 4: Stop wp-admin and wp-includes from being indexed by search engines.

This may seem hard to believe but its happened to me in the past so you’ll want to ensure you have your trusty robots.txt file set-up so that these folders aren’t crawled by search engine spiders or those pretending to be search engines. The code you’ll need looks like this (see below) and in should be uploaded to the root directory.
User-agent: *
Disallow: /wp-admin/
Disallow: /wp-includes/


Step 5: Keep Wordpress up to date.

This may seem like a no brainer but its easy to lose track of what versions of Wordpress you have installed and on what sites. If you have a web host that supports cPanel then your in luck as upgrading is usually a one click process. If you don’t then you’ll have to upgrade manually. This doesn’t take too long and Wordpress has detailed upgrade instructions however if you have several websites to upgrade then it can be a pain.

Further Recommendations for Wordpress Security

Hardening Wordpress with htaccess

An excellent article that shows you how to beef up security using the .htaccess file.

Wordpress Development Blog

Visit the Wordpress blog frequently as they will announce any security loopholes and fixes.

Wordpress Scanner

Great security tool that lets you scan your Wordpress website for security flaws. Simply download the plugin, upload and activate it and then visit the scanner page. Don’t forget however to deactivate the plugin afterwards as it will leave you open to others scanning your site for the same flaws.

Freelancing Articles and Websites

Freelance Switch
One of the best on the web for web designers and developers. It’s a great looking site that has quality content to match.

Wake Up Later
Great little blog with some decent articles about how to make it as a freelancer and generate passive income.

Freelance Folder
A popular blog on the topic of freelancing that has some excellent tips, interviews and resources.

Freelance Invoicing Tools

The Invoice Machine
This is the simplest of the online invoicing services available but is a great tool for generating a quick invoice. It’s simplicity and ease of use is its strongest asset.

Fresh Books
Fresh Books is a well established online invoicing service that has many great features such as full invoice management, time tracking, the ability to accept payments with PayPal, Authorize.Net etc. It even has a snail mail service although this is only really an option for customers based in the US. It’s a paid for service but the time you will save more than makes tup for it. It’s also free for up to 3 clients.

Blinksale
Blinksale is another online invoicing service that is similar in price to Fresh Books. It’s free to send up to 3 invoices a month but you can have unlimited clients setup. It has good support for Basecamp and allows you to send snail mail invoices as well.

Other Freelance articles

Bulletproof Web Design Contracts

Getting Paid

Large collection of articles about freelancing and working with clients