So as project managers, web designers, and freelancers, we must by default become quasi experts in security. No problem. It adds more fun to the challenge.

Combating security breaches should fall into two camps (which are obvious if you’re a long-time reader of this blog): proactive and reactive. Proactive is preventing the problem before it occurs while reactive is after the fact and how to perform damage control.

How to prevent malware and spam from harming your clients’ WordPress sites

First, never underestimate the damage a spam or malware link can do to your client’s website. A strategically placed barrage of spam links can reflect in search engine listings, which could take days, if not weeks, to reverse. Malware links, which are usually script or iframe calls, can cause the ire of Google and Mozilla, both of which subscribe to an internet malware watchdog group. Under this coalition, you could find a client’s site tagged in Google searches as being unsafe due to malware and inaccessible via Firefox and Chrome among other browsers, with a big red warning to greet visitors.

That’s not good, especially if your client relies on their site for income. Unfortunately, I’ve been on the receiving end of a malware attack, and the results aren’t pretty.

With that preface in mind, prevention is the obvious course. Here’s what you can do to sleep better at night:

• Perform basic security operations on the WordPress install. This includes changing the admin account to a subscriber access level, ensuring passwords are strong, and closing some of the loopholes in WordPress (see the plugin below to help manage this).
• Consider installing a plugin to help manage some of those basic security loopholes. Secure WordPress is among the more popular ones.
• Always install the latest version of WordPress since many security holes are patched in the updates.
• Read through WordPress’s preventative guide.
• Stay informed of the latest security methods and concerns. For example, Noupe has a good article (and comments) on some preventions.
• Routinely check the client’s website rankings in search engines to identify any possible spam links.
• Maintain backups of the WordPress database. In the event of an attack, you may have to perform a restoration. WP-DBManager is one of the best plugins for automated database backups.
• Install a gatekeeper plugin to prevent robots from delivering link spam. Bad Behavior is a good plugin to consider.
• Finally, and most important, setup a Google Webmaster account to tie in with the client’s site. Not only will this service provide valuable insight into search engine rankings, it will also notify you the instant a malware attack has been flagged by Google. And yes, it’s free.

The hack has happened, what to do now

A WordPress hacking incident will more than likely occur at some point in your life. It sucks and the ensuing mess is no fun to deal with. Fortunately, it’s not the end of the world, and there are some pretty solid ways of cleaning it up.

Remember that there’s a difference between a spam attack and a malware attack. A spam attack is the infusion of junk links in the code (or worse, in rogue plugin files, which are harder to find) so that search engine results will pick them up. This may not necessarily be flagged by Google as malware, making detection a bit fuzzy.

A malware attack, on the other hand, is usually a simple case of an illegal login into the site and the placement of a script or iframe tag. Google routinely scans sites for calls to malware files such as these and will subsequently raise the warning flag. Hopefully, you’ll have had Google Webmaster setup so that notification can be sent if that flag is raised, though Google makes an earnest attempt to email the site owners regardless.

Once the attack has occurred and you awake to the nightmare, here are some ways to deal with it:

• Identify the location of the malware or spam, and remove it. If it’s a more intricate spam attack, you may need to consult a guide such as Pearsonified’s WordPress Pharma Hack post.
• Scan the WordPress install for any other problems. I recommend the WordPress Exploit Scanner plugin for this job.
• If you haven’t done so already, setup Google Webmaster immediately. After linking the site with the service, you’ll see a red bar warning you of malware on the site if that’s the problem. After you’ve removed the malware, make sure you notify Google using the malware diagnostic tool. This will instruct a robot to scan through your client’s website, and if the malware is gone, remove the warnings within 12 – 24 hours. The sooner you do this, the sooner the warnings will be removed, which is the ultimate goal.
• Notify the client that the problem occurred and what you’ve done to resolve the situation. This is the hardest part because a Google malware warning can make a site appear like death. Nevertheless, if the client is hosting with you or under a maintenance contract, you should help them out of this situation. A confident tone and action-oriented plan will typically calm the client’s understandably stretched nerves.
• Now that damage control has been completed and Google notified (if there was a malware attack), it’s time to toughen up the WordPress install. I highly recommend reading through the hacked FAQ on WordPress’s website. This guide will provide some basic and advanced methods for fixing and preventing the problems that brought about the attack.
• Review the preventative measures outlined in the section above.
• Of the WordPress hacked FAQ already mentioned, the most important takeaways are to change the passwords of user accounts and implement new secret keys in the wp-config file, which can be generated here. This will establish new cookies so that hackers cannot remain logged in.
• It may also be prudent to scan your computer and the client’s using antivirus software. The malware may have either originated from one of those computers or infected one or more of them if the problem site was opened.
• Lastly, notify the client what steps you have taken as well as a timeline for the impact on Google search results to reverse.

Perform an investigation

Many people advise performing an after-the-fact investigation into what happened post-attack. This is a good move in that it can provide a unique analysis of the flaws in your client’s site, the hosting operation, database software, or some other area of potential weakness.

The best place to start is by executing a simple search in Google for any recent issues regarding the web host and security problems. For examples, in the attacks I recently experienced, there were a couple of articles pertaining to my provider, Rackspace:

• Smackdown! Blog: Rackspace clients, check your databases
• Sucuri Blog: Attack of WordPress blogs on Rackspace
• Unmask Parasites Blog: Attack on WordPress blogs on Rackspace

These resources can provide valuable analysis on a specific attack as well as a means to stop and remove them. In addition to these resources, you should also consider reviewing logs, if available, to see if you can pinpoint where the attack originated. This might not always be possible, but the more information you can gather, the better. It may even be prudent to contact the web hosting company to see if they’re aware of the problem, and if they’re at fault, what’s being done to rectify the situation.

WordPress hacking sucks; there’s no doubt about that. Remain vigilant and help protect your clients from the dreaded malware warnings slapped down by Google and others. Otherwise, your client could lose confidence in their website as well as visitors and revenue.

One way to maximize the real estate of a homepage is to dynamically show and hide content. For example, one piece of content could feature information about a product and then automatically hide to show a new piece of content advertising some other part of the web site. Not only does this enable you to create more space where there once wasn’t, it also helps you to grab the attention of the user. Any type of animated content is almost always guaranteed to attract eyeballs.

The best way to implement something like this for your own homepage (or a subpage, it doesn’t have to be a homepage) is to implement what’s called a carousel.

The carousel automatically rotates through pre-defined featurettes, be they media or text, and allows the user to manipulate which content is shown via a mouse hover or click event.

The Example

Let’s take a look at a quick example: http://www.clecompte.com/examples/carousel/

This is a bare bones carousel that can always be beefed up with design elements later on. As you can see, it’s automatically rotating through three content pieces. If you hover your mouse over any of the three content titles to the left, the animation will end. You can then continue to navigate to the other pieces of content by hovering over the other titles.

Why does it behave like this? It begins with the automatic animation to make sure all of the content gets play in case the user doesn’t interact with it. It ceases the animation once the user interacts with it so that it doesn’t animate as the user is trying to read the content.

How it Works

So how does it work? Below is the full source code of the CSS and jQuery.

The CSS

The CSS is pretty straightforward. The left side navigation of the three content pieces is setup using an unordered list while the content is housed using a div container. All of the content containers must be hidden as the jQuery will initialize everything.

body {font-family:"Helvetica Neue", Arial, Helvetica, sans-serif;}

.feature_nav {width:200px; float:left;}
ul {list-style:none; margin:0; padding:0;}
ul li a {background:#666; color:#fff; padding:8px; border-width:1px 0 1px 1px; border-color:ccc; border-style:solid; display:block; font-size:14px; font-weight:bold; margin:0 1px 2px 0; text-decoration:none;}
ul li a.on {background:#ccc; font-size:16px; color:#333; border:none; margin-right:0;}

.feature_content {width:460px; float:left; height:160px; background:#eee; border:2px solid #ccc; padding:20px;}

#feature_one, #feature_two, #feature_three {display:none;}

h1 {color:#333; font-size:22px; border-bottom:2px solid #fff; margin-top:0;}

The jQuery

Here comes the fun part. Below is the full source of the jQuery which I’ll explain in a moment.

$(document).ready(function() {

  /* HOME ANIMATION */
  function contentRotate(feature) {
    if (doAnimate) {
      feature.fadeOut("fast", function (feature) {
        return function () {
          $(".feature_content div").hide();

          /* HIGHLIGHT RELEVANT CONTROL */
          if ($(this).attr("id") == "feature_one") {
            $(".feature_nav .on").removeClass("on");
            $(".home_one").addClass("on");
          }
          else if ($(this).attr("id") == "feature_two") {
            $(".feature_nav .on").removeClass("on");
            $(".home_two").addClass("on");
          }
          else if ($(this).attr("id") == "feature_three") {
            $(".feature_nav .on").removeClass("on");
            $(".home_three").addClass("on");
          }

          /* FADE IN NEXT ITEM OR GO BACK TO FIRST */
          feature.fadeIn("fast", function () {
            if ($(this).attr("id") == "feature_three") {
              setTimeout(function () {
                contentRotate($(".feature_content div:first"));
              }, 4000);
            }
            else {
              setTimeout(function () {
                contentRotate($(feature.next()));
              }, 4000);
            }
          });
        };
      }(feature));
    }
  }

  /* HOME FEATURES */
  $(".feature_nav a").hover(function() {
    var current = $(this).attr("title");
    $(".feature_nav .on").removeClass("on");
    $(this).addClass("on");
  });

  $(".feature_nav a").click(function() {
    return false;
  });

  var doAnimate = true;

  contentRotate($(".feature_content div:first"));

  $(".home_one").hover(function() {
    $("#feature_one").fadeIn();
    $("#feature_two").hide();
    $("#feature_three").hide();
    doAnimate = false;
  });
  $(".home_two").hover(function() {
    $("#feature_one").hide();
    $("#feature_two").fadeIn();
    $("#feature_three").hide();
    doAnimate = false;
  });
  $(".home_three").hover(function() {
    $("#feature_one").hide();
    $("#feature_two").hide();
    $("#feature_three").fadeIn();
    doAnimate = false;
  });

});

The easiest way to explain this code is to start from the bottom. A variable called doAnimate is created to determine whether or not the animation should run. It is initially set to true so that the content will rotate when the page loads. Calling the contentRotate function, which I’ll get into shortly, initializes the content rotation.

The only way the animation can be stopped is if the user hovers over the left side titles. That’s what the three hover functions are doing. For example, if the user hovers their mouse over the second title, the first and third containers will be immediately hidden if they are visible, the second container will be shown, and the doAnimate variable will be set to false to end the animation.

Above those three functions is the contentRotate function call that I mentioned earlier. When this function is called, the first div container within the container that has class “feature_content” is passed. So, if you refresh the page, the animation will always begin with the first content feature.

In the actual contentRotate function itself, the function will only run if doAnimate is true, which it is by default. After that you see a function to fade out the current content container, which is done after the contentRotate function is given the next content container. The hiding of all divs inside the “feature_content” container may seem counterintuitive, but this is done to prevent any of the content containers from appearing prematurely.

The area in the contentRotate function with the comment about highlighting the relevant control is what determines which left side title will be highlighted. This is accomplished using a simple if statement. If the current visible content container has an id that matches its associated title, then all the other titles are deemphasized and only the associated title is highlighted.

The next part of the contentRotate function is where the magic happens. The current content container is faded in and an if statement is immediately run to make sure the last content container has not been reached. If the last container has been reached, the if statement will go through the function again starting with the first container. If the last container has not been reached then the function will continue with the next container in sequence. All of this is set to a 4-second timer.

So there you have it: a simple carousel feature that is flexibly built using HTML, CSS and jQuery. This is just a prototype, so if you find problems or areas of improvement, feel free to drop a comment.

Most web sites that follow good usability practices will tell visitors where they are on the site. It’s kind of like that directory map in a shopping mall with the big red “YOU ARE HERE” arrow. On web sites, this is usually accomplished by highlighting or shading the navigation object that the user is currently on.

If you’re running a web site on a content management system like WordPress, this is easy to handle. For example, WordPress gives you a class called “current_page_item” that is only added to the list item of the page the user is currently looking at. Pretty useful.

Unfortunately, if you’re not running a web site in a content management system with that level of sophistication, then you’re out of luck. The only way to really implement something like it is to manually build the navigation.

However, JavaScript can help automate most of that. We can use JavaScript and jQuery to dynamically determine what page the user is currently browsing and add a class to the navigation object to highlight it. In the example above, the <a href> tag surrounding “About” has a class of “on” applied to it.

The code:

<script type="text/javascript">
var blog = "blog";
var url = blog;
var siteurl;
var locmatch;

url = url.split(/[\s\,]+/i);
siteurl = String(location.href);
for (var x = 0; x < url.length; x++) {
  locmatch = siteurl.match(url[ x ]);
}

$(document).ready(function(){
  if (locmatch == blog) {
    $("#page_nav li a[href*='blog']").addClass("on");
  }
  else {
    $("#page_nav li").find("a[href='"+window.location.pathname+"']").each(function(){
      $(this).addClass("on")
    });
  };
});
</script>

The code is broken into two parts consisting of regular JavaScript and then jQuery. The approach behind this script is simple. We want to determine what page a user is currently on and then analyze the <a href> links in the navigation to see if there’s a match. If there is, we’ll apply class=”on” to the matched navigation object.

Furthermore, say for example there is a blog on the web site in question. With a blog, each post would create a new page and that page location would no longer match the navigation object (e.g. “Blog” in the navigation would have a URL of http://www.mysite.com/blog/, but if a user is on a specific post, that URL would change to something like http://www.mysite.com/blog/this-is-a-post/. The URL then would no longer match the <a href> link of the “Blog” navigation object and thus no match would be detected.)

Let’s walk through the code one chunk at a time.

var blog = "blog";
var url = blog;
var siteurl;
var locmatch;

url = url.split(/[\s\,]+/i);
siteurl = String(location.href);
for (var x = 0; x < url.length; x++) {
  locmatch = siteurl.match(url[ x ]);
}

This chunk of code is designed to look for the word “blog” in the URL path. The blog variable is defining what word to look for (in this case “blog”) and it then stores it in the url variable. The siteurl variable will contain the full path of the current page URL and the locmatch variable will contain a match to “blog” if there is one. The url variable is then split and run through a loop to detect a match of “blog.” The result is stored in the locmatch variable.

The second chunk of code is the jQuery and it does most of the heavy lifting.

$(document).ready(function(){
  if (locmatch == blog) {
    $("#page_nav li a[href*='blog']").addClass("on");
  }
  else {
    $("#page_nav li").find("a[href='"+window.location.pathname+"']").each(function(){
      $(this).addClass("on")
    });
  };
});

Once the document is ready, the first order of business is to determine whether or not the locmatch variable matches the blog variable we defined earlier. If it does, then we instruct the code to find all <a href> tags within the navigation area (anything that is a descendant of #page_nav li) that contains the word “blog” and apply a class of “on.”

If locmatch does not equal the blog variable, the if statement moves to the second part. First, we tell the code to look under #page_nav li and to find any <a href> tags that contain the current page path that the user is on (keep in mind, the code is only looking at the path of the page and not the host, so http://www.mydomain.com would be ignored… this is in case you’re using relative paths). It processes each of the <a href> tags and applies the “on” class to any matches.

So, let’s look at the net result of our efforts. Say we have our navigation/page setup like the following:

<ul id="page_nav">
  <li><a href="/about-me/">About Me</a></li>
  <li><a href="/services/">What I Do</a></li>
  <li><a href="/blog/">My Blog</a></li>
</ul>
<p><a href="/blog/archives/">Check out my blog archives, too!</a></p>

If a user clicks on either “About Me” or “What I Do,” a class called “on” will be applied to the <a href> tag. If the user clicks either “My Blog” or the paragraph link beneath the navigation, the “on” class will be applied to the <a href> tag surrounding “My Blog” in the navigation.

Is there an easier way of doing this? Probably. But like I said, I’m not an expert in JavaScript or jQuery — but I am an expert in what works and this does. Tested in Firefox, Safari, IE6 and IE7 without issue. Let me know if you have any problems.