This is the code:

if (has_term( 'video', 'article_type', $post->ID )) {

require_once('video.php');

} else {

require_once('article.php');

}

add_post_type_support( 'page', 'excerpt');

Just add this line of code to your functions.php file and that’s it!
The credit for coming up with this goes to Michael Fields.

The winner for this week is: Query Multiple Taxonomies

With this you can add a filter that combines multiple taxonomies in a single query. We’ve been trying to find a good plugin that did just this, and there are a few, but none really combined multiple taxonomies. They either combined categories and tags, multiple categories, etc.

This plugin is really simple to use and pretty much ready to go!

Shortcodes are very useful in WordPress. However, I never needed before to run some PHP within a shortcode. At first I thought it might not work, but then I realized it is actually quite easy. Just wrap your PHP code with curly brakets inside your shortcode. Easy!

do_shortcode("[download id='{$download_id[0]}' format='1']");

img { -ms-interpolation-mode: bicubic; }

Of course, resizing images with CSS is not the ideal way, but there may be times where you need to. So, this CSS will help.

It’s really good for the user experience to tell them the total amount of posts found when they do a search. And displaying the word they search for is also very handy. I’ve found a few methods to do this, but they are all too complicated given that WordPress has a simple way of doing this:

<?php echo $wp_query->found_posts; ?>

search results for:

<?php echo get_search_query(); ?>

This will display the total number of found posts and the used search query. Short and simple.

To start with I got a web development job in January. So, that has brought lots of work and great projects

The other thing that changed is that I’ve been working with WordPress. So, that has been really fun. WP turned out to be a great CMS and I like working with it. I have even learned how to make WP plugins

After all this months of learning WP, I think I have gathered quite a few useful tips about WordPress development. So, for a while now I wanted to start a series of tutorials called: “Become a WordPress expert.” These will be short tuts, easy to follow, and they will be about the most useful things I’ve learned about WP.

It’s nice to be back blogging, though. But I guess I needed the time to really get into my new job and my new rhythm!

Okay, see you soon for my first Become a WP expert tut

With this short tutorial, I will show you how to use Conditional Comments to add special Style Sheets for Internet Explorer. In this way you can force Internet Explorer to render your site the way it should.

Not long ago somebody asked me how to approach Internet Explorer’s bugs. They were having a hard time making it work. So I decided to make this simple, yet useful tutorial.

By now this has become normal to me, but when I first saw how Internet Explorer (especially 6) renders websites I was shocked! And, even though IE8 is much (MUCH!) better than IE6, I still find all sorts of bugs I always have to fix.

So, we are left with no choice but to find a way to make it work. Remember that your clients won’t be amused if you hang a “RIP IE6” on their site. They will expect their website to work with every browser.

Conditional Comments to link special CSS for IE is a simple workaround. These Style Sheets will ONLY be read by Internet Explorer.

Step 1

Lets say that you want to support IE 6, 7, and 8. Put in the head of your XHTML document the following code (conditional comments):

<!--[if(IE 6)]>
        <link rel="stylesheet" type="text/css" href="css/ie6.css" />
<![endif]-->
<!--[if(IE 7)]>
        <link rel="stylesheet" type="text/css" href="css/ie7.css" />
<![endif]-->
<!--[if(IE 8)]>
        <link rel="stylesheet" type="text/css" href="css/ie8.css" />
<![endif]-->

These are the links to the CSS docs for Internet Explorer. It’s pretty much like any other CSS link, but these ones are wrapped by the conditional comment, therefore only IE will use them.

Step 2

Now create the Style Sheets called ie6.css, ie7.css and ie8.css.

Step 3

Now you need to render your site using each version of IE. Identify which elemtns IE might be rendering differently than intended. Once you know what’s wrong, you can override your original CSS rules with the rules in these new CSS for IE. Use each Style Sheet for the different versions of IE. Sometimes you need to use more specific selectors, or apply rules to different elements. It’s different every time, of course.

And, that’s it! It’s simple, but the tricky part, which is taming IE, is up to you!

Common fixes for IE6.

These rules can be used for IE6. They will correct one of the most common problems: IE6 doesn’t center the website if you used the margin:auto rule.
Here is the code:

 body { text-align: center; } #wrap { text-align: left; } 

The first rule will force IE6 to center the page. The problem is that the text will also be centered. So, we apply the second rule to your wrap element to put the text back in place. And that’s it, you will have a centered page. Easy, right?

Here a link for some more common fixes. IE Bugs.

Some useful tools.

There are different tools to check your sites in IE. Here there are a few I find useful:

Multiple IEs This one misses IE7, though. (For PC)
IE Tester This one does have IE7, but it crashes quite a bit. (For PC)
Browser Lab Adobe gives you a free subscription for a year on this one. (It works online)

If anybody wants to share their favorite tools for IE testing, go ahead, I’m curious!

I hope you find this tut useful! If you have comments of questions let me know

Step 1

First add this code to the head of your HTML document.

<!--[if(IE)]> <link rel="stylesheet" type="text/css"
href="css/ie_dropdown.css" /> <![endif]-->

Step 2

Now, create the css doc called ie_dropdown.css and put in it this code:

#menu {
    padding: 0;
    margin: 0;
}
#menu li ul {
    display: none;
    position: absolute; left: 0; /*aligns the dropdown to the horizontal tabs*/
}
#menu li:hover ul, #menu li.over ul {
    display: block;
    padding: 0;
}
#menu li a:hover {
    background: #EAF6F5 url(shadow3.png) repeat-x top left;
    text-decoration: underline;
}
#menu li ul li {
    height: 30px;
    line-height: 30px;
}

What it is important to notice is that we are back using the display:none to display:block set of rules. Also notice that in the li ul element we set left to 0 pixels. This aligns the dropdown to its parent element and corrects IE tendencies to display elements in the wrong places. We need to set the chaging background, and the underline rules to the a:hover element because that’s the only hover IE supports. Finally we also set the height and line-height to 30 pixels.

Step 3

But no, sadly this alone won’t do for older versions of IE. So, we are forced to use some Javascript to make it work. Here is the Javascript (source: Suckerfish Dropdowns).

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
  }
  node.onmouseout=function() {
  this.className=this.className.replace(" over", "");
   }
   }
  }
 }
}
window.onload=startList;

Place a link to this Javascript document in the head of your HTML. And, you’re done! You will have dropdown menus that work across all browsers, and take advantage of both CSS 2 and CSS 3!

Resources and useful links

• Suckerfish Dropdowns
• CSS3 Dropdown Tutorial

Step 1

First, there are just a few rules we need to change in the dropdown.css document to prepare for the CSS 3 rules.

Here is the code:

		#menu li ul {
			opacity: 0;
			position: absolute;
		}

		#menu li:hover ul {
			opacity: 1;
		}

Instead of using the display: none to display:block, we will use the opacity set to 0, and then set to 1 on the li:hover element. This will have the same effect of hiding the dropdowns, and showing them just when hovered.

Now, we add the height and line-height from 0 in the li ul li to 30 pixels in the li:hover ul. This will allow the dropdowns to expand from 0 to 30 pixels when they are hovered. Choose your own height and line-height but make sure you are consistent throughout your code.

Here is the code:

		#menu li ul li {
			height: 0;
			line-height: 0;
		}

		#menu li:hover ul li {
			height: 30px;
			line-height: 30px;
			background: none;
		}
			

Step 2

Now we add the CSS 3 rules. These will control how the transitions take place. Here is the code:

		#menu li {
			-webkit-transition: all 0.2s;
		}

		#menu li a {
			-webkit-transition: all 0.5s;
		}

		#menu li ul {
			-webkit-transition: all 1s;
		}

		#menu li ul li {
			-webkit-transition: height 0.5s;
		}

The all means that all properties of the element will be animated. Next, we specify the time that it will take for the transition to complete. In the case of the last rule, we are only affecting the height property.

Remember that these will only work on browsers that support CSS 3, such as Chrome. However, they will degrade gracefully in the rest of the browsers, except for IE of course.

Continue reading Part 3 to learn how to make the menu work in Internet Explorer.