We’re using these plugins on a daily basis, some of them are simply essential for every website (All In One SEO Pack, Google XML Sitemaps, cformsII, Insights, Search Everything), some of them we’re using in particular cases (WP-PageNavi, NextGen Gallery, Flash Video Player) and some we used only once so far (WP AutoSuggest, WP-Syntax, WP-Polls, Twitter Tools).

OK, here’s the list:

Essentials

All In One SEO Pack

All In One SEO Pack is a must-have plugin if you are serious about SEO for your website. It works out-of-the-box so once installed you don’t have to look on it. What it does automatically:

• Automatically optimizes your titles for search engines
• Generates META tags automatically
• Avoids the typical duplicate content found on Wordpress blogs
• You can override any title and set any META description and any META keywords you want.
• And more…

However, if you want it offers you options to fine-tune almost all website parameters that are responsible for perfect Search Engine Optimisation.

Download All In One SEO Pack. Read more about the features.

Google XML Sitemap

This plugin will create a Google sitemaps compliant XML-Sitemap of your WordPress blog. It supports all of the WordPress generated pages as well as custom ones. Everytime you edit or create a post, your sitemap is updated and all major search engines that support the sitemap protocol, like ASK.com, Google, MSN Search and YAHOO, are notified about the update.

Use it carefully though. Long story short, we deployed new Wordpress website on the client’s server but it wasn’t visible to the general public yet. All essential plugins were installed, Google XML Sitemaps as well. Before website was populated with content by the client people were able to find it and use it, especially booking form was used (this is a dental practice website)!

Download Google XML Sitemaps. Google XML Sitemaps Homepage.

cformsII

cforms is a powerful and feature rich form plugin for Wordpress, offering convenient deployment of multiple Ajax driven contact forms throughout your blog or even on the same page. It enables you to create forms and use anywhere on your website. Forms can be as simple as name, email and message or as complex as multiple page surveys. It’s very powerful plugin.

Download cforms plugin.

Insights

Insights it’s a plugin that extends functionality of Wordpress administration panel. Did you ever think about how to easily add interlink between your posts or pages, flickr images, YouTube videos, results of Google searches or Google Maps? If you can answer yes to any of these questions then Insights is a plugin for you. Insights allows you to do all this using dynamic AJAX interface which loads the relevant information to your post in just a few seconds.

A practical example is a website for estate agent who can now illustrate every property on one’s website with detailed location map (the only one disadvantage is that generated map is static).

Search Everything

Search Everything increases the ability of the default Wordpress Search. It includes:

• Search Highlighting
• Search Every Page
• Search Every Tag
• Search Every Category
• Search non-password protected pages only
• Search Every Comment
• Search only approved comments
• Search Every Draft
• Search Every Excerpt
• Search Every Attachment (post type)
• Search Every Custom Field (metadata)
• Exclude Posts from search
• Exclude Categories from search

Useful but not essential

WP-PageNavi

First of non-essential plugins, WP-PageNavi. It does exactly what it says, creates pages navigation you can customize and match with your design. Simple and effective.

Download WP-PageNavi plugin. Read more about WP-PageNavi plugin.

NextGen Gallery

NextGEN Gallery is a full integrated Image Gallery plugin for WordPress with a Flash slideshow option.

• Templates : You can add custom templates for your theme.
• Media RSS feed : Add the Cooliris Effect to your gallery
• Role settings : Each gallery has a author
• AJAX based thumbnail generator : No more server limitation during the batch process
• Copy/Move : Copy or move images between galleries
• Sortable Albums : Create your own sets of images
• Upload or pictures via a zip-file (Not in Safe-mode)
• Watermark function : You can add a watermark image or text
• JavaScript Effect : Use any available popular image effect : Shutter, Thickbox, Lightbox or Highslide
• and even more features…

Download NextGen Gallery plugin. Read more about NextGen Gallery plugin.

Flash Video Player

The flash video plugin for WordPress allows the addition of video (and other media) to a WordPress website using standards-compliant markup and the leading open source software (Jeroen Wijering’s FLV Player and Geoff Stearns’ SWFObject Javascript Library). A full options menu is available with post-level overrides for endless customization. Installation is quick and easy, and no additional setup/coding/php knowledge is required. This plugin is low footprint, creating no tables, and uninstalling cleanly. Version 3 provides full support for skinning the player as well as video player plugins.

You can see it in action here and here (with captions).

Download Flash Video Player plugin. Read more about Flash Video Player plugin.

Special Plugins

WP AutoSuggest

WP AutoSuggest adds the Auto Suggest support to the WordPress search. The visitor can enter a keyword and the plugin will show him a few suggestion via an AJAX request before submitting the search query. The visitor can continue his search by pressing enter or he/she can use the keyboard arrows (up and down) to visit directly a suggested post.

See it in action! Just type anything in the search box at the top of the page.

Download WP AutoSuggest plugin. Read more about the WP AutoSuggest plugin.

WP-Syntax

WP-Syntax provides clean syntax highlighting using GeSHi — supporting a wide range of popular languages. It supports highlighting with or without line numbers and maintains formatting while copying snippets of code from the browser.

It avoids conflicts with other 3rd party plugins by running an early pre-filter and a late post-filter that substitutes and pulls the code snippets out first and then pushes them back in with highlighting at the end. The result is source code formatted and highlighted the way you intended.

Download WP-Syntax plugin. Read more about WP-Syntax plugin.

This is it, a list of essential and not-so essential plugins that we use in almost every project that involves Wordpress. Suggest your essential plugins in teh comments!

Did you ever experienced hard times trying to get your hand crafted Wordpress website transferred from your local test environment to the destination server? Did you spend countless hours trying to make things work? If you can answer yes to these questions then this article is for you. I’ll explain in plain English how to make a smooth transition from you localhost to the destination server.

Before we begin, I need to make some assumptions:

• You have your website working perfectly on your local machine.
• Local environment is either a PC or Mac on which you run a web server with PHP and a MySQL database and you have access to phpMyAdmin.
• Destination server runs Apache or IIS, you have FTP details, access to phpMyAdmin, database server name, database name, database user name & password.
• Other configurations may work as well.
• It doesn’t matter which version of Wordpress you are using.

Also, a quick “executive summary” of all the steps below:

1. Export your local Wordpress database to a text file.
2. Search and replace http://localhost/yoursite with http://www.yoursite.com
3. Create a database on your destination server and import your database.
4. Copy all files from your local machine to destination server and amend wp-config.php file with new database details.
5. If necessary change file and folders permissions so Wordpress will be able to use them.

Step 1 – Export Local Database To Text File

Open up your browser and access phpMyAdmin and select your website database from the drop down box on the left. This may look like this:

Step 1a (click to enlarge)

Go to Export section (click on the Export tab at the top). Depend on your version of the phpMyAdmin this section may look bit different but the functionality will be the same.

Click ‘Select All’ in the Export form. All tables should be selected now. Leave other options as they are. Navigate to the bottom and tick ‘Save as file’ checkbox. Click ‘Go’.

Step 1b (click to enlarge)

Step 1c (click to enlarge)

File save dialog will appear. Click OK and save that SQL file on your computer. Step 1 completed. Get yourself a coffee.

Step 1d (click to enlarge)

Step 2 – Search & Replace

Now, we have to change your database export file and find & replace all URLs that contain http://localhost/yoursite with http://www.yoursite.com

I’m using Dreamweaver but you can use any text editor to do the same.

Step 2a (click to enlarge)

We have to change another line as well. Find line C:\\Program Files\\xampp\\htdocs\\yoursite/wp-content/uploads and strip it down to /wp-content/uploads and finally save your SQL file.

Step 2b (click to enlarge)

Step 3 – Import Information Into Destination Server Database

On your destination server you have to create database for your WP installation. It may look like this screen below (assuming you’ll be using phpMyAdmin) However in most cases you’ll have to log onto your server administration panel and create database, user and password from there. It varies from provider to provider so please refer to your hosting provider help section.

Step 3a (click to enlarge)

Now as you have your database created you should populate it with your data. Click on the Import tab at the top of the page. Click on Browse in the ‘File to import’ section and select your amended SQL file. Click Go to proceed.

Step 3b (click to enlarge)

If everything went well you should see table names on the left hand side and a message saying something similar to this: ‘Import has been successfully finished, 162 queries executed.’ You’re done and deserve another coffee.

Step 3c (click to enlarge)

Step 4 – Upload Wordpress Files

In this step you should use your favourite FTP client to upload all files to your destination server. If you created a brand new website than you can upload everything including index.php file. If you upgrading an existing website then you have to make sure that it will work until you launch your WP website. DON’T DELETE ANY FILES that belongs to your existing website. Make sure your Wordpress website works first, then you’re safe to delete the old files.

To make your website work you should update wp-config.php file with your database details: database name, database server address, database user and password. Once done, you should be able to see your new website at http://www.yoursite.com/

Now, you have to test if you can login to the administration panel. So type in http://www.yoursite.com/wp-admin/ to find out. If you can see WP admin login screen you’re half way there. Type in your login details and login. If you’re successfull you should see WP Dashboard.

That’s it. You’re done.

Step 5 – Fine Tuning your Wordpress website

Few other thing you should take care of:

• Make sure that you can upload any new images or documents. If you can’t it means that you have to change files/folders permissions and give Wordpress read/write right for necessary folders.
• Check if your permalink structure works. Amend if necessary.
• Make sure you’re running the latest version of Wordpress and upgrade automatically to the newest one where possible.
• Check if you have installed latest versions of any plugins that you’re using. Be careful though! Some plugins require PHP5 to work properly or require additional libraries to be enabled. Check this prior to any upgrades.

How This Was Done?

Firstly, Wordpress is a second to none platform when you are looking to get the best out of  Search Engine Optimisation. Secondly, you can also utilize plugin called All In One SEO Pack to get more control over title tag and keywords and description meta tags. What this plugin does? It enable you to change meta tags for your website homepage and and also for any other page on your website, whether it’s a static page or blog post. Simply brilliant!

Next Step

Contact Revolution Media if you want to know more about Wordpress, plugins like All In One SEO Pack and how these can help you to get more out of your website! Just fill in the form below and we’ll be in touch shortly.

cforms contact form by delicious:days

I was redesigning Unified Communications website and my goal was to make it similar to CDSoft website. CDsoft’s website is based on Wordpress engine but it is using templates extensivelly to make Flash Tab Menu work properly (I know, it could be done better). Anyway, I didn’t want to create another flash menu for the UC website and wanted to make it look consistent at the same time.

UC website is based on Wordpress but it has less content and it’s focused only on one solution CDSoft provides, the Unified Communications from Microsoft.

Let’s start then. First, I’ve placed my main menu into header.php and this is how it looks:

<div id="main-nav">
<ul>
<?php wp_list_pages('title_li=&depth=1'); ?>
</ul>
</div>

So, let’s have a look on how generated HTML code looks like:

<div id="main-nav">
<ul>
<li class="page_item page-item-6"><a href="http://localhost/unified/index.php/about-uc/" title="About UC">About UC</a></li>
[...]
</ul>
</div>

I need my menu items to be highlighted on HOVER and to be highlighted same way when a section is selected. This highlight is that subtle gradient. Also I want each menu item to have a different icon. I decided that highlight will be done through a:HOVER and icons will be done through a span. So I need to have <span></span> added around menu name. With Wordpress you can do it easily by using wp_list_pages() options. Here’s how it looks now.

<div id="main-nav">
<ul>
<?php wp_list_pages('title_li=&link_before=<span>&link_after=</span>&depth=1'); ?>
</ul>
</div>

OK, so by default, without any styling our menu looks like this:

Menu without styling

So, we need to add some styling now and here it goes:

#main-nav {
width: 920px;
height: 161px;
margin: 0 20px;
overflow: hidden;
background: url("img/bgnd-main-nav.gif") bottom repeat-x;
}
#main-nav ul {
margin: 0 0 0 26px;
}
#main-nav ul li {
list-style: none;
display: inline;
}
#main-nav ul li a {
display: block;
float: left;
width: 120px;
height: 128px;
margin: 0 2px;
color: #333;
text-decoration: none;
}
#main-nav ul li a:HOVER {
background: url("img/bgnd-menu-item-hover.gif") repeat-x;
}
#main-nav ul li.current_page_item a,
#main-nav ul li.current_page_parent a {
background: url("img/bgnd-menu-item.gif") repeat-x;
}

This styling produces menu that looks like this:

Now, I have to style that <span> element and add classes for icons. Complete CSS code looks like this:

#main-nav {
width: 920px;
height: 161px;
margin: 0 20px;
overflow: hidden;
background: url("img/bgnd-main-nav.gif") bottom repeat-x;
}
#main-nav ul {
margin: 0 0 0 26px;
}
#main-nav ul li {
list-style: none;
display: inline;
}
#main-nav ul li a {
display: block;
float: left;
width: 120px;
height: 128px;
margin: 0 2px;
color: #333;
text-decoration: none;
}
#main-nav ul li a:HOVER {
background: url("img/bgnd-menu-item-hover.gif") repeat-x;
}
#main-nav ul li.current_page_item a,
#main-nav ul li.current_page_parent a {
background: url("img/bgnd-menu-item.gif") repeat-x;
}
#main-nav ul li a span {
width: 120px;
height: 18px;
overflow: hidden;
padding: 110px 0 0 0;
display: block;
}
#main-nav .about-uc {
background: url("img/menu/microsoft-uc.png") top center no-repeat;
}
#main-nav .products {
background: url("img/menu/round-table.png") top center no-repeat;
}
#main-nav .accessories {
background: url("img/menu/plantronics.png") top center no-repeat;
}
#main-nav .ip-phones {
background: url("img/menu/uc-phone.png") top center no-repeat;
}
#main-nav .faq {
background: url("img/menu/faq.png") top center no-repeat;
}
#main-nav .blog {
background: url("img/menu/blog.png") top center no-repeat;
}
#main-nav .about-cdsoft {
background: url("img/menu/about-cdsoft.png") top center no-repeat;
}

Menu with added <span> styling looks like this (note that no icons are displayed yet):

Styling of <span> element moved the page title to the bottom leaving space for menu icons. Now it’s time to add these colorful icons to the menu. We’ll use simple jQuery function that can be placed in header.php file. Here’s the code:

<script type="text/javascript">
$(document).ready(function() {
equalHeight($(".column"));

var menus = new Array("about-uc", "products", "accessories", "ip-phones", "faq", "blog", "about-cdsoft");
for (j=0; j < menus.length; j++){
//$("#main-nav li:eq("+j+") a span").addClass(menus[j]);
}
});
</script>

And this is how our menu looks like now:

Visit Unified Communications website for more detailed look on how this works.

Enjoy!