This is a guest post written by Ben Barden, lead developer at CMF Ads, creator of Injader, and blogger at Top Ten Blog Tips.

A couple of weeks back, I offered to help Lindsay with a post or two at Web Design For Idiots whenever time allows. After Lindsay set up my account, I logged in successfully and went to create my first post… only to find I couldn’t upload an image. I notified Lindsay about this. Her reply suggested that this might be a good idea for a post:

Well, I haven’t uploaded ANY images using wordpress media manager, I actually do it through FTP, but I can just upgrade your account status from contributor to the next thing.

Lo and behold, once my account was upgraded, I could upload images. This is actually a good place to start – if you have a blog with multiple authors, you need to go to Users and set each person’s access level to Editor if you want them to be able to upload images.

Uploading via FTP requires you to open a separate program, which is a pain in itself, but you also have to type in the full location of the image in order to use it in WordPress. But there’s a much easier way. Here’s how.

Start by creating a new post, or editing an existing post. If you have the correct access level, then you’ll see the following buttons just above the post editor:

WordPress: Upload image, step 1

You’re looking at the buttons just to the right of “Upload/Insert”. The first of the four buttons will allow you to upload an image. Click it, and the following screen will appear.

WordPress: Upload image, step 2

I have to admit, I’ve never had much luck with the Flash uploader, which is what comes up first. (Yes, I do have Flash installed, and yes it works on other sites.) This happens no matter which site I’m trying to use WordPress on. I gave up with it, and on this screen I always click the “Browser uploader” link. You then get this screen:

WordPress: Upload image, step 3

A brief sideline: it’s actually quite confusing to be writing this tutorial as I upload each of the images I created for it!

On the “Add media files from your computer” screen, click the Browse button. This will allow you to locate the image that you wish to upload. Find the image and click Open to get back to this screen. Then click the Upload button, and wait for the image to upload. Once it’s uploaded, you’ll get this:

WordPress: Upload image, step 4

In the above screenshot, I’ve already changed the default values. The Title will be automatically filled out, but it’ll use the filename of the image – e.g. wordpress-upload-image-step-1 – not the best title.

Don’t be lazy. Delete the title and type a short description of the image. Then duplicate the title in the Caption field if you wish to display a caption beneath the image (which is a nice touch that you’l see in this blog post – and it will also show the description for readers who have images disabled in their browser).

Next, choose an alignment and a size, if you don’t wish to use the full-size image. My preference is to use Center, and Full size – but if you use Left or Right, your text will wrap around the image. Which is nice if the image isn’t really huge. I do this over at Top Ten Blog Tips.

Once you’ve finished, click the Insert into Post button at the bottom, and the image will be inserted into your post!

Hope this tutorial helped you – if you have any suggestions for other WordPress tutorials, please feel free to add your thoughts in the comments. Thanks for reading!

Things you REALLY need to stay away from when designing your blog/website.
Read this page to seee the things you WANT to stay away from, and to find out if your web page sucks!

Do NOT put white text on a black background. It is IMPOSSIBLE to read and readers will run as soon as they see it. Use grey on black instead

Just cause its a cool gadget does not mean your blog/website needs it. There are so many plugins and addons and snippets of codes for any type of website. Unless it ads functionality that your visitors will appreciate, fight the urge to add it.

Do NOT add music to your website. These days, everyone already has their own music on their computers. If they way to play it they will. Also, studies have shown that most adults surf the web while at work, do you really want to get a reader in trouble by blasting your latest favorite.

Don’t kill your readers with ads. I know you would like to make some extra money off of them, but the real value in your blog is it’s readers. If there are no readers, there’s no blog. So keep them to a minimum and strategically place them to be non-invasive

Clearly label your navigation. There is such a thing called MYSTERY MEAT NAVIGATION. Does your website have it?

Animated gifs are for 1990, and they should stay there! Blinking things and animations over your cursor are NOT cool and do NOT add quality to your site content. (see example here )

Do not try to stuff too much content on your main page. Instead, link to the content from a single, well defined button. This will free up space for some more important things

Do not leave the default page titles on there. When you look at your tabs in your browser, you see a custom name that I created. You can do this too! Its very easy – it’s called the TITLE tag and it is in your head section of your web page

If you want a COMPLETE checklist of “Does My Website Suck?” GO HERE

I do not mean to hurt anyone’s feelings, but you have a website to get people to look at it. Make sure those people ENJOY their experience so they come back again and again.

Want some honest feedback and critique,

POST YOUR WEBSITE HERE

I will be honest and give useful answers, but do not post if you are sensitive. I will be blunt, and I am known for being blunt in giving feedback, but never mean.

So you decided that you want to start COMPLETELY from scratch and build your website/blog without the help of ANYONE.

GOOD FOR YOU!

But i bet you have no idea where to start.

The easiest, most newbie way, is to start by using one large TABLE to hold your main content.

A table is an element of a website that allows you to organize your data into rows and columns. Much like you do when you are creating a microsoft word document that has a table.

This will be one of the easiest things you learn, but probably one of those things that you use EVERYWHERE. If i can teach this concept to my husband in a few hours, surely you guys can get it.

So let’s start explaining how a table works.

You are always going to start your table with this:
<table>
and end it with this
</table>
So just using those two pieces, you have a table with NO rows and NO columns, so you can not start putting info in there yet. You need to have ATLEAST one row and one column in a table.
A row for a table is defined by this:
<tr> – simple right? tr means
Table Row.

You close off, or end that row with this:
</tr>
Are you getting the gist now?? You always start with the tag, and end it with the tag PLUS ‘/’

Now, your <tr></tr> needs to have one more thing inside of it which is <td></td>

I don’t know if this is the CORRECT definition of <td>, but it helped me to remember it as
Table Data.
This is the tag that will hold ALL of the content for the row that it is contained in.

So for a recap

If you take all of those steps and combine them together you get the following:
<table>
<tr><td></td></tr>
</table>

This give you a table that looks like this: (see that TINY little box beneath this?

The reason it is so small is because we did not give it is SIZE.

To make a table that is a good size for a website, you can use a percentage that will move and stretch with different size monitor, or a fixed width that will stay consistent no matter what the size of the monitor is. This is always a dilemma with designers. You have to choose which is better for your design. If your design will only look good with a certain size website, use fixed. This blog is a FIXED width.

So you add your width in the <table> element like this:
<table width="25%">
You can also use “880px” for a fixed width.

Here are some other common attributes you can add to the
element to change it’s look:

attribute	example
align	“left” “center” “right” – Specifies the alignment of a table according to surrounding text
bgcolor	“#000000″ – Specifies the background color for a table. Get web color codes here
border	“2pixels” - Specifies the width of the borders around a table
cellpadding	“5pixels” – Specifies the space between the cell wall and the cell content
cellspacing	“10pixels” – Specifies the space between cells

guess what, this is a table using the follwing attributes, <table bgcolor="c1c1c1" cellspacing="2"> < bgcolor>
THIS DOES NOT USE A TABLE BORDER ATTRIBUTE

There was no width set to that above table because there was content in it to stretch it out. If you do not set a width, it will make it as big as it can to fit the content that you put in the <td>

SO here’s a little tip:
Table borders never really look good. They are two lines that go around the table and usually most people want one solid color line.

<table border="2px"><tr><td>THIS IS A TABLE WITH THE TABLE BORDER ATTRIBUTE</td></tr></table>

<table bgcolor="#000000" cellpadding="2px"><tr><td bgcolor="#ffffff">THIS IS USING CELLSPACING AND BGCOLOR</td></tr></table>

As you can see, i kept the basic table layout, but i added cell spacing which puts a space around ALL of the cells (or <td> tags). Then you add a background color to the entire table, and a different background color to the table cells, or <td> tags

if your tables seem broken, or are not showing/working. Always check the following.
You closed out ALL of yor tags. You can simply just count the number of open tags and closed tags and they should be equal.
Make sure that always but the closing </td> before the </tr>
Make sure that you are not missing any ‘>’ or ‘<‘

The next tutorial will be more advanced tables using column spans and row spans and such.

I have had a lot of people contact me, all excited to start working on their blog and adding plugins and making changes, and then after talking to them, I realized that they did not have their own HOSTED blog.

When you decide to blog for the first time, chances are you just set up a wordpress.com account, or a blogger account and it’s free and its WONDERFUL because it’s free. Then you get to really enjoying blogging and you want to really get into making it into more. You want to add certain things, or change things. So you start searching how to and you find all these great options. But they are ALL for personally hosted blogs!

When you host a blog on your own host, that means that you get ALL of the files and folders that it requires to run a blog. What you need to understand is that these free blogs aren’t just coming out of no where. Your own blog has it’s own folder that is under your subdomain (yourname.worpdress.com) and there is where all of the files that your website uses to build the content.

When you want to do more with your blog, you will want ALL of the files to create the blog on your host. But right now, you are probably thinking, WHATS A HOST?

A host is a company with a lot of large server computers (not the ones like on our desktops) who stores your files for you on the internet. Technically you could set up your home computer as a host if you wanted, but trust me, you dont want to eat up your internet bandwidth like that.

Your host will offer a lot of other neat options like custom email addresses like “you@yourdomain.com” and if you have a REALLY good host, it will offer you ONE CLICK INSTALLS of popular scripts like wordpress. I really like HOSTMONSTER. This blog is hosted on this as well as all of my other websites and all of the ones that I build for people. I like them because they have #1 customer service, never have down time, and they all around have GREAT support. I mean, you can NOT beat 24 hour PHONE customer service.

So when choosing a host, you have to be REALLY careful. I had gotten taken by TWO hosting companies. I thought to myself, “I dont need hostmonster for this simple website. I will probably never need their customer support and it will not have as many visitors as my other. WOW was I wrong. Well, I was right that I didnt need those things, but it was NOT a good idea.

First I signed up with GLOBAT. They were boasting $3 a month hosting. I was for it. I knew that it wasn’t going to be as GOOD as hostmonster, but again, I felt i didn’t need it. They signed me up for $3 a month for 3 months. Then, they decided that they were going to “upgrade” me. They said that they sent me an email and all I had to do was respond that I wasn’t interested and they would not have upgraded me.” But the HORRIBLE (and i think illegal) thing was, THEY AUTOMATICALLY send their email right into my spam box. They don’t ever verify that it was read. So they purposely send you an “upgrade” email that they know will end up never getting read, and then they started charging me $45 a MONTH!! THIS IS OUTRAGEOUS.

I fought them but i never got my money back.

Then I went with WEB.COM. I figured that they have been around for a long time, they should be pretty good. They were offering hosting for $10 a month (which is MORE than hostmonster) but they had a 3 month trial. I did it, and when the trial ran out, I was going to cancel. Well, they offered me $5 a month hosting so I went with it. I was adequately happy with their up time and they gave me no reason not to go with them at that time. So i did. 4 months later, THEY UPGRADED ME the same way the other company did, and charged me $60 for ONE MONTH!!

So take these cautionary tales to heart when you decide that you want to host your own blog.

It is GREAT to have a hosted blog, you have so much freedom with the way it looks, and what you can do with it. Just search through the blogs plugins and addons. Not to mention the number of themes you can have. You just have to be CAREFUL when choosing a host!

Here are some things to look for in a host

1. Do they support php scripts?*
2. Do they offer mySql Databases?*
3. Do they have 24 hour phone support?
4. Do they have an upgrade plan? – make SURE you read all of the terms&conditions, they may lie to you
5. Do they use CPanel as a control panel?*

php is the type of language, like HTML is, that is used to create your blog
mySql database is where your blog posts are stored
Control Panel is a special control panel that many hosts use that is VERY VERY user friendly. I prefer it over any other.

If you do choose to go with a host other than hostmonster please do your research. Call them before you sign up. See if their customer support people speak the same language as you, and that they have ALL of those requirements.

I can tell you 100% for sure that HOSTMONSTER fits ALL of those. They are the best I have used.. INCLUDING those that I have used for other people whom I have designed websites for – INCLUDING GODADDY!! GoDaddy are crooks.

There is a SUPER simple way to change any image that you see on your website and make it into something complete custom, and guess what, IT DOESN’T REQUIRE ANY CODING!!!!

Its a simple 9 step process.

1. Go to your website and find the page with the image that you want to change
2. Right click (or if using a mac ctrl click) and click SAVE IMAGE to your desktop.
3. Right click (or if using a mac ctrl click) on the image and choose PROPERTIES – this will open a new pop up window. There you will see all the information you need to know about this image
4. Look at the IMAGE LOCATION and copy and paste it or write it down somewhere so you remember
5. Open the image in your favorite graphic program and build a new button (on a new layer if you can) over the old one and delete the layer with the old image.
6. Click SAVE (you HAVE to keep the exact same file name and type. All osc buttons are .gif)
7. Open your FTP program and upload the button the to folder that you copied and pasted or wrote down from the IMAGE LOCATION properties window.
8. Visit your website and now go to the page that the image was on, hold down SHIFT and click refresh and your new button will be there!!
9. Repeat steps 7-8 for every image on your website.

Thats it. Its totally easy and completely fool proof. By building the button OVER the old one and deleting the old you, you are making sure that your button is as close to the same size as possible.

So go crazy replacing buttons, and other images. You can literally do this with ANY type of website out there. All images reside in a folder somewhere on your server, and the code is calling for that particular image with that particular name in that particular spot. So when you just change the image and nothing else, you are STILL calling for that particular image, but you made the image LOOK different.

IS IT STARTING TO MAKE SENSE NOW??

So if you have wordpress and desperately want to change your header but theres no easy way to do it, USE THIS PROCESS.. If you have oscommerce and HATE those blue buttons, USE THIS PROCESS.. It works for ANYTHING

So you want to move your wordpress blog to your root folder? Or maybe you just clicked on this because you wanted to see whats the point of doing this.

If you don’t already know this, your “root” is the public_html directory, or the main page of your site. This is the directory that users will land on if they type in your domain. If you have a web page in there called index, then they will automatically see that, otherwise they will not see anything. It is the very TOP directory for your website pages.

Well, if you are wondering WHY, then read this post here about splash pages and the root directory.

First, know that you should not do this if you already have a home page that you do not want to loose. If you have multiple sections to your site; for example a blog, portfolio, and a store, you will not want to move your blog to the root because you will overwrite your home page. If you do not have anything there, then you are free to go ahead. You should also be aware that wordpress has it’s own .htaccess, and if you made changes to one in your root, the wordpress one will overwrite it. It is a good idea to just download a copy of the .htaccess that is in your root folder to your desktop.

So the first thing you need to do is log in to your admin and go to settings and then click on general.

While you are there, you will see a place to change your wordpress address (URI) and blog address (URI). You will want to now make both of those say your domain name. So it would be like “yourdomain.com” with no ‘/’ or anything after the .com. Then make sure you click UPDATE OPTIONS.

Just be aware that if you try to view your blog now, you will get broken pages. This is because even though you told wordpress to look for your blog in the root, you have not yet moved it to the root.

So now what you need to do is open your FTP program. I prefer FETCH for mac users, and CuteFTP for pc users, although you can also use FileZilla which is free. Click here to learn how to set up FileZilla.

You need to open the wordpress folder and see all of the contents in the wordpress folder. Highlight all of the items by clicking on the first one in the list, hold shift, and click the last one in the list. Then you need to move the files and folders to the root, which is otherwise called public_html. Make sure that your files end up IN the public_html directory and not outside with the public_html directory.

This will take a few minutes because your blog will have a lot of pages to transfer over.

Now, if you are using permalinks, you will want to go back to your blog admin and click on settings, and then choose the permalinks setting. You will want to make sure that the permalinks are set to http://yourdomain.com
and not http://yourdomain.com/wordpress.

AND THATS IT! You have officially moved your blog from a folder, into your root directory!

and remember, I am easy to get a hold of, so contact me if you have any problems.