Defer parsing of JavaScript for WordPress

HTML5 Asynchronous to the Rescue

Defer parsing of JavaScript for WordPress

We are adding this to the functions.php of your Child Theme

If you don’t have one, simply create new document/file and name it functions.php

Adding async atribute (tag)

<?php
if (!(is_admin() )) {
  function defer_parsing_of_js ( $url ) {
    if ( FALSE === strpos( $url, '.js' ) ) return $url;
    if ( strpos( $url, 'jquery.js' ) ) return $url;
    return "$url' defer ";
  }
  add_filter( 'clean_url', 'defer_parsing_of_js', 11, 1 );
}
?>

Additional Resources

That’s all, if you know the better way, please feel free to share with us.

Image source xhtmled/Flickr

Getting Started With Your WordPress Theme

WordPress.org Theme Directory

Getting Started With Your WordPress Theme
juehuayin/Flickr

I’ve seen my fair share of WPORG Themes and had a very successful Theme called “Responsive“, well Theme still remains successful. The following is my personal experience and opinion, if this worked for me, I am sure that it will for you too.

Don’t:

  • Release a Theme if you’re not going to support it.
  • Theme for yourself, Theme for the people.
  • Overcomplicate, less is more.
  • Expect to be the next StudioPress or WooThemes overnight, however at the same time feel free to aim that high and let that be your ultimate goal.

Do:

  • Think outside the box and be unique.
  • Start with a proven frameworks such as Bootstrap or ZURB Foundation.
  • Compete with other Theme authors and try to be one step ahead.

If you’re a designer only and want to combine great stuff into your Theme, begin with the starter Theme like Underscores and integrate one of the frameworks mentioned above. This great combination will have the best of both worlds and not to mention faster approval to WPORG.

Do your work with your whole heart, and you will succeed – there’s so little competition.
Elbert Hubbard

Responsive Form Elements

How to make your forms Responsive

Responsive Form Elements
Sierag/Flickr

box-sizing

* selector will apply to entire layout, not just forms.

* { 
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

Paul Irish calls this “a natural box layout model to all elements”

max-width: 100% to keep consistent form sizes

textarea,
input[type=text],
input[type=email],
input[type=password] {
    display: block; 
    max-width: 100%;
} 

Additionally you can use CSS Reset such as normalize.css or Reset CSS

If everything else was done right, this is pretty much all you need and what will make any* form Responsive.

Responsive vs Mobile Web Design

Difference between the Responsive and Mobile Web Design

Responsive vs Mobile Web Design
Chasing Daisy/Flickr

Mobile Web Design

Even though they serve the same purpose, these two design techniques are almost completely different.

Mobile Web Design is built as a separate entity, an addition to main (desktop) version of any given site.
In most situations Mobile Site will be powered by another platform and reside under subdomain such as http://m.example.com

Responsive Web Design (RWD)

Responsive Web Design does not require secondary site just for mobile devices. The layout will adapt to users viewing environment, whether this is desktop, or mobile phone.

What’s Better and/or Recommended

Responsive started gaining over Mobile Design last year and Responsive approach is also much cheaper and easier to maintain as well.