Tag: wordpress tips and tricks

IE Market Shares - January 2014

How to help IE 8, 7, 6 more compatible with HTML5, CSS3 & MediaQueries

Since January 2014, Internet Explorer 11 availability with Windows 8.1, Firefox 26 and Google Chrome 32 has released. Have you known? IE8 is most used as web browser in IE Market Shares. As a web designer/developer, it’s always our goal to give our website visitors better experience on viewing our site. That’s why I recommend you take care of your website layouts (WordPress themes, Joomla Templates …) with old browsers, especialy for earlier versions of IE.

IE Market Shares - January 2014
IE Market Shares – January 2014. Image Copyright by The Next Web.

The following will allow your sites to quickly and almost magically work better in Microsoft’s flagship browser!

Browsers Detection

Many people don’t know this, but WordPress provides several global variables that we can use to do browser detection.. The variables WordPress provides are as follows: $is_lynx, $is_gecko, $is_IE, $is_winIE, $is_macIE, $is_opera, $is_NS4, $is_safari, $is_chrome, $is_iphone.
If you’re not using WordPress, here is little PHP magic to detect the User Agent:

if (strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE 6') !== false) {
	// do something
}

We can use this result to tell the user’s browsers how to rendering your website layouts which has built with HTML5 and CSS3.

Include third-party scripts to your themes

There are 3 really helpful scripts that add better compatibility for “modern” things such as responsive design, CSS pseudo-classes and attribute selectors as well as HTML5 tags.

htmlshiv.js – HTML5 Support

The HTML5 Shiv enables use of HTML5 sectioning elements in legacy Internet Explorer and provides basic HTML5 styling for Internet Explorer 6-9, Safari 4.x (and iPhone 3.x), and Firefox 3.x.

HTML5 Shiv is maintained by Alexander Farkas, Jonathan Neal and Paul Irish, with many contributions from John-David Dalton. It is also distributed with Modernizr, and the two google code projects, html5shiv and html5shim, maintained by Remy Sharp.

HTML5 Shiv Usage

Include the HTML5 shiv in the <head> of your page in a conditional comment and after any stylesheets.

<!--[if lt IE 9]>
    <script src="bower_components/html5shiv/html5shiv.js"></script>
<![endif]-->

HTML5 Shiv works as a simple drop-in solution. In most cases there is no need to configure HTML5 Shiv or use methods provided by HTML5 Shiv.

selectivizr.js – CSS pseudo-class support

selectivizr is a JavaScript utility that emulates CSS3 pseudo-classes and attribute selectors in Internet Explorer 6-8. Simply include the script in your page’s <head> and selectivizr will do the rest.

Selectivizr Usage

To use the library, you’ll need to include one of the supported libraries:

  • jQuery (1.3+)
  • Dojo (1.5.0+)
  • Prototype (1.6.1+)
  • Yahoo UI Library (2.8.0+)
  • DOMAssistant (2.8.0+)
  • MooTools (1.3+)
  • NWMatcher (1.2.3+)

Then add the following conditional comment AFTER your stylesheets:

<script type="text/javascript" src="[JS library]"></script>
<!--[if (gte IE 6)&(lte IE 8)]>
  <script type="text/javascript" src="selectivizr.js"></script>
  <noscript><link rel="stylesheet" href="[fallback css]" /></noscript>
<![endif]--> 

An absolute must for your modern projects. Only loaded for old IE’s.

respond.js – Mediaquery support

A fast & lightweight polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more). The goal of this script is to provide a fast and lightweight (3kb minified / 1kb gzipped) script to enable responsive web designs in browsers that don’t support CSS3 Media Queries – in particular, Internet Explorer 8 and under. It’s written in such a way that it will probably patch support for other non-supporting browsers as well (more information on that soon).

Usage Instructions

  1. Craft your CSS with min/max-width media queries to adapt your layout from mobile (first) all the way up to desktop. @media screen and (min-width: 480px){ ...styles for 480px and up go here }
  2. Reference the respond.min.js script (1kb min/gzipped) after all of your CSS (the earlier it runs, the greater chance IE users will not see a flash of un-media’d content)
  3. Crack open Internet Explorer and pump fists in delight

This isn’t the only CSS3 Media Query polyfill script out there; if you’re looking for more robust CSS3 Media Query support, you might check out CSS3 MediaQuery.js

Conditional Comments

CSS and JavaScript issues within each version of IE present us with layout and functionality issues. Luckily Internet Explorer has been supporting conditional comments which allow us to target blocks of HTML toward all IE browsers or specified IE browsers.

<!DOCTYPE html>
<!--[if lt IE 7 ]> <html class="ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]>    <html class="ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]>    <html class="ie8" lang="en"> <![endif]-->
<!--[if IE 9 ]>    <html class="ie9" lang="en"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en"> <!--<![endif]-->

This snippet doesn’t require or wait on JavaScript but it looks so ugliest as you’ve ever seen. While we all dislike Internet Explorer’s bugs, their conditional comment syntax provides us a perfect method for fixing them quickly because ugly or not, the fact remains that this code workers exactly as intended.

Conditional Comments Syntax Table

Item Example Comment
! [if !IE] The NOT operator. This is placed immediately in front of the feature, operator, or subexpression to reverse the Boolean meaning of the expression.
lt [if lt IE 5.5] The less-than operator. Returns true if the first argument is less than the second argument.
lte [if lte IE 6] The less-than or equal operator. Returns true if the first argument is less than or equal to the second argument.
gt [if gt IE 5] The greater-than operator. Returns true if the first argument is greater than the second argument.
gte [if gte IE 7] The greater-than or equal operator. Returns true if the first argument is greater than or equal to the second argument.
( ) [if !(IE 7)] Subexpression operators. Used in conjunction with boolean operators to create more complex expressions.
& [if (gt IE 5)&(lt IE 7)] The AND operator. Returns true if all subexpressions evaluate to true
| [if (IE 6)|(IE 7)] The OR operator. Returns true if any of the subexpressions evaluates to true.

Use Vendor Prefixes for specified browser

Using vendor prefixes will save you a lot of time without worrying if the browser supports your CSS.

Check out the following list of vendor prefixes.

  1. Safari and Chrome -webkit-
  2. Firefox -moz-
  3. Opera -o-
  4. Internet Explorer -ms-

Conclusion

And there we go. Somewhat better browser support and less headache if you want to attempt to support old version of Internet Explorer.

Crucial Things To Consider Before Changing WordPress Theme

Crucial Things To Consider Before Changing WordPress Theme

Changing your WordPress theme can be a scary prospect if you’ve already invested a lot of time and effort building your site. There is much more involved when you are changing themes on a live website because all of theme settings are independent from your WordPress theme.
It is very easy and simple to change themes in WordPress with just a few clicks, but you need to have a checklist of items to take care of before you change the theme. So here’s a guide to what will and won’t change about your site when you switch themes.
Continue reading

WP Missed Schedule Fix Failed Future Posts

How to FIX WordPress Posts Missed Schedule Problem

Since I moved to DigitalOcean, all my scheduled posts are not working then it’s labeled as Missed Schedule. I have faced this problem for two times without any notices. After digging around a bit I realised this error was very widely reported, I found a lot of suggestions from other frustrated bloggers. So I wasted about one hour trying to find out what was wrong before it’s fixed.
In this article, you will learn How did I FIX WordPress Posts Missed Schedule Problem?
Continue reading

Boost Your WordPress Theme Development with Amazing Tips

In 2012, I’ve written an article to help you Build Your Own WordPress Development Environment with requirement resources to start your WordPress projects.
Making a theme for WordPress is easier than ever with a ton of tutorials, guidelines … Today we have a few amazing tips for you to help you boost the developing WordPress themes process. It covers several tips and tricks that will make you a better theme developer.
Continue reading

Fix 403 Forbidden Issue Wordpress permalink clash folder name

HOW TO Solve 403 Forbidden Issue WordPress permalink clash folder name

For some years ago, I’ve used WordPress as sub-folder to prevent hackers can find the real folder of blog softwares. Now, I’m hosting WordPress at root director of domain but I still keep old folder that called as wordpress to keep live urls of media, photos, files, demo… I don’t expect it had 403 Forbidden Issue when user visit WordPress category because WordPress permalink clashed with director name: wordpress. It’s been the way it is for a long time now and I never thought there was a problem until one kind person contact me then told me what did happened. I decided to run everything through WordPress by doing a clean install at the web root after changed web hosting service.
Continue reading

Syntax Highlighter WordPress Plugins and Services for Embedding Code

9 Syntax Highlighter Plugins and Services for Embedding Code Snippets in WordPress

WordPress is using TinyCME as default editor, so displaying code within a post is not an easy task. That is why there are some amazing developers who create plugins to make that solve this niggly issue.
However, there are some simple and effective ways to do this by use WordPress code snippet plugins or 3rd-party services there can help you maintain the original formatting of any code being inserted in WordPress posts and make your blog a lot more appealing to the readers.
Following are a list of best WordPress plugins or 3rd-party services to highlight code snippets within your blog that I have personally tried.
Continue reading

How To Stop WordPress Spam Comments

How To Stop WordPress Spam Comments?

Are you hate Spammers, especialy WordPress comments and trackbacks spam? Me too, I received 500 – 1000 comments, trackbacks and registration spammers. For most blogs, comment spam is the biggest issue they have to deal with and they’re deleting it manually each and every day.

Fortunately, there are simple measures that can be taken to keep this from becoming a massive problem. Now it’s time to protect wordpress site from spammers. In this post you will learn how to prevent spam comments and known how I have successfully locked down comment spam using several diff techniques that work for me.
Continue reading

Ultimate .htaccess Hacks to Supercharging your WordPress websites

Ultimate .htaccess Hacks to Supercharging your WordPress websites

There are several ways to improve your WordPress websites. Once you are done playing with the WordPress dashboard, plugins and themes then you must take a look to .htaccess. The .htaccess file is the easiest and the cheapest (actually it’s free!) solution to supercharging your WordPress websites but there are also some basic Apache knowledge requirements.
Continue reading

Why I stop using Jetpack plugin

Jetpack’s bloat, replace Jetpack’s modules with other plugins

JetPack is all-in-one WordPress plugin developed by Automattic, made up of a bunch of useful modules, they called it as super-plugin. When I first heard about Jetpack, I was excited about the potential for WordPress.com features to be shared with WordPress.org users. It’s good choice (must have) when you start a WordPress website and in some previous post, I’ve told why do you should active JetPack first. But all-in-one or everything functionality plugin is not good for you, sometimes you will feel it

Why I stop using Jetpack plugin
Why I stop using Jetpack plugin

Continue reading