Designing a theme for WordPress in Photoshop is straightforward. In our example today, we will create a simple two column fixed width theme. Before we start, we need to decide what the width of our theme will be. I chose a 980-pixel sixe because it will fit on most screens without the need to scroll form side to side, as most screens today are at least 1024 pixels wide.

To get started create a rectangle that is 1024px x 768px. This will serve as our background for the theme. You can color your backgrounds or even add an image. For our tutorial, we will color the background blue.

Next, we will layout the theme container. Later this will be defined in the web pages we create, but now let’s add a white rectangle 980pxx768px. This represents the themes overall width and the container that will hold our theme.

Now that we have the basic layout done let’s look at the different sections we will be creating. Our theme will have four basic sections:

• Header
• Content
• Sidebar
• Foote

We will add each section to our theme layout starting with the header. For this tutorial, I have decided to create a header that is 175px tall and I will add 13px above the header also. To do this I will create a box that is 188px x 980px aligned with the top of the page.

I now have the basic header shape in place. Remember I added 13px for a border at the top so I want to represent that in my design. If you have an image for your header, you can now format it to the right dimensions and paste it into the PSD like this.

I have decided to put the menu right below the header and to make it approximately 30px in height. To do this, I will create a rectangle 30px x 980px under the header image.

I have decided to put the menu right below the header and to make it approximately 30px in height. To do this, I will create a rectangle 30px x 980px under the header image.

That is it, we have a design we can now transfer to a theme. Before we start coding, let’s look at some of the basics of a WordPress theme.

Section 2 – WordPress Themes Overview

Before we convert our WordPress theme design into a usable WordPress theme, it is important to understand the various parts of a theme and how they work together.

A WordPress theme is made up of a collection of:

• web pages,
• Style sheets, and
• Images.

These elements comprise the theme and are located in a folder within the WordPress installation directories. All themes are located in subfolders within the wp-content/themes/ folder.

The elements that make up a WordPress theme consist of three types in addition to the images. The style sheets or CSS files control the presentation or look of the theme. They define the colors used and how the data is displayed visually. The web pages are divided into two different types the template files and the optional functions.php files. The functions.php file is used for many things, but if you are going to create a widget ready theme, you will put the code to do this in the functions.php file. The template files generate the data or content that is displayed as a webpage.

Every WordPress theme must have at least two files:

• index.php and
• style.css.

Other optional pages include:

• home.php,
• functions.php,
• single.php,
• page.php,
• archive.php,
• category.php,
• search.php,
• 404.php,
• comments.php,
• comments-popup.php,
• author.php, and
• date.php.

Each of these pages performs a different function and we will cover these later. Let’s look at each of the page types in more detail.

CSS pages- The Theme Style Sheet

As we discovered earlier, the CSS page or style.css controls the presentation or the look of our theme. It also does much more. The style.css also provides the details about the theme in the form of comments. WordPress does not allow any two themes to have the same details in their comments. They do this because two themes with the same details would cause problems in the theme selection pages.

At the top of every style sheet are the details about the theme. These are used in the theme selection page. The style sheet comments are organized as follows:

Theme Name:  Your theme’s name

Theme URI:  The theme’s home page

Description:  The theme’s description

Author:  The author’s name

Author URI:  The author’s web page

Template:  This optional field defines a parent theme if one is used

Version:  The theme’s version number

If you are using a parent theme you will need use the name of the directory of the style in the Template field.

The Theme Functions.php File

To add more advanced functions to a theme you can use the optional functions.php file. The functions.php file acts like a plug-in if it is present in your theme. Some of the typical uses for this file include:

• Create the code for a widget ready theme
• Define functions used in the template files of your theme
• Create an admin screen for your theme that gives users the ability to choose options for colors, styles, and other aspects of your theme

If you want to see a sample of a functions file that sets up an admin, look at the default WordPress theme. This theme contains a functions.php file that defines functions and an admin screen. If you want to see a list of what is possible wit this file, look at Function Reference list available on www.wordpress.com.

The Theme Template Files

As we discovered earlier, WordPress uses web pages or PHP files for templates to generate the pages requested by your site’s visitors. We already saw a list of all the possible templates, so let’s examine the key ones in more detail.

While it is not necessary to use every possible template, it is important to note that WordPress chooses templates based on the template hierarchy, which is available at www.wordpress.com and is not important for the purposes of this book. As the theme designer, you can choose the level of customization you want by designing or not designing the various templates.

As we said earlier, you can create a WordPress theme with just two files:

• style.css
• index.php

When we designed our theme, we included several areas including:

• A header
• A footer
• A sidebar
• A content area

All of these areas can be defined in the index.php template file or can each be their own template file in which case the index.php file will define how and where they are used. Note that if you do not create templates for the various template possibilities, WordPress use the built-in default files. The default templates may not match your Theme and you may want to create your own to maintain consistency across the theme.

In our example, we designed a theme that will require the following templates:

• index.php
• sidebar.php
• header.php
• footer.php

To do this we will create an index.php that will call each of the other templates. To do this we will use WordPress tags within the index.php template. The tags we need to use are as follows:

• get_header() will call the header.php template
• get_sidebar()will call the sidebar.php template
• get_footer()will call the footer.php template

We will examine this in detail in Section 3 of this book.

Section 3 – Putting It All Together

Now that we have designed our theme and learned the basics of building a WordPress theme, it is time to build our theme. To do this let’s start by creating a folder in our WordPress installation. We will name our folder “World” and place it in the wp-content/themes/ folder.



Also create an images folder in the same folder. This will hold our images for the theme.

Now that we have our folder, let’s create the files we need in the folder. We will create the following files:

• index.php
• sidebar.php
• header.php
• footer.php
• style.css
• functions.php

Now that we have our folders and files created, let’s slice up our psd file to create the necessary images.

Slicing up Your PSD File

For this theme, we only need to create one image – the header image. To do this we will select the layer in our psd file that is our header image. You should also hide any layers that are above the header layer to prevent them from being copied.

Now we simply copy this layer and paste it into a new image.

Review the dimensions to ensure they are correct and if they are then save the file as headerbg.jpg. You are now ready to start creating your theme.

CSS Layout

The layout of a theme is done using CSS divs. The divs define the various sections and how and where they are placed. Additionally our style.css will further define the look based on these divs.

Our theme will be laid out as follows.

Furthermore, we will encase the entire page in two wrapper divs called wrapper and wrapper 2. Let’s start laying out the theme by starting on the template files.

Template Pages

Our layout for our divs will be as follows:

<div id="wrapper">

<div id=”wrapper2″>

<div id=”superheader”></div>

<div id=”header”></div>

<div id=”tabs”></div>

<div id=”content”></div>

<div id=”sidebar”></div>

<div id=”footer”></div>

</div></div>

There will be other divs in the theme, but these are the major ones and translate directly from our design. Let’s get started at the top with the header template.

Header.php

The header.php template contains our logo, site name, slogan, and in this case the menus. Open your header.php file and let’s get started.

You should have a blank page when you open the file. WordPress templates all work together like the pieces of a puzzle to build a complete webpage. Because of this, certain tags live in different templates. Every web page requires certain tags to render in the browser. These tags are:

• html
• head
• body

The header.php file will have the opening html tag, the head tags, and the opening body tag as well. We will close the html and body tags in a different template.

The first thing we should do is set up our tags and CSS divs as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns=”http://www.w3.org/1999/xhtml”>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />

<title> </title>

</head>

<body>

<div id=”wrapper”><div id=”wrapper2″>

<div id=”superheader”></div>

<div id=”header”></div>

<div id=”tabs”>

<ul></ul>

</div>

We have now created our basic header and inserted our HTML tags and CSS tags. Note that we did not close the Wrapper tags, as we will do this in the footer.php template. We have now lain out or page, but we have not put any WordPress specific data in yet. There are several items we need to add to the page including:

• page title code
• blog description code
• blog title code
• menu code
• the css link

We need to add the following lines of code  to our page:

• <link rel=”stylesheet” href=”<?php bloginfo(‘stylesheet_url’); ?>” type=”text/css” media=”screen” />
• <?php wp_title(‘&laquo;’, true, ‘right’); ?> <?php bloginfo(‘name’); ?>
• <a href=”<?php bloginfo(‘url’); ?>/”><?php bloginfo(‘name’); ?></a>
• <?php bloginfo(‘description’); ?>
• <a href=”<?php bloginfo(‘url’); ?>”>Home</a>  <?php wp_list_pages(‘title_li=&depth=1′); ?>           </ul>

We add it in the following manner:

<title><?php wp_title('&laquo;', true, 'right'); ?> <?php bloginfo('name'); ?></title>

<link rel=”stylesheet” href=”<?php bloginfo(‘stylesheet_url’); ?>” type=”text/css” media=”screen” />

This creates the title text in the top of our browsers and links the CSS sheet to the page. To set the blog title and description to display in the header we add:

<div>

<h1><a href="<?php bloginfo('url'); ?>/"><?php bloginfo('name'); ?></a></h1><br>

<?php bloginfo(‘description’); ?> 

<ul>

Finally, we add the menu items as follows:

<ul>

<li><a href=”<?php bloginfo(‘siteurl’); ?>/”>Home</a></li>

<?php wp_list_pages(‘title_li=&sort_column=menu_order&depth=1′); ?> 

</ul>

The first item creates a Home link and the second lists the pages within the WordPress database.

Finally, we are left with the following header.php template:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns=”http://www.w3.org/1999/xhtml” <?php language_attributes(); ?>>

<head profile=”http://gmpg.org/xfn/11″>

<meta http-equiv=”Content-Type” content=”<?php bloginfo(‘html_type’); ?>; charset=<?php bloginfo(‘charset’); ?>” />

<title><?php bloginfo(‘name’); ?>  <?php wp_title(); ?></title>

<link rel=”stylesheet” href=”<?php bloginfo(‘template_directory’); ?>/style.css” type=”text/css” media=”screen” />

</head>

<body>

<div id=”wrapper”><div id=”wrapper2″>

<div id=”superheader”></div>

<div id=”header”>

<h3><a href=”<?php bloginfo(‘home’); ?>/”><?php bloginfo(‘name’); ?></a></h3>

<h2><?php bloginfo(‘description’); ?></h2></div>

<div id=”tabs”>

<ul>

<li><a href=”<?php bloginfo(‘siteurl’); ?>/”>Home</a></li>

<?php

wp_list_pages(‘title_li=&sort_column=menu_order&depth=1′); ?>

</ul>

</div>

Now that we have our header.php file lets create our footer.php file.

Footer.php

The footer.php file contains the information for the footer and is used to clean up tags for other templates. In our case we have an open div tag from the page div in the header and the body and html tags that need to be closed. As usual, we will create a div and then add our content.

Our footer.php will look like this:

<div id="footer">

<p>

<?php bloginfo(‘name’); ?> is proudly powered by

<a href=”http://wordpress.org/”>WordPress</a>

<br /><a href=”<?php bloginfo(‘rss2_url’); ?>”>Entries (RSS)</a>

and <a href=”<?php bloginfo(‘comments_rss2_url’); ?>”>Comments (RSS)</a>.

</p>

</div></div>

</body></html>

Let’s examine each piece of this. The <div id=”footer”>starts the div for the footer. The <p> creates a paragraph break in the top of the footer and the </p> tag closes that tag. The next tag (<?php bloginfo(‘name’); ?> )should look familiar,  it displays the title of the blog. After the link to WordPress you will see two links that allow visitors to subscribe to rss feeds of the blog. Finally, you see our closing tags, one for the footer div, one for the page div and then the html and body tags.

Now let’s look at the sidebar.php template.

Sidebar.php

The sidebar.php template controls the items in our sidebar. When designing a sidebar, you can either create a static bar that you put the WordPress items into such as categories, calendar, etc, or you can build a widget ready sidebar that lets you set the items in the admin panel.

The sidebar is an unordered list of items contained in a CSS div. The first thing we want to do is add the div to the page so open your sidebar.php and insert the following code:

<div class=”sidebar”>

</div>

If you want a widget ready sidebar, add the following code to the sidebar between the div tags:

<ul>

<?php /* Widgetized sidebar, if you have the plugin installed. */

if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar() ) : ?>

<?php endif; ?></ul>

If you do not want to add any static items then you are done. However, for those that want a static sidebar you can add a list of blog categories by adding the following code:

<ul>

<li><h2><?php _e(’Categories’); ?> </h2>

<ul> <?php wp_list_cats(); ?>

</ul></li></ul>

There are many other items available, check the WordPress site for more info. Our final sidebar should look like:

<div class=”sidebar”>

<ul>

<?php /* Widgetized sidebar, if you have the plugin installed. */

if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar() ) : ?>

<?php endif; ?> </ul> </div>

That is it; of course, you can put anything you want in here. Let’s look at our last template, index.php that will pull together all these templates.

Index.php

The index.php pulls the other templates together to create the basic page. To begin we will create the calls to our other pages as follows:

<?php get_header(); ?>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

This calls the header.php, sidebar.php, and footer.php page. If you just loaded this, you would get a page with no content, so we need to add the content and necessary divs.

Let’s start by adding the content and main divs right below <?php get_header(); ?> as follows:

<?php get_header(); ?>

<div id=”content”>

<div id=”main”>

</div></div>

Now that we have our divs setup we can begin adding the code to get the data from the database.  You will most likely want to list your posts on the main page. To do this we add code that will retrieve the posts and lists them as follows:

<div id="main">

<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>

<?php endwhile; ?>

<?php endif; ?>

</div>

Your theme is now ready to display the posts. We are only left with one template, the functions.php template.

Functions.php

The functions.php file can be used in many ways. In our case, we will use it to control the look of our widgets in our sidebar. Open your functions.php file and let’s get started.  Enter the following code into your functions.php template:

<?php

if ( function_exists(‘register_sidebar’) )

register_sidebar(array(

‘before_widget’ => ‘<li>’,

‘after_widget’ => ‘</li>’,

‘before_title’ => ”,

‘after_title’ => ”,

));

?>

As you can see this checks to see if there is a widget in the sidebar and then inserts code before and after the widget to control the look of the widget.

We now have a set of templates that will produce a theme. To set the look of the theme we need to create a style.css file.

Style.css

The style.css file contains information about our theme and defines the look of our theme.  We start by opening our style.css file and entering the information about our theme at the top. We need to enclose our information in comment tags. CSS comment tags look like this:

• /*  (open comment)
• */  (Close Comment)

We need to include all the required info. We built our details as follows:

/*

Theme Name: World

Theme URI: http://www.Yoursite.com

Description: My first theme

Version: 1.0

Author: You

Author URL: http://www.yoursite.com

*/

Now that we completed the comments, we need to create classes for each of the divs we defined in addition to the body div. We will create the following classes.

• body
• wrapper
• wrapper2
• superheader
• header
• content
• sidebar
• footer

Let’s look at each one individually and what they do. We will keep it simple and just define the body portion of our pages. The body styles affect the entire page. We will define several elements including:

• The background color
• The font used by our pages
• The font size

To do this we will enter the following into our style.css page.

body {

margin: 0;

padding: 0;

color: #333;

text-align:center;

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 100.1%;

background:#0099FF;

}

Let’s examine each item separately.

• body{ – This opens the style class and defines which tags are effected in the pages.
• Margin: -  Defines the margins around the page. A 0 margin will have no margin.
• padding: – Padding is like a margin and setting it to 0 will remove it completely. 
• color: – This tag defines the color of the font.
• font-family:  – This defines the font used for the  class. Not every font can be used and web pages use specific fonts. Refer to CSS standards for a complete list. In this case, we chose the Verdana, Arial, Helvetica, sans-serif font.
• font-size:  – This sets the size of the basic font.
• background: – sets the color of the background on the webpage.  We used 0099FF which is the hex representation of our color. To get the hex color you can use photoshop.

You might have noticed a semicolon at the end of each value. This is used to end the line and is required.

We now can define our two wrapper classes as follows.

#wrapper{

width: 980px;

margin: 0px auto;

padding: 0px;

text-align:left;

font-size: 78%;

line-height:18px;

background: #fff;

border-left: 2px solid #fff;

border-right: 2px solid #fff;

}

#wrapper2{

background: #fff;

}

Here we have used the width tag to create the width of our theme and it matches our design width. The text-align tag sets the text alignment in the div, and finally we create a border around the div. with the border-right and border-left tags. The wrapper two class only sets the background color to white which is what we use for our sidebar and content.

Now that we have the global tags set, let’s address our header. Our header section will control the look of the items in our header and will include several items such as:

• the header image,
• header text, and
• the menu text.

We will do this in the following manner and step through this one class at a time.

#superheader{

padding: 0;

margin: 0;

height: 13px;

background-color:#0569ac;

}

#header{

padding: 0  0 0px 0;

height: 175px;

margin: 0 0 0px 0;

border-bottom:2px solid #fff;

background:#fff;

background-image:url(images/headerbg.jpg);

}

The superheader class is used to create that band at the top of the page.  We simply set the margins, height, and color.

The header class defines the overall style of the header div. In this case, we are setting the background image, borders, margins, and height. You can see we used the sliced header image we created earlier.

The menu is controlled by the tab class and controls how the menu looks and functions. Because a WordPress menu functions as an unordered list, we set the list tags for the menu tags as well. An unordered list in html will use the tags ul and li, with ul defining a list and li a list item. Let’s start by looking at the menu class.

#tabs{

padding: 0;

background:black;

}

First, we define the background color of the menu and set the padding to 0. Next, we define the look of the ul tags.

#tabs ul{

margin: 0;

padding:3px 0;

list-style-type:none;

}

Finally, we  set the li tags.

#tabs ul li{

margin: 10px 0 3px 15px;

padding: 6px 15px 6px 0px;

display:inline;

border-right: 2px solid #fff;

font-size: 90%;

font-family: Tahoma, Arial, sans-serif;

} 

Display:inline makes the list display in a horizontal line as opposed to a vertical line.  Next we define how the links look in our menu. Since each item will be a link we will want to change the look form the default link style. Here we set the font color to white.

#tabs ul li a{

color: white;

}

The last step is to define the behavior of the text when we hover the mouse over it. Here we simply change the color.

#tabs ul li a:hover{

color:#A1E7FD;

 text-decoration:none;

}

Next, we can create the style for our footer. We will define our footer style as follows.

#footer {

clear: both;

margin: 0;

padding: 10px 16px 0 16px;

text-align: center;

font-size: 85%;

background: #fff;

}

This class defines the footer class and sets the margins, padding, text alignment, font size, and background color for the class.

Now that we have the footer, let’s define the sidebar styles as follows.

#sidebar {

padding: 0;

margin: 0px 0px 0px 540px;

}

That is it for the sidebar for now. Next, we will set the style for the main content of the pages as follows.

#content{

clear:both;

padding: 0;

margin: 15px 10px;

}

This will define the content container’s style. We set the margins and padding for the class. 

#main {

width: 530px; 

float:left;

margin: 0;

padding: 0 0 10px 0px;

overflow:hidden;

}

Here we set the main div’s class by setting the width, placement, margins, padding, and the overflow properties.

That is it, we are ready to upload the theme and test it.

Putting it all together

If you upload this to your server and browse to the blog you should see something like this.

Conclusion

We have created a simple WordPress theme. There are many other things you can do with WordPress themes and there are many great tutorials available to help you. There is no limit to what you can do with a WordPress theme as long as you follow the basic principles contained within this document. If you want to do more advanced theme building check out the WordPress developer site at www.wordpress.com.

One of the things I am asked most by friends and strangers:

That plugins do I need for my WordPress blog?

I get this question most often from people who have recently moved their blogs over from WordPress.com to the self-hosted WordPress.org version.

The core of both platforms is nearly identical with the exception that the self-hosted version requires you to install all of your own plugins.  Most, but not all, of the features available in WordPress.com are available as one-off plugins in the open marketplace.

Unfortunately, you are responsible for updates and anything that goes wrong if they experience bugs.

I’ve used WordPress for about 7 years, and in all that time I have always wondered why certain plugins do not just come with the core WordPress.org download.  I know the reason is that WordPress.org is an open source program that does not want to play favorites with certain developers.  It makes some sense.

Finally, Automattic released a solution under the brand name, Jetpack.

Jetpack includes:

• Subscriptions – Let users subscribe via email.
• Image & RSS Links Widgets – Add them to your sidebars.
• Gravatar Hovercards – Enhance your Gravatars by allowing users to hover over a Gravatar to see more information about that user.
• WordPress.com Stats – The good old stats program you are used to from WordPress.com.
• Twitter Widget – Tweet Tweet
• Shortcodes – Add embeddable content, like video players, to your posts with easy shortcodes.
• Shortlinks – Utilize the WP.me link shortener.
• Sharedaddy – Add social media sharing buttons to your posts.
• After the Deadline – Hands down the best spelling and grammar checker for WordPress.
• Vaultpress – A premium (paid) service for backing up your entire blog.
• Beautiful Math – Allows you to add geeky math equations in posts.
• Enhance Distribution – Ping your content out to all the search engines and content aggregators.

There is a pretty significant benefit of automatic updates.  The group of plugins will automatically update as new features and bugs are fixed.  Jetpack also claims that new features will automatically be included as well.

I’m also glad to see that Automattic is starting to take advantage of their name…and making things Automatic.

Mr. Hobby blogger does some quick Google research and realizes all they have to do is throw some Adsense code on their blog template, and the checks will start rolling in!

Fail.

Do not pass go.  Do not collect new iPad.

What the heck happened?  Mr. Hobby blogger actually has a pretty sizable following for his site all about Legos.  Sure, it is a hyper specific niche, but there’s an audience for this stuff.  He has even received invitations to attend major toy conventions.

Mr. Hobby blogger has actually talked to marketing folks from the Lego Group Inc. about his site, yet they do not seem interested in sponsoring his website. What’s the problem here?

No one is taking you seriously because your site does not look like a serious business.

Yes, we’re talking about kids toys here so of course it does not have to look like the Dow Jones homepage.  But here is what’s making you look amateur:

• Your website URL is:  http://legofreak.blogspot.com.
• Your email address is:  blockhead433@yahoo.com.
• Your “About” page talks about where you grew up and has a picture of your dog on it.
• Your blog template is the same template used by 2.4 million other bloggers.
• You are secretly obsessed with funny animated gif files.
• You steal photos from other websites.  You loooove Google image search.
• Privacy policy?  What’s a privacy policy?
• You don’t have or use a web analytics program.

There are probably a few more issues, but these are the most common.

You’re content is probably some of the best Lego related content on the Internet.  Unfortunately, it is hard for legitimate advertisers to take your site seriously.

You get an A+ for content, and a D+ for execution.

Here is your homework assignment:

Run out and register a Lego related domain name.  Maybe don’t use the word Lego in the domain since it is a registered trademark, but pick something in the “building block” arena.

Once you’ve got that domain name locked down, set up a real email address.  John@buildingblocks.com would be lovely.

Write out a better About page.  Talk about the site and the type of content you hope to deliver to your audience.  If you happen to know some data about your readers, here’s your chance to highlight it.  Think of this as a soft sell for why an advertiser might be interested in doing business with you.

Move your blog to a self hosted system such as WordPress.org.  There’s plenty of cheap (like $6 per month) hosting out there.  Sign yourself up, and get WordPress installed.  It is not hard and you can get it all done in under an hour.

Pick a better template that fits your blog’s theme.  If you are really committed to this, hire someone to build a custom template for you.  You should be able to get this done for a less than a couple hundred bucks for something basic, but classy.

Stop stealing photos.  Yes, it is easy to do a Google image search and rip pics from someone else.  Unfortunately, that’s kind of illegal.  However, hope is not lost!  Solicit photos from your readers.  I’m sure there are Lego fans out there that would love to share their creations with you.

If you find pictures on another site, ask the owner if you can use them.  Often times, they’d be happy to let you use a photo in exchange for a link back to their site from the post.

Google what a “Privacy Policy” is.  There are stock templates out there.  Get your hands on one and get it up on your site.  Many ad networks and direct advertisers require that you have a privacy policy on your site.  Plus, it make it look like you know what you are doing with this whole “business” thing.

If you haven’t already, sign up for Google Analytics.  Run, don’t walk.  Sign up right away and start measuring your traffic.  Your advertisers are going to want to know how much traffic your site gets.  This is how you will know.

Get out there and make us proud.

In this post I am going to lay out a blueprint for you that you can follow step-by-step and then in later posts I will give you more details on how to actually set up each of these methods to maximize their impact on your traffic stats.

1. Do the preparation steps in the previous blog post.
2. Write five articles related to your niche – this is not as hard as it seems – you can simply rewrite your blog posts to create unique articles.
3. Use Camtasia Free software and PowerPoint presentation slides to create videos out of your article content – don’t mind being in front of the camera?  Then use that, but you want to create five videos based on your five articles and you will need five PowerPoint presentation slide shows for traffic generation as well.
4. Create an audio file of all five of your articles.  If your article content is quite short just make one audio file including the information in all five articles.

Okay so at this point you will have five articles, five videos, five PowerPoint presentation slide shows, and at least one audio file.  All of these files will contain backlinks to your site and if you can include a call to action (without sounding spammy) in the content as well all the better.  Now you have to get these out on the net.

The Articles

Your articles are going to provide a hub for the rest of your traffic efforts.  Firstly you want to submit them to Ezinearticles.com.  Unless you are a premium member this is going to take a few days for the articles to be approved.  You are also going to submit your articles to the following sites:

• Goarticles.com
• SubmitYourArticles.com
• ArticleDashboard.com
• Freenichetopics.com

But wait until your articles have been approved on Ezinearticles.com first – EZA does not like duplicate content.  Don’t forget to ping your article links (the actual link of the page your article is on) as well as Stumble it, Twitter it and put the link up on Facebook.

Next you want to find some graphics to go with your article content and then head over to Squidoo.com and set up five lenses using your article content and the pictures you have collected.  Each article will make an individual lens.  If you have not made a Squidoo Lens before then check out the help tutorials they have on their site which are very good or courses by people like Tiffany Dow or the PotPieGirl.  Again once you have your lenses finished then ping them and use your social media links to put the word out about them.

Well that should be enough to keep you going for the moment.  In the next post I will explain more things you can do with your articles and also where to post the other content that I had you create.

Setting the Groundwork

Getting prepared for traffic to your site is something that you should be thinking off from the moment you install WordPress on your new domain.  Before you start generating traffic you want to make sure that you have installed all of the plug-ins outlined in our previous post here [Link to 5 Essential Plug-ins You Blog Must have].  To keep Google happy your site will need to have a Privacy Policy page, a Terms and Conditions Page and a Contact page at the very least.  You should also make sure that you have a minimum of three blog posts on your blog, with more scheduled or planned before you put this traffic plan into place.  Ideally you should aim for one new blog post for your blog daily for about a month, and then at least three times a week thereafter so that your blog always has good fresh content coming in.

Setting Up Backlinks

If you are not familiar with SEO then it is unlikely that you have come across the term “Backlinks” before but these are a vital part of your blogging success.  In a nutshell backlinks are links on other sites that point back to your blog, or a specific blog post.  The more backlinks your blog has the more valuable it is considered by Google and other search engines.  So you need to set up a system to start generating backlinks as quickly as you can.

Warning: There are a lot of companies online that claim they can get you hundreds or even thousands of backlinks for the price of a cup of coffee – Do not use these methods.  They are considered spam and can get your blog banned from Google permanently if you use these “Black Hat” methods.

Your pinging will already be creating backlinks for you but you can go a lot further with this.   Just some of the methods you can use include

• Putting articles on article directory sites like Ezinearticles and GoArticles
• Putting up videos on YouTube and other video sites (TubeMogul is good for this)
• Creating audio files and placing them on sites like iTunes
• Blog commenting on other blogs in your niche
• Forum posting on relevant forums in your niche
• Posting an ebook of your content on free ebook sites like Free-ebooks.net
• Setting up related pages on Squidoo.com and HubPages
• RSS feeds
• Social Media sites like Twitter, Facebook and StumbleUpon

Now before you go thinking that this could be a lot of work, remember that you can outsource a lot of these tasks and as we will show you in the next blog post – a lot of these ideas come from recycling and repackaging content you have already created.  See you on the next post.

Read Part Two

Here are 6 copywriting skills for bloggers to help them achieve their marketing goals without scaring the readers away.

1. Know Your Product: There is the need for the blogger to has enough knowledge about the product he or she is promoting. Be sure that what all that advertisements about the product say is true. Knowledge about the product will make you feel confident about supporting the product while writing. The reader needs your assurance of the products being genuine.  After reading your blog they need to feel the need for what you have written about. Unless you sound convincing and enthusiastic yourself, they won’t be convinced either.

2. Understand Your Targeted Audience: Naturally not everyone will be convinced about what you are promoting. There are a number of reasons for that. For example; the reader might not need what you are promoting, or may not have the finances for it. Age group also matters when it comes to relating with clients. The youth requires a different approach from adults and professionals. Therefore knowing your customer type helps in knowing what approach will work well. We do not want to drive away the customer, therefore try being persuasive rather than dictatorial.

3. Outline the Benefits: Provide an insight to the benefits of buying what you’re selling. The audience needs to know what they will gain from the product. It has to work for the reader, therefore when you write, talk about the benefits. If you do not tell them what they will gain from the product they will lose interest and leave. The best approach is to highlight the benefits and make sure they are clear enough. Avoid using feathery words, be as simple and clear to understand as possible. The reader should be able to see the positive impact and how it will change their lives for the better.

4. Create the Need: This is the main challenge with copywriting skills. The reader must be left with the need to act urgently. Offer a bonus gift or present for a limited time as an available opportunity to avail right now. They have to feel the need to decide immediately. You must understand that once the reader leaves your website without acting, they are lost. Therefore, you have to attract them and convince them to take the step. Offer them a thank you gift and capture their email address to be able to send them newsletters and updates in their email.

5. Be Short and To the Point: Avoid lengthy and meaningless posts. Be short, brief and informative. Always make sure the information in your blog is authentic.

6. Revise Your Work: Always cross check your writing for spelling mistakes and meaningless sentences. Do not be repetitive and present the work in an attractive and lively way to leave the reader happy to be on your site.

Never forget that to attract traffic you need to dedicate more time and work hard. Unless you provide people with readable and enjoyable content, no one will read your blogs. Blogs are the quickest means to grow your website and making money. Therefore, as bloggers you must do all you can to manage the blog and make it worth reading.

How to Use WordPress?

This ideal blogging platform is really easy to use for anyone. You don’t need to be a web designer to be able to use WordPress. There are simple steps in using WordPress for blogs.

1. To begin using it, you must first download and install it on your PC. Then you can begin designing your website.
2. You will need the perfect theme to work with your blog. There are many themes available on the internet. You can check in the resources section to find the theme that suits you best. Alternatively, you can design your theme by customizing existing theme templates.
3. Always try to choose templates with widgets. These are tools that allow you to edit your web content using options. You can add, remove, move and do other things to items on your side bar. This makes it easy to explore and work with ease while customizing your web content.
4. To increase your options with themes, you can install as many as you want. Simply upload the folder with themes to the directory. Then you can change themes once you log on through the administration panel and click on the Presentation option.
5. Plugins increase options for functions you can use on the blog. WordPress has its own plugins but for more options, you can search for plugins. There are links available in the resources section.
6. Once you get the plugins all you need to do is install and activate them. Upload the plugin files or folder to the appropriate directory. Then log in as administrator and click on plugins, and activate the links.

I’d like to conclude with a tip for beginners and experienced users of WordPress. Always use the upgraded version. Like all applications, latest versions of WordPress will be more resourceful and secure.

WP is much more than a blogging platform.  It can be a full-blown CMS.  All it takes is some elbow grease.

With that in mind, the other great thing about WordPress is open-source coding.

I’ll go out on a limb and say that 90% of the functions, designs, and layouts you want for your WordPress site already exist somewhere else.  If you want it, chances are that someone has already made it happen.

When creating your template, do not reinvent the wheel.

My advice is to find a prebuilt template that accomplishes the majority of what you want on your site.  It does not have to be exactly what you want, just somewhat in the neighborhood.

Get that template in your hands (either paid or free), and use it as your “launch pad.”

Next, go out and find the missing elements that you want.  Perhaps there’s a cool way of displaying author information in your WordPress posts, or a snazzy photo gallery function.  Just go out there and find it.

Then try to figure out how it was built.

If the template was built by a design shop, head over to that shop and see if you can buy the template.

You can also head over to the WordPress support forums.  They are free and can often tell you exactly how to achieve a certain function.

Take those cherry picked items back to your site and incorporate them into the template you previously purchased.  Often, it is as easy as copy/pasting some code and doing some light weight CSS work.

That should cover 90% of your design needs right there.  The remaining 10% will be what you have to build out from scratch.

Instead of building 80% or 100% of your template by hand, you’ve just cut the workload drastically.  Now you can focus your energy on those totally unique customizations instead of stuff that has been built 100 times over by other developers.

If you have taken the plunge and hired developer to help you, the same exercise will come in handy.  Get out there and look for the things that you want to have on your site.  Find designs you like.  Share all of this information with your developer, and it will make their life easier.  You will get what you are looking for much quicker if the developer has samples to work from.

With that, here are the Top 5 Twitter Plugins for WordPress.

1) Twitter Widget Pro:

This plugin creates a sidebar widget with tons of configurable controls to adjust the Twitter feed’s display.  You can also control things like showing the date/time stamps, etc.  This is great for pulling your Tweets right into your site, or pulling in Tweets from a group of people based on a subject.  It is also a great way to keep some fresh, active content going on your site until your next post.

2) Twitter Feed:

Got friends? Ha.  By that I mean do you have multiple people working on your blog?  Or do you have multiple Twitter followers/accounts that you would like to display on your site’s sidebar?  This is the plugin for you.  Easily pull in Tweets from multiple users and control the slick graphic display of them on your site.  Includes the Twitter user picture and more.

3) Twitter Friends:

Show the loooove!  This widget allows you to show who is following you on Twitter.  This is a great way to thank loyal followers and to encourage people to follow you.  This plugin will show the user’s Twitter photo, bio line, and most recent Tweet.  You can toggle on/off each feature as well allowing you to show more details about each person (or not).

4) Post to Twitter (and Twitter to Post)

Oh how magical a world it would be if you could somehow get your WordPress posts to automatically show up in your Twitter account as Tweets?  How insane would it be if you could turn your Tweets into actual posts within WordPress?  Dream no more my friends.  Post to Twitter does exactly that.  It allows you to control the direction of information  (Twitter to WP  vs  WP to Twitter).  Control the follow of Tweetalicious in either way you choose, or both!

5) Twitter Blaster:

Kind of a unique way to use Twitter and WordPress.  This plugin allows your users to publish to your Twitter account.  Their Tweets get held as a “pending” post for your review.  You can then approve the Tweet and have it show up in your Twitter feed.  You can also approve the Tweet as a page/post.

Have one you really enjoy?  Tell me about it!

Post links to your favorite Twitter plugins for WordPress in the comments below.