A Cheap Small Business Website?

If you follow this post, you can get yourself up and running for $60 a year in total (under £40 today).

For this money you will have:

• A small business website that you can update yourself whenever you want
• A web domain eg. my-new-domain.com
• As many email addresses as you want eg. someone@my-new-domain.com

Getting Started With Your Small Business Website

The first thing you need to do is setup your web hosting (web your website is stored) and domain name (see above).

This is the only thing that you need to pay for and there are a number of companies that offer this.

We recommend Bluehost as it is cheap and simple to install WordPress (which is what you will be using later). At the time of writing it costs $4.95 per month if you sign up for 3 years and $6.95 per month for a 12 month contract).

There is no need to buy any extras eg Backup systems as this can all be done for free using WordPress.

Install WordPress

Once you have bought your hosting, you need to make sure WordPress is installed. A benefit of using Bluehost is getting a 1-click WordPress install so you can be up and running quickly.

Bluehost provide very good instructions showing you how to install WordPress on your hosting, so we won’t go into detail on that here.

Just make sure that you don’t enter any directory so you will be able to access the website at www.your-domain-name.com , not www.your-domain-name.com/some-directory

Also, please make sure to use a very strong password!

Setting Up WordPress For Your Small Business Website

Once WordPress has been installed, you should be able to go to www.your-domain-name.com in your web browser and see something like this:

This is great but it doesn’t look much like a Small Business Website…

Logging in To WordPress

To make any changes to your WordPress site, you need to first login. You can do this by going to www.your-domain-name.com/wp-admin and logging in with your username and password.

Once you are logged in, you will see your WordPress dashboard:

Making Some Pages on Your Small Business Website

On your dashboard, on the left hand menu, hover over Pages and then click Add New.

In the title box, type “Home” (without the quotes) and then type some words in the big box (this is where the content of the page goes).

On the right hand-side of the page, from the Template drop down box, choose Front Page Template and then click Publish  (also on the right hand side):

You will see a message telling you that the page has been published.

Follow the same process to make an About Us page (but do not choose the Front Page Template).

Also, create a Blog and a Contact Us Page but don’t add any content in them (just enter the page title).

Organising The Pages

If you look at your website now, it should look something like this:

All of your pages are there but it’s a bit of a mess.

So, let’s organise them…

Go back to your Dashboard and hover over Tools (bottom on the left). Choose Reading

You can then tell WordPress what your Front Page and Posts Page is.

Choose to display a Static Page and then choose Home for the Front Page and Blog  for the Posts Page and click Save Changes

Creating a Menu

You can manage what order the page names are displayed in (and which are shown) by making a menu.

In the Dashboard, hover over Appearance and choose Menu. 

Give the menu a name - something like Main Menu and click Save Menu. On the left hand side, now choose Main Menu (or whatever you called it) in the Theme Locations box and click Save:

You can now add all of the pages to the menu.

In the Pages box on the left hand side, tick Home, About Us, Blog and Contact Us and click Add to Menu. You can then drag and drop them into the order you want and click Save Menu:

If you now go back and look at your site, you will see something like this:

A lot cleaner and starting to get there!

Adding Some Colour

Go back to the Dashboard, hover over Appearance and choose Header.

There you will find options for a header image and the text colour in your header. You will need a big image – you could try http://www.freeimageslive.com/

You can then set the colour of text as you please. Here is an example:

This is where you can get creative!

Your Site Name and Slogan

You might also want to change your site name and slogan (shown at the top on the left). You can do this by hovering over Settings in your Dashboard and choosing General.

Adding a Contact Form

Your site will look more professional with a Contact Form on your Contact Us page. The easiest way to do this in WordPress is by installing a free plugin.

From your Dashboard, hover over plugins and click Add New.

In the search box type “Contact Form 7″ (without the quotes). And then click Install Now next to Contact Form 7.

Once the plugin is installed, click Activate Plugin

You will see that you then have a new menu item on the left hand side of your Dashboard – Contact. Click on Contact and you will see that you already have a Contact Form setup - Contact Form 1:

You can do a great deal with Contact Forms but for the purposes of this tutorial, we are just going to use this standard form.

You will see that the form has a Shortcode (something like [contact-form-7 id="16" title="Contact form 1"] ).

You need to highlight this and copy it.

Then you need to go back and find your Contact Us page under the pages menu and edit the page.

Paste the shortcode into the content of the page and then Update the page:

If you then View the page, you will see something like this:

Starting A Blog

It is very easy to blog using WordPress. Each blog “story” is called a post. To add a new one, simply hover over Posts in the dashboard and click Add New.

Every blog story you add will now appear on the Blog page.

What Next

There is a lot more that you can do with WordPress – the options are pretty much limitless.

We can help you get your site to the next level, get in touch with us and we can:

• Help you transform your basic small business website into a professional looking site using our WordPress website design service
• Improve your Google ranking and get you more business
• Show you how to convert your website traffic into sales

Tell Us What you Think

Was this tutorial helpful? Could we focus more on anything else? Is there anything we missed out that you need?

Add your comments below – we would love to hear from you.

The post How to build a small business website in 5 minutes using WordPress appeared first on acroweb.

The out-of-the-box install uses an AJAX form submission. This means that users don’t get redirected to another page on your website following a form submission. Instead they are just shown a thank you message  within the same page.

This is ideal for users as it makes it smooth and painless. However, this also means that there is no thankyou.html page where you can add your conversion tracking code for Google Adwords.

This is fairly straightforward to sort out. The new tracking code from Adwords looks like this:

<!-- Google Code for Enquiry Conversion Page -->
<script type="text/javascript">
/* <![CDATA[ */
var google_conversion_id = XXXXXXXXX;
var google_conversion_language = "en";
var google_conversion_format = "2";
var google_conversion_color = "ffffff";
var google_conversion_label = "XXXXXXXXXXXX";
var google_conversion_value = 0;
/* ]]> */
</script>
<script type="text/javascript" src="http://www.googleadservices.com/pagead/conversion.js">
</script>
<noscript>
<div style="display:inline;">
<img height="1" width="1" style="border-style:none;" alt="" src="http://www.googleadservices.com/pagead/conversion/XXXXXXXXXX/?value=0&amp;label=XXXXXXXXXXXXXXXXX&amp;guid=ON&amp;script=0"/>
</div>
</noscript>

To get this working, you need to take the first part of the code and the third part of the code and stick it in the “Form” section of your contact form:

<!-- Google Code for Enquiry Conversion Page -->
<script type="text/javascript">
/* <![CDATA[ */
var google_conversion_id = XXXXXXXXX;
var google_conversion_language = "en";
var google_conversion_format = "2";
var google_conversion_color = "ffffff";
var google_conversion_label = "XXXXXXXXXXXX";
var google_conversion_value = 0;
/* ]]> */
</script>
<noscript>
<div style="display:inline;">
<img height="1" width="1" style="border-style:none;" alt="" src="http://www.googleadservices.com/pagead/conversion/XXXXXXXXXX/?value=0&amp;label=XXXXXXXXXXXXXXXXX&amp;guid=ON&amp;script=0"/>
</div>
</noscript>

<!--CONTACT FORM STARTS HERE...   -->

Further to this, you need to add a little script which gets fired every time the contact form is submitted. This needs to go in the “Additional Settings” field at the bottom of the contact form:

on_sent_ok: "jQuery(String.fromCharCode(60)+'img/'+String.fromCharCode(62)).attr('height','1').attr('width','1').css('border-style','none').attr('src','http://www.googleadservices.com/pagead/conversion/'+google_conversion_id+'/?value='+google_conversion_value+String.fromCharCode(38)+'label='+google_conversion_label+String.fromCharCode(38)+'guid=ON'+String.fromCharCode(38)+'script=0').appendTo('body');"

And that’s it. You should now be tracking conversions for your Adwords campaign.

The post Tracking Google Adwords Conversions in Contact Form 7 for WordPress appeared first on acroweb.

The WordPress Custom menus allow for very easy, drag and drop sub menus to be built and it does not take a lot of work to turn these sub menus into search engine friendly, css drop down menus for your custom wordpress theme.

This tutorial will take you through the everything you need to add to your php template and your css code in order to add great looking horizonal css drop down menus to your custom wordpress theme.

Step 1: Adding Custom Menu Support to your custom WordPress theme

Very simply, all you have to do is open your functions.php file. This is located in your theme directory. If you don’t already have one, create one.

Add this code:

function register_my_menus() {
	register_nav_menus(
		array(
			'top-nav' => __( 'Top Nav' )
		)
	);
}

This code simply tells wordpress that you have 1 menu position in your theme, called “Top Nav”.

If you now go to admin-appearance-menus you can then create a new menu.

Give your menu a name like Main Menu and click “Create Menu”

You should then see something like this:




From here, you can very easily add pages, categories and custom links to your menu, so build yourself a menu.

You can drag and drop menu links into the order that you want and if you drag a link to the right, it makes it a sub-menu item of the item above.

Do not forget to click “Save Menu” when you are done.

Step 2: Adding the Custom Menu to your Custom WordPress Theme

You may have noticed that although you have built a lovely new custom menu, it is not visible when you look at your WordPress site.

This is because you now need to add the custom menu to your custom theme.

If you are using a header.php file, you need to add something like the following code to the header.php file (in the position where you want your nav menu)

<!--?php wp_nav_menu( array( 'theme_location' =--> 'top-nav' , 'container_class' => 'menu-header' ) ); ?>

This code tells WordPress that this is the “Top Nav” position for your menu. It also tells WordPress to put the menu in the “menu-header” container class -the reason for doing this will become apparent later.

Looking at you WordPress site, depending on your css, you should see something like this:





In order to make this into a nice, horizontal, drop-down menu, we need to style it with some css.

Step 3: Styling Your Custom WordPress Horizontal Drop-Down Menu with CSS

The Custom WordPress Menu that you have produced is an un-numbered list and if you look at the source code that is produced, it will be something like:

This is basically an un-numbered list (ul) – the submenu items are ‘nested’ in another un-numbered list.

It may look nasty at the moment but this can all be fixed with css and it is worth noting that un-numbered lists are the most search engine friendly menus to use in your WordPress site.

Making the List Horizontal and Removing the Bullets

Add the following to your style.css file:

.menu-header {
	display: block;
	float: left;
	margin: 0 auto;
	width: 100%;
	height: 42px;
}
.menu-header ul,
	div.menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.menu-header li,
	div.menu li {
	float: left;
	position: relative;
}

This should make your Custom WordPress menu start to take shape. It should now be horizontal with no bullets and the submenu should appear underneath, something like this:

Positioning and Hiding the Submenu

The submenu needs to be hidden (we will make it appear on hover later). Add the following css to your file:

.menu-header li,
	div.menu li {
	float: left;
	position: relative;
}

.menu-header ul ul {
	display: none;
	position: absolute;
	top: 38px;
	left: 0;
	float: left;
	width: 180px;
	z-index: 99999;
}

This will make the menu look something like this:

Better Colouring and spacing things out

We can then change the font colours and styling and space out the links:

.menu-header a {
	color: #aaa;
	display: block;
	line-height: 41px;
	padding: 0 10px;
	text-decoration: none;
	font-weight: normal;
}

So, our menu will then look like this:

Adding the Hover

To make the sub-menu appear, we need to use the :hover pseudo-class.
Add the following css:

.menu-header ul li:hover > ul {
	display: block;
}

We can also add some colouring to the hovering menu:

.menu-header li:hover > a,
.menu-header ul ul :hover > a {
	background: #333;
	color: #fff;
}

This should give you the following:



The hover should work in all browsers.

Styling the Submenu

We need to make the submenu vertical and give it some colour.

.menu-header ul ul a {
	background: #333;
	line-height: 1em;
	padding: 10px;
	width: 160px;
	height: auto;
}

To match the colourscheme, we are going to give the whole nav bar a black background by adding:

background-color: #000;

to the menu-header class, so you end up with:

.menu-header {
	background-color: #000;
	display: block;
	float: left;
	margin: 0 auto;
	width: 100%;
	height: 42px;
}

We are now nearly there.

Highlighting the Current Page

WordPress adds classes to the current menu item. You can use this to style them. Try adding this to your css:

.menu-header ul li.current_page_item > a,
.menu-header ul li.current-menu-ancestor > a,
.menu-header ul li.current-menu-item > a,
.menu-header ul li.current-menu-parent > a {
	color: #fff;
}

This highlights the current item, making the font white.

The finished product:



So, there you have it. Proper CSS Custom Drop Down menus in WordPress!

The post Adding Horizontal CSS Drop Down Menus to Your Theme in WordPress 3.0 appeared first on acroweb.