The bottom line is that better tools save us more time.  In an industry with extremely low overhead, our time is the most valuable thing we as web developers can offer.  Time and knowledge is what our clients pay us for.  That being said we need to capitalize on both.

Being that WordPress and its array of plugins are constantly changing and being updated we need a way to quickly install WordPress AND the plugins of our choice with a few clicks.  Manually creating a database and uploading files takes too long.  However Plesk’s application packages are not always up to date.  So how can we accomplish this and better capitalize on our time?  Simple – we create an updated version of an existing Plesk package.

Let’s proceed.

Creating the Plesk Application Package

Get the initial application package. Lets fly over to apsstandard.org and download the most current WordPress application package.  This file must be opened with a standard ZIP extracting program.  Upon opening the file we see that the directory structure is very simple.  All we’ll be worrying about is the htdocs folder.  This folder houses all the content that will be installed on the server.  You will notice immediately that the files listed resemble a pretty standard WordPress installation.

Copy all your plugins to the WordPress plugins folder. Yes.  Its really that simple.  If you use 7-Zip like me you’ll be able to simply drag and drop the files of your choice to the /wp-content/plugins folder and the archive will automatically rebuild itself.

Uploading the Plesk Application Package

This is where everything comes together.  Follow to steps below and refer to the appropriate images for guidance.  Also please notes that this procedure was done in Plesk 8.6.0.

1. Click on Server

2. Click Application Vault

3. Click on Add New Application Distribution Package

4. Select the our newly created application package

After the application loads you’ll see a newly created WordPress Package under the other category.  Be patient while uploading as this will take a few minutes.  Once its done, you’re done!  If you need help installing a web application, refer to planetsmb.com’s article on this.

See NEWD’s Application Package

This is our most current application package.  We do use several premium plugins that I have removed but there are enough resources to keep one occupied and clearly illustrate the benefits.

Download Plesk Application Package

When a new lead is captured through your web site requesting your company’s services it is important to consider how much or how little information you require to know before engaging the potential client. Be sure to ask for vital information up front, it is important to know who their point person or decision maker is for this potential project. Have your sales  lead state what the problem is that they are looking to solve or processes in which the hope to improve upon. Consider capturing with your online forms whether or not they have established a budget and if they have considered a time frame. Inquire to know what their products and services are? You can also learn more about there company by knowing who their immediate industry competitors are. In order to improve the success rate for a complete form submission you should avoid asking questions that might be of a technical nature or irrelevant to their over all needs.

Offer a Free Consultation.

An initial consultation in most cases should be a free service to your potential clients be sure to project this belief within your marketing materials.  Time is money, so try not invest no more than thirty minutes in research time and an hour directly engaging the client. Once a sales lead has submitted their information the potential client should get immediate feedback within the web page acknowledging that their submission has been captured successfully and what the anticipated turn around time for a consultation might be. Avoid using terms like sales associate or sales person, try using terms like consultant or specialist, the client will feel more like there going to be engaged by someone with a greater background of field experience and would be less likely subjected to a pushy sales pitch. An auto-responder is critical to keep the ball rolling while you investigate the lead. An auto-responder should reflect your company’s branding, have an appropriate subject heading and provide a copy of their form submission, the submission should also have the complete contact information for your business.  Furthermore, being able to post this captured information dynamically to a database is ideal for following up and following through with a sales lead. Have these records accessible when you attempt to contact the lead direct.

Know Your Facts.

Invest a predetermined amount of time into gathering your facts based off the initial form submission. Qualify your lead, be sure that your the right solution for the client, otherwise be ready to offer up alternative solutions or suggest turning over the lead to a qualified affiliate. This case scenario can improve your networking circle and you might still be able to profit from the experience as a consultant or benefit from a lead referral commission. Write up a list of potential questions you might have in order to be able to moderate an engaging experience, make your first impression a lasting impression. Following up on a sales lead is always a time sensitive matter. Always keep in mind that a qualified lead is shopping out your competitors as well.

Building the Menu

First things first.  Include the necessary files in the header section of your document.  The code for your header should look something like this:

<!-- Menu Includes -->
	<script type="text/javascript" src="jquery.js"></script>
	<script type="text/javascript" src="default.js"></script>
	<link rel="stylesheet" href="menu.css" type="text/css" />
<!-- End Menu Includes -->

Simple enough right?  As always please make sure that your script are declared in THIS order.  The stylesheet declaration can go anywhere but, if the scripts do not appear in the necessary sequential order, this process will not work.

Step 1 – Create the XHTML

Now that we have all our scripts in place, we need to actually build the menu.  In the example in the graphic above, the menu code looks as such:

<div id="nav" class="left">
	<ul>
		<li><a href="/news/" title="News">News</a></li>
		<li><a href="/about/" title="About Us">About Us</a></li>
		<li><a href="/events/" title="Calendar">Calendar</a></li>
		<li><a href="/bands/" title="Bands">Bands</a></li>
		<li><a href="/venues/" title="Venues">Venues</a></li>
		<li><a href="/services/" title="Services">Services</a></li>
		<li><a href="/photos/" title="Photos">Photos</a></li>
	</ul>
</div>

Another simple setup!  The menu is a simple unordered list.  Our desired effect could be accomplished using an ordered or definition list but, we’ll stick with the popular unordered list.

Step 2 – Create the JavaScript

This is where the magic happens (please no MTV Cribs references).  The code is ultra lightweight and because we’re using the jQuery Library, ultra efficient.  Let’s take a look at the code below.

jQuery(document).ready(function($){
	$('#nav ul li').prepend('<div class="menuslide"></div>');
	$('#nav ul li').hover(
		function() {
			$('div.menuslide', this).fadeIn(300);
		},
		function() {
			$('div.menuslide', this).fadeOut(300);
		}
	);
});

This probably deserves an explanation.  If you are unfamiliar with JavaScript libraries or jQuery, this code probably looks very foreign to you.  Either way, let’s step though this line by line.

Line 1 - The first thing we must ALWAYS do following modern web development techniques is to attach a load event to the XHTML page.  However we do not want to use a window.load event.  The reason for this is that window.load executes AFTER all images are loaded on the page.  This can be CRUCIAL with certain things.  So the fix is to use jQuery’s .ready event.  This will now execute all nested code inside the event BEFORE the images have loaded.  Another benefit using this technique is that we now have created a completely separate JavaScript layer apart from the main page.  We like to avoid putting JavaScript on any pages.  Sometimes there are scenarios where this is NOT the case but, we should do our best to avoid it at all costs.

Line 2 - This line of code adds some XHTML code to each one of our menus.  By doing this we have created a div inside of the li element.  This div will contain the graphic that will appear behind our menu text.

Lines 3-10 – This block of code is responsible for making our menu look awesome.  We start off by attaching a hover event to each one of our li menu items.  The hover event is capable of executing code when the user puts their mouse over the element AND when they move their mouse off the element.  The two nested functions handle the animations effects for both of the aforementioned events.  Be sure that you utilize the this keyword in your selector.  Otherwise the ENTIRE menu will end up being highlighted regardless of which menu item you are hovering over.

Step 3 – Adding in your CSS

Okay!  This is the last step and then we are finished!  Drop this CSS in your menu.css file to make all of this work the way it should.  It looks a little something like this:

#nav {
	width: 160px;
	height: 500px;
	background-image: url(images/bkg_page_left.jpg);
	background-repeat: no-repeat;
	background-position: 13px 0;
	color: #fff;
	text-align: right;
}
#nav ul {
	list-style: none;
	margin: 12px 0 0;
}

#nav ul li {
	display: block;
}

#nav ul li a {
	text-transform: uppercase;
	font-size: 24px;
	padding: 10px 30px 8px 0;
	margin: 0 0 30px;
	width: 130px;
	display: block;
	color: #fff;
	z-index: 20;
	position: relative;
}

.menuslide {
	position: absolute;
	display: none;
	width: 160px;
	height: 36px;
	background-image: url(images/bkg_menu.jpg);
	background-repeat: no-repeat;
	z-index: 1;
}

#nav {
	width: 160px;
	height: 500px;
	background-image: url(images/bkg_page_left.jpg);
	background-repeat: no-repeat;
	background-position: 13px 0;
	color: #fff;
	text-align: right;
}
#nav ul {
	list-style: none;
	margin: 12px 0 0;
}

#nav ul li {
	display: block;
}

#nav ul li a {
	text-transform: uppercase;
	font-size: 24px;
	padding: 10px 30px 8px 0;
	margin: 0 0 30px;
	width: 130px;
	display: block;
	color: #fff;
	z-index: 20;
	position: relative;
}

.menuslide {
	position: absolute;
	display: none;
	width: 160px;
	height: 36px;
	background-image: url(images/bkg_menu.jpg);
	background-repeat: no-repeat;
	z-index: 1;
}

There are several important things to notice here.  The first thing would be the CSS definitions for .menuslide.  We want display:none to keep the menu hover from displaying immediately.  Also note position:absolute.  This is set as such so that the background image appears directly behind out text.

Some of the code is part of the CSS of the actual site.  For a full working demonstration, please go to www.blackarrowsoundonline.com.

Conclusion

We now have some tools under our belt that will help us make a quick and pretty slick menu.  We accomplished this with some pretty standard XHTML, about 15 lines of JavaScript and some basic CSS classes.  I hope you can find this useful!

How do I get Adwords certified?

First off, you have to have met the requirements for the program. I found it easiest to understand the features of your Adwords account and how to best optimize your clients’ results by studying key topics in the learning center. After meeting all requirements to take the test, the next thing to do was study. That’s where I found things to be a little tricky.

Preparing for the Adwords exam

I thought it best to see what others had said about the Adwords exam by searching blogs, and trying to find any up to date articles. Most of the information was outdated from about 2007 (before the change in interface) but whether older or more recent, they all said about the same. If you pass all the learning center practice questions, you will pass the actual exam. Headed back to Google, I found that you can study the material in quite a few ways. In the designated learning center, you have two options for studying; multimedia and text lessons. I would most definitely recommend reviewing both as the text lessons and multimedia lessons vary, and I found that there was actually more topics in the text lessons as opposed to the multimedia lessons.

There is also a second “learning center” called the Google Advertising Fundamentals Exam Learning Center. Google claims, “This Learning Center contains all the information you’ll need in order to pass the Google Advertising Fundamentals Exam.” GREAT, I thought. A mixture of studying both learning centers is obviously ideal, but does it really matter?

Taking the actual test…

Well according to this test, apparently not. I studied all topics, made notes, and even reviewed a second time over all material. However come test time, you can imagine how shocked I was to find outdated questions, repeated questions, and typos on the test. My test was 110 questions long, and I passed on the first try, October 19th, 2009, with the new Adwords interface. The list of changes that were made to the interface over the past few months were always on the left side of my account, but I figured since I started with the new interface, that the test would update as well. Wrong. Unfortunately, the test had multiple questions about tabs that no longer existed and features that have updated far beyond their previous state. Even while taking the test, and having the Adwords Help search open on my second monitor, the search could not even find anything related to what I was looking for!

I actually find it shocking that this Google exam, which can be so heavily weighted for one’s career, could be outdated. Plus, I am trying to become a Google Advertising Professional on a test with typos? Doesn’t seem right.

Is it worth it?

Despite my qualms with the exam, I think it is still very beneficial to become Adwords certified, and so do employers. One must study the whole program on a high level, and prove that they can run a successful campaign. Doing both will not only get you certified, but provide a better and professional service to your clients. I am proud to show the Google image like a badge of honor because I feel that it is a good representation that I am willing to work hard and not only make myself a success individual, but make my clients’ businesses successful. Talk about a win-win!

Adwords Exam Tips

If you are about to take the exam, or are considering doing so, there are a few things I would recommend.

1. Study all learning centers! Everyone recommends it, and for a good reason. The more you know, the better prepared you will be.
2. Pay attention to what you are doing. There are some questions that I had regarding what was under each tab. If you thoroughly browse through your account and all the tabs regularly, you’ll know what to find what the test is asking you for.
3. Think of scenarios. I know at least for my test, I was asked a lot of scenario questions. Make up a scenario and figure out how you would solve it. Then you will know what you can and cannot do.
4. Study the billing. I too was an individual who had lots of billing questions so make sure you know exact billing processes and payments.
5. Open multiple tabs. Even easier if you have a second monitor! If you get stuck on a question, you can use the search to help you!
6. Don’t rely on multiple tabs. ACTUALLY STUDY. Yes, you can have the assistance of the search, but you will never be able to pass just using that.
7. Don’t stress over the time. You have 1 hour and 30 minutes to take about 110 questions. That is more than enough time! If you are unsure of an answer, press the check box in the upper right hand corner to tag it for later review and move on to the next question. At the end of the test, you can revisit any questions you were unsure of and have the opportunity to put in an answer. (Plus, you get the chance to answer the questions you KNOW instead of wasting time on the questions you DON’T!)
8. RELAX! I was so nervous taking my test, but it really is not that bad as long as you came prepared. Study thoroughly, relax, and answer the questions to the best of your ability, and you will do fine on the exam. Yes, it is $50 every time you take it, but you have 2 opportunities a month to take the test, and you can continue to take it until you pass. Plus remember, once you passed, YOU PASSED! All that’s left to do is show off your snazzy Adwords Qualified Individual image, and put into action all the things you worked so hard on learning!

Google Adwords Success

They feature this video lots of places, but I absolutely love it. What a great story, and great example of how Adwords can better your business!

The Solution

Simple!!  WordPress has a conditional tag called post_password_required.  The function returns FALSE in 2 situations:

1. Once the user has typed the correct password into the password field
2. If the saved cookie has not expired and let’s the user view the page without typing in the password

Its pretty simple.  It took a LOT of digging through the WordPress forums, codex and google searches but, eventually I found it.

Example Code

Check out the example below to see how I can display the following dynamic content areas, ONLY when the user has entered a password.

if (have_posts()) : while (have_posts()) : the_post(); ?>
 <h1><?php the_title(); ?></h1>
 <?php the_content(); ?>
 <?php endwhile; endif; ?>
 </div>
 <div id="rightcolumn">
 <?php
 if (!(post_password_required())) {
 global $pagename;

 switch ($pagename) {
 case 'employee-area' :
 query_posts('category_name=employee-news&showposts=3');
 $pageTitle = 'Employee News';
 break;
 case 'managers-area' :
 query_posts('category_name=managers-news&showposts=3');
 $pageTitle = 'Manager\'s News';
 break;
 }
 } else {
 query_posts('showposts=3&cat=3');    
 $pageTitle = 'Latest News Articles';
 }
 ?>

 <h3><?=$pageTitle ?></h3>
 <?php if (have_posts()) : ?>
 <?php while (have_posts()) : the_post(); ?>
 <h4><?php the_title(); ?></h4>
 <div><?php the_excerpt(); ?></div>
 <a href="<?php the_permalink(); ?>" title="<?php the_title();?>">read more &raquo;</a>
 <br />
 <br />
 <?php endwhile; ?>
 <?php else : ?>
 <p>There are no recent posts.</p>
 <?php endif; ?>

If there are any questions to how to use this, please feel free to comment!!

The Code

We’ll start off with the code first.  And then explain what everything does second.  Please note that this is a page.php template file.

<?php get_header(); ?>

 <div id="content">

 <?php if (have_posts()) : ?>

 <?php while (have_posts()) : ?>

 <?php the_post();  ?>

 <?php if ($pagename=='news') : ?>

 <h1>Latest News Articles</h1>

 <?php the_content(); ?>

 <?php $newQuery = new WP_Query('category=news'); ?>

 <?php if ($newQuery->have_posts()) : ?>

 <?php while ($newQuery->have_posts()) : ?>

 <?php $newQuery->the_post(); ?>

 <div>

 <strong><?php the_title(); ?></strong><br />

 <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">read more &raquo;</a>

 </div>

 <?php endwhile; ?>

 <?php else : ?>

 <p>Sorry!!  There are no news articles here.</p>

 <?php endif; ?>

 <?php else : ?>

 <h1><?php the_title(); ?></h1>

 <hr />

 <?php the_content(); ?>

 <?php endif; ?>

 <?php endwhile; ?>

 <?php endif; ?>

 </div>

<?php get_footer(); ?>

The Explanation

<?php get_header(); ?>

 <div id="content">

 <?php if (have_posts()) : ?>

 <?php while (have_posts()) : ?>

 <?php the_post();  ?>

The standard WordPress Loop – The first part of the code as seen above is pretty standard.  Nothing out of the ordinary here.

<?php if ($pagename=='news') : ?>

 <h1>Latest News Articles</h1>

 <?php the_content(); ?>

 <?php $newQuery = new WP_Query('category=news'); ?>

 <?php if ($newQuery->have_posts()) : ?>

 <?php while ($newQuery->have_posts()) : ?>

 <?php $newQuery->the_post(); ?>

 <div>

 <strong><?php the_title(); ?></strong><br />

 <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">read more &raquo;</a>

 </div>

 <?php endwhile; ?>

 <?php else : ?>

 <p>Sorry!!  There are no news articles here.</p>

 <?php endif; ?>

The second and nested loop – Alright.  This is where things might get a little tricky.  Firstly, we’ll check to see what page we’re requesting.  If the page name is ‘news’ then we’ll execute a custom set of instructions.

<?php $newQuery = new WP_Query('category=news'); ?>

Defining a new loop – As seen above, the first part in setting up another wordpress loop inside of an already running wordpress loop is to put the new loop object into a variable.  As noted in the code below, we’ll call this new variable called $newQuery.  This variable obviously can be named whatever you choose.

We also will be using the WP_Query object to build our new loop.  Using query_posts does not work in this situation.

<?php if ($newQuery->have_posts()) : ?>

 <?php while ($newQuery->have_posts()) : ?>

 <?php $newQuery->the_post(); ?

Setting up a new loop - Next, we just have to use the information in the variable to build a new loop.  As seen from the above code, this is setup exactly like a normal wordpress loop but, references the $newQuery variable.

<div>

 <strong><?php the_title(); ?></strong><br />

 <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">read more &raquo;</a>

 </div>

Displaying the content – Lastly, we have to display the information using standard wordpress template tags.  Note that these tags do NOT reference the $newQuery variable.  The code for presenting a loop ALWAYS remainds the same.

Conclusion

And that’s it!!  As we can see, this technique is very powerful and with some creative thought can be used in many, many different situations.  This is also yet another step in using WordPress as a full blown CMS.

Let’s take a look…

The Problems

Out of the box the Folio Elements by Jason Schuller of Press75.com is fantastic.  By the sound of the name, this theme is great for a simple portfolio site; web design, visual arts, photography or anything like that.  However there were several shortcomings the way it stood.

Pseudo AJAX Implementation – Try the theme out.  It uses AJAX but, code wise it isn’t performing an asyncronous transaction at all.  All content is loaded in to the page right off the bat.  This causes slower page load and leads us to our next point.

Poor SEO quality – Any site that uses this theme needs to understand that SEO is not a goal.  As the theme stood, any site would get a lower quality score because of the duplicate content on the homepage and all subsequent pages.  Not to mention the slow loading time and inline JavaScript.

jCarousel Lite Bug – The theme was not having the 3rd item in the carousel pop up… WHY?!

The Solutions

True AJAX Integration – First things first.  I setup the theme to use actual AJAX.  I wrote a simple script that outputs the content using the standard WordPress Loop.  Then I setup all the links for the pages and posts to utilize this script and passed them into the FaceBox.  This works a lot better and in favor of putting all the page and post content directly into the page.

Better SEO Scores – While this theme still isn’t good to use if SEO goals are important, the true AJAX integration helps out a LOT!  This prevents the site from being indexed with duplicate content.  Also I moved the on page JavaScript to a separate file.  Both of the fixes decrease page load time and slightly increases its SEO score.

Fixing the jCarsouel Bug – This was actually easy and honestly a mistake that I make more often than I’d like to admit!!  Basically the order in which you load JavaScript is important.  Because jCarousel creates DUPLICATES of the content in the carousel, the carousel script needed to be loaded before the facebox script.  Also, the whole reason that the jCarousel plugin uses duplicate content is to acheive the circular wrapping effect.  This is crucial to this theme as it would look akward if the carousel bounced to the first post.

Get the Theme!!

Folio Elements

• Live Demonstration
• Documentation

NEWD WordPress CMS Plugins Distribution

The WordPress CMS Plugins

Askimet – Akismet checks your comments against the Akismet web service to see if they look like spam or not and lets you review the spam it catches under your blog’s “Comments” admin screen.

All-In-One-SEO-Pack – Optimizes your WordPress blog for Search Engines.

Yoast Breadcrumbs – Easily add breadcrumbs to your template.

cForms – cforms is a feature rich plugin for WordPress, offering convenient deployment of multiple Ajax driven contact forms throughout your blog or even on the same page.

Google Analytics for WordPress – The Google Analytics for WordPress plugin automatically tracks and segments all outbound links from within posts, comment author links, links within comments, blogroll links and downloads. It also allows you to track AdSense clicks, add extra search engines, track image search queries and it will even work together with Urchin.

Google Sitemap Generator – 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.

List Pages Plus – Alter the output of the wplistpages() function’s HTML. Add in your own classes, insert text into link title, add additional tags surrounding title. Top-level Parents and Children are set seperately for greater flexibility. You can also turn off parent links, useful when using collapsible menus.

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

Peter’s Login Redirect – Define a set of redirect rules for specific users, users with specific roles, users with specific capabilities, and a blanket rule for all other users. This is all managed in Settings > Login redirects. Version 1.5 and up of this plugin is compatible only with WordPress 2.6.2 and up.

PODs CMS – Pods lets you create, manage, and display custom content types using WordPress. Like Drupal CCK, these content types can relate to one another, allowing for sites packed with interconnectedness. Automatic pagination, filtering, public forms, access control, menu editing and more are possible with the Pods CMS plugin.

Post Thumb Revisited – This plugin scans a post for the first image and then creates a thumbnail for it.  I find this very useful in almost any situation.

Role Manager – Allows for the creation and alteration of WordPress roles.  Very useful for CMS based sites.

WPLite – WPlite (“WordPress lite”) is a WordPress plugin that lets you hide ‘unnecessary’ items from the WordPress administration menu—even the Dashboard. On top of that, you can also hide post meta controls on the Write page, so as to simplify the editing interface.

Conclusion

Make your life easier and download the WordPress CMS Plugins Distribution.

NEWD WordPress CMS Plugins Distribution