1. Install a backup option.

Yes. The very first thing you’ll probably want to take care of is a suitable backup plan. Same as you (hopefully) do with your documents, photos, emails on your PC. I personally use the rather simple WP DB Backup. It’s fairly easy to install and there isn’t much to setup or configure. You can set which database tables to backup, schedule a backup (I do it once per week for example) and have it email you the file you need for a restore.

2. Change the admin password.

Wordpress generates a random password which you will forget. Edit your admin account via the Users panel in the administration interface.

3. Edit your permalinks.

By default Wordpress creates URLs for posts and pages along the lines of ?p=123 which is pretty meaningless and isn’t good for Search Engines either. There are a couple of different options built in to Wordpress which you access via Settings > Permalinks. Of the options provided I’d probably choose “Month and Name” if that was the only choice. Luckily we can enter a custom value. Popular all over the web, enter /%postname%/ and your URL will now say something like “this-is-my-cool-post” at the end which is a lot more meaningful to your users.

4. Set up Akismet.

Everyone hates spam, right? And there you are with a publicly accessible blog and guess what…a lovely comment form sitting ready to go. Spammers paradise. Unless you want to have your posts sullied by a relentless splurge of trash message then use Akismet. It’s even built into Wordpress from the go, so there’s no excuse.

5. Get your content on Feedburner.

Sign up for Feedburner. It’ll give you a custom feed and interesting stuff like how many subscribers you have..

Once you have signed up to Feedburner you will have to change your feed subscription link for your theme. This is managed by code in the head tag of your theme. This is managed from the header.php file for the theme.

Insert this code:

<link rel="alternate" type="application/rss+xml" title="Your title" href="http://feed address" />

6. Add Social Media options.

This is related to the RSS content options above in point 5. The idea is to make your content as accessible as possible to any potential readers. A good way is to add some Social media options.

There are a number of plugins out there to do this sort of thing. The one I use, which you can see at the bottom of this post before the comments section, is Add to Any. I found installation pretty simple for Add to Any. This might be different with other plugins. Experiment!

7. Remember your analytics.

Like a lot of people I use Google Analytics. The code it’ll give you when you sign up should be pasted into your HTML at the bottom of the page. In themes this tends to be in footer.php just before the closing body tag.

8. Install a theme or design your own.

The default themes in Wordpress are fine but not very individual or unique obviously. I’d recommend finding a theme you like from Wordpress themes. There are hundreds. If you’re confident and competent enough with HTML and CSS you can modify an existing theme or design your own from scratch. It takes a while from scratch and can be tricky sometimes if you’re not used to working with PHP and the wordpress specific code but it’s worth it. Also remember to test your designs with dummy content to ensure it all works as planned. Numerous examples of dummy content you can import to your blog can be found on Google.

These are 8 tasks, most of which are fairly simple, that will make your life a bit easier, save you in the event of a disaster, and hopefully make your content more freely available.

Borders

Below is an example of CSS code we can use to control the appearance of a border.

border-width: 1px;
border-style: solid;
border-color: #CDCDCD;


A simpler way to deal with these settings is to use the “border” shorthand.

border:1px solid #CDCDCD;

The exact order of width, style, color isn’t strictly required and using the values in different orders should work fine but if you notice something funky going on then you might want to check your order as it might be something simple like that if the browser is particularly strict. It should be noted that the properties above are actually shorthand themselves but when was the last time you used border-left-width: 1px? I can’t say I have often but perhaps i’m not daring or cool enough to have ultra modified borders.

Backgrounds

Another common use of shorthand is dealing with background. Instead of “background-color”, “background-image”, background-repeat”, “background-attachment” and “background-position” we can just use the rather obvious “background”.

background-color: #fff;
background-image: url(images/bg.jpg);
background-repeat: repeat;
background-attachment: fixed;
background-position: 0 0;


Can be more easily maintained as:


background: #fff url(images/bg.jpg) repeat fixed 0 0;


If you don’t specify a value in each case then defaults will be assumed. In many instances these are fine. If you’re only interested in making a background into a certain colour then you aren’t particularly worried about “image: none” being assumed as it will have no effect on you. The defaults are:

Margin and Padding

Margin and padding are used extensively within CSS and I can’t recall ever creating a stylesheet that didn’t contain margins and padding in many different places. Because of this I find using the shorthands makes life a lot easier and saves a lot of space in the file.

It is important to remember TRemBLe or TRouBLe when dealing with margins and padding. The uppercase letters standing for Top, Right, Bottom, Left. This is the order in which the shorthand is written.

Instead of:

margin-top: 5px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;


We can instead type:

margin: 5px 20px 10px 20px;

The smarty pants amongst us may have noticed that in the above example right and left are both 20px. Is there a way to group them to make our declaration even shorter? Well yes there is. Top and bottom, and Right and Left can be grouped together if desired.
margin: 5px 20px 10px;

You can of course cut it down from 3 to 2 to 1 depending on what you want to do:

Top and bottom – 5px, Right and left – 20px

margin: 5px 20px

Everything 5px

margin: 5px

Fonts

Last but not least for this introduction to shorthand are Fonts.

font-style: normal;
font-variant: small-caps;
font-weight: bold;
font-size: 2em;
line-height: 2.4em;
font-family: Arial,sans-serif;


Can just as easily be written as:

font: normal small-caps bold 1em/1.2em Arial,sans-serif;

As mentioned with background above, there are some default settings that will be assumed if you don’t specify them yourself. Again it depends on whether the default interferes with what you want to do. In some cases it will be what you want or won’t be of interest.

Summary

When learning CSS it’s often a good idea to start out by writing in full instead of shorthand. Indeed I would say I have a fairly decent grasp of CSS but I do still often tend to write in some shorthand and in full in other places. This is for a combination of reasons. Often its just a by product of the design and trying things out at the time to see what happens. A good exercise is to go back to the CSS file after you’ve tested and a put a site live to see if it can be slimmed down and reorganised. I should probably follow my own advice when I get some time!

So how can you test your code and design out in IE6 if you’ve upgraded to IE7 or 8. What do you do if you use a Mac?

XP Users

For the XP user it’s really rather simple to get IE6 installed alongside other versions. Tredosoft have a product called “Multiple IE” which allows you to install a copy of IE6 onto your machine. For the comedy factor you can install right back to IE3 if you desire. Further info on Tredosoft site. Or the Direct download link.

Vista Users

Unfortunately Multiple IE doesn’t work on Vista but there is a program called IETester. It doesn’t install standalone versions of the particular IE you’re interested in but allows you to view sites using the rendering engine in IE6. IETester link.

Mac Users

Obviously it becomes a bit trickier for Mac users to install IE. You can try installing VMWare Fusion and then a copy of XP and then a copy of IETester. This can probably be a bit annoying.

Other methods to test your code

BrowserShots allows you to submit a URL and select from a myriad of configuration options to see how your design looks on different browsers and platforms.