Category Archives for Wordpress SEO

Google Font API Thesis and WordPress

So if you keep up on these things you'll no doubt have heard that Google has released a pretty super nifty and cool new fonts directory which will effectively allow you use some very snazzy fonts  in a very web safe way.

This makes me pretty happy since it's always a pain to have to ignore high quality fontography in place of web safe fonts. Here's a bit of background on the whole thing if you've missed it.

Google Blog Font Directory Post

Google Font Directory

Google Font Directory Preview Tool

I'm going to quickly cover how I integrated this into a WordPress theme which took all of about 5 minutes then how I integrated it into the ever popular Thesis Theme which I use on quite a number of sites which I own.

Before we dive in here are a few examples. First a non-Thesis example.

Before

screen-capture-919

After:

screen-capture-921

Non-Thesis WordPress Integration

  1. Go to The Google Font Directory Preview tool.
  2. Select your font and options.
  3. Go to your website.
  4. Crack open your header.php file.
  5. Add the following link (with the font details you've selected) into your file:
  6. <link  href="//fonts.googleapis.com/css?family=Cantarell:regular,italic,bold,bolditalic" rel="stylesheet" type="text/css" >

  7. Open up your style.css file in your WordPress theme.
  8. Depending on which CSS element you are looking to replace simply comment our your current font styling.
  9. Copy Paste and replace with the Google font preview tool.

For Example:

<br />
body {<br />
margin-top: 0px;<br />
padding: 0;<br />
color: #4c4c4c;<br />
background-color: #F3ECC4;<br />
font-family: 'Cantarell', serif;<br />
font-size: 14px;<br />
font-style: normal;<br />
text-shadow: none;<br />
text-decoration: none;<br />
letter-spacing: 0.0em;<br />
word-spacing: 0.25em;<br />
line-height: 1.23em;<br />
background-image: url(images/bg.jpg);<br />
background-repeat: repeat-x;<br />
}<br />

Voila - easy as pie. You can see from the two screenshots below the difference this makes on your site. Much cleaner, more readable, and definitely more professional.

Now what about Thesis? Things are a little bit different there. So let's dive right in - by the way, I'm not getting into the specifics of changing a CSS element in WordPress because well, this isn't a WordPress tutorial site. I'm putting this up to be helpful.

If you're having trouble figuring out how to change your theme CSS elements there are tons of WordPress tutorials out there that can help you out.

Thesis and Google Font Library Integration

Here's the before of The Dusan Nedelko Foundation which is running Thesis:

Dusan Nedelko Foundation Running Thesis

And After (Ohhh, Ahhh, Ohhhh):

Dusans Website with Thesis and Google Fonts

In a similar way to a normal WordPress theme this is pretty straight forward we just want to play nice with the way Thesis handles things.

Step 1 - Add the include into the section of the theme. I'm sure there are tons of ways to do this. I actually add head elements in a slightly different way than through the Document Head section in the Thesis admin.

Open up you custom_functions.php file and add the following:

<br />
// Add the include for the Google Font API's<br />
function google_font_api() {<br />
$goog = &quot;&lt;link  href=\&quot;//fonts.googleapis.com/css?family=Reenie+Beanie:regular\&quot; rel=\&quot;stylesheet\&quot; type=\&quot;text/css\&quot; &gt;\n&quot;;<br />
$goog2 = &quot;&lt;link  href=\&quot;//fonts.googleapis.com/css?family=Crimson+Text:regular\&quot; rel=\&quot;stylesheet\&quot; type=\&quot;text/css\&quot; &gt;\n&quot;;<br />
$goog3 = &quot;&lt;link  href=\&quot;//fonts.googleapis.com/css?family=Lobster:regular\&quot; rel=\&quot;stylesheet\&quot; type=\&quot;text/css\&quot; &gt;\n&quot;;<br />
echo $goog;<br />
echo $goog2;<br />
echo $goog3;<br />
}<br />
// Add the hook<br />
add_action('wp_head','google_font_api');<br />

Obviously you need to add the include for whichever Google font you want to add. You can also feel free to copy and paste the lines from the Google Font Directory Preview tool into the Thesis Site Options->Additional Scripts section.

Same deal I just prefer to keep things tidy in my own way.

Step 2 - Add the code to your custom.css to override whichever elements you want:

To change the site title:

<br />
.custom #header {<br />
text-align:center;<br />
 font-family:'Reenie Beanie', serif;<br />
  font-size: 22px;<br />
  font-style: normal;<br />
  font-weight: 400;<br />
  text-shadow: none;<br />
  text-decoration: none;<br />
  text-transform: none;<br />
  letter-spacing: 0.015em;<br />
  word-spacing: -0.041em;<br />
  line-height: 1.23em;<br />
  text-shadow: 4px 4px 4px #aaa;<br />
  padding-top: 0em;<br />
  padding-bottom: 0em;<br />
}<br />

To change the body text:

<br />
body.custom {<br />
 font-family:'Crimson Text', serif;<br />
  font-size: 12px;<br />
  font-style: normal;<br />
  font-weight: 400;<br />
  letter-spacing: 0.015em;<br />
  word-spacing: -0.041em;<br />
  line-height: 1.23em;<br />
  }<br />

To change the sidebar headline text (this has my own custom styling in there and you can also add/remove whatever you want for style purposes):

<br />
/* Custom Widget Headers */<br />
.custom .sidebar h3{<br />
  font-family: 'Reenie Beanie', serif;<br />
  font-size: 24px;<br />
  font-style: bold;<br />
  font-weight: 400;<br />
  text-shadow: 4px 4px 4px #bbb;<br />
  text-decoration: none;<br />
  text-transform: none;<br />
  letter-spacing: 0.015em;<br />
  word-spacing: -0.041em;<br />
  line-height: 1.23em;<br />
  text-align:center;<br />
border-top:1px solid #e48902;<br />
border-bottom:1px solid #e48902;<br />
list-style:none;<br />
margin:0px;<br />
padding-top:5px;<br />
padding-bottom:5px;<br />
background:#eee;<br />
width:100%;<br />
margin-bottom:5px;<br />
color:#353535;<br />
}<br />

There you have it - as you can see below on my brother's memorial foundation website: The Dusan Nedelko Foundation the changes make a really nice addition to the site, increasing the styling while remaining nice and simple.

Hope that was helpful and let me know if you have any thoughts, comments, rants, raves or whatever.

Pura Vida.
Danno

Continue reading

WordPress Security Plugins

When you use WordPress for a corporate or business website, security always comes up as an issue and for good reason. In what has turned into an ongoing series on WordPress Security I'm going to review a few very useful plugins which will add an additional layer of security to your WordPress or WordPress MU site.

In addition to this article, you might find the two other posts in this series useful:

Blocking Spam with WordPress

Recovering from a WordPress Injection (You are labeled an Attack Site)

So here is the added list of extremely useful WordPress plugins, all of them work well with both WordPress and WordPress MU (on my sites at least):

  1. http://wordpress.org/extend/plugins/restrict-login-by-ip/ - Restricts WordPress admin login by IP address. This is extremely useful since you will likely not want just anyone having access to the authentication login.
  2. http://wordpress.org/extend/plugins/limit-login-attempts/ - limit login attempts and records IP address.'Nuff said.
  3. http://wordpress.org/extend/plugins/wordpress-file-monitor/ - monitors WP file changes and notifies by email upon a change.
  4. http://wordpress.org/extend/plugins/wp-security-scan/ - scans the server for known security issues - this is a definite old standby and should be added to your WordPress site
  5. http://wordpress.org/extend/plugins/invisible-defender/ - provides protection against SpamBots
  6. http://wordpress.org/extend/plugins/audit-trail/ - tracks changes to the site by user. I find this to be less of a security issue but it is extremely useful if you've got numerous authors on your blog. At the very least you know who to smack around if they make changes to your site. 🙂

Now keep in mind that these will not ensure that you will never have a security issue on your blog or website. But as the saying goes an ounce of prevention is worth a pound of cure (Benjamin Franklin was a pretty smart guy so I'm going with it).

I hope you've found these plugins useful. Let me know if you've got any additional plugins or techniques you use to secure your sites and ensure smooth sailing!

Cheers,

Dan Nedelko

Reblog this post [with Zemanta]

Continue reading

WordPress Injection Attack

March 4, 2009 Update: My plan has worked out very well and everything is back to normal without too much of an interruption. My request for Google site review took a total of 12 hours and it was completely handled through Google Webmaster Tools. Google spidered the entire site for about 6 hours checking every existing page on the site from Mountain View California. Around 6pm EST I was given a new notice in my Webmaster Control panel that the notice would be removed with the next update which took place about 90 minutes later.

I'd like to thanks a few people who gave me some good advice. If this does happen to you make sure that you:

  1. Remove any old plugins may have or update them.
  2. Ensure the source of the plugin is using best practices for PHP coding. If the plugin is not listed In the Official WordPress Plugins Directory then be careful.
  3. Add the following plugins: WP Security Scan and WordPress Firewall (Thanks to Ruud Hein for the suggestion!).
  4. Backup your content, themes, and plugins on a regular basis so a roll back is easy in the event that you are attacked again.
  5. Be careful of who you send your site to on Twitter! See the end of the post for the official Twitter email I received and this was the source of the attack.
  6. This one is obivious but make sure you WordPress version is current as many security fixes are implement in point releases (ie 2.7.1).
  7. Secure you Web Server or have your System Administrator or Web Host ensure that everything is in order.

/Update.

I woke up this morning ready to get to work and as per usual I check my sites indexes in Google, Yahoo and MSN. Even though it's a beautiful sunny day outside I was shocked to see the following:

Bad News for Tuesday MorningBad News for Tuesday Morning to be sure. So the question is what do I do and how do I get this bad message off my Search Listing?

I'm not too concerned to be honest except for the fact that my site is vulnerable to this injection attack. I would love to smack the hacker that instituted this attack.

So first things first:

What is this message all about? Well when I viewed the source of my site I saw what is called an obsfucated injection attack on the footer of every single one of my pages. This is a bit of a pain since I am using WordPress MU with a number of plugins.

That means that  the hackers could have injected their little code block into my theme, my plugins into the core WordPress MU files. Not a pretty thought to have to go through all of those areas to remove these individual code blocks. Bottom line: my site got hacked. What steps do I take to repair the damage that's been done?

[poll id="3"]

My plan to remove the PHP injection attack:

  1. Identify which files on the web server are compromised.
  2. Identify if the compromised files are plugins, comments, themes, or WordPress Core files.
  3. If the compromised file is a plugin then determine if the plugin should be removed completely (is it the source of weakness?) or simply a victim and should be reuploaded and reactivated.
  4. Upload a clean version of WordPress MU core files. This prevents me from having to wade through all of the compromised files.
  5. Go through comments and identify any potentially malicious links to malware sites. I am very lucky since I have recently moved the domain to a new server since my previous horrible host disabled access to the phpMySQL instance through the cPanel (yes EMC Web Hosting Sucks NEVER use them). This will not be a huge issue.
  6. Go through my theme which is a customized version of Revolution Theme by Brian Gardner. I frequently backup this theme since it is a a simple matter  of uploading the theme to the web server.
  7. Visit Google Webmaster Tools and submit a request for Google to audit my site to remove the malicious tagging on my site.
  8. Audit the entire site to ensure the malicious code in completely removed.
  9. Back up the theme again, ensuring I have the ability to restore clean code in the event that I am on someone's hacking list.
  10. Harden WordPress MU to ensure that this does not happen again.

That's my plan. I am about half way through it but there are some serious issues at play here since it is not only Google which is tagging my site as malicious (bad for business!). Check out the number of blocks which exist:

Google Malicious Message:

I'm not Malicious but Google thinks I am

I'm not Malicious but Google thinks I am so next step is to click on the SERP that's when Firefox jumps in:

After clicking the SERP Firefox jumps in and says I am bad too!

After clicking the SERP Firefox jumps in and says I am an attack site. How fascinating but just wait. It's not over yet when I get to the site:

Firefox toolbar warningFirefox toolbar warning

So clearly the powers that be and the tools on my computer are working hard to identify malicious sites. It is very clear that this site could be malicious and even though it was through no intent on my part the bottom line is that my site was hacked and turned into an attack site. This is a good line of warnings to any user and in the time frame that I am repairing the site and hardening my WordPress to ensure this does not happen again I don't really mind having these messages there.

They are good for users.

Update - Twitter just sent me the source of this injection attack:

Uh oh! We found a bad apple in your Twitter feed.

We detected a link in your account pointing to a phishing site or other harmful material that we identified as malware. Here's the troublesome post:

"@BlogDuJour hey there try out my blog [ your unsafe link was here ] - I am in the process of redesigning now but should be back to normal soon!"
March 02, 2009 22:07

We removed this update from Twitter. Please be mindful of others in the Twitter community, and post only safe links on Twitter.com.

Thanks! Twitter Support


Reblog this post [with Zemanta]

Continue reading