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-jazz-basic, wp-jazz-prem or wp-jazz-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-Jazz

Login into your WordPress control panel, and click the Design tab. On the next page you’ll see all your available themes. Simply click on the WP-Jazz 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 may also need to 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 5 most recent Featured Articles in the featured article box on your home page. You can change that number on the WP-Jazz Theme Settings page if you like.

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

WP-Jazz 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 and featured photos for all your posts without using custom fields. More on that in another tutorial. Again, if you decide not to use it, the theme will function fine without it.

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-Jazz 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 a.active {
  color:#fff;
  background: #222;
  }

Then, comment it out like this:

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

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-Jazz to Use Post Excerpt, and Use the Excerpt Field

Go to your WP-Jazz 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-jazz.com">this site</a>, and <a href="http://www.wp-jazz.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-Jazz to Use Post Content, and Use the More Tag

With this method, all you have to do is set WP-Jazz 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-Jazz-driven site in no time.

Understand How WordPress 2.7 Handles Images

In WordPress 2.7, whenever you upload a new image, up to 4 different versions of that image are created with various sizes:

1. Full Version – Just as the name indicates, the size of this version is the size of the original image.
2. Large Version – The size of this version is based on the settings you enter in your WordPress control panel under the Settings >> Media tab.
3. Medium Version – The size of this version is based on the settings you enter in your WordPress control panel under the Settings >> Media tab.
4. Thumbnail Version – The size of this version is based on the settings you enter in your WordPress control panel under the Settings >> Media tab.

Note: On the Settings >> Media page, be sure your Thumbnail size dimensions and Medium size dimensions are set to a reasonable level. The recommended Thumbnail dimensions are 150×150 or less. The recommended Medium dimensions are 300×225 … 225px is the optimal height for the photos found in the Featured Article glider on the home page. If the images are larger, the style settings will automatically adjust the size down to no more than 225px high.

In WordPress 2.7, you have 4 image alignment options:

1. Alignment = None – You should probably never use this option.
2. Alignment = Left – This option places your image to the left of the content.
3. Alignment = Right – This option places your image to the right of the content.
4. Alignment = Centered – This option centers the image on it’s own line with no text to the left or right.

In WordPress 2.7, image captions are automatic. Well, sorta. You just have to remember to add your caption to the Caption field located on the media upload screen (click thumbnail image located above).

How to Add Post Thumbnail Images and Featured Article Images to Your WP-Jazz Site

If you look at the home page of this site, you’ll see that each Featured Article has an image next to it. Likewise, all other posts below the featured articles have thumbnail images next to them.

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 and Featured Article images right where they belong in your WP-Jazz-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 where it belongs on your WP-Jazz-driven site. In other words, if you have marked your post as a Featured Article, it will display the medium version image. If your post appears in the normal flow of posts, it will place the thumbnail version image next to it.

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 above).

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-Jazz 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)

For Featured Article images:

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

Summary and Recommendations

1. Get very familiar with the media upload functionality available in WordPress 2.7

2. Always assign the proper alignment (left, right or center) for your image on the media upload screen.

3. On the Settings >> Media page, be sure your Thumbnail size dimensions and Medium size dimensions are set to a reasonable level. The recommended Thumbnail dimensions are 150×150 or less. The recommended Medium dimensions are 300×250 or less.

4. Always assign the proper size for your image (thumbnail, medium or full size) on the media upload screen.

5. Install and activate the “Get the Image” plugin.

6. Use custom fields if you prefer not to use the plugin.

7. Decide whether to use a default post thumbnail when you don’t upload an image to your post. By default, the theme will use a default thumbnail. Visit your Theme Settings page to change the option.

Step 1 – Upload a Generic 125×125 Banner

The image to the right is already located in the /images folder found in your WP-Jazz 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-jazz-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-jazz-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-jazz-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-jazz-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-jazz-basic/ part to reflect the actual name of your theme folder.

For WP-Jazz Basic version, the img src would be:
<img src="http://www.mysite.com/wp-content/themes/wp-jazz-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-jazz-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-jazz-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-jazz-basic/images/ad125.gif" alt="banner ad" /></a></li>

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

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.