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:

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.

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:

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

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=". For instance, banner ad #1 would be changed to <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:

  <li class="ad1"><a href="http://www.solostream.com"><img style="display: none;" src="/wp-content/themes/wp-vybe/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 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.

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

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.

Optional Step 8 – Make Your Featured Articles Scroll Automatically

See this comment.

Pellentesque enim. Sed et leo nec augue mollis pharetra. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi quis risus at nisl blandit feugiat. Ut vel orci quis sem dapibus iaculis. Aliquam ut nunc quis nisi tincidunt tincidunt. Pellentesque enim. Sed et leo nec augue mollis pharetra.

This is the H1 Heading

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi quis risus at nisl blandit feugiat. Ut vel orci quis sem dapibus iaculis. Aliquam ut nunc quis nisi tincidunt tincidunt. Pellentesque enim. Sed et leo nec augue mollis pharetra. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi quis risus at nisl blandit feugiat. Ut vel orci quis sem dapibus iaculis. Aliquam ut nunc quis nisi tincidunt tincidunt. Pellentesque enim. Sed et leo nec augue mollis pharetra. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi quis risus at nisl blandit feugiat. Ut vel orci quis sem dapibus iaculis. Aliquam ut nunc quis nisi tincidunt tincidunt. Pellentesque enim. Sed et leo nec augue mollis pharetra.

This is the H2 Heading

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi quis risus at nisl blandit feugiat. Ut vel orci quis sem dapibus iaculis. Aliquam ut nunc quis nisi tincidunt tincidunt. Pellentesque enim. Sed et leo nec augue mollis pharetra. Etiam non pede quis ante convallis convallis. Cras at tortor euismod leo molestie aliquet. Quisque posuere ornare nulla. Proin scelerisque dignissim erat. Donec dapibus euismod est. Nam molestie consequat lacus. Fusce euismod dignissim libero. Morbi laoreet dolor sed mi. Aenean urna diam, malesuada eu, tempor non, euismod sed, arcu. Nullam egestas nisi non nulla bibendum pharetra. Cras pellentesque nunc nec odio. Aliquam sed eros eu lectus congue rhoncus. Praesent accumsan nisl at leo. Sed enim. Integer nisl.

This is the H3 Heading

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi quis risus at nisl blandit feugiat. Ut vel orci quis sem dapibus iaculis. Aliquam ut nunc quis nisi tincidunt tincidunt. Pellentesque enim. Sed et leo nec augue mollis pharetra. Etiam non pede quis ante convallis convallis. Cras at tortor euismod leo molestie aliquet. Quisque posuere ornare nulla. Proin scelerisque dignissim erat. Donec dapibus euismod est. Nam molestie consequat lacus. Fusce euismod dignissim libero. Morbi laoreet dolor sed mi. Aenean urna diam, malesuada eu, tempor non, euismod sed, arcu. Nullam egestas nisi non nulla bibendum pharetra. Cras pellentesque nunc nec odio. Aliquam sed eros eu lectus congue rhoncus. Praesent accumsan nisl at leo. Sed enim. Integer nisl.

This is the H4 Heading

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi quis risus at nisl blandit feugiat. Ut vel orci quis sem dapibus iaculis. Aliquam ut nunc quis nisi tincidunt tincidunt. Pellentesque enim. Sed et leo nec augue mollis pharetra. Etiam non pede quis ante convallis convallis. Cras at tortor euismod leo molestie aliquet. Quisque posuere ornare nulla. Proin scelerisque dignissim erat. Donec dapibus euismod est. Nam molestie consequat lacus. Fusce euismod dignissim libero. Morbi laoreet dolor sed mi. Aenean urna diam, malesuada eu, tempor non, euismod sed, arcu. Nullam egestas nisi non nulla bibendum pharetra. Cras pellentesque nunc nec odio. Aliquam sed eros eu lectus congue rhoncus. Praesent accumsan nisl at leo. Sed enim. Integer nisl.

This is the H5 Heading

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi quis risus at nisl blandit feugiat. Ut vel orci quis sem dapibus iaculis. Aliquam ut nunc quis nisi tincidunt tincidunt. Pellentesque enim. Sed et leo nec augue mollis pharetra. Etiam non pede quis ante convallis convallis. Cras at tortor euismod leo molestie aliquet.

Here’s an unordered list.

• Proin lacinia nibh quis massa.
• Sed sed justo sodales justo scelerisque ultricies.
• Ut sodales pretium augue.
• Proin interdum, enim ut ullamcorper hendrerit, felis turpis malesuada risus, ac gravida nulla mauris et odio.

Here’s an ordered list.

1. Proin lacinia nibh quis massa.
2. Sed sed justo sodales justo scelerisque ultricies.
3. Ut sodales pretium augue.
4. Proin interdum, enim ut ullamcorper hendrerit, felis turpis malesuada risus, ac gravida nulla mauris et odio.

This is a Definition List

WordPress Themes

A WordPress Theme is not a “skin”. Though many young people call it one. The reality is that a WordPress Theme contains many files that come together in various ways to generate a WordPress web page. A “skin” simply changes the look, and rarely the results.

WordPress Plugins

WordPress Plugins add flexibility, features, and capabilities to your WordPress site. There are hundreds to choose from. Some add power and control like monitoring and busting comment spam and enhancing your adminstration features. Others add fun things like random elements and polling and rating systems.

Here’s a blockquote.

Phasellus scelerisque enim at elit. Nam molestie, ipsum et elementum facilisis, mauris elit pretium felis, vitae lobortis sapien neque quis dui. Sed in elit a lectus ullamcorper faucibus. Nullam suscipit massa a felis tempus scelerisque.

Here’s a Table

Here’s an image aligned to the left.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi quis risus at nisl blandit feugiat. Ut vel orci quis sem dapibus iaculis. Aliquam ut nunc quis nisi tincidunt tincidunt. Pellentesque enim. Sed et leo nec augue mollis pharetra. Etiam non pede quis ante convallis convallis. Cras at tortor euismod leo molestie aliquet. Quisque posuere ornare nulla. Proin scelerisque dignissim erat. Donec dapibus euismod est. Nam molestie consequat lacus. Fusce euismod dignissim libero. Morbi laoreet dolor sed mi. Aenean urna diam, malesuada eu, tempor non, euismod sed, arcu. Nullam egestas nisi non nulla bibendum pharetra. Cras pellentesque nunc nec odio. Aliquam sed eros eu lectus congue rhoncus. Praesent accumsan nisl at leo. Sed enim. Integer nisl.

Here’s an image centered.

Here’s an image aligned to the right.

Proin lacinia nibh quis massa. Sed sed justo sodales justo scelerisque ultricies. Ut sodales pretium augue. Proin interdum, enim ut ullamcorper hendrerit, felis turpis malesuada risus, ac gravida nulla mauris et odio. Nunc nonummy, quam sodales gravida dictum, turpis mauris egestas tellus, lacinia consectetuer sapien felis quis leo. Duis ligula erat, vehicula et, accumsan nec, aliquet bibendum, justo. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi quis risus at nisl blandit feugiat. Ut vel orci quis sem dapibus iaculis. Aliquam ut nunc quis nisi tincidunt tincidunt. Pellentesque enim. Sed et leo nec augue mollis pharetra.

Testing Font Looks – H3 Heading

You will need to test the looks of the different font styles, too. This is bold and THIS IS BOLD. This is italic and THIS IS ITALIC. This is bold and italic and THIS IS BOLD AND ITALIC.

This is code and THIS IS CODE.

This should be back to the normal paragraph style and we hope you have been paying attention to the margins and paddding around each element, including the paragraph, so you can position things appropriately to the rest of the content.

H3 Heading

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi quis risus at nisl blandit feugiat. Ut vel orci quis sem dapibus iaculis. Aliquam ut nunc quis nisi tincidunt tincidunt. Pellentesque enim. Sed et leo nec augue mollis pharetra. Etiam non pede quis ante convallis convallis. Cras at tortor euismod leo molestie aliquet. Quisque posuere ornare nulla. Proin scelerisque dignissim erat. Donec dapibus euismod est. Nam molestie consequat lacus. Fusce euismod dignissim libero. Morbi laoreet dolor sed mi. Aenean urna diam, malesuada eu, tempor non, euismod sed, arcu. Nullam egestas nisi non nulla bibendum pharetra. Cras pellentesque nunc nec odio. Aliquam sed eros eu lectus congue rhoncus. Praesent accumsan nisl at leo. Sed enim. Integer nisl.

You’re either in front of a client making your pitch or you’re trying to get in front of a client to make your pitch.

You also learn sales is a numbers game. For life insurance agents, the numbers game was the ratio 100:10:3. That meant for every 100 people you actually spoke with, you’d get appointments with 10 of them and sell 3 out of those 10. And that meant I had a phone growing out of my ear. I’d carry around a stack of index cards with names and phone numbers on them. Almost every evening after dinner, I’d retire to the bedroom to make at least 20 telephone calls; most of them cold calls. Yea, those were the days . . .

Every industry/product has its own version of the numbers game. I think it’s a security thing. It helps takes the uncertainty out of being being self-employed. It also helps focus your energy and activity. If I know I need to speak with 100 people this week to make 3 sales, you can bet I’ll be on the phone with at least 100 people trying to get 10 appointments.

Naturally, it’s a tad more complicated than that. Ultimately, the number of sales I make depends a lot upon the makeup of those initial 100 people. If I decide to speak with 100 people who are all over the age of 65, I’ll certainly get much worse results than the life insurance formula suggests. If I were selling long-term care insurance, however, those are the peope I’d want to be in talking to.

It’s not rocket science. It’s merely knowing who your product or service is best suited for and then doing everything you can to engage those people in a conversation. It works pretty much the same way on the web.