Facebook is still kicking butt. Everyone and their mother is on there and fortune 500 companies have caught on with contests, fan photo uploads and so many other promotional ideas that Facebook marketing strategies is an entire science of its own. Even still, its just as easy for the little guy to own some facebook real estate and run great promotions.

I’ll show you the right links and how set up a page, but learning how to make a facebook fan page goes beyond filling out basic information. So I’ll include a few tricks to make your fan page really shine.

First let’s understand the rules. Facebook makes a clear distinction: Profiles are for personal accounts. Facebook Fan Pages are for business. Even the new timeline layout states that cover images (the large image on top) should not be of a promotional nature. So fan page it is for business – but you will need a personal profile to create those nifty sidebar tabs on a page. I’ve tried setting up a business page outside of my personal account, it just doesnt work.

Now that were up to speed, sign in to your personal facebook account and get started.

How to Make a Facebook Fan Page

Finding your way in facebooks everchanging landscape can be difficult. At the time of this writing, the correct link to create a fan page is here: http://www.facebook.com/pages/create.php

Click on your business type, choose a category, then name your business. The ‘name’ will show up as the name of your fan page. Create your fan page and verify your email.

Go through the steps of including your business information. Your basic fan page looks like the image below. Click on Edit Info and go through the settings links to get a feel for whats there.

Make a Facebook Fan Page Image

The first suggestion is to upload an image. This is your first opportunity make an impression. You can use it to introduce your ‘call to action’, showcase a product or define your brand. Think about what your fans NEED to know and include it in the image.

Because its an important first step, lets learn from the big boys. CSI Miami keeps it short, simple and to the point. A defining image of the show, their logo and where to find them offline. Simple, yet effective. Motorola takes it a step further by featuring products in their image. Dallas Cowyboys go all the way by running a contest, then pointing to that contest in their fan page image. Thats truly interactive and brilliant marketing from the start.

My fan page is a little different, intended to brand my website which promotes my individual products services. Because I like to keep things more personal, I incorporated my photo, so people can see who I am. In this way, I can edit the thumbnail that shows when I comment, to show my photo. I also include my name because the page is named after my business and not myself.

Creating the Fan Page Image

Create an image 180 pixels wide. Image height is not fixed, but dont make it too tall because your tabs are located directly underneath. Add your photo, logo or other pertinent info. When your image is just right, click on the ‘Upload an Image’ link in facebook and make it live!

To control the icon that shows when you post and comment, go to ‘edit page’ > ‘profile picture’ then click ‘Edit Thumbnail’ and move the image to the desired spot.

Note: Every time you upload, facebook throws the image into your ‘profile pictures’ gallery. If you’d like to delete the mishaps, go to your page > photos > profile pictures. Inside each image, there’s a delete link.

Fan Page Tabs

‘Facebook Fan Page Tabs’ are the icon links in the left sidebar under the fan page image. When you click on each of these tabs, it loads different information. Facebook gives you power to customize the information you display with the ability to create custom tabs.You can also set your welcome page, or ‘default landing tab’ to load one of your custom tabs instead of your ‘wall’, so it will be the first thing visitors see when they come to your page. Featured content can be very powerful for your business.

The goal of a featured fan page tab is to create content that works for your business and is also useful to your fans. You might like to simply introduce your company by featuring what you do. I’ve also seen free giveaways, sign up forms, videos, and in the previous example, a contest. The sky is the limit in a custom tab. Facebook pulls this information from a real web page elsewhere on the internet, so whatever you can do on a regular webpage, you can do in a facebook tab. As long as the width of the page is confined to 520 pixels wide, you’re golden.

Creating Tabs on your Facebook Fan Page

To create the content that will appear inside your custom fan page tab, you’ll need the ability to either write an html page or customize a template, and be able to upload it to your web sites server. Your server must have at least a shared secure server (SSL) or you can purchase a private one.

Create your content in html format max 520 pixels wide and upload it to your server. You’ll need to copy the url where the content is located so we can plug it into facebook by creating an application.

Creating the Facebook App to install a Fan Page Tab

Creating the app is a whole new ballgame for 2012. So much that I rewrote this post and made a full video tutorial in a separate post dedicated to tab creation and installation, right down to setting up a secure site. You can check it out here.

Facebook Landing Pages for 2012

While there are services that will build a facebook landing page for you, you might be a do it yourself kinda person or not have the cash to have a landing page made professionally. This video is for you. I’ll guide you through 11 steps to get it done. Plus I’ve created a stripped down WordPress theme to use for your Facebook Landing Pages and included a text version of the steps. Enjoy!

Create Your Own Facebook Landing Page

Download: FanTabs WordPress Theme
Download: 11 Step Text File right click to save

Does a matching website/facebook theme sound awesome? Like a little mini version of your website right in facebook where visitors can shop, sign up, read about you – anything you can do in WordPress. I thought so! So I created one especially for my visitors for a very low price of $14 until the end of January. Snag it today before the deal is gone!
Check it out Here!

This wordpress tutorial shows how to get it working front to back, from editing user roles to the slick jquery form for wordpress. I just finished pulling this off on one of my other sites, so naturally, a wordpress tutorial ensues…

First, I want to set up author accounts manually in admin, then allow access with a form for wordpress in the header of the site. Placing a login form in the header is not only functional, it also calls out that Im accepting guest posts in a stylish manner. After a lot of picking and prodding, none of the other wordpress tutorials floating around really worked, or explained how to set the user roles…

Where theres a will, theres a way. Here’s mine.

See this jQuery slide panel live in action on CreditExaminer.org

As always in the development world, there are two pieces to the puzzle. The front end and the back.

1. In the front, we have the login form for wordpress. I’ll show you how to plug a slide panel into your theme files using the super cool jquery SlideToggle. It hides at the top of the page and pulls down when the tab/trigger is clicked.
2. In the back, logged in authors land in their administration dashboard. We need to grant access to publish a page, a post and edit their profile, plus hide a few things from their dashboard.

Setting Up the Author Role

WordPress already has an author role, but its far from ideal. It doesnt allow authors to publish pages (which im using on my site for articles). The authors admin area also displays all kinds of site info that’ll just get in their way, such as every post, every page, comments plus some plugins show up there too. Real messy, so I want to hide this from their admin.

Three plugins make this all happen.

User Role Editor
Allows you to change default role capabilities. Authors are allowed to write and edit posts, but not pages. So lets give them that capability. Under Users -> Role Editor, scroll down to Author. Click ‘human readable’ so you know what youre letting your authors do. I set the following.

↑ Back to TOC ↑

I Used: Delete Pages, Delete posts, delete published pages and posts, edit pages, edit posts, edit published pages and posts, levels were set for me automatically, 0, 1 and 2, publish pages, publish posts, read, and upload files (it might be wise to disallow upload files)

Manage Your Own Posts
Imagine how difficult it would be to find your posts (and pages) among hundreds of other authors posts. We gotta clean this up, and this little gem does just that. It shows only the authors writing and hides the rest.

It isnt really a full blown plugin, but one function that packs a lot of punch. If you’re already staring at a sea of plugins and would just rather keep things tidy, you could actually copy the code and throw it into your functions.php. Heres the tiny function that saves the day…

function mypo_parse_query_useronly( $wp_query ) {
    if ( strpos( $_SERVER[ 'REQUEST_URI' ], '/wp-admin/edit.php' ) !== false ) {
        if ( !current_user_can( 'level_10' ) ) {
            global $current_user;
            $wp_query->set( 'author', $current_user->id );
        }
    }
}
add_filter('parse_query', 'mypo_parse_query_useronly' );

↑ Back to TOC ↑

Adminimize
At this point the author admin still isnt quite right. All kinds of things are showing that shouldnt be there. Comments, media, even the ContactForm7 admin control is available. Adminimize is quite hefty, but necessary to hide all these details.

Under Settings>Adminimize – You can use the mini-menu to jump to my settings:

Menu Options – Deactivate for Author
tick the following: Media, Links, Comments (all others are hidden by default)
scroll to the bottom of this chart and look for additional plugins you have installed that need a-hiding. then Update Options.

Write Options – Deactivate for Author
This controls the sidebar options in the editor when authors ‘add a new’ page or post. I left all of the post options blank but I dont want authors to be able to change the page template. So deactivate the entire ‘Attributes’ panel. then Update Options.

There are tons of other details for all user roles, but this is all I needed get it working right.
↑ Back to TOC ↑

Setting Up the Form For WordPress

Now that the back end is ready, its time to build front end access.

The jQuery

A few elements go into the code to get it working as planned. Lets start with jquery’s slideToggle function. In its entirety, the example code looks like this:

<!DOCTYPE html>
<html>
<head>
  <style>
  p { width:400px; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <button>Toggle</button>
  <p>
    This is the paragraph to end all paragraphs.  You
    should feel <em>lucky</em> to have seen such a paragraph in
    your life.  Congratulations!
  </p>
<script>
    $("button").click(function () {
      $("p").slideToggle("slow");
    });
</script>
</body>
</html>

Lets pull the jQuery out and edit for use in wordpress.
Open header.php in your theme template file and add the following above and below the wp_head call like so:

<?php wp_enqueue_script('jquery'); ?>
<?php wp_head(); ?>

<script type="text/javascript">
jQuery(document).ready(function(){

	jQuery(".btn-slide").click(function(){
		jQuery("#panel").slideToggle("slow");
		jQuery(this).toggleClass("active"); return false;
	}); 

});
</script>

Heres what happened:
1. We called the built in jquery library with enqueue –> before wp_head
2. Added jquery with my classes -> after wp_head
3. Changed medium to slow
4. Changed all $ to jQuery so it doesnt conflict with other scripts
5. Added “active” class. This toggles the arrows switch – up or down
↑ Back to TOC ↑

The HTML

In the first example above jQuery gave us this html code for containers.

<button>Toggle</button>
<p>
 content
</p>

To build the html framework, I referenced WebDesignerWall’s jquery tutorials. Some great stuff here. The slide panel demo is super simple.

To break things down to their lowest common denominator, view the demo source code or download their files to grab all the example code and images.

The Form For WordPress

To incorporate the wordpress login form we’ll plugin the code provided by kriesi

Place the form code inside your header.php where you want the form to show up. You might have to play with placement and css positioning for it to behave correctly.

Heres my complete html form for wordpress

<!-- AUTHOR LOGIN form -->

  <div id="panel">
     <?php if (!(current_user_can('level_2'))){ ?>
        <div class="login-box">
        <form action="<?php echo get_option('home'); ?>/wp-login.php" method="post">
        <label for="log">user</label><input type="text" name="log" id="log" value="<?php echo wp_specialchars(stripslashes($user_login), 1) ?>" size="12" />
        <label for="pwd">pass</label><input type="password" name="pwd" id="pwd" size="12" />
        <input type="submit" name="submit" value="Send" class="button" /> <br />
        <label for="rememberme"><input name="rememberme" id="rememberme" type="checkbox" checked="checked" value="forever" /> remember me</label>
        <a class="lost-pass" href="<?php echo get_option('home'); ?>/wp-login.php?action=lostpassword">forgot password?</a>
        <input type="hidden" name="redirect_to" value="<?php echo $_SERVER['REQUEST_URI']; ?>/wp-admin/post-new.php" />
        </form>
        </div>

	  <?php } else { ?>
        <div class="admin-box">
            <div class="admin-col">
            <a href="<?php echo get_option('home'); ?>/wp-admin/post-new.php">Write New Post</a><br />
            <a href="<?php echo get_option('home'); ?>/wp-admin/post-new.php?post_type=page">Write New Page</a>
            </div>
            <div class="admin-col">
            <a href="<?php echo get_option('home'); ?>/wp-admin/">Dashboard</a><br />
            <a href="<?php echo get_option('home'); ?>/wp-login.php?action=logout&redirect_to=<?php echo urlencode($_SERVER['REQUEST_URI']) ?>">Log out</a>
            </div>
        </div>
      <?php }?>
  </div>

  <!-- p class="slide"><a href="#" class="btn-slide">Author Login</a></p -->
  <!-- to change button classes when an author is logged in or logged out use the following -->
  <?php
  if ( is_user_logged_in() ) {
    echo '<p class="slide-loggedin"><a href="#" class="btn-slide">Dashboard</a></p>';
  } else {
    echo '<p class="slide"><a href="#" class="btn-slide">Author Login</a></p>';
  }
  ?>

<!-- end login -->

↑ Back to TOC ↑

and last but not least

The CSS

Here are my adapted css styles:

/* AUTHOR LOGIN */
#panel {background: #333; padding:10px; border-bottom:1px solid rgba(255,255,255,0.1);
	display: none; height:50px; border-bottom-right-radius:3px; border-bottom-left-radius:3px; box-shadow:1px 1px 5px rgba(0,0,0,0.7)
}
.slide {float:right;
	background: url(images/trigger-login.png) no-repeat center top;
}
.slide-loggedin {float:right;
	background: url(images/trigger-logged-in.png) no-repeat center top;
}
.slide-loggedin a {color:#777; text-shadow:none; line-height:20px}

.btn-slide {
	background: url(images/white-arrow.png) no-repeat right -46px;
	text-align: center;
	width: 110px;
	height: 26px;
	padding: 10px 10px 0 0;
	margin: 0 auto;
	display: block;
	color:#fff; text-decoration:none; text-shadow:0px 2px 0px #5b0108;
	font:bold 12px "Century Gothic", "Apple Gothic", Arial;
	text-decoration: none;
}
.active {background-position: right 14px;}
.slide a:hover {text-decoration:none;}

.login-box {text-align:center;}
.login-box label, .login-box a {padding-right:5px; font:12px "Arvo";}
.login-box #log {margin-right:10px;}
.login-box .button, input#log, .login-box input#pwd {font-size:11px; padding:3px 5px;}
.login-box #rememberme{margin-top:7px;}

/* box content if logged in */
.admin-box a {font:12px "Arvo"; color:#fff; background:url(images/white-arrow-right.png) no-repeat; padding-left:20px; line-height:24px;}
.admin-col {float:left; padding:0 25px;}

↑ Back to TOC ↑

I used the Arvo font available from google web fonts

and my images – right click and save

What happens now?
Hopefully all works well and you enter the world of guest authoring! Keeping things maintained is equally as important though, so a word of caution…

Maintenance.
Editing posts and pages can bloat a wp database with a quickness. Page hangs and serious lagtime may result. If you have a lot of authors, making a lot of changes, you might be doing something right, but to slim down the database to a manageable size, run the plugin better delete revision every so often to clean up your database and get your site flying again.

To come: Take it one step further. Setting up an Author Profile Template to showcase authors on their own profile page.

• ’1 out of every 8 minutes online is spent on Facebook’.
• ’40% of Facebook’s user base is age 35+’
• ’64% of Facebook users have become ‘fans’ of at least one company. ‘
• ‘US Internet users spend 3 times more minutes on blogs and social networks than on email.’

That’s gigantic. And good insight into how the world is changing the way they spend their time each day online. Even still, I dont need to convince you that if you have a business, it should own some Facebook real estate.

I’ll show you the right links, and how set it all up, but learning how to make a fan page on facebook goes beyond filling out basic information. So I’ll include a few tricks to make your fan page really shine.

First let’s understand the rules (bear with me). Facebook makes a clear distinction: Profiles are for personal accounts. Fan Pages are for business. Facebook can disable profiles made for business for violating their terms of use.

HOWEVER. In order to amp up your fan page with custom content, we’ll need to create a facebook app (dont worry, its not hard) and this is only allowed through a personal account. So to stay in compliance, create a personal account first, then make your fan page. I know it might be a pain, but thems the rules.

Now that were all up to speed, sign in to your personal facebook account and we’ll get started.

How to Make a Fan Page on Facebook

Finding your way in facebooks everchanging landscape can be difficult. At the time of this writing, the correct link to create a fan page is here: http://www.facebook.com/pages/create.php

Here, click on your business type, choose a category, then name your business. The ‘name’ will show up as the name of your fan page. Create your fan page and verify your email.

Go through the steps of including your business information. Your basic fan page looks like the image below. Click on the ‘edit page’ or ‘edit info’ and go through the settings links to get a feel for whats there.

Make a Fan Page Image for Facebook

The #1 suggestion Facebook makes is to upload an image. This is your first opportunity to create a stand out fan page and really brand your company. Use that space wisely, because it will mold your fans first impression. Think about what your fans NEED to know about your business and include it in the image.

Because its an important first step, lets take a look and learn from the big boys. CSI Miami keeps it short, simple and to the point. A defining image of the show, their logo and where to find them offline. Simple, yet effective. Motorola takes it a step further by featuring products in their image. Dallas Cowyboys go all the way by running a contest, then pointing to that contest in their fan page image. Thats truly interactive and brilliant marketing from the start.

My fan page is a little different, intended to brand my website which promotes my individual services. Because the business is of a more personal nature (you’re hiring me personally through my website) I incorporated my photo, so potential Facebook clients can see who they’ll be working with. I also include my name in the photo because the page is named after my business and not myself.

Creating the Fan Page Image

Create an image 180 pixels wide. Image height is not fixed, but dont make it too tall because your tabs are located directly underneath. Keep at least the first couple tab icons visible without scrolling. Add your photo, logo and any pertinient information. When your image is just right, click on the ‘Upload an Image’ link in facebook and make it live!

To control the icon that shows when you post updates, go to ‘edit page’ > ‘profile picture’ then click ‘Edit Thumbnail’ and move the image to the desired spot.

Note: Every time you upload, facebook throws the image into your ‘profile pictures’ gallery. If you’d like to delete the mishaps, go to your page > photos > profile pictures. Inside each image, there’s a delete link.

Fan Page Tabs

‘Facebook Fan Page Tabs’ are the icon links in the left sidebar under the fan page image. When you click on each of these tabs, it loads different information. Facebook gives you power to customize the information you display with the ability to create custom tabs.You can also set your welcome page, or ‘default landing tab’ to load one of your custom tabs instead of your ‘wall’, so it will be the first thing visitors see when they come to your page. Featured content can be very powerful for your business.

The goal of a featured fan page tab is to create content that works for your business and is also useful to your fans. You might like to simply introduce your company by featuring what you do. I’ve also seen free giveaways, sign up forms, videos, and in the previous example, a contest. The sky is the limit in a custom tab. Facebook pulls this information from a real web page elsewhere on the internet, so whatever you can do on a regular webpage, you can do in a facebook tab. As long as the width of the page is confined to 520 pixels wide, you’re golden.

Creating Tabs on your Fan Page

To create the content that will appear inside your custom fan page tab, you’ll need the ability to either write an html page or customize a template, and be able to upload it to your web sites server. If you dont want to mess with html code, I offer a facebook template built into a wordpress theme to make it simple to create custom fan page content.

Create your content in html format max 520 pixels wide and upload it to your server. You’ll need to copy the url where the content is located so we can plug it into facebook by creating an application.

Creating the Facebook App to install a Fan Page Tab

If you go through the process once, you’ll have this down. But facebook doesnt explain the settings clearly, so I’ll show you exactly how to set it up in a video walkthrough.

Update! As of October 1st, 2011 Facebook requires all face book iframes be hosted on a secure server. Your webhost should offer an SSL for free. Host your facebook pages on an SSL to meet this requirement.

Full Facebook Landing Page Creation Tutorial Now Available here

—

I hope this article was helpful. If you make your own fan page, leave a comment and link us there. Id Love to see it!

Happy Facebooking!

Its so important to check for cross browser compatibility so that the website design, and more importantly, the message isn’t lost in browser translation. For designers, developers and webmasters, it’s assumed by the client that your job will be done professionally and their site will work for everyone. Here are four steps to ensure that your site is cross browser compatible.

1. Use Clean, Valid Code
Whether using a template or creating your own design, I cant stress the importance of clean, valid code. When your code is valid, a browser knows what to do with it. Cleaner code helps search engines crawl through your information more easily, and gives your visitors a better ‘as-intended’, faster loading experience. For template users, look for a mention of HTML/CSS validity. For code writers, check w3schools for reference to valid code. If you eventually opt to use a piece of invalid code, understand the purpose of that code, then check and double check, in multiple browsers, that it’s not messing up your pages.

2. Validate HTML/XHTML
Run your site through W3′s HTML Validator. When I started writing code, my pages would come back with 100s of errors. Validation can be a long, arduous process. Starting with good code can help avoid major headaches (for you and your clients).

It can be tricky to find errors in code. The Validator reports each error by line number. The actual line of code the error is on is sometimes hard to find, and will become even harder when using PHP software (like a WordPress theme) that pull pages together from separate files. If you go through errors with patience, I believe anyone with basic html knowledge can get through validation with a little practice. Don’t Give Up.

3. Validate CSS
Next, run your site though the CSS Validator. This tests for CSS level 2.1. CSS3 is available and working in many browsers. Obviously CSS3 will not validate here, but I personally feel that its Not a good enough reason to ditch CSS3. Just make sure to check in your browsers to see if it works as intended.

4. Check with BrowserShots.org
Most users have either Firefox or Internet Explorer on their local machine so its easy to test your designs. But what about all of the other browsers available? Thanks to BrowserShots.org, cross browser testing is easy.  Check the browsers you want to test from their list, let the site do its job. They’ll take a screenshot and show you how your pages look in each browser platform. Be patient, it takes a while to deliver your screenshots.

I completely understand why starting a web design business sounds so killer, the benefits are incredible…

Work your own hours doing something you love. Make your own money on your own terms. Fire your boss! Create your life according to your own standards? I can hear you all the way from here… heck yeah, where do I sign up?

You Lucky dog… These days, you dont have to go to school to start a web design business. In fact, there isnt a whole lot of technical knowledge that goes into building web sites anymore, just a few tools that help web designers be more productive. Even expert control of these tools isnt the key to knocking your own web design business out of the park!

What Ive noticed about successful people, in all forms of business, is that they have boatloads of confidence. Confidence, the ability to get things done, and a passion to put themselves and their company OUT there. If you’re worried that you’ll nosedive on your first few web design jobs… you JUST MIGHT. You’ll probably mess up quite a few jobs starting out, but it doesn’t mean a horrible death for your web design company. Just know that everyone makes mistakes, own it, make proper adjustments – and DONT let it stop you. (clients LOVE you when you offer “my bad” discounts and freebies… and they do  come back!)

I know it’s easy to tell you to be bold, but if fear is still stopping you, I’ll tell you a story. When I began cold calling for clients, I was TERRIFIED. I felt like I didnt know what I was talking about, that everyone would hate me and I’d end up just as broke with a side of humiliation. You already know the outcome. I didnt suck. People didn’t even notice that I was nervous and I even got a few jobs!!! Though I drastically underpriced these first jobs and well, they didnt turn out as gorgeous as I’d imagined, I didnt stop. I kept fighting the good fight, without a minute of down time so the fear wouldn’t seep back in. And it got easier. Soon I was selling my own professional web design services,  chatting away with clients, pulling out their best information to help them become more successful online. When I turned my intention on helping others, it became quite enjoyable.

Lucky again! Cold calling is not a requirement. Most communication is done by email. So even if you’re not a born talker, YOU CAN DO This! You’ll build confidence and jobs will come. Just remember to keep it simple and always do your best.

In the weeks to come, I’ll expand on each of these topics that go along with how to start a web design business. For now… the basics.

What Does it Cost to Become a Web Designer?

Im happy to say, not much.  Sure, there’s a ton of art, templates, tools and programs you can buy to get a head start in the business, but if you have very little money to get started, you can still make a great run.

There’s one thing you’ll need to pay for upfront to get started – web hosting. You’ll need a place online to host websites for yourself and your clients. I use HostGator because in my opinion, they run the fastest most dependable servers Ive worked on.

If you already have web hosting, great! If not, I created this video to show you quickly how to get set up. I was able to get you a 25% discount. Plus, I’ll give you my premium wordpress theme for free!

Go to HostGator.com
Use Coupon Code: digitalrenewal for 25% off
Email me with your proof of purchase and I’ll send the theme right away.

In your web design career, if you only use ONE program, it WILL be Adobe Photoshop I use this program every single day in my business and though its quite expensive, its the industry standard for this simple fact. Its the best out there.

You can learn photoshop for free with adobe’s built in guides and tutorials. Youtube is a great place to learn for free. If you need a formal start to finish learning experience, without the expense and hassle of going to school, sign up for Photoshop training at lynda.com. Actually, every software or language you’d ever need to learn for a career as a web designer is right there. Imagine going to college for $25 a month! Its virtually the same education. Lynda wrote many of the textbooks we used in college for print design and her video training is basically everything we learned, at a fraction of the price.

One other expense may be marketing for your business, but if you’re resourceful, getting referrals from current clients and friends, pounding the pavement and using online social networking, you can get quite a few clients just by networking.

Free Web Page Design Software

For professional web designers, diy business owners and bloggers alike,WordPress is where its at. It is the most popular and easy to work with content management system alive. Its free in your web hosting cpanel, and you can install as many websites as you like. Because of its popularity and documentation, any question that you might run into is one google search away from being answered. Clients find it very easy to maintain their websites as well. WordPress is the definition of win/win for a professional web designer.

How To Set Up A Website

The best advice to quickly set up a website is to install a copy of wordpress on your web hosting server and build a site of your very own! Choose a topic you like writing about and go for it. Then do one for a friend, neighbor, your church, a local business and so on!

When you get to a professional web designer level, your work has to look professional, serve a function and be organized. You dont have to be a skilled artist or a programmer in the beginning, in fact, spending too much time learning these things will just slow you down in the real world. Art and programming can be purchased, and you’ll turn your jobs faster, bringing in more cash flow to buy better art, cooler programs and start an advertising budget if you so choose.

Once you have wordpress installed, there are thousands of free themes and plugins to choose from, and for very professional jobs, you can purchase premium wordpress themes with high level functionality built straight into the theme (paid for by the client of course).

Though themes do all the design work for you, problems may arise when simple customizations need to be done to make a website unique. Adding a logo is easy in a premium wordpress theme, most allow you to upload a custom logo. In many other cases, this is where HTML and CSS come in handy. You may need to know how to switch out art, adjust spacing and change background colors. Moving things around in a wordpress theme may look complicated at first, but with practice, it gets easier.

Ive created a WordPress Business Theme specifically for people with limited experience with html and css code. After using other premium themes on client projects, I thought ‘how in the world would someone with little programming skill every be able to set this up?’ So I built something unique, utilizing all of the features of a premium theme, and put it into a format that is dead simple to use. Its something that I would sell to a client for $500. Use it to charge YOUR clients $500 
Plus if you do, Im available to answer questions through my contact form, or email me atdigitalrenewal@gmail.com

Free WordPress Theme: Blue Dock

This theme features a jquery plugin for a super cool expandable hover menu, like the dock menu on a macintosh.

Not only does it look sweet, the theme options give you total control for what goes in the menu.

Copy and paste any url into the form field. Add pages, posts, links to outside pages, whatever you heart desires. You can also decide which icons you’d like to use. I’ve prepared 40 icons for use with the menu from iconedens ‘Bright’ icon set. I’ve also included a photoshop file, so you can prepare your own icons if you wish.

View the Demo
Download: BlueDock Theme (2.37 MB)
Register for Updates to this theme, and to be notified by email
when new themes are released.

Other features:

• Featured Home Page description area (allows html)
• Latest Post Home Page Styling
• 2 Column Home Page Excerpts feed
• 3 Column Widgetized Footer
• Stylized Comments
• Meta tag icons (from iconfinder.net)

Free SEO Theme for WordPress
This layout has been restructured and totally customized for Search Engine Optimization. I kept it very clean, light on code and graphics, with important information at the top where spiders cant miss it. Plus the theme structure lets you use WordPress to keep your keywords organized… Less planning, more writing.

View the Demo
Download: SEO Theme (121.13 kB)

What Was Done:
I moved the H1 tag to the top where it belongs, using the Category to automatically fill it. Similarly, post Tags automatically fill your H2 tags. I took the weight off the post title, so now you can write awesome headlines for your readers, and not for search engines. Your content immediately follows very close to the top of the page.

The page menu was moved out of the spiders way with CSS Positioning, and I added some cool drop down CSS. Finally, I added breadcrumb navigation to the bottom of the page, so your keywords are not only read first, they’re also read last.

The layout is built to fill the screen and look good at all resolutions. Sticky posts have additional styling to give your featured posts some pop. Images for sticky posts are automatically inserted using the first image in your post.

How To Use This Theme:
WordPress is a very handy tool for recording keyword research. As you find good keyword phrases, enter them as Categories. (I also use the category description area to record keyword data since the theme is not coded to show a description, the data remains private.) Categories  do not show up in WordPress until you use them, so its a good way to save data while keeping organized.  Now as you write your posts, you will have categories available to you. This way you can reference your keywords while writing… sort of a set-it-and-forget-it method. Choose your category, and your H1 tag is complete.

Its done with positioning in CSS. I never really did FULLY understand positioning in CSS. I was working on my SEOd like Crazy Theme for WordPress where I wanted to use this trick, and had to get to learning… BarelyFitz made a neat tutorial to learn CSS Positioning that helped me figure it out.

I knew to set my positioning on the menu to absolute, but was running into a problem: My layout was a fixed width, centered on the page.  The menu needed to stay inside my layout, not just stick to the top right of the page… Different screen resolutions will throw this layout completely out of whack… such a long explanation for such an easy fix!

Put the menu div inside another div (in this case my page wrapper) and set the wrappers position to relative.

<div style="overflow: auto; width: 100%;">
<div style="float: left; width: 20%;">Left</div>
<div style="float: left;">Content</div>
<div style="float: right; width: 10%;">Right</div>
</div>
<div>footer</div>

Heres the result:

And with little extra styling:

<div style="background: #ffffff; overflow: auto; width: 100%;">
<div style="float: left; padding: 1%; background: #cccccc; width: 20%;">Left</div>
<div style="float: left; padding: 1%;">Content</div>
<div style="float: right; padding: 1%; background: #555555; width: 10%;">Right</div>
</div>
<div style="background: #333333; color: white; text-align: center;">footer</div>

Heres the result:

Happy CSSing!