post

Enable css for HTML5 tags in Older Internet Explorer: HTML5 – The Beautiful Butterfly! Part 3

First you may take a look in:
Part 1
Part 2


This is a very interesting topic. Most of the html5 tags are not supported in older versions Internet Explorer(IE) or other older browsers. When we develop a website in html5, we consider it. You can ignore older versions of FF, Chrome or Safari, but you can’t just ignore IE7 or IE8. Well, some tags are still not supported in any browsers, but what about simple tags like section, article, header, nav etc?

When we apply styling on these tags using css, the tags are not recognized in IE at all. So, no style is shown. For example:
[html]

bla bla bla
bla bla bla

[/html]
And you style this
[html]

header{padding: 10px; background: red;}
nav{margin: 10px 5px 10px;}

[/html]

This will look good any modern browser but not in older versions of IE. And it was not discovered until a unknown person make a comment. It was in 2008. The commenter Sjoerd Visscher posted a comment in intertwingly.net/blog/2008/01/22/Best-standards-support:

Btw, if you want CSS rules to apply to unknown elements in IE, you just have to do document.createElement(elementName). This somehow lets the CSS engine know that elements with that name exist.

And this comment changed everything! Before this comment nobody knew that you can do it, pretty interesting, isn’t it?

So, the way is if we create a simple script line in the head tag, all html5 tags should be introduced in IE.
[html]

document.createElement(‘header’);
document.createElement(‘nav’);
document.createElement(‘article’);

[/html]
So, if we need to create a number of elements for IE, we can use an array:
[html]

var e = [‘header’, ‘section’, ‘nav’, ‘article’]; // add more elements here
for(var i = 0; i < e.length; i++){
document.createElement(e[i]);
}

[/html]
But we don’t want to execute this script in every browsers, only in IE. So, use conditional html tag :)
[html]

var e = [‘header’, ‘section’, ‘nav’, ‘article’]; // add more elements here
for(var i = 0; i < e.length; i++){
document.createElement(e[i]);
}

[/html]

You can see a nice documentation here by John Resig. Another well known and popular web developer Remy Sharp created a script that enable html5 tags in IE and is available in google code. An advanced script is here. So, if you use this you just need to include the source, rest of things will be done by that script :)

There are many ways out there for IE to recognize the html5 tags. We will discuss about those in some other day :)

Part 1
Part 2

post

WordPress Multisite: How to define a common upload folder for all blogs or subsites

In WordPress multisite, media uploaded from the subsite users are stored to different subdirectories using blog id into uploads folder. But, if you need to save all media files in one folder rather than uploads folder with lots of child folders, then you are in right place.

Use the following code into your theme functions.php file if you think your theme won’t be changed. Otherwise, mu-plugins is the best option.

[php]
0) {
$upload[‘path’] = ABSPATH . ‘wp-content/images’;
switch_to_blog(1);
$upload[‘url’] = site_url() . ‘/’ . ‘wp-content/images’;
restore_current_blog();
$upload[‘subdir’] = “”;
$upload[‘basedir’] = $upload[‘path’];
$upload[‘baseurl’] = $upload[‘url’];
}
return $upload;
}

function make_filename_hash($filename) {
global $user_ID;
return $user_ID . time() . $filename; /*Using time() function for uniqueness*/
}
add_filter(‘sanitize_file_name’, ‘make_filename_hash’, 10);
[/php]

Enjoy!

post

How to add extra field in the wordpress user profile

Hi Folks!

Sometimes we need to add extra fields in wordpress user profile page for some more information like website URL, bio or AIM etc. Well, there is an easy solution from admin dashboard if you use BuddyPress. You can add new profile fields from Users > Profile fields. But what if you don’t use BuddyPress? Well, you are still able to add extra fields with some line of codes.

You can add those codes in your functions.php in the theme, if you think your theme won’t be changed. Otherwise mu-plugins is the best solution.

Let’s jump in the code:

post

Team Bio – Meet the Team – WordPress Plugin

Team Bio/Meet the Team is a WordPress plugin that allows you to easily create and manage your team. You can display single teams as multiple columns, you can also showcase all teams as a filterable isotope gallery including easy social links management.

The purpose of this plugin is to allow you to create a “Meet the Team/Partners/Team Bio” page for a website. This plugin makes it easy to create a Team Page to showcase your most important assets.

It’s very cheap and easy to use. You can check the “demo” and “how to use” in following video.

There are two versions of this plugin. Version 1.0 is cheaper than version 2.0. If you have content for all members of similar length, then version 1.0 is good for you. But in version 1.0 if you have large content for one or two members, then the design may break. In that case, version 2.0 is perfect for you. Check the difference of two versions below: (assuming you have long content for one/two members in the team than the others)

In version 1:
Screen Shot 2013-07-31 at 11.18.24 PM

But in version 2:
Screen Shot 2013-07-31 at 11.18.42 PM

Click on the image to see larger

So, version 2.0 looks perfect.

Choose your one from below:

[purchase_link id=”363″ text=”Add to Cart Version 1.0″ style=”button” color=”green”]

[purchase_link id=”386″ text=”Add to Cart Version 2.0″ style=”button” color=”green”]

Check Screenshots: (Click on the image to see larger)

Screen Shot 2013-08-02 at 4.22.05 AM

Meet the team

Meet the team

80X80

8

7

6

5

4

3

2

1

[purchase_link id=”363″ text=”Add to Cart Version 1.0″ style=”button” color=”green”]

[purchase_link id=”386″ text=”Add to Cart Version 2.0″ style=”button” color=”green”]