Activating the function

First things first, open up the functions.php within your theme, if you don’t have one you will need to create one. To activate support for this function do one of the following:

To add it to both posts and pages:

add_theme_support( 'post-thumbnails' ); 

For just posts:

add_theme_support( 'post-thumbnails', array( 'post' ) );

For just pages:

add_theme_support( 'post-thumbnails', array( 'page' ) ); 

Setting a size for the featured thumbnail:

set_post_thumbnail_size( 70, 70 ); 

The above will make the image 70 pixels by 70 pixels, however if the image isn’t square it will mean that it will make the larger size 70px and then resize the smaller side to keep the aspect ratio of the image (for example 70px by 25px).

To force the image to crop to 70px by 70px instead of maintaining the aspect this can be used instead:

set_post_thumbnail_size( 70, 70, true ); 

Display thumbnail in a theme

To add this feature into your theme so that it will display the image on the page, just add this bit of code where you would like the image to be shown within the loop. You don’t need to encase it in the image element it will generate everything it needs to display the image.

<?php the_post_thumbnail(); ?>

Adding different sizes

Sometimes different sized images are required for different pages of a site, here is how to do it.

if ( add_theme_support( 'post-thumbnails' );
     set_post_thumbnail_size( 70, 70, true ); // default thumbnail size
     add_image_size( 'single-post', 300, 9999 ); // size for post or page image
     add_image_size( 'archive-thumbnail', 30, 30, true  ); // size for archived image.
}

The above example is for 3 different sized images for the homepage, post page and the archives page. By setting the single-post to a large number for the height will ensure that the width is 300px while maintaining the aspect ratio of the height.

To get it to display the different image sizes all that needs to be added into the pages code is the name that has been given within the function.

For the post page:

<?php the_post_thumbnail( 'single-post' ); ?> 

For the archive page:

<?php the_post_thumbnail( 'archive-thumbnail' ); ?> 

The names don’t have to be what has been given in the example, they can be called what you like.

Adding thumbnail to a post or page

In the WordPress editor there will now be a box on the right hand side, depending on the version of WordPress it will be called something different, from this box or the usual ‘add image’ dialogue box you will be able to add a featured image. The only difference from adding an image to a post normally, is instead of pressing the ‘insert into post’ button, there will be one next to it called something like ‘use as thumbnail’ (again the wording might be different). By pressing this button it will add it to the image box on the right and it will be set as the featured image.

Adding some style

If you wish to add some styling to these images you can do so by using the default class .wp-post-image. Alternatively you can set your own class, so if you have multiple sizes and want different styles this way can be quite useful:

<?php the_post_thumbnail( array( 'class' => 'class-name-here' )); ?>

Resource

Post Thumbnail – WordPress Codex

The way this works is with a simple counter within php that is then called within the loop to add a class depending on if the post count is an odd or even number.

The counter gets introduced before the start of the loop like so:

<?php $c = 0 ; ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

The rest of the loop will be created pretty much as normal, the only difference is the addition of class within the container for the post, be that a div or a list item.

<div class="<?php echo $c++&1 ? 'even' : 'odd'; ?>">
... rest of loop  here ....

In combination with the counter that is started before the loop this bit of php will use the classes even or odd depending on if the post is counted as an even or odd number.

All that is left to do is style the classes within the css to however you would like them to look.

.odd {style here}
.even {style here}

Here is an example of a loop fully coded:

<ul class="news">
   <?php $c = 0 ; ?>
      <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
         <li class="<?php echo $c++&1 ? 'even' : 'odd'; ?>">
            <h3><?php the_title(); ?></h3>
            <?php the_excerpt(); ?>
         </li>
      <?php endwhile; ?>
   <?php else : endif; ?>
</ul>

While this method has been around for many years, it wasn’t until recently that it became supported by the majority or major browsers in one way or another. It works by having the font stored within the websites directory and locating it through the CSS, rather than the user having to have the font installed on their computer. So even if a visitor doesn’t have the font installed they will still see the desired font, provided there is support for the font format within the browser they are viewing it on.

For information on browser compatibility & support:
http://www.webfonts.info/wiki/index.php?title=@font-face_browser_support

Using @font-face

It is quite simple to use this, however as you would expect Internet Explorer doesn’t play nice, so while other browser are happy to use a true type font (ttf) IE requires an Embedded OpenType font type (EOT). There are many sites that offer online conversions of a font to this format, I personally use Font Squirrels @fontface Generator

Once you have the ETO and a file for other browsers copy them somewhere in your sites directory and add the following near the top of your css file:

 @font-face {
  font-family: 'fontname';
  src: url(fontname.eot);
  src: local(' fontname Regular'), url(fontname.ttf) format('truetype');
}

What the above does is first locate the .eot file for IE and then uses src:local which IE doesn’t understand to find the other font file for other browsers. There is a slight problem with this method, in that using src:local will mean that it will look in the users directory for the font, so it is best to give the font a slightly different name so that it won’t find a font called that on the visitors computer.

To style an element with the new font all you need to do is add the name that was given as the font-family within the @font-face, for example:

 h1 { font-family: fontname, Helvetica, Arial, sans-serif; }

Like with any fonts used (including websafe ones) it is always best to include others as a fall back, so that if a browser doesn’t support the font it will still have some alternatives to use and not have to rely on the browser defaults.

As for the HTML, as the styling is all done through the css, the element just needed to be written how it would be normally:

<h1> Main Heading Here </h1>

The legal stuff

Always make sure the font you want to use has a Web-font licence, you can check this on the site that you get your font from, or if it is one that you already have on your computer do a quick search to make sure you have the permission required to use the font on a website.

So combining a few solutions for flashplayer 8 together I was able to getting it to work with the technique below.

Step One –The CSS:

The code below is how you would expect it to be, there is a container, a background class and the content for html. The background and content containers are both absolute positioned one on top of each other using a z-index.

#flash {
	width:720px;
	height:260px;
	position:relative;
}
#flash .bg {
	width:720px;
	height:260px;
	position:absolute;
	z-index:10;
}
#flash .content {
	width:720px;
	height:260px;
	position:absolute;
	z-index:15;
}

Step Two –The HTML:

The HTML structure for the containers is also pretty simple:

<div id="flash">
<div class="bg"></div>
<div class="content">  Add content here</div>
</div>

Flash
This is where this method differs from all the ones that I was able to find, it doesn’t need to use embed or a lot of complex coding, all it needs to do is use the wmode parameter like so:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="720" height="260">
<param name="movie" value="flash.swf" />
<param name="wmode" value="opaque" />
<!--[if !IE]> <-->
<object data="flash.swf" width="720" height="260" type="application/x-shockwave-flash">
<param name="pluginurl" value="http://www.macromedia.com/go/getflashplayer" />
<param name="wmode" value="opaque" />
</object>
<!--> <![endif]-->
</object>

Here is the finished html code:
The HTML structure for the containers is also pretty simple:

<div id="flash">
<div class="bg">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="720" height="260">
<param name="movie" value="flash.swf" />
<param name="wmode" value="opaque" />
<!--[if !IE]> <-->
<object data="flash.swf" width="720" height="260" type="application/x-shockwave-flash">
<param name="pluginurl" value="http://www.macromedia.com/go/getflashplayer" />
<param name="wmode" value="opaque" />
</object>
<!--> <![endif]-->
</object>
</div>
<div class="content">  Add content here</div>
</div>

Known Issues

The only issue I have found so far is that it doesn’t work with IE6, because of needing to use transparency within the flash, but does with IE7+.

a {
   outline: none;
}

The outline has gone, however the problem now is that those that use a keyboard to navigate around a site will have no visual aid for what they are currently highlighting. One way around this is to style :focus the same as :hover like this:

a:hover,  a:focus {
   add the styling here
}

This is a perfectly acceptable method of dealing with the issue, there was always a small part of me that didn’t like having to take away something that is a built in browser function, it could almost be like taking way the right click for mouse user…ok maybe not as severe as it is being restyled restyling rather than disabled altogether.

However all is not lost for those that wish to keep the default browser functions in tack for keyboard users but remove the outline when the mouse click thanks to Patrick H. Lauke and the article he wrote over on 24ways : Don’t Lose Your :focus. The solution is quite a simple one too, rather than remove the outline completely or on the :focus remove it from the hover and active states instead:

a:hover, a:active {
   outline: none;
}

Step One –The HTML:

The html is quite simple:

<div id="nav">
   <ul>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
   </ul>
</div>

The reason why there needs to be a div is because the container needs different style information to the unordered list for this technique to work. As the trick to this comes with the way the different elements work with and against each other to position the links within this containing div.

Step Two – CSS:

Lets start first with the containing div:

#nav {
   width:100%;
   position:relative;
   overflow:hidden;
}

While you can change the width to a fixed size it is usually best to keep it at 100% as even if the menu is contained within another div it will just take up 100% of its container.

Next the unordered list:

#nav ul {
   float:left;
   position:relative;
   left:50%;
   text-align:center;
}

Even though we are aiming to have these links centered it is important to include the float left, as this will shrink the ul to the size of its content, meaning that it will position exactly where we tell it to.

Position relative is also important in this as it will allow us to move the list to the right by 50%. However this means that the unordered list (ul) starts at the 50% point of the #nav container, so the menu is positioned more to the right. To fix this we need to position the list items (li):

#nav ul li {
   float:left;
   position:relative;
   right:50%;
}

Again the float left is used to shrink the list items to the size of their content, which will help with sizing not just the li’s but also the navigations size overall.

The idea behind positioning the li’s 50% to the right is to counter act the positioning of the unordered list and shift the entire menu along to the left, putting the central point of the menu in the center of the #nav div.

Put all together the css will look like this:

#nav {
   width:100%;
   position:relative;
   overflow:hidden;
}
#nav ul {
   float:left;
   position:relative;
   left:50%;
   text-align:center;
}
#nav ul li {
   float:left;
   position:relative;
   right:50%;
}

Once this is in place you can then go in and style the links to fit the design of your site, as this tutorial has just given the minimum css required to make this work instead of also styling the links to look pretty.

The <embed> tag was deprecated in HTML 4 and XHTML and while most browsers still support it,  your code won’t validate if it is used.  So if this is an issue for you then the best way to achieve valid code and include an .swf is with the <object> element

A lot of tutorials I have read about adding flash into html4 and xhtml usually show this method :

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="960" height="500">
<param name="movie" value="flash.swf" />
</object>

However the issue with the method above is that it doesn’t work with that wonderful browser known as Internet Explorer. So to fix that issue this can be used instead:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="960" height="500">
<param name="movie" value="flash.swf" />
<!--[if !IE]> <-->
<object data="flash.swf" width="960" height="500" type="application/x-shockwave-flash">
<param name="pluginurl" value="http://www.macromedia.com/go/getflashplayer" />
</object>
<!--> <![endif]-->
 </object>

While this looks a lot messier it will display the flash file in Internet Explorer and it will validate.

HTML5

HTML5 has actually reintroduced the <embed> tag and while there is much debate about flash’s future because of HTML5′s canvas, this is still worth a mention. So should you be coding using HTML5 here is an easier way to place flash content within your website:

<embed src="flash.swf" width="600" height="900" />

SWFObject

SWFObject is a more flexible way of embedding a flash object into html by using an unobtrusive JavaScript method. One of the major benefits of using SWFObject is that if the flash player is outdated or isn’t installed, instead of there being a block missing from the site it will display alternative content such as an image, meaning that those that choose not to or can’t have flash installed can still see something rather than nothing.
Visit the SWFObject page for more information

Conditional Comments have been around since Internet Explorer 5 and have been built into every IE browser since then. They simply let you determine which version of IE the user is using and lets you add something to a targeted IE version. This could be anything from an additional bit of coding such as an extra stylesheet to a little bit of text that you want someone to read should they be using a certain version of Internet Explorer.

How do they work?

They work simply by adding a bit of code into a normal html comment, so while IE has been programmed to read these, other browsers simply read them as a comment and ignore what is inside them.

By specifying a version of IE you can target certain browsers, as what happens is if IE reads the conditional comment to be true it will display it, but if it reads it to be false it will remain hidden within the comment.

Some Examples:

<!--[if IE 5 ]>
Only IE 5 will see this
<![endif]-->

<!--[if  lt IE 8 ]>
If the IE browser is  less than 8  this will be used
<![endif]-->

<!--[if  gte IE 7 ]>
If the IE browser is 7 or above this will be used
<![endif]-->

<!--[if  lte IE 6 ]>
If the IE browser is  6 or lower this will be used
<![endif]-->

<!--[if (gte IE 6)&(lt IE 8)] >
If the IE browser is greater or equal to 6 but less than 8 this will be used.
<![endif]-->

<!--[if (IE 5)|(IE 7)]  >
If the IE browser is either 5 or 7 this will be used.
<![endif]-->

Excluding IE but not other browsers

While it isn’t possible to create conditional comments for non-IE browsers using this method, it is possible to exclude IE from using part of the code. The way to do this is with the following conditional comment:

<!--[if !IE]>-->
Tells IE to ignore what is in here, but other browsers will use it
<!--<![endif]-->

Now hopefully you have noticed that this one is slightly different to the ones used to target IE. This is because instead of including everything in one comment, there is one comment to open the if statement and another to close it. What this then does is open up what is written in the middle to be read by all browsers, but IE will ignore it until the conditional statement is closed. The reason why this has to be different is simply because if the whole condition was within the comment then every browser would ignore it, as other browsers would still treat it as a normal comment.

Breakdown of the Operators

The table below shows the supported features and describes what they do.

HTML Commenting

HTML comments have an opening and a closing tag, and anything that is between the two tags is included within the comment, meaning that it can span as many lines as it needs to.

• <!– Opening Comment
• – > Closing Comment

example of use:

<!-- start of header -->
<div id="header">
<img src="logo.gif" alt="an example" class="logo"  />
<!-- start of nav -->
<ul id="nav">
<li><a href="#" title="nav link - a good link">nav link</a></li>
<li><a href="#" title="nav link - a good link">nav link</a></li>
<li><a href="#" title="nav link - a good link">nav link</a></li>
<li><a href="#" title="nav link - a good link">nav link</a></li>
</ul> <!-- close of nav -->
</div><!-- close of header -->

CSS

There isn’t a difference between how a HTML comment works to how a CSS comment does, really there is only one and that is the syntax that is used.

• /* Opening Comment
• */ Closing Comment

example of use:

/* header info */
#header { width:960px; height:90px; padding:10px 0px;}
#header .logo { width:300px; float:left; }
/* nav info */
ul#nav { width:200px; float:right;}
ul#nav li { padding:5px; background-color:#666666;}
ul#nav li a { color:#FF9900; text-decoration:none; font-weight:bold;}

A few useful ways to use commenting:

If you are developing a site a good way to keep track of colour values is to add them in a comment at the top of your css, this way if you want to match the colour of some text with a colour used for a border, instead of looking through all the css for the value, you have a reference at the top of the page.

If a group of you are working on a project together but are scattered in different locations it can sometimes be hard to manage what everyone is doing, which could result in the same document getting worked on at the same time by two different people, meaning work will get lost. So an easy way to make sure this doesn’t happen is to add a comment to the top of the page you are working on so that other know not to edit it. Something along the lines of , then once you have finished simply remove the comment and others will know it is safe for them to edit the file.

Again if working in a group commenting is a great way to help with bug fixing, adding comments to the top of a document will let others know what has been done. It can also be good for saying if there is an issue with an element, for example it breaks in a certain browser, so others working will be able to quickly target where the problem is and hopefully come up with a solution to fix it.

How to apply a media type

There are a few ways that you could apply a media type to a style set:

External Stylesheet

<link href="default.css" rel="stylesheet" type="text/css"  media="screen"/>

Inline style sheet

@media screen{
	#nav { font-family:Arial, Helvetica, sans-serif;}
}
@media print {
	#nav { display:none;}
}

Imported Stylesheet

<style type="text/css" media="print">
@import "print.css";
</style>