Facebook announced a ton of new technology at their F8 Developers Conference yesterday in San Francisco. At the conference they unveiled a ton of new technologies that I think could reshape the web.

This is a “gloves off” move between Facebook and Google. Facebook is claiming they have a better way of determining the relevance of web pages, based on social interactions online rather than by ranking pages based on back links. They call it the Open Graph.

Facebook for Websites

There are a bunch of new Facebook social plugins you can add to your website. One of the things that you can do immediately is allow your visitors to “Like” any web page or blog post on your site by adding a few simple lines of code. You can literally treat URL on your website like a Facebook page!

Here’s an example of a button that shows your visitor who else in their social network “Liked” this page, and allows them to “Like” your page with a comment too.

It’s dynamic – go ahead – Click It!

Adding Facebook Social Plugins to Your Blog (or Website)

Adding one of these to your website is super easy. Just go to the Like Button plugin page at Facebook, and they have a tool that helps you get the code.

Enter in the URL of your page and push the Get Code button and you’ll get the code you can embed on your website. You need to use the iFrame version of the code unless you’ve added the Facebook JavaScript SDK to your site.

What if I want to Add it to ALL my Blog Posts?

That’s cool for an individual page or post on your site, but what if you want to include this on all your blog posts?

Well, if you are using the Thesis WordPress Theme you can use “hooks” and a little WordPress code to easily add this to all your blog posts automatically.

Here’s how to do it.

Thesis conveniently provides a hook called thesis_hook_after_post that allows you to add anything you want after every post on your site. Here’s the code you need to add to that hook to get this new Facebook Like Button to show up at the bottom of every post:


/* Facebook Plugin After Post Hook */
function add_social_media () {
if (is_single()) {
?>
<?php
echo '<iframe src="http://www.facebook.com/widgets/like.php?href=';
echo the_permalink();
echo ' "scrolling="no" frameborder="0" style="border:none; width:450px;height:30px"></iframe>'
?>
<?php
}
}
add_action('thesis_hook_after_post', 'add_social_media');



The WordPress function the_permalink(); gives you the URL of your blog post so that the likes are unique to the particular post instead of your whole blog.

You can add this hook to your custom_functions.php file like this, or using the Rick Beckman’s excellent OpenHook plugin.

If you use OpenHook to do this, you’ll want to leave out the function wrapper and add_action. So the code you paste in the after_post_hook box will look like this:

<?php
echo '<iframe src="http://www.facebook.com/widgets/like.php?href=';
echo the_permalink();
echo ' "scrolling="no" frameborder="0" style="border:none; width:450px;height:30px"></iframe>'
?>



Give it a try and let me know what you think in the comments below!

You can Get Thesis here. I recommend BlueHost for WordPress hosting.

How one small business owner used WordPress and Thesis to outrank big advertisers in her local area

Melanie, the owner of the KeyLargo Fitness and Tanning club in Columbia, MO already had a website, but it was not bringing her any new customers. It was simply acting as an online brochure. She was having trouble updating her website, and it was quickly getting outdated.

To make matters worse, many of her competitors were spending big dollars on TV, radio and print advertising campaigns. What could she do to get the word out about her business without spending an arm and a leg?

A Solution Emerges

She started talking with a friend from her church, Diana, who is a web designer based in Columbia, MO. Diana filled her in on some of the ways she could use her website as a powerful tool to promote her business. Diana explained to her that with the right kind of website, an email newsletter, and some local search optimization she could get results quickly.

They agreed to redesign her website, and Diana brought me in. Together we built a new website for Melanie based on WordPress. WordPress is an ideal platform for building small business websites for a number of reasons (easy to publish content, inherent SEO benefits, and a lot more…)

And because Melanie had some specific design requirements in mind, we chose to customize her site with the Thesis WordPress Theme since it is almost infinitely customizable.

The Results…

The new KeyLargoFitness website started paying off almost immediately.

Before:

• Almost no referrals from the web
• Not in the top 50 search results for local area
• Could not update the website herself
• Broken newsletter signup form

After:

• Ranks #2 for primary keywords (health club columbia mo) in Google 10-Pack, #1 in natural search results!
• 261 local subscribers to her email newsletter (and counting…)
• Easy to update her website without knowing HTML
• Steady stream of new customer inquiries from Google and Yahoo searches

Melanie is very pleased with the results. In her own words:

I just can’t be more pleased with the look and the user-friendliness and the
feedback that we’ve gotten from the new site!

Listen to the Complete Interview

You can listen to an audio interview where Don interviews both Diana and Melanie about the project here:

“Right Click” here to download the PDF transcript

A lot of readers who use the Thesis WordPress Theme have asked me how to add a custom link to the nav menu.

It’s easy to create a new WordPress Page, and get it to show up in your navigation menu. The Thesis Options panel gives you a checkbox for each WordPress Page you create so you can easily add it to the menu.

But what if you want to add a link to something that is not a WordPress Page, or not on your site at all? For example the Forums tab in the navigation menu on my blog links to my Expand2Web forums based on phpBB.

Video: How To Add Custom Nav Menu Items Using Thesis and WordPress

This short video shows you how:

Step-by-Step Instructions

1. Go in to WordPress Admin -> Links -> Link Categories. Add a Link Category called “Additional Menu Items.”
2. Add a new link to the page you want to link to from the menu (in this case, your forum) and assign it the new “Additional Menu Items” category.
3. In your Thesis Options, go to the Add More Links section in the middle column, and the Additional Menu Items dropdown. Select your “Additional Menu Items” category and now all links in that category will show up on your nav menu!

If you are looking for a great WordPress theme, what are you waiting for?
Get Thesis. If you need WordPress Hosting, check out BlueHost for one-click WordPress installs.

If you want to know more about Thesis, check out 9 Reasons to use the Thesis WordPress Theme.

WordPress and Thesis are a powerful combination for building great websites. Some of the hottest blogs today are using Thesis, with new ones converting over every day.

But did you know that you can use Thesis and WordPress to create highly effective small business websites that get great local search results too?

Why Thesis?

In addition to my SmallBiz WordPress theme, the Thesis theme is a valuable tool in my toolbox for building small business websites.

Thesis provides some powerful capabilities that help you build websites that both look good and perform well in the search rankings.

First of all, it is based on WordPress, which is a powerful foundation for building a small business website that is easy to update and search engine friendly.

And Thesis brings benefits to the table over and above that:

• Built-in SEO capabilities. You can set your page title, meta description and keywords for the entire site, and over-ride them on a page-by-page basis.
• Infinite customization. Thesis allows you to add content before or after any section, for the entire website. For example, adding your business address to the footer of every page is a good idea for local search optimization. Thesis enables this and the free OpenHook plug-in makes it easy to do this without any coding.
• Elegant design and readable typography. The out of the box design is simple and elegant. Maybe too simple for some tastes, but the opportunities for customization are compelling. And the typography is set up to be very clear and easy to read. So many of the themes I see have basic Arial and other Sans Serif fonts that are too small to read and are not used consistently throughout the site.
• Powerful options panel. The Thesis Options panel makes it easy to change almost anything on the site – from the number of columns to the font sizes, feature areas, and many other things.
• Easy upgrades. The theme was architected so that all of your code and style changes can be isolated to a single directory. That means when you need to back up your changes or upgrade the theme, all you need to do is save the /custom directory and your upgrade is completely seamless.
• Great support. Thesis has a thriving community, including a support forum that is monitored by a crack staff, a Twitter hashtag (#thesiswp) and many blogs that cover the theme. This means it is easy to get your questions answered quickly.

But What Are The Drawbacks?

The power of Thesis is its flexibility. The design is clean and simple, and a great starting point for customization. By simply adding a header graphic and a few pages you can have a professional looking website.

But the out of the box styling is too simple and plain for many people’s taste. It does require some customization to get it to look unique. So for people who do not want to take on a little bit of work, they might be better served by a theme that has more visual “pop” out of the box.

So if you are a small business owner looking to build a professional website for your business, or a consultant who helps small business owners, take a look at WordPress, and the Thesis theme and decide if it is right for you:

Thesis Demo Site — See the Thesis Theme in action!

Free eBook Guide – Thesis for Small Business Websites

I’ve put together a lot of small business websites using WordPress, and many of them with Thesis. So I wrote this guide to share some of the things I learned. If you are interested in learning how to set up websites with Thesis, this guide will walk you through it step-by-step.

This free 37-page guide walks you through installing WordPress, installing the Thesis theme, and configuring them both to create a professional website for your small business.
 
 

Do you want to add a forum to your WordPress blog that is sporting the Thesis theme? Here’s how!

I’ve wanted to add a forum to Expand2Web for some time. I’m using the Thesis WordPress Theme and am very happy with it. But it does not have a corresponding theme for forum software like phpBB, bbPress or Vbulletin.

Then I stumbled across Chris Coyier’s excellent video that shows how to “skin” phpBB with your WordPress Theme. That gave me the motivation to do this with Thesis and phpBB, which happens to be my favorite forum software.

While this isn’t a Thesis “theme” for phpBB, it allows you to “skin” your phpBB forum to give it the same header and navigation that the rest of your blog has, so that it looks like it is nicely integrated into the rest of your site.

Here’s how you do it.

Step 1: Install phpBB

First, you’ll need to install phpBB. If you are using a hosting provider like BlueHost, they have a SimpleScripts 1-click installer for phpBB.

If not you can still install it as long as your hosting provider supports PHP and MySQL, but you’ll have to download phpBB and install it the long way (which isn’t so bad.) I installed phpBB in the /forums directory off the root of my website.

Step 2: Choose Your phpBB Style

phpBB comes with a very nice style called prosilver. You’ll want to check it out to see if the colors are compatible with your blog colors and styles.

There are a lot of other styles available for phpBB – I ended up selecting and installing prosilver Special Edition because the colors matched with my blog better and I didn’t feel like doing a lot of custom .css work.

Step 3: Modify the phpBB Header

The important files that we’ll be working with in phpBB are the overall_header.html and overall_footer.html files in your forum/styles/prosilver/template directory.

If you installed and activated a different theme than the default prosilver theme, then you’ll want to navigate to the templates directory in that theme instead.

Get your blog header code

Now go to your blog in the browser, and view the source code. Copy out the header section of your blog code, just below the opening body tag. On my blog, that looks like this:

Copy that code to your clipboard or to a text editor, and then open up the overall_header.html in your phpBB style. You’ll want to paste this code in that file right after the opening body tag. Here’s what mine looks like:

Note: The method I used here is “static”; if you change your blog header or navigation menu later you will need to re-copy the html from your blog to phpBB if you want the changes to show up on your forum. If any Thesis gurus out there can tell me how to do this part dynamically I would love to hear from you!

Step 4: Modify Your phpBB Footer

Close Your DIV Tags

Ok, now you need to edit your phpBB overall_footer.html file to close any DIVS that you opened in the overall_header.html file. In my example, I opened two DIV tags, so I just need to insert two closing DIV tags in overall_footer.html just before the closing body tag.

Step 5: Import Your Thesis Style Sheets

Next, you need to make phpBB import the same CSS styles that your blog has.

I found that I only needed the following stylesheets from Thesis:

• wp-content/themes/thesis/lib/css/style.css
• wp-content/themes/thesis/lib/css/nav.css
• wp-content/themes/thesis/lib/css/header.css
• wp-content/themes/thesis/lib/css/widths.php

So I just did a view source on my Blog home page again, and copied these lines. Paste them just before the closing head tag in your phpBB overall_header.html file. It should look like this:

You’ll notice one additional style in there – phpbb.css. There are some CSS IDs in the phpBB styles that have the same name as some of the Thesis styles which causes conflicts.

So I created phpbb.css to override them. I placed it in my wp-content/themes/thesis/custom directory. I took the #header styles out of my Thesis custom.css (I customized my header) and put that code into phpbb.css because I did not want to import custom.css into phpBB to minimize conflicting styles.

You’ll want to import it into your phpBB overall_header.html like your other Thesis styles.

Here is a link to my phpbb.css so you can download it and use it for your phpBB too. (You’ll want to remove my header image from this though.)

If you’ve made a lot of changes to your Thesis theme, you may have to adjust some other .css to get everything to look right. If you do, just override styles in the phpbb.css file.

The custom directory is one of the very cool features in the Thesis theme. It allows you to place all of your theme customizations in one place so that when you upgrade Thesis, you can do it seamlessly and preserve all of your customizations.

Clearing the phpBB Cache

Here’s a tip I learned the hard way: when working with phpBB, remember that it caches the html files after you view them (but not the CSS.) So while you are making changes to overall_header.html and overall_footer.html, you need to clear the cache before you’ll see your changes show up.

To do this, go to the /forums/cache directory and delete the tpl_prosilver_overall_header.html and tpl_prosilver_overall_footer.html files each time you make a change and want to test it.

Update: Here’s an excellent tip @wGEric left in the comments – In phpBB3 under Load Settings there is an option called “Recompile stale style components:”. Set that to yes and you won’t have to clear the cache after every change. phpBB3 will not use the cache if there have been changes made to the file.

Whew! Well if you’re still with me, you should have a nice new forum that has the same header and navigation as the rest of your Thesis styled blog.

Please let me know your comments, suggestions and experiences in the comments below.

Update #2: I’ve moved away from phpBB to SimplePress for my forums. I found that phpBB was too much of a target for hackers and it was way too much work to keep up with and protect.

Are you looking for a WordPress Theme to style your website with? There are so many great free and premium themes available – the choices can be overwhelming. Which one should you use?

I’ve used quite a few premium and free WordPress themes developing WordPress websites for small business clients, including Revolution, WP-Remix, iThemes, K2, Misty Look, Cutline, Regulus and many others.

But I’ve chosen Thesis for most of my WordPress theme work now. Why? Here are nine good reasons to use Thesis.

1. The Thesis Options Panel

One of the first things I look for in a premium WordPress theme is a good configuration options panel in the WordPress Admin UI.

Thesis has the most comprehensive one I’ve ever seen. You can customize everything from the navigation menu and page titles to your RSS feed and how your archives page shows up.

2. Less PlugIns

One of the great things about WordPress is that you can extend the functionality in almost any way you can think of with WordPress Plug-ins. But if you rely on too many plug-ins, performance of your site can suffer.

Part of the design philosophy of Thesis is to make the theme as lightweight as possible. As a result, some of the capabilities that you would normally use plug-ins for are built into the theme.

For example, the Thesis Options panel has a field for your Google Analytics code, so all you have to do is paste it in there instead of using a plug-in (Google-Analytics-For-WordPress plugin) or editing your footer.php code directly.

Thesis also allows you to specify which of your ‘Pages’ show up on the navigation menu, another capability that typically requires a plug-in (Exclude-Pages plugin) or editing php code to accomplish.

Thesis also allows you to gain control over the title of your posts and pages, and even specify keywords, but is still missing a few SEO related tweaks I’m looking for, so I’m still relying on a plug-in for that. But the next version promises to solve this too.

3. Hooks

The Custom Hooks architecture of Thesis provides a sort of API that allows you to add to, subtract from or modify the functionality of your Thesis installation. (See this very cool diagram from Kristarella that shows you all the places you can customize with hooks.)

It allows you to isolate all of your custom HTML changes to a single file called custom_functions.php. This makes your Thesis installation easy to customize, and easy to upgrade, which is usually a very complicated process if you’ve modified the markup and code in a theme to customize it.

The hooks approach is really killer. SugarRae’s Hooks for Dummies is a great walk-through of how they work (along with some specific examples), and OpenHook by Rick Beckman simplifies the way you work with hooks by providing an admin panel for it.

4. Layout Options

In addition to the Options panel, Thesis provides a Design Options panel that allows you to quickly change the number of columns, widths, fonts and font sizes. This gives your website dynamically re sizable layout that you can change instantly. Want to change the font or font size of your entire site? This panel make it a piece of cake.

5. Rich Style Classes

This is a little thing, but I use it all the time. Thesis provides some CSS classes that you can use in your posts and pages to make your content easier for your readers to scan. Here are a few examples:

Here is an example of the Note class

And here is the Alert class

You can even do drop caps very easily!

But the one I use the most – you can add the “frame” class to any image and it will frame it with a nice light gray background (the images in this post have this class applied.)

6. Easy Upgrades

In other themes I’ve customized, upgrading to a newer version of the theme has been a lot of work. You have to keep track of all the files where you’ve made changes to the HTML, CSS and PHP, copy that code, and then re-apply it when you upgrade to a newer version of the theme.

Thesis solves this by providing a “custom” folder that contains CSS, PHP, and images that you can use to over-ride styles and functionality in the theme.

This means that all of your customizations live in one place, and when you upgrade to a newer version of Thesis, all you have to do is copy this directory over and you are in business. I’ve done this on two version upgrades of Thesis and it works like a charm.

7. Awesome Community Support

When you buy Thesis, you get access to a reasonable set of documentation and a great support forum that is frequented by some super knowledgeable and super nice people – KingdomGeek and Kristarella are prolific contributors both in the forums and on their own blogs.

8. Continuous Improvement

Thesis is continuously being upgraded. You’ll never be able to pin down Chris Pearson for the date of the next version, but it will come.

Support for WordPress 2.7 happened almost right away. And the next version of Thesis – 1.4, promises to include the rest of the SEO mods I’ve been waiting for, allowing me to eliminate yet another plug-in (All-In-One-SEO plugin, which I really like, but once the theme supports this I will no longer need it.)

9. The Price!

At $87 this theme is a steal. This is right in the price range of most premium themes, but is way more comprehensive. It has saved me countless hours and was well worth the money.

What About You?

So these are the primary reasons I’m using Thesis for most of my projects. What about you? Are you using Thesis, or is there another theme that you like? I’d love to hear about your experiences in the comments below.

If you are looking for a great WordPress theme, what are you waiting for?
Get Thesis. If you need WordPress Hosting, check out BlueHost for one-click WordPress installs.