Step 1 – Unzip the File

The file you downloaded can be unzipped with any standard unzip program (if you don’t have one already installed on your computer, Stuffit Expander is a popular option for PC or MAC users). When you unzip the file, you’ll end up with a folder named either wp-smooth-basic, wp-smooth-prem or wp-smooth-dev, depending upon which license you purchased. Within it are all the theme files along with the end user license agreement (please take a moment to read over the license agreement).

Step 2 – Upload the Theme Files to Your WordPress Site

For this step, you’ll need an FTP (file transfer protocol) program. An FTP program allows you to transfer files between your computer and your web hosting account. There are several available, but I use SmartFTP. You’ll want to upload your theme folder to the /wp-content/themes folder in your WordPress installation.

Step 3 – Activate WP-Smooth

Login into your WordPress control panel, and click the Appearance tab. On the next page you’ll see all your available themes. Simply click on the WP-Smooth screenshot, then click the Activate link in the upper right-hand corner of the pop-up screen.

Step 4 – Set Up Your Featured Articles Section

If you don’t already have a “Featured” category, you’ll need to create one. Click the Post tab, then Categories on the sub-menu. Create a new category named “Featured.” Also, be sure the category slug is “featured.”

For the Featured Articles function to work correctly, you should modify your permalink structure. To do that, click the Settings tab, then Permalinks on the sub-menu. Just be sure that any option other than the default permalink structure is selected.

Finally, the only thing left to do is to place some of your posts/articles in the Featured category. By default, the theme is set up to display your 6 most recent Featured Articles in the featured article box on your home page. You can change that number on the WP-Smooth Theme Settings page if you like.

Step 5 – Install and Activate Plugins Supported by WP-Smooth

WP-Smooth has built-in support for the following plugins:

Popularity Contest (updated version for WP 2.7) – Your Most Popular Posts will appear at the top of the right sidebar in the tabbed navigation box as seen on this site.

Get the Image – This is a sweet, little plugin from the very brilliant Justin Tadlock. It will make it easier for you to include post thumbnails for all your posts without using custom fields. More on that in another tutorial.

Be sure you download the latest version of each plugin and upload them to your wp-content/plugins folder. Then activate them. The theme will do the rest.

Step 6 – Add Some Content to Your Sidebars

Click the Appearance tab, then Widgets, and drag some content into your sidebars. Be sure to click the “Save Changes” button when you’re done.

Step 7 – Be Sure To Visit the WP-Smooth Theme Settings Page

The link for this page is available under the Appearance tab. We’ve given you a whole slew of optional settings for the theme, so feel free to change a few of them, and see what sort of site you can create for yourself.

Optional Step 8 – Make Your Featured Articles Scroll Automatically

If you want to turn on auto-scroll, open the features.php file and find this code at the bottom:

<script type="text/javascript" charset="utf-8">
  var my_glider = new Glider('my-glider', {duration:0.5});
</script>

Then replace it with this:

<script type="text/javascript" charset="utf-8">
  var my_glider = new Glider('my-glider', {duration:0.5, autoGlide:true, frequency:8});
</script>

Then, to turn off the active post highlighting, open your Stylesheet (style.css), and find this code about half way down:

#my-glider .controls li a.active {
  background:#fff;
  }

Then, comment it out like this:

/*---- #my-glider .controls li a.active {
  background:#fff;
  } ---- */

The ideal size for the images that appear in the Featured Articles section are as follows:

width: 650px
height: 250px

Step 2: Use the “Get The Image” Plugin

This plugin, created by a savvy WordPress developer named Justin Tadlock, will greatly simplify the task of placing your featured article images right where they belong.

Download the plugin here. Installation is pretty simple …

1. Unzip the file.
2. Upload get-the-image.php file to your wp-content/plugins folder.
3. Activate the plugin on your Plugins page.

What this plugin will do:

1. It will look for any images that you’ve uploaded to your post.

2. If it finds one or more images, it will automatically place the 1st image – as a featured article image – where it belongs on your site.

Note 1: If you have uploaded multiple images to your post, it will use the #1 image as set in the gallery section of your media uploader (click thumbnail to the right).

Note 2: If you don’t want the image to appear in the post content, just don’t insert it into the post. The plugin will still grab the 1st image you’ve uploaded to the post and place it correctly.

3. If it does not find any images (because you didn’t upload any) for the post, no image will appear for that post in the Featured Article section. As for the post thumbnails, it will place a default thumbnail unless you have deactivated that feature on your Theme Settings page.

Step 3: Upload Your Image

Click the “Add an Image” button just above the post editor, and upload your image. There’s no need to insert the image within the post content unless you want to do that.

Once you upload your image, the theme will choose the first image it finds that you have uploaded and use it as the image for the Featured Article section. If you upload more than 1 image to your post, just make sure your Featured Article image is #1 image listed in the gallery (you may have to move the image up to the #1 spot).

Another Option: Use a Custom Field

Although the above method seems most simple, you may want to use the custom field method instead.

To do so, add a new custom field named: home_feature_photo

In the Value field, you’ll need to add the URL path to the image.

Example: http://www.wp-smooth.com/wp-content/uploads/2009/04/smoothshot.jpg

And that’s it. The theme will do the rest.

Step 1 – Upload a Generic 125×125 Banner

The image to the right is already located in the /images folder found in your WP-Smooth theme folder, so you can use that if you like. The file name is banner125.gif.

Alternatively, you can use your own generic 125×125 banner; just be sure to name it banner125.gif and upload it to the /images folder within your theme folder (or change the file name used below to reflect the name of your own file).

Step 2 – Create a New Text Widget in Your Right Sidebar for the Banner Ads

Add a new text widget to your top right sidebar, give it a title if you like. Then copy and paste the following code into the widget box:

<ul id="banner125" class="clearfix">
<li class="ad1"><a href="http://www.link1.com"><img src="http://www.mysite.com/wp-content/themes/wp-smooth-basic/images/banner125.gif" alt="banner ad" /></a></li>
<li class="ad2"><a href="http://www.link2.com"><img src="http://www.mysite.com/wp-content/themes/wp-smooth-basic/images/banner125.gif" alt="banner ad" /></a></li>
<li class="ad3"><a href="http://www.link3.com"><img src="http://www.mysite.com/wp-content/themes/wp-smooth-basic/images/banner125.gif" alt="banner ad" /></a></li>
<li class="ad4"><a href="http://www.link4.com"><img src="http://www.mysite.com/wp-content/themes/wp-smooth-basic/images/banner125.gif" alt="banner ad" /></a></li>
</ul>

Note 1: In the above code, you’ll need to change mysite.com to your own site domain name.

Note 2: In the img src code above, you may need to change the /wp-smooth-basic/ part to reflect the actual name of your theme folder.

For WP-Smooth Basic version, the img src would be:
<img src="http://www.mysite.com/wp-content/themes/wp-smooth-basic/images/banner125.gif" alt="banner ad" />

For WP-Jazz Premium version, the img src would be:
<img src="http://www.mysite.com/wp-content/themes/wp-smooth-prem/images/banner125.gif" alt="banner ad" />

For WP-Jazz Developer version, the img src would be:
<img src="http://www.mysite.com/wp-content/themes/wp-smooth-dev/images/banner125.gif" alt="banner ad" />

Step 3 – Replace the Generic Banners and Links With Real Ads

All you need to do is upload your 125×125 banner image(s) to the /images folder, and change the code above to reflect that.

For example, if you upload a new banner called ad125.gif, and you want to link that banner to www.solostream.com, you would simply change the code to this:

<li class="ad1"><a href="http://www.solostream.com"><img src="http://www.mysite.com/wp-content/themes/wp-smooth-basic/images/ad125.gif" alt="banner ad" /></a></li>

And that’s it. The Stylesheet is already set up to display the ads correctly.

To add these images to your posts, you have 2 options …

Option 1 – Use the “Get The Image” Plugin

This plugin, created by a savvy WordPress developer named Justin Tadlock, will greatly simplify the task of placing your post thumbnail images right where they belong in your WP-Smooth-driven site.

Download the plugin here. Installation is pretty simple …

1. Unzip the file.
2. Upload get-the-image.php file to your wp-content/plugins folder.
3. Activate the plugin on your Plugins page.

What this plugin will do:

1. It will look for any images that you’ve uploaded to your post.

2. If it finds one or more images, it will automatically place the 1st image – as a thumbnail – where it belongs on your site.

Note 1: If you have uploaded multiple images to your post, it will use the #1 image as set in the gallery section of your media uploader (click thumbnail to the right).

Note 2: If you don’t want the image to appear in the post content, just don’t insert it into the post. The plugin will still grab the 1st image you’ve uploaded to the post and place it correctly.

3. If it does not find any images (because you didn’t upload any) for the post, no image will appear for that post in the Featured Article section. As for the post thumbnails, it will place a default thumbnail unless you have deactivated that feature on your WP-Smooth Theme Settings page.

Option 2 – Use Custom Fields

If, for whatever reason, you prefer not to use the plugin, you can simply use custom fields. With this method, you will need to scroll down to the Custom Fields section on the Write Post screen and fill in the appropriate data.

For post thumbnail images:

• Name = post_thumbnail
• Value = the URL for the image (get the image URL from the media uploader)

Step 1 – Write a New Page

Just click the “Add New” link under the Pages tab in your WordPress control panel. Be sure to give your page a page title by filling in the Title field. Other than that, you don’t need to write any content in the post editor box.

Step 2 – Assign the Site Map Page Template to your Page

To the right of the Write Page console, you’ll see a blue box title “Attributes.” From the Template drop-down list, select “Site Map,” and click the Publish button.

If you look at the home page of this demo site, you’ll see that all the posts – including the featured posts at the top – display a post introduction (or excerpt) rather than the full post itself. It’s the same on the category pages, archive pages and search results pages. Then, when you click through to the individual post, you get the full post content along with comments and other information.

There are 2 possible methods to create the post introduction or excerpt …

Set WP-Smooth to Use Post Excerpt, and Use the Excerpt Field

Go to your WP-Smooth Theme Settings page, and click “Basic Post Settings.” You’ll see an option to use the Post Excerpts or Post Content (default value is Excerpts). You’ll want to leave it set to Post Excerpts.

Now that the theme is set up for excerpts, the trick is to tell WordPress how to create the excerpt the way you want it rather than it’s own way. Without any other instructions, WordPress will create the excerpt on it’s own. Here’s what it does …

WordPress Codex: “If you do not provide an explicit excerpt to a post (in the post editor’s optional excerpt field), it will display a teaser which refers to the first 55 words of the post’s content. Also in the latter case, HTML tags and graphics are stripped from the excerpt’s content.”

So the solution is simple … Use the Excerpt field on the Write Post screen.

Whatever you place in the Excerpt field is what will be displayed as the post excerpt on your home page. And keep in mind, you will need to add some HTML to the Excerpt field if you want it to be used in the excerpt. Otherwise, WordPress strips out all code including HTML. For example, lets say you want your post excerpt to be displayed just like this:

This is the post introduction. I want to include a link to this site, and this site.

In that case, here’s exactly what you’d need to place in the Excerpt field:

This is the post introduction. I want to include a link to <a href="http://www.wp-smooth.com">this site</a>, and <a href="http://www.wp-smooth.com">this site</a>.

If you need some help with the HTML code, you can write your excerpt in the normal post editor, then click the HTML view tab, and simply copy the HTML code from there.

As a side note, some folks have inquired whether they can include video in there post excerpt. The answer is yes, you can … you just need to place the code for the video in the Excerpt field.

That’s all for this option. Lets move on to the second method you can use to create your post introduction/excerpt.

Set WP-Smooth to Use Post Content, and Use the More Tag

With this method, all you have to do is set WP-Smooth to use Content rather than Excerpts. Then, when you write your post, simply use the More tag to cut the post according to your preference. The benefit of using this method over the previous one is simplicity. You don’t have to remember to use the Excerpt field, and any HTML code will still show up in your post introduction/excerpt.

Note: If you use the Post Content option, you need to make sure you DO NOT place any images before the More tag … or else you may end up with double thumbnail images on your home page.

That’s it. Use either of these 2 methods to write your posts, and you’ll be the proud owner of a sexy, new, WP-Smooth-driven site in no time.

Step 1 – Upload a Generic 125×125 Banner

Right-click the image to the right and save it to your desktop as banner125.gif. Then upload it to the /images folder within your WP-Vybe theme folder. Alternatively, you can use your own generic 125×125 banner; just be sure to name it banner125.gif or change the file name used below.

Step 2 – Create a New Text Widget in Your Right Sidebar for the Banner Ads

Add a new text widget to your right sidebar, give it a title if you like. Then copy and paste the following code into the widget box:

Make sure you note the folder name where WordPress is installed (i.e., “wp-vybe”), which needs to appear in the code. Also, if your published WordPress site is, for example, www.mydomain.com/wordpress/ you must remove the preceding slash after <img src="wp-content/themes/wp-vybe/images/banner125.gif" alt="banner ad" />.

Step 3 – Replace the Generic Banners and Links With Real Ads

All you need to do is upload your 125×125 banner image(s) to the /images folder, and change the code above to reflect that.

For example, if you upload a new banner called ad125.gif, and you want to link that banner to www.solostream.com, you would simply change the code to this:

And that’s it. The Stylesheet is already set up to display the ads correctly.

Step 1 – Write a New Page

Just click the Write Page link under the Write tab on your WordPress control panel. Be sure to give your page a page title by filling in the Title field. Other than that, you don’t need to write any content in the post editor box.

Step 2 – Assign the Site Map Page Template to your Page

At the bottom of the Write Page console, you’ll see a blue box title “Page Template.” You may have to click the white arrow to expand it. From the drop-down list, select “Site Map Page,” and click the Publish button.