Category Archives for WordPress

Integrating Bootstrap and Genesis

Genesis + Bootstrap

Bootstrap is one of my personal favourite frameworks and Genesis Framework by StudioPress is a go to when putting together conversion centric websites.

Marrying the best of both worlds allows me to be responsive out of the box, prioritize messaging and increase conversions to a goal.

Adding Bootstrap functionality to a Genesis powered site is relatively simple.

Step 1: Grab the compiled Bootstrap 2 includes

It's really just as simple as adding this block of code to your site header:


<!-- Latest compiled and minified CSS -->

<!-- Optional theme -->

<!-- Latest compiled and minified JavaScript -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

Special thanks to the fine folks at MaxCDN for hosting the compiled versions of bootstrap!

Step 2: You're done if you want to be

If your comfortable with basic HTML and CSS, which any modern marketer should be, then you're technically finished. You can go right ahead and start including your Bootstrap-ified code into posts and pages.

Woot!

If you're not 100% comfortable with that concept, then you should head over to Treehouse, CodeAcademy or CodeSchool and start sharpening those skills.

Step 3: But wait, my users aren't comfortable with HTML/CSS

Point well taken. There are a few options for you smooth the transition for your writers and users to insert Bootstrap happiness into their workflow.

Head over to wordpress.org and grab any one of the following fine Bootstrap 3 shortcode plugins:

https://wordpress.org/plugins/bootstrap-shortcodes/ simple but does require some understanding of how Bootstrap works.

https://wordpress.org/plugins/easy-bootstrap-shortcodes/ this one has a free and premium version. I can't vouch for the premium features.

Done is better than perfect: wrapping it up

I was hacking around, updating things when I decided to give this a shot. There are some minor styling tweaks, which I am sure could be resolved given a little bit more time and effort.

Adding some Bootsrap mojo to your Genesis powered site will give you the flexibility and the best of both worlds, I'm looking forward to hearing where your Bootstrap + WordPress + Genesis escapades lead you, hit me up on LinkedIn, Twitter or down below in the comments.

Bootstrap Table Tests

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Continue reading

How to exclude Digg Digg from WordPress pages & posts

I've had this issue myself and there is a simple way to do this, although it's not well documented. Simply add the following comment to the HTML of your page, post or custom post type to hide the Digg Digg floating share bar:

<!-- Digg Digg Disabled -->

Continue reading

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 Desktop Client for Mac

I spend a good bit of my time writing content for my various websites. Logging into each separate WordPress or Joomla instance can be time consuming and annoying - as good as web interfaces have become they are still no where near as responsive as a good desktop app.

Being a Mac user there aren’t that many fantastic options for blogging software. I’ve tried MarsEdit and a few others and was a little bit less than impressed.

One of my big requirements is the use of the WordPress Media Manager rather than having to upload images via FTP and inserting the images (even if the app does this automatically it breaks thumbnails and forces me to log in to the admin which defeats the purpose.

So what are my requirements for desktop blogging software? Here’s my short list:

  1. A decent and useable user interface.
  2. Easy image and rich media handling.
  3. WordPress integration - there is no point in writing a post then be forced to login to format, edit and tweak the post.

That’s really about all that I require. Now I’ve been using MacJournal for all of about 5 minutes here and I’m relatively impressed. I especially like the full screen edit. It removes any distractions and allows me to focus on the content I am writing rather than the Skypes, MSNs, Tweets, Emails and Facebook Updates.

I’m going to plug away with this software for a little bit and test out the image and media handling. Do you use desktop blogging software? Let me know if you have any MacJornal tips and tricks or suggestions for other desktop blogging software.

Continue reading

MacJournal Review and Tests

nicole-jax2.jpgI’m testing out more MacJournal Stuff and it looks like my server time was set completely improperly.

Good time, had to ssh in - after digging up my cryptic passwords. Now to test the upload without scheduling issues. I’m also going to default to the most simple option for image insertion.

Good ol’ drag and drop. A few things are coming to mind here as I use this:

  1. Image CSS needs to be imported. I want to the able to add a left float to the post image (not sure how to do this in MacJournal at this moment).
  2. It would be nice to preview the image correctly in the editor.

Ok, so posting went well and fairly smooth. Honestly the full screen editor is fantastic. Who would have thought that such a simple feature would be so damn useful?

To be honest I feel a little bit like Doogie Howser MD - if you use MacJournal you’ll know what I mean. The other nice thing is that this is more effective than most Word Processors.

I’m liking MacJournal quite a bit so far. Something else that might be handy would be a simple image or media manager. That would be very handy for saving time.

Now for the podcasting test...

Continue reading

WordPress Backup Plugins

In the last few days the Gumblar malware injection attack has been making the rounds and hopefully you've taken preventitive measures to ensure that you are as safe as you can be from this annoying injection attack.

Just so you're aware the reason for this attack is Blackhat SEO spammers are attempting to insert a hidden link on your site for the purposes of link building. The problem is it's not only illegal, it's incredibly lame.

Here's another scenario, let's assume for a second that your site did in fact get hijacked. Likely what you will be left with is an annoying script in a tond of your WordPress site pages. Not just in your theme but in anything beneath wp-content that they could inject.

This might include:

  1. Your theme files.
  2. Your plug-ins (a very good case for limiting and auditing new plugins you add).
  3. Your wp-admin files (this is extremely annoying as well).

Your only solution at that point is to reinstall WP (thus over writing the compromised files), re uploading your theme (backup!) and reinstalling all of your plugins. That would then get every file restored.

Now that's a time consuming and lengthy pain in the ass process to be honest. So let's be a bit proactive and add some functionality to your WordPress site that will automate some of these things for you.

Here's a list of trusted management, backup and resoration plugins I use on all my sites:

  1. WP-DBManager - this is a great plugin by the prolific Lester Chan (one of my favorite plugin authors). It will let you do database work and backups directly from your WordPress Admin. Very handy.
  2. WordPress Backup - this is also a highly recommended plug in that will backup more than just your post data. Run it regularly and better yet, automate it. My rule of thumb is that if it can be forgotten it will be forgotten. I'm the worst case of that.
  3. WP-DBBackup - this will help you automate that process and keep a nice fresh copy of your database on hand for that disasterous moment.
  4. eFiles Backup - this is a good one for a smaller site. In general any injection attack won't hurt your database, just the content files. This little guy puts your files on eFiles.com - I haven't tested it but I might actually give it a whirl.
  5. WordPress Automatic Online Backup - this is another promising service which I have not tried out but am thinking of giving a whirl. Like I said automation is key.

In general people do not like to think about things like backups. It's not a very sexy subject to say the least. But from my experience there is nothing worse than having to weed through a mass of files, downtime, and just the frustration of repairing things.

These backups can make a bad experience like getting injected relatively painless. It's a bit of a "set it and forget it" scenario.

If this is your first visit here you might want to have a look at my other WordPress Security and SEO Posts

All the best,

Dan

In

Continue reading

WordPress Exploit Gumblar .cn

Looks like there is another WordPress exploit out there dubbed Gumblar .cn - I was actually made aware of it through a pingback from Growmap.com on their: Watch Out for Recent WordPress Gumblar PHP Exploit post.

These attacks are extremely time consuming to clean up, trust me I've had to do it before in the past. It's not a quick or easy thing to have to deal with at all.

There is also an excellent explanation of Gumblar here: Gumblar .cn Exploit - 12 Facts About This Injected Script

Please proactively protect yourself against this exploit!

Update: I'm quoting a bit from Scansafe's excellent Q&A about the exploit:

Is this a cross-site scripting (XSS) attack?

No. The compromises appear to be the result of stolen FTP credentials and direct manipulation of files on the Web server.

What is the intent of the malware distributed through the Gumblar compromised websites?

The malcode distributed via the compromised websites attempts to exploit PDF and Flash exploits in order to deliver malware that redirects infected users’ search engine results. In these particular attacks, the malcode appears to be targeting Internet Explorer users and Google search. In addition, the gumblar.cn malcode installs a backdoor that connects to 78.109.29.112 – an IP address of a known botnet command and control that has historically been associated with malware engaged in malicious redirections.

Reference blog post: http://blog.scansafe.com/journal/2009/5/8/google-serps-redirections-turn-to-bots.html

How do these malicious redirections work?

Similar to a man-in-the-middle attack, these redirections occur as a result of a man-in-the-browser attack. The malcode injects itself into the browser process, monitors the requests processed by the browser, and injects fraudulent traffic. In the case of the Google SERPs redirects, the malcode replaces legitimate Google SERPs results with links pointing to malicious or fraudulent websites.

Millions of websites have been compromised over the past year; what makes these particular compromises unique?

A typical series of website compromises reaches peak within the first week or so and subsequently begins declining in intensity as detection is added by signature vendors, user awareness increases, and website operators begin cleaning the affected sites. (This is why attackers are constantly pushing new waves of compromise).

In the gumblar.cn attacks, the opposite is occurring. As website operators attempt to clean up the original compromise or otherwise make changes to the original source code of the .htm, .php, and .asp pages on their sites, the gumblar.cn compromise is injected. The gumblar.cn mal-script appears to be dynamically generated and thus varies not only from site to site, but also from page to page on the same site. In addition, the resulting mal-script is heavily obfuscated, further hampering signature detection methods. As a result, the gumblar.cn compromises are increasing – up 188% from last week and a 61% increase from yesterday.

Here are some related articles I've written that might be helpful:

WordPress Injection Attack

Blocking Spam with WordPress

WordPress Security Plugins

Best of Luck,

Dan

Reblog this post [with Zemanta]

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

Blocking Spam with WordPress

After my last article on Cleaning your Site after a WordPress Injection Attack I figure that it's time to take the old "an ounce of prevention us better than a pound of a cute" (or something like that). So here is a nice easy way to enhance your Akismet spam protection and quickly and easily blacklist an offending IP.

Personally I get really sick of blog spammers, especially since my blog is DoFollow. It doesn't stand for the same thing as DoSpam. Very annoying time consuming and potentially harmful - alot of these same idiots who blog spam would also be the same people who will try to inject your WordPress theme and plugins with Click Counter code.

Anyhow in this post I'm going to use the following plugins:

  1. Akismet (setup properly but that goes without saying.)
  2. WP-EasyBan
  3. WP Security Scan
  4. Secure WordPress
  5. Redirection Plugin

The first thing you need to do is install all of the above plugins and ensure each of them work. As a side note: I had trouble with WP-EasyBan on WordPress 2.7.1 but I corrected it. To be honest I am not 100% sure if it was a conflicting plugin issue or a core problem with WP-EasyBan. If you have a problem, contact me or comment here and I will share my fix (I wasn't able to see "Add Ban" in the user menu but a few changes to the plugin fixed it without any issue).

Ok moving right along.

Let's say you are getting a substantial amount of Spam in your Spam Bin in Akismet. You will easily be able to tell if it comes from one particular IP address. First go to your Spam Box and identify the IP address - see below:

One: Identfy the IP Address

Next step: Check your Security logs under "Tools -> Security Logs" - now if the person is simply annoying you can skip that step but the Security logs will identify if the user is on a blacklist:

Is the IP already on your Blacklist?

Check your Security Log and Blacklist

Once you've done that it's time to "Add Ban" provided by WP-EasyBan. It's got a great interface for you to add various options. We want to add a specific IP address (adding a block if IP's could cause you to block legit visitors to your site.

Adding an entry to your Blacklist

Adding a Banned IP through WP-EasyBan

Also as an ounce of prevention you can set a time limit and maybe you'll discourage the blog spammers after a period of time. The reason I like this method is that Spammers never give up unless they are certain that their stuff is not getting through. Blacklisting will let you send a message that there is no getting through to you.

As a last note: I like to add a personalized message to these idiots. Sometime I venture into more colourful language depending on how badly one IP is offending my site and messing with my hard work.

Then you can set another site to redirect them to as well. Get creative here you can have fun with this, there is also a sense of satisfaction to mess around with these people.

Anyone else have any tips? Let me know!

Cheers,

Dan Nedelko

Dan Nedelko

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