This is an Improperly Styled Text Widget

Improperly Styled

I was pleased to learn the New York Times is using Wordpress to power their blog network. If WP is good enough for the Times, it’s certainly good enough for you, don’t you think? Well, that’s another post. What I really wanted to share was this job opening:

This is a Properly Styled text Widget

Properly Styled

<div class="sidebox">
I was pleased to learn the New York Times is using Wordpress to power their blog network. If WP is good enough for the Times, it’s certainly good enough for you, don’t you think? Well, that’s another post. What I really wanted to share was this job opening:
</div>

Notice the application of the <div class="sidebox"></div> tags. You can use these tags in either the right or left sidebar.

When Should You NOT Use the “Sidebox” Div Class?

If you place your text widget in a list format, the “sidebox” div class is not necessary. For example, this code would not require it:

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

Understand How WordPress 2.6 Handles Images

Watch a 9 minute video demonstrating some of these features (in new window).

In previous versions of WordPress, many of the biggest complaints revolved around image handling. However, in WordPress 2.6, most – if not all – those complaints have been silenced.

In WordPress 2.6, whenever you upload a new image, 3 different versions of that image are created with various sizes:

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

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

In WordPress 2.6, 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.6, 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-Vybe 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-Vybe-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-Vybe-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-Vybe 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:

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

For Featured Article images:

• Key = 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.6

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

3. On the Settings >> Miscellaneous 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.

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

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

With this method, all you have to do is set WP-Vybe 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.

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-Vybe-driven site in no time.

It doesn’t take a lot to install and set up your new WP-Vybe WordPress theme. Read on, and you’ll have it knocked out in a snap.

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 “wp-vybe.” 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

Option 1

If you are using WordPress 2.8 and above, you are able to install the ZIP file of the theme directly from the Dashboard. This simplifies things since you don’t need to use FTP:

1. When viewing the WordPress Dashboard, go to Appearance -> Themes
2. Click “Install Themes” (big tab at top)
3. Click “Upload”
4. Click ‘Choose File’ then navigate to where you downloaded the theme ZIP file; click ‘Open’
5. Click ‘Install Now’
6. When done installing, click “Activate”
7. That’s it!

Option 2

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-Vybe

Login to your WordPress control panel, and click the Appearance link on the left. On the next page you’ll see all your available themes. Simply click on the WP-Vybe 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 Manage tab, then Categories on the sub-navigation bar. 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, go to Settings -> Permalinks. 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-Vybe Theme Settings page if you like.

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

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

Recently Popular – Your Most Popular Posts will appear at the top of the right sidebar in the tabbed navigation box as seen on this site. In WP-Vybe the plugin is configured to look at the past two weeks but this can be changed by modifying the plugin code in side-tabs.php:

<?php get_recently_popular(2, ‘WEEK’, 5, 0, 2); ?>

The first number within the parentheses is the interval length and the word following it is for the interval type (HOUR, DAY, WEEK, or MONTH). See the plugin’s page here for more details.

WP-Print – If you install and activate WP-Print, a printer icon will appear at the top of each Single post page. See this post for an example. If you don’t install it, the theme will function just fine without it; you just won’t give your readers the option to print out your posts. Note: Be sure to Update Permalinks AFTER you activate the plugin as mentioned on the “Installation” page for the plugin here.

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

Go to Appearance -> 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-Vybe Theme Settings Page

The link for this page is available under Appearance. I’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.

Step 8 – Custom Menus – Very Important

In WordPress 3.0 and above you are able to take advantage of the custom menu feature. Here is a short screencast to show you how it works.

Please note that you must set up the custom menus as instructed in the video. Otherwise, you will have a duplicate page navigation bar as the category bar (if part of the theme).

Optional Step 9 – Make Your Featured Articles Scroll Automatically

See this comment.