At this point we’re just about done with the homepage of our responsive website. We’ve got our navigation in place, our background images resize nicely, and our other elements are able to resize and adjust to various screen resolutions.

Today we’re going to focus on tying the page off with a footer. I’ve always admired sites that put some thought in to the bottom of their page design. There are certainly times when a footer requires nothing more than some basic contact info and maybe a copyright claim.

But I think it’s a good idea with any site requiring a fair amount of vertical scrolling to go ahead and add a smaller version of your main navigation in to your footer. This allows the viewer to reach the end of your page and quickly jump to another page on the site. We’ll put the icing on our footer by feeding in our latest tweet with a little jQuery script and then sprinkle in some contact info. Before we dive in to it, let’s take a quick peek at what we’re working towards.

Much like a website’s header, I like to use a separate file for my footer and dynamically pull it in to each page with a php include.

This makes for quick and easy updating if a link is added or contact info changes. Go ahead and open your idex.php file and include your footer, mine is sitting just above the close of my body tag and looks like this.

<footer>
    	<?php include('footer.php') ?>
</footer>

That’s it for our index.php page, go ahead and save it then close out of that file. Next up we’re going to want to create our footer file and enter all of our content, so open a new document and save it as “footer.php”. The first tag we’re going to want to drop in our footer.php file is our container id.

This will keep our footer content centered on the page and aligned nicely with the rest of our main content above. You’ll notice in the image of our footer above that it’s broken down in to three sections, so we’re going to want to include a “footerLeft” class right after we open the container.

We then populate our “footerLeft” class with a miniature version of our main navigation, and then icons linking to our social media pages. At this point my code looks like this.

<div id="container">
	<div class="footerLeft">
		<ul>
    		<li><a href="#">Home</a></li>

        	<li><a href="#">Portfolio</a></li>
        	<li><a href="#">Services</a></li>
        	<li><a href="#">About</a></li>

        	<li><a href="#">Blog</a></li>
        	<li class="last"><a href="#">Contact</a></li>
    	</ul>

        <img src="images/blogger.png" />
        <img src="images/linkedin.png" />
        <img src="images/facebook_icon.png" />
        <img src="images/twitter.png" />
	</div><!--end div "footerLeft"-->
</div><!--end div “container”-->

Our middle section is our Twitter feed and is only three simple lines of code, an image wrapped in a div class I named “twitter”. Our content is populated by jQuery and is set to recognize our “twitter” class as the appropriate location to place our latest tweet. We’ll dive in to this in our next tutorial.

<div class="twitter">
    <img src="images/twitter-preview.png" />
</div><!--end div "twitter"-->

Lastly we have some contact info, which I aptly named “contact”. From there simple paragraph and line break formatting displays our contact info.

<div class="contact">
    <p>Developer Drive<br>

	123 Fake St.<br>
	Cupertino, CA 95014<br>
	P: 650-555-1212<br>
	F: 650-555-1213</p>
</div><!--end div "contact"-->

That does it for our footer.php file. Feel free to check your work against my full footer.php code or save your work and close out of this page.

<div id="container">
	<div class="footerLeft">
		<ul>
    		<li><a href="#">Home</a></li>

        	<li><a href="#">Portfolio</a></li>
        	<li><a href="#">Services</a></li>
        	<li><a href="#">About</a></li>

        	<li><a href="#">Blog</a></li>
        	<li class="last"><a href="#">Contact</a></li>
    	</ul>

        <img src="images/blogger.png" />
        <img src="images/linkedin.png" />
        <img src="images/facebook_icon.png" />
        <img src="images/twitter.png" />
	</div><!--end div "footerLeft"-->

    <div class="twitter">
    <img src="images/twitter-preview.png" />
    </div><!--end div "twitter"-->

    <div class="contact">
    <p>Developer Drive<br>

	123 Fake St.<br>
	Cupertino, CA 95014<br>
	P: 650-555-1212<br>
	F: 650-555-1213</p>

    </div><!--end div "contact"-->
</div><!--end div "container"-->

Now that all of the content is entered in to the appropriate files, we can begin to style it. Our regular HTML5 footer tag sets the height, color, and font style for our footer. I also put a thick top border to help separate our footer from our portfolio slider above.

footer {
	height:250px;
	background-color:#C15007;
	border-top:10px solid #EDEAE5;
	color:#fff;
	font-weight:bold;
	font-weight:.8em;
}

The .footerLeft class gets a little tricky as there’s quite a bit going on in there with our mini main navigation list elements and images. Most of this is basic styling, but there are a couple things worth pointing out.

Since we don’t have too much room to make our mini navigation bar fluid and keep it on the same line with decent spacing, I made its width specific. We’ll rely on the Twitter and contact sections for our minor width adjustments.

Also, it’s worth pointing out that the inline display under our list element is important to maintain the same horizontal appearance of our page links.

.footerLeft {
	color:#fff;
	float:left;
	width:380px;
	height:150px;
	border-right:1px solid #fff;
	margin-top:5%;
	padding-top:2%;
}

.footerLeft ul li{
	display:inline;
	text-transform:uppercase;
	list-style:none;
	margin-right:2%;
}

.footerLeft ul li a {
	font-size:.8em;
	color:#fff;
	text-decoration:none;
	font-weight:bold;
}

.footerLeft ul li a:hover {
	text-decoration:underline;
}

.footerLeft img {
	float:right;
	margin:5% 2% 5% 0;
}

Next up we have our Twitter section, notice how we’re back to a percentage based width. We’re also able to style the time stamp of our tweets to subtly pronounce the time of our last tweet.

.twitter {
	width: 35%;
	height:150px;
	float:left;
	margin-top:5%;
	padding:2% 2% 0 2%;
	border-right:1px solid #fff;
	color:#fff;
	font-weight:bold;
	font-weight:.8em;
}

.twitter img {
	float:left;
	margin-bottom:100px;
	margin-right:5%;
}

.twitter .tweet a {
	text-decoration: none;
	color:#6BA5BD;
	font-weight:bold;
	font-weight:.8em;
}

.twitter .tweet a:hover {
	text-decoration: underline;
}

.twitter .tweet .time {
	font-size:10px;
	font-style:italic;
	color:#FFD08C;
}

Lastly, we’ll add some spacing to our contact section for an evenly spaced look.

.contact {
	float:left;
	margin-top:5%;
	padding:2% 2% 0 2%;
}

Next week we’ll finish off the styling to make our footer fully responsive as well as discuss the jQuery Twitter feed. In the mean time, test your responsive skills and see if you’re able to make your footer responsive. Click here to download the source code.

WordPress has a search function which has developers opinions split. Freelancer Paul Maloney shows us how to replace the search function with a super powered Google Custom Search engine

View demo: http://netmag.clientden.com/

WordPress and its search function – this is a subject that often splits the most hardcore WordPress users. Terms like “abysmal” are frequently banded about among developers, I personally defend it… to a certain level.

For smaller sites the search function does its job successfully, it’s no frills and does what it says on the tin, but for larger sites it can be like taking a spoon to a bazooka fight. So today I plan to show you how to integrate Google Custom Search into your WordPress install and harness the raw power of the world’s most powerful search solution.

Before we get into the nitty gritty I wanted to briefly cover something that has come up as an issue (of sorts) for me while replacing the search function. As we all know Google Custom Search will use Google results for your site so we need to ensure Google has good access to our content, so installing the Google XML Sitemap plugin will assist in Google’s indexing quest. The other point of note is due to the way WordPress archives work, Google may index multiple versions of your posts so you could in effect have several versions of the same article competing in your own search results, so to combat this I opted to use the All In One SEO Pack plug-in and set it up so only single posts would appear.

Not only will using these (or similar) plug-ins help your custom search work more efficiently; it’s also good SEO practice and could help you climb up those pages!

Now we can move onto the part you have been patiently waiting for, the actual implementation of Google Custom Search into WordPress.

Advertisement

Creating a custom search engine

First thing first, we need to visit Google Custom Search and set up our search engine. Follow this link: http://www.google.com/cse/ and you will be taken to the Google Custom Search page were you can create or manage your search engines.

We need to give our search engine a name, description and define its primary language, then we need to give it a list of sites to search, so in our case it would just be our site, so for example: http://www.netmagazine.com.

You then need to select an edition, there is an ad supported free version or, for the more financially blessed among us, we can go for the paid version and wave goodbye to those ads.

At this point Google Custom Search offers little in the way of customisation, but does offer a few themes and layouts we can use and hopefully one of those will work on our WordPress install.

The final step over at Google is to grab our code for our custom search engine, Google recommends using a supported Doc Type such as <!DOCTYPE html> in your pages as the custom search uses some CSS hover effects.

Below our code Google also offers some further options that you can use to customise the custom search a little further, which in this case we will need to do.

Hit the change the look and feel link and you will be presented with some layout and style options. We will need to use the Results only layout as we will be using our own search box. Tthe style is totally up to you. Once that is done, hit the Save & Get Code button and we can then finish this part off by grabbing our code.

You will need to specify your site details such as HTTP/HTTPS and specify the search result details – we should use “q”, which is the default Google search query parameter.

Our code is now ready to use in our WordPress install, so keep it in a safe place for the time being.

Building the results page

To get the custom search in place of WordPress’ in built search function we are going to use a custom page template (you can read more about these here: http://codex.wordpress.org/Pages#Page_Templates).

At the beginning of a custom page template you must define your custom page name so it can be used by WordPress, so we will name our template googlesearch.php and place this at the top of our custom page:

1. <?php
2. /*
3. Template Name: Google Search
4. */
5. ?>

The file name and template name can of course be altered and named to anything you wish.

Once that is in place, you can continue to build the rest of your page. For this tutorial I will be using the TwentyEleven theme and using the page.php as a base to work from, which looks a little something like this:

1. <?php
2. /**
3.  * The template for displaying all pages.
4.  *
5.  * This is the template that displays all pages by default.
6.  * Please note that this is the WordPress construct of pages
7.  * and that other ‘pages’ on your WordPress site will use a
8.  * different template.
9.  *
10.  * @package WordPress
11.  * @subpackage Twenty_Eleven
12.  * @since Twenty Eleven 1.0
13.  */
14.  
15. get_header(); ?>
16.  
17.                 <div id="primary">
18.                         <div id="content" role="main">
19.  
20.                                 <?php while ( have_posts() ) : the_post(); ?>
21.  
22.                                         <?php get_template_part( ‘content’, ‘page’ ); ?>
23.  
24.                                         <?php comments_template( ”, true ); ?>
25.  
26.                                 <?php endwhile; // end of the loop. ?>
27.  
28.                         </div><!– #content –>
29.                 </div><!– #primary –>
30.  
31. <?php get_footer(); ?>

That gives us our base to work with, but we need to add the code from Google and remove the things we don't need from the standard page template.

We don’t need the content or comments part so they can be removed, and then you can add your search code so you end up with something like this:

1. <?php
2. /*
3. Template Name: Google Search
4. */
5. ?>
6.  
7.  
8. <?php get_header(); ?>
9.  
10.                 <div id="primary">
11.                         <div id="content" role="main">
12.  
13.                                 <?php while ( have_posts() ) : the_post(); ?>
14.  
15. <div id="cse" style="width: 100%;">Loading</div>
16. <script src="http://www.google.com/jsapi" type="text/javascript"></script>
17. <script type="text/javascript">
18.   function parseQueryFromUrl () {
19.     var queryParamName = "q";
20.     var search = window.location.search.substr(1);
21.     var parts = search.split(‘&’);
22.     for (var i = 0; i < parts.length; i++) {
23.       var keyvaluepair = parts[i].split(‘=’);
24.       if (decodeURIComponent(keyvaluepair[0]) == queryParamName) {
25.         return decodeURIComponent(keyvaluepair[1].replace(/\+/g, ‘ ‘));
26.       }
27.     }
28.     return ”;
29.   }
30.  
31.   google.load(‘search’, ’1′, {language : ‘en’, style : google.loader.themes.MINIMALIST});
32.   google.setOnLoadCallback(function() {
33.     var customSearchControl = new google.search.CustomSearchControl(
34.       ’005589967590277281119:fumk3dewodg’);
35.  
36.     customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
37.     var options = new google.search.DrawOptions();
38.     options.enableSearchResultsOnly();
39.     customSearchControl.draw(‘cse’, options);
40.     var queryFromUrl = parseQueryFromUrl();
41.     if (queryFromUrl) {
42.       customSearchControl.execute(queryFromUrl);
43.     }
44.   }, true);
45. </script>
46.        
47.  
48.                                 <?php endwhile; // end of the loop. ?>
49.  
50.                         </div><!– #content –>
51.                 </div><!– #primary –>
52.  
53. <?php get_footer(); ?>

*Notice the code is used inside the loop (codex.wordpress.org/The_Loop).

We can now upload that new file which I have called googlesearch.php to our theme folder.

Creating the search page

Now the bulk of the code is done we need to create a new page through the WordPress wp-admin, I have called my page “Search Results.”

You will see my page has no content as Google will supply that for us, but the main thing we need to do here is change the template to our custom page template. In this case we need to select the Google Search template from the drop down on the right. Once we have done that hit Publish.

We will also need to alter one other snippet of code. In searchform.php we need to alter the name field from s to q, and the form action to the URL of our new results page (in my demos case: action=”http://netmag.clientden.com/search-results”). Once that has been changed we're ready to go.

Tweaking our custom search engine

If all goes well, we now have a custom search engine that displays our WordPress’ results on our search-results page.

You might notice when you hit a link from your results page, it opens in a new window which is not ideal, so if we want to change this, we can add an extra snippet to our googlesearch.php page:

If we add:

1. customSearchControl.setLinkTarget(google.search.Search.LINK_TARGET_SELF);

between the following:

1. customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
2. var options = new google.search.DrawOptions();

so we get this:

1. customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
2.  customSearchControl.setLinkTarget(google.search.Search.LINK_TARGET_SELF);
3.     var options = new google.search.DrawOptions();

Your search results will now open in the same window, which in most cases will be the desired result.

Google offers further steps for customisation, such as applying your own stylesheet and using image search with your results but I will allow you to dig into those in further depth at your leisure.

Conclusion

While this is a solution that will favour many, it does have a few downsides. New posts might take a few days to get indexed and results can change, so popular pages might rank higher than newer articles and so on… That being said if you are managing a content heavy site and the inbuilt search feature doesn’t cut the mustard, this is probably right up your street.

This is our third installment of how to design a clean a minimalist website.

First we looked at navigation and how to make an accordion style drop-down menu with pure CSS3. Then we moved on to laying the site out and went over rounding corners and applying drop shadows with CSS3.

Now we’re going to look at how to create a gradient with CSS3 and apply that to a few of the elements in our homepage.

We left off in part two after we pulled our header, navigation and main image in to our layout. Now that we have all those things in place let’s go ahead and put in a few small quick-info type boxes underneath our main image. You can populate these boxes with anything you want, news headlines that link to a blog or news page, images, ads, testimonials, you name it.

For this tutorial I’m just going to use a few of the most recent blog posts off Developer Drive. We’re going to use the <article> tag for these boxes and add a little bit of style to help polish them up. Three of the main style elements I’m going to use on these are rounded corners, drop shadows and gradients.

I styled an article tag with the class “home” and made it 248 px wide by 190 px tall so that they’d align nicely underneath our main image. I also added margins, padding and the rest of the styling as follows.

article.home {
	float:left;
	width:248px;
	height:190px;
	padding:5px;
	margin:11px 11px 11px 0;
	border:1px solid #737373;
	-moz-border-radius:7px;
	border-radius:7px;
	-webkit-border-radius:7px;
	box-shadow: 2px 2px 2px #838383;
        overflow:hidden;
}

Next we want to make it look a little less flat and dull and gradients are an excellent way to breathe a little bit of color in to a site and help give it that nice, glossy, modern look.

To make a gradient cross-browser compatible requires a lot of redundant coding, so that’s when a site like Colorzilla comes in handy. Colorzilla generates cross-browser gradient code for you with a few simple clicks of the mouse.

When making a gradient you set start and stop points for each color, as well as opacity. Adding a simple gradient to something like a navigation bar, or in our case to use as a background, can require a lot of repetitive coding.

Colorzilla makes this process a breeze, click the colors you want, slide the bars to where you want the colors to change, then highlight the automatically generated code and paste it in to your CSS file. You even get a real time preview of what your gradient will look like.

I created a gradient that was a soft grey color that faded to white and we’re going to have it start with the light grey at the bottom of the box and fade to white towards the top. I added the following code that Colorzilla generated for me to my article.home class in my CSS file.

article.home {
	float:left;
	width:248px;
	height:190px;
	padding:5px;
	margin:11px 11px 11px 0;
	border:1px solid #737373;
	-moz-border-radius:7px;
	border-radius:7px;
	-webkit-border-radius:7px;
	box-shadow: 2px 2px 2px
        overflow:hidden;
        background: #ffffff; /* Old browsers */
        background: -moz-linear-gradient(top, #ffffff 79%, #dddddd 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(79%,#ffffff), color-stop(100%,#dddddd)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, #ffffff 79%,#dddddd 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, #ffffff 79%,#dddddd 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top, #ffffff 79%,#dddddd 100%); /* IE10+ */
        background: linear-gradient(top, #ffffff 79%,#dddddd 100%); /* W3C */
}

Since we’re going to be displaying some news headlines, let’s style a few other tags that will become useful. I’m going to use and h3 tag for the headline of each article, along with an h3 img tag so that we can include the author’s gravatar image as well.

I also created a h5 tag for the author’s name and the date and then styled a paragraph tag. These are all optional and could be unnecessary if you’re doing something different inside these boxes. When all was said and done my code ended up looking like this:

article.home h3 {
	font-size:14px;
	margin:0;
	padding:0;
	color:#404648;
}

article.home h5 {
	font-size:10px;
	margin-bottom:0;
	padding-bottom:0;
	color:#404648;
}
article.home h3 img {
	float:left;
	margin-right:10px;
}
article.home p {
	border-top:3px solid #6BA5BD;
	font-size:12px;
	color:#737373;
	margin:0;
	padding-top:5px;
}

Now that we’ve got all of the styling we need for our little promotional boxes under our main image, let’s jump back in to our index.php file and create the HTML needed and drop in the content.

Staying within the <section> tag, and just under the img src code for our main image, go ahead and place three instance of <arcticle class=”home”>. I just pulled some content out of a few recent Developer Drive articles, so my HTML ended up looking as follows.

<section>
	<img src="images/main.jpg" />

    <article class="home">
    	<h3><img src="http://1.gravatar.com/avatar/5e4c689cf3621361f2c7ebe5b4eafbe0?s=40&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D40&r=G" />Developing With The HTML5 Video Element</h3>
        <h5>By Scott Stanton - November 23, 2011</h5>
        <p>Videos have been a great way to attract viewers to a website long before YouTube launched back in 2005.  But it wasn't until the release of HTML5 that web developers have had a lightweight solution to playing the video.  In the past, displaying a video on your site meant your viewer was required to have a Flash or Java-based player installed on their system in order to watch the video.</p>
    </article>

    <article class="home">
    	<h3><img src="http://0.gravatar.com/avatar/ad76000eb5dc4b306853179632d77400?s=40&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D40&r=G" />Creating a PHP User Survey: Writing to Database Tables</h3>
        <h5>By Gerald Hanks - November 22, 2011</h5>
        <p>In the first two parts of this series, we created the data layer that will hold the polling data and established methods for setting the variable values and reading from the database tables.<br>
In this part, we will build the methods that will write new polls and answers to the tables.
    </article>
    <article class="home">
    	<h3><img src="http://1.gravatar.com/avatar/b8eb0184e62e8a6e71a2d1d7be558248?s=40&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D40&r=G" />An Introduction to HTML5's Video API Part 2</h3>
        <h5>By Louis Lazaris - November 21, 2011</h5>
        <p>This is the second part in our introduction to HTML5′s video API. In part 1 of this series, I introduced you to the basic markup we'll be using to play the video, then I helped set up a simple script with which we were able to make the controls visible, while ensuring that the native controls will still be visible when JavaScript is disabled.</p>
    </article>

</section>

Now that we’ve got our boxes and everything in place on our homepage we can utilize another cool new HTML5 tag, <footer>. I kept mine simple and just included some basic info that was wrapped in a <p> tag. Note how I take advantage of the php file and use a tiny snippet of code to dynamically generate the year.

<footer>
	<p>All Content © Developer Drive <?php echo date ('Y') ?></p>
</footer>

I gave it some real basic styling back in my CSS file, the only real noteworthy bit being the border-top that helps separate the footer from the rest of the content. My footer styling looks like this.

footer {
	position:absolute;
	top:747px;
	border-top:1px solid #838383;
	width:805px;
	text-align:center;
	margin-left:105px;
}
footer p {
	font-size:10px;
}

Now you’ve got a basic homepage that is clean, simple, polished, and minimalist. You can leave it the way that it is and run with it, or supercharge it by turning your image in to a slider that cycles through several images.

Stay tuned next time where we will cover sub-pages and how to easily display content in a manner that will quickly load and not require the viewer to load a new page on each link they click.

That’s set to change, though, as the Firefox and Internet Explorer teams have decided to join the party by implementing 3D Transforms in pre-release versions of their browsers. So, if all goes according to plan, we’ll see them in IE 10 and a near-future version of Firefox (possibly 10 or 11, but that’s not confirmed yet), both of which are slated for release sometime this year.

That being the case, this is an ideal time to get ahead of the curve and start learning about the possibilities and potential of adding an extra dimension to your Web pages. This article aims to help you do just that, by taking you on a flying tour of the 3D Transforms syntax.

Please bear in mind that in order to see the examples in this article, you’ll need a browser that supports 3D Transforms; as I write this, that’s Safari, Chrome, IE 10 Platform Preview or Firefox Aurora.

The Third Dimension

On the Web, we’re accustomed to working in two dimensions: all elements have width and height, and we move them around the screen horizontally (left to right) and vertically (top to bottom). The move to a third dimension can be thought of as adding depth to elements, and adding movement towards and away from you (the viewer). Think about 3D films in which objects are constantly thrust out of the screen towards you in an attempt to demonstrate the possibilities of the extra depth.

To use 3D Transforms in CSS, you’ll need to know about axes (that’s the plural of axis, not the plural of axe). If you already know about working in three dimensions or remember using axes in math class at school, you can skip the next section. For everyone else, here is…

A Quick Primer On Axes

I just mentioned that on the 2-D Web, we move elements around horizontally and vertically. Each of these directions is called an axis: the horizontal line is known as the x-axis, and the vertical line is the y-axis. If we think of the top-left corner of an element as our origin (i.e. the point from which movement is measured), a movement to the left is a negative movement along the x-axis, and a move to the right is a positive movement along the x-axis. The same goes for moving an element up (negative on the y-axis) and down (positive on the y-axis).

The third dimension is known as the z-axis and, as I said, can be thought of as towards or away from you; a negative movement along the z-axis is away from you, and a positive movement is towards you.

Showing the three axes: x (left-right), y (up-down) and z (away-towards).

If you’ve read all of this talk of axes and negative movements and you’re rubbing your eyes and blinking in disbelief and misunderstanding, don’t worry: it will all become clear when you get stuck in the code. Come back and read this again after a few examples and it should all be clear.

Transformation Functions

The various transformations are all applied with a single CSS property:
transform
— yes, the same property that’s used for 2-D CSS Transforms. At the moment, this property is still considered experimental, so remember to use all of the browser prefixes, like so:

div {
  -moz-transform: foo;
  -ms-transform: foo;
  -o-transform: foo;
  -webkit-transform: foo;
}

Note that Opera doesn’t currently have an implementation of 3D Transforms, but I’m including it here because work is apparently underway. For the sake of clarity, in the examples throughout this article, I’ll use only non-prefixed properties, but remember to include all of the prefixed ones in your own code.

Anyway, the
transform
property accepts a range of functions as values, each of which applies a different transformation. If you’ve used 2-D CSS Transforms, then you’ll already know many of these functions because they are quite similar (or, in some cases, the same). Here are all of the 3D functions:

• matrix3d
• perspective
• rotateX, rotateY, rotateZ, rotate3d
• scaleX, scaleY, scaleZ, scale3d
• translateX, translateY, translateZ, translate3d

Now,
matrix3d
definitely sounds the coolest, but it’s so unbelievably complex (it takes 16 values!) that there’s no way I could cover it in this article. So, let’s put that aside and take a quick look at the others.

Rotation

To explain what this does, I’ll have to ask you to do a little mental exercise (which will come in useful later in the article, too). Imagine a sheet of card with a string running through the middle that fixes it in place. By taking the top corners in your fingers, you can move the card up and down, left and right, and forwards and backwards, pivoting around the string. This is what the
rotate()
function does. The individual functions
rotateX()
,
rotateY()
and
rotateZ()
take a
deg
(i.e. degree) value and move the element around its point of origin (where the string passes through it) by that much.

Have a look at our first example (a screenshot is shown below in case you don’t have access to a supported browser). Here we’ve rotated each of the elements 45° around a different axis (in order: x, y, z), so you can see the effect of each. The semi-translucent red box shows the original position of the element, and if you mouse over each, you’ll see the transformations removed (I’ve used this convention in all of the examples in this article).

Each element is rotated 45° around a different axis: x (left), y (center) and z (right).

There is a
rotate3d()
function as well, but it’s too complex to explain in a brief article like this one, so we’ll skip it.

Translation

This is really just a fancy way of saying “movement.” The functions
translateX()
,
translateY()
and
translateZ()
each take a length value, which moves the element by that distance along the given axis. So,
translateX(2em)
would move the element 2 ems to the right, and
translateZ(-10px)
would move the element 10 pixels away from the viewer. There’s also a shorthand function,
translate3d()
, which takes three values in order, one for each axis, like so:
translate3d(x, y, z)
.

In our second example, we’ve translated each of the elements by -20 pixels along a different axis (in order: x, y, z).

Each element is translated by -20 pixels along a different axis: x (left), y (center) and z (right).

Note that translation of an element is similar to relative positioning, in that it doesn’t affect the document’s flow. The translated element will keep its position in the flow and will only appear to have moved, meaning it might cover or show through surrounding elements.

Scaling

This just means making bigger or smaller. The three functions
scaleX()
,
scaleY()
and
scaleZ()
each take a unitless number value, which is used as a multiplier. For
scaleX()
and
scaleY()
, this is applied directly to the width and height; for example, applying
scaleY(1.5)
to an element with a height of 100 pixels would transform it to 150 pixels high, and applying
scaleX(0.75)
to an element with a width of 100 pixels would transform it to 75 pixels wide.

The
scaleZ()
function behaves slightly differently. Transformed elements don’t actually have any depth to increase or decrease; what we’re doing is more like moving a 2-D object around in 3D space. Instead, the value given to
scaleZ()
acts as a multiplier for the
translateZ()
function that I explained in the last section. So, applying both
translateZ(10px)
and
scaleZ(2)
would translate an element 20 pixels along the z-axis.

There’s also a shorthand property,
scale3d()
, which, like
translate3d()
, takes three values, one for each of the individual functions:
scale3d(x,y,z)
. So, in the following code example, the same transformation applies to both of the elements:

.e1 {
   transform: scaleX(1.5) scaleY(1.5) scaleZ(0.75);
}

.e2 {
   transform: scale3d(1.5,1.5,0.75);
}

Perspective

The
perspective()
function is quite simple, but what it actually does is quite complex. The function takes a single value, which is a length unit greater than 0 (zero). Explaining this is a little complicated; the length is like a distance between you and the object that you’re viewing (a tutorial on Eleqtriq has a more technical explanation and diagram). For our purposes, you just need to know that the lower the number, the more extreme the 3D effect will appear; any value below 200px, for example, will make the transformation appear very exaggerated, and any value of 1000px or more will seem to have no effect at all.

In our third example, we have three transformed elements, each with a different value for the
perspective()
function: 25px, 50px and 200px, respectively. Although the difference between the three is very discernible, it’s even clearer when you mouse over to see the transformations removed.

Each element has a different value for the perspective() function: 25px (left), 50px (center) and 200px (right).

Note that I’ve transformed the parent elements (equally) so that we can see the degree of perspective more clearly; sometimes the difference in perspective values can be imperceptible.

Other Properties

In addition to
transform
, you’ll need to know about a few other important properties.

transform-style

If you’ll be applying 3D transformations to the children of an already transformed element, then you’ll need to use this property with the value
preserve-3d
(the alternative, and default, is
flat
). This means that the child elements will appear on their own planes; without it, they would appear flat in front of their parent.

Our fourth example clearly illustrates the difference; the element on the left has the
flat
value, and on the right,
preserve-3d
.

The element on the left has a transform-style value of flat, and the one on the right has a value of preserve-3d.

Something else to note is that if you are transforming child elements, the parent must not have an
overflow
value of
hidden
; this would also force the children into appearing on the same plane.

transform-origin

As mentioned, when you apply a transformation to an element, the change is applied around a point directly in the horizontal and vertical middle — like the imaginary piece of string we saw in the earlier illustration. Using
transform-origin
, you can change this to any point in the element. Acceptable values are pairs of lengths, percentages or positional keywords (
top
,
right
, etc.). For example:

div {
   transform-origin: right top;
}

In our fifth example, you can see the same transformations applied to two elements, each of which has a different
transform-origin
value.

The element on the left has a transform-origin value of center center, and the one on the right has a value of right top.

The difference is clearly visible, but even more obvious if you pass the mouse over to see the transformation removed.

backface-visibility

Depending on which transformation functions you apply, sometimes you will move an element around until its front (or “face”) is angled away from you. When this happens, the default behavior is for the element to be shown in reverse; but if you use
backface-visibility
with a value of
hidden
, you’ll see nothing instead, not even a background color.

perspective and perspective-origin

We introduced the
perspective()
function earlier, but the
perspective
property takes the same values; the difference is that the property applies only to the children of the element that it’s used on, not the element itself.

The
perspective-origin
property changes the angle from which you view the element that’s being transformed. Like
transform-origin
, it accepts lengths, percentages or positional keywords, and the default position is the horizontal and vertical middle. The effect of changing the origin will be more pronounced the lower the
perspective
value is.

Conclusion

By necessity, we’ve flown through the intricacies of the 3D transformations syntax, but hopefully I’ve whetted your appetite to try it out yourself. With a certain amount of care for older browser versions, you can implement these properties in your own designs right now. If you don’t believe me, compare the list of “More adventures” on The Feed website that I built last year in a browser that supports 3D transforms and in one that doesn’t, and you’ll see what I mean.

Some of the concepts used in 3D transforms can be quite daunting, but experimentation will soon make them clear to you in practice, so get ahold of a browser that supports them and start making some cool stuff. But please, be responsible: not everything on the Web needs to be in three dimensions!

A good-looking tab control usually has one feature that I’ve always found impossible to reproduce without images: borders that bend to the outside at the bottom of each tab. In this article I would like to show how you can use the CSS
:before
and
:after
pseudo elements to create this effect without using images. First, let’s start with some basic markup.

The markup

									<ul class="tabrow">
    <li>Lorem</li>
    <li>Ipsum</li>
    <li class="selected">Sit amet</li>
    <li>Consectetur adipisicing</li>
</ul>
								

This would be about as basic as you can get. Not a lot of elements to work with here, but it will do.

Getting started

To get started, let’s get rid of the default
<ul>
and
<li>
styling and get these babies in line.

									.tabrow {
    text-align: center;
    list-style: none;
    margin: 0;
    padding: 0;
    line-height: 24px;
}
.tabrow li {
    margin: 0 10px;
    padding: 0 10px;
    border: 1px solid #AAA;
    background: #ECECEC;
    display: inline-block;
}
								

Selecting a tab

The selected tab should of course be clearly visible.

									.tabrow li.selected {
    background: #FFF;
    color: #000;
}
								

Getting to the bottom of things

Every tab control needs a well-defined bottom edge. It won’t do much now, but later it will help emphasize the effect of the selected tab being on top.

									.tabrow {
    position: relative;
}
.tabrow:after {
    position: absolute;
    content: "";
    width: 100%;
    bottom: 0;
    left: 0;
    border-bottom: 1px solid #AAA;
    z-index: 1;
}
								

Here we introduced our first
:after
pseudo-element. Basically,
:after
appends another child to an element. It’s not in the DOM (which is why it’s called a pseudo element), so it is not a real child but it is completely stylable, as long as you add some
content
, in this case a single space character.

In my opinion, the terms
:before
and
:after
are slightly confusing since the pseudo’s aren’t actually added before or after the element they apply to, but are inserted as children. This is also why you can’t apply
:before
and
:after
to elements that can’t contain children (“no content” elements), like
<input>
.

In this case, we use the pseudo element to create a bottom border that doesn’t influence the tabs’ positioning. We could have just put a bottom border on the
<ul>
but that would’ve made the next step a little trickier.

Above and beyond

Now, an essential part of a convincing looking tab control, is that the selected tab sits in front of the edge while the rest fall behind the edge. To do this, we change its bottom border and do some
z-index
magic.

									.tabrow:before {
    z-index: 1;
}
.tabrow li {
    position: relative;
    z-index: 0;
}
.tabrow li.selected {
    z-index: 2;
    border-bottom-color: #FFF;
}
								

Around the bends

It is now time to add the elusive border that bends to the outside and we’ll use
:before
and
:after
for this. Let’s take this step by step and first just put everything in position.

									.tabrow li:before,
.tabrow li:after {
    position: absolute;
    bottom: -1px;
    width: 6px;
    height: 6px;
    content: " ";
}
.tabrow li:before {
    left: -6px;
}
.tabrow li:after {
    right: -6px;
}
.tabrow li:after, .tabrow li:before {
    border: 1px solid #AAA;
}
								

Don’t be such a square

You can probably see where this is going. Let’s remove the borders we don’t want and add some rounded corners.

									.tabrow li {
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}
.tabrow li:before {
    border-bottom-right-radius: 6px;
    border-width: 0 1px 1px 0;
}
.tabrow li:after {
    border-bottom-left-radius: 6px;
    border-width: 0 0 1px 1px;
}
								

Cutting corners

There’s something not quite right about this result. Let’s look at it up close. As you can see both the original straight corner as well as the rounded corner are visible. We need to somehow get rid of the straight corner. To do that, we will cover it up with a shadow. To illustrate what’s going on, let’s make the shadow stand out a little bit.

									.tabrow li:before {
    box-shadow: 2px 2px 0 red;
}
.tabrow li:after {
    box-shadow: -2px 2px 0 red;
}
								

Almost there

As you can see, the red shadows completely cover up the square corners we would like to hide. If we give the shadow the correct colors the illusion is complete.

									.tabrow li:before {
    box-shadow: 2px 2px 0 #ECECEC;
}
.tabrow li:after {
    box-shadow: -2px 2px 0 #ECECEC;
}
.tabrow li.selected:before {
    box-shadow: 2px 2px 0 #FFF;
}
.tabrow li.selected:after {
    box-shadow: -2px 2px 0 #FFF;
}
								

Pieces of flair

All that’s left to do now is adding a sprinkling of gradients and shadows to spice it up just a little bit.

									.tabrow li {
    background:      -o-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
    background:     -ms-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
    background:    -moz-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
    background: -webkit-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
    background: linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4), inset 0 1px 0 #FFF;
    text-shadow: 0 1px #FFF;
    margin: 0 -5px;
    padding: 0 20px;
}
								

If you’re wondering about browser compatibility, it’s exactly as you’d expect: everything but IE. It’s very possible that it’ll work in IE10, but I haven’t had the chance to test with a preview release. Since IE8 and IE9 do support
:before
and
:after
but not
border-radius
you’ll have to create a separate stylesheet for them if you want to give their users a nice visual experience.

View Demo   Download Files

Editor’s note: I added anchor links inside the tabs in the demo since I think it’s the most likely case that tabbed navigation like this have them. Most likely, they would have an
href
attribute that would link to the content they go with by
id
, and that behavior would be controlled by JavaScript. The fact that this tutorial doesn’t need the anchor links for the extra pseudo elements is further testament to it being better than my original.

On a current project, I was trying to find a way to auto-resize a textarea according to some content that would be loaded in dynamically via Ajax. I didn’t know the height of the content and the textarea element doesn’t resize naturally like other HTML elements, so I needed to update the height of the element with JavaScript each time the content changed.

It seemed like a simple task. After doing a search to see what types of plugins and scripts were floating around to do this, the examples I found seemed a little overly complex. While most solutions seemed to incorporate some complex math calculations, I thought of a better way.

Using a Hidden Clone Element

A
<div>
element will naturally stretch to fit the height of its content (assuming no floats or absolutely positioned elements are involved). So to get the height of the textarea, I just need to do the following:

• Grab the content loaded into the textarea
• Create an invisible clone div
• Give the clone the same width and typographical properties as the textarea
• Place the content into the clone
• Get the height of the clone
• Apply the height of the clone to the height of the textarea

The Code

One of the keys to this solution is the CSS. As mentioned, the invisible clone needs to have the same typographical properties as the textarea. Not only does this include stuff line
font-size
and
font-family
, but also the
white-space
and
word-wrap
properties of the clone need to be set to mimic what happens inside the textarea.

First here’s the CSS for the textarea:

textarea {
    width: 500px;
    min-height: 50px;
    font-family: Arial, sans-serif;
    font-size: 13px;
    color: #444;
    padding: 5px;
}

.noscroll {
    overflow: hidden;
}

Take note that I’ve added a separate class with
overflow: hidden
, to prevent scrollbars from appearing. Normally this would not be a good thing to add to a textarea element, but because I’ll be resizing it with JavaScript, it’s fine. This class will be added to the textarea with JavaScript, to ensure that if JavaScript is turned off, the textarea will scroll normally.

Here is the CSS I’ll be applying to the hidden clone element:

.hiddendiv {
    display: none;
    white-space: pre-wrap;
    width: 500px;
    min-height: 50px;
    font-family: Arial, sans-serif;
    font-size: 13px;
    padding: 5px;
    word-wrap: break-word;
}

A quick break-down: First, I set it to
display: none
because I don’t want it visible to the user. I believe this should be fine for screen readers, because I don’t want it read out to them either. If anyone has a better solution for hiding it for assistive devices, let me know.

I’ve also set the
white-space
property to a value of “pre-wrap”. This ensures that lines will wrap correctly, but everything else gets pre-formatted. I’ve also set the width to be equal to the textarea, and duplicated a few typographical properties. In both examples, I’m giving the clone and the textarea a
min-height
so it will always start out at a standard, usable height.

Now for the JavaScript (which is using jQuery, sorry):

$(function() {
	var txt = $('#comments'),
	hiddenDiv = $(document.createElement('div')),
	content = null;

	txt.addClass('noscroll');
	hiddenDiv.addClass('hiddendiv');

	$('body').append(hiddenDiv);

	txt.bind('keyup', function() {

	    content = txt.val();
	    content = content.replace(/\n/g, '<br>');
	    hiddenDiv.html(content);

	    txt.css('height', hiddenDiv.height());

	});
});

This code assumes we’re targeting a single textarea element on the page. If you need this to affect more than one element, then just change the first line inside the function that defines the element we’re working with.

I’m dynamically changing the height based on jQuery’s
keyup
event. You could easily change this to respond to an Ajax request instead, if you happen to be loading the content that way.

Using
keyup
, however, is a good solution because it’s the most likely reason that you’ll want to auto-resize a textarea — user-entered data.

What About IE6-8?

I almost didn’t write this article, because the code wasn’t working at all in IE6-8. The reason for this had to do with the poor way IE handles grabbing content using innerHTML. So after I had written this simple solution that seemed to work in all the newer browsers, I came across this jQuery plugin. That solution uses the exact same method that I’m using (the cloned element), and it worked (mostly) in IE.

So the line that I borrowed from that example that (mostly) fixed mine in IE was:

// fixes the IE innerHTML problem
content = content.replace(/\n/g, '<br>');

But even after adding this line, there was still an issue: Long, unbroken strings of text wouldn’t affect the height of the textarea (which isn’t a big problem, really). A simple fix was adding
word-wrap: break-word
to the CSS for the clone element.

Bugs? Problems?

Like the other solutions floating around, this could easily be turned into a plugin. In that case, I’d have to add a little more jQuery so that the characteristics of the clone element aren’t dependent on the CSS. Also, if the width of the textarea is fluid, then you’d have to use jQuery to grab that, and then apply it to the clone.

The solution I linked to in the previous section is just about perfect — you just need to add the
word-wrap
fix that I mentioned.

For a demo, you can view my JSFiddle using the link below. Just be sure to hit the “run” button before you test it. Let me know if you find any problems with it.

What is CoffeeScript?

To keep it simple, CoffeeScript is a little language that compiles into JavaScript. If you ever coded in languages such as Python or Ruby, you’ll probably love CoffeeScript a lot. Instead of awkward braces and semicolons, JavaScript has always had a gorgeous object model at its heart.

The code compiles one-to-one into the equivalent JS, and there is no interpretation at runtime. You can use any existing JavaScript library seamlessly from CoffeeScript (and vice-versa). The compiled output is readable and pretty-printed, passes through JavaScript Lint without warnings, will work in every JavaScript implementation, and tends to run as fast or faster than the equivalent handwritten JavaScript.

Installing CoffeeScript

Installing CoffeeScript is not hard at all. The first thing to do is to make sure that you already installed a working copy of the latest stable version of Node.js as well as npm, the Node Package Manager.

Once done, you can install CoffeeScript by running the following command:

npm install -g coffee-script

CoffeeScript is now installed. Next step is to compile a
.coffee
file into a
.js
file. Use the following syntax to do so:

coffee --compile example.coffee

CoffeeScript.org is the official website of the CoffeeScript language. Don’t hesitate to visit it, it’s full of helpful ressources.

Tutorial: Basics of CoffeeScript

A great tutorial that demonstrate all you need to get started with CoffeeScript: installation, configuration and first lines of codes.
→ View tutorial

Tutorial: Rocking out with CoffeeScript

A very complete tutorial that will make you a real CoffeeScript coder: it will show you how to write your code, how to indent, how to use classes, conditionnal statements and more.
→ View tutorial

Tutorial: Creating an iOS-like Home Screen with CoffeeScript

Now, let’s code something concrete: this tutorial will show you how to create an iOS-like home screen, using CoffeeScript. A great way to learn by the example.
→ View tutorial

CoffeeScript snippet: Shorten url using Google’s Goo.gl service

Short urls are very useful, especially on social networking sites like Twitter. Want to be able to create your own short urls using Google goo;gl service? No problem, just use the following code. Please note that you’ll need your own Google API key for the code to work.

apikey = "YOUR GOOGLE API KEY GOES HERE"

shorten_url = (url, success_callback, error_callback) ->

  xhr = Titanium.Network.createHTTPClient()
  xhr.open "POST", "https://www.googleapis.com/urlshortener/v1/url?key=" + apikey
  xhr.setRequestHeader "Content-type", "application/json"
  xhr.onload = () -> success_callback xhr.status, xhr.responseText
  xhr.onerror = () -> error_callback xhr.status, xhr.responseText
  content =  "{\"longUrl\": \"#{url}\"}"
  xhr.send content

→ Source: http://developer.appcelerator.com/question/125880/…

CoffeScript snippet: Read in a file

CoffeeScript make reading files very easy, as shown below:

fs.readFile 'data.txt', (err, data) -> fileText = data

→ Source: http://ricardo.cc/2011/06/02/10-CoffeeScript-One-Liners-to-Impress-Your-Friends.html

CoffeScript snippet: Fetch and Parse a XML web service

Fetching and parsing XML or .json files from web services is quite common when coding modern web applications. Here is how you can do it using CoffeeScript:

request.get { uri:'path/to/api.json', json: true }, (err, r, body) -> results = body

→ Source: http://ricardo.cc/2011/06/02/10-CoffeeScript-One-Liners-to-Impress-Your-Friends.html

CoffeeScript snippet: Finding substrings

Another very common task, made easier with CoffeeScript:

message = "This is a test string. This has a repeat or two. This might even have a third."
message.indexOf "This", 0

→ Source: http://coffeescriptcookbook.com/chapters/strings/finding-substrings

WordPress 3 introduced custom taxonomies as a core feature. The following release of 3.1 included many features to enhance support of custom taxonomies. Better import and export handling, advanced queries with
tax_query
, hierarchical support, body classes and a bunch of wonderful functions to play with were all part of the package.

Let’s take an in-depth look at how to create your own custom taxonomies in WordPress, including a few advanced development examples that you can begin using in your WordPress themes and plugins today.

Taxonomies In WordPress

WordPress’ custom taxonomies make it possible to structure large amounts of content in a logical, well-organized way. In WordPress, categories are set up as a hierarchal taxonomy, and tags are set up as a multifaceted taxonomy.

Taxonomy content can be displayed in a theme using taxonomy templates. Within a template, there are ample ways to display your data with built-in taxonomy functions.

Built-In Taxonomies

WordPress offers four built-in taxonomies out of the box:

1. Categories (hierarchal),
2. Tags (multifaceted),
3. Links (multifaceted),
4. Navigation menu (hierarchal).

Custom Taxonomies

WordPress provides a new method of grouping content by allowing you to create your own custom taxonomies. The core developers have created the
register_taxonomy()
function to handle the heavy lifting for us. All you have to do is understand how to configure all of the settings to suit your needs.

A Practical Example: Content By Location

A business that operates in multiple locations could benefit from organizing its content by location to allow visitors to browse news in their locality. A large news organization could organize its content by world region (Africa, Asia, Europe, Latin America, Middle East, US & Canada), as the BBC does in its “World” section.

Create a Custom Taxonomy

In WordPress, you can create (or “register”) a new taxonomy by using the
register_taxonomy()
function. Each taxonomy option is documented in detail in the WordPress Codex.

/**
 * Add custom taxonomies
 *
 * Additional custom taxonomies can be defined here
 * http://codex.wordpress.org/Function_Reference/register_taxonomy
 */
function add_custom_taxonomies() {
	// Add new "Locations" taxonomy to Posts
	register_taxonomy('location', 'post', array(
		// Hierarchical taxonomy (like categories)
		'hierarchical' => true,
		// This array of options controls the labels displayed in the WordPress Admin UI
		'labels' => array(
			'name' => _x( 'Locations', 'taxonomy general name' ),
			'singular_name' => _x( 'Location', 'taxonomy singular name' ),
			'search_items' =>  __( 'Search Locations' ),
			'all_items' => __( 'All Locations' ),
			'parent_item' => __( 'Parent Location' ),
			'parent_item_colon' => __( 'Parent Location:' ),
			'edit_item' => __( 'Edit Location' ),
			'update_item' => __( 'Update Location' ),
			'add_new_item' => __( 'Add New Location' ),
			'new_item_name' => __( 'New Location Name' ),
			'menu_name' => __( 'Locations' ),
		),
		// Control the slugs used for this taxonomy
		'rewrite' => array(
			'slug' => 'locations', // This controls the base slug that will display before each term
			'with_front' => false, // Don't display the category base before "/locations/"
			'hierarchical' => true // This will allow URL's like "/locations/boston/cambridge/"
		),
	));
}
add_action( 'init', 'add_custom_taxonomies', 0 );

After adding this to your theme’s
functions.php
file, you should see a new taxonomy under the “Posts” menu in the admin sidebar. It works just like categories but is separate and independent.

After adding a few terms to your new taxonomy, you can begin to organize the content in your posts by location. A new “Locations” box will appear to the right of your posts in the WordPress admin area. Use this the way you would categories.

Let’s use this “location” taxonomy as a jumping-off point to learn more about working with taxonomy functions and content.

Create a Taxonomy Template for Your Theme

When you add a custom taxonomy to a WordPress theme, you can display its content using one of WordPress’ taxonomy theme templates.

• taxonomy-{taxonomy}-{slug}.php
  We could use this to create a theme template for a particular location, such as taxonomy-location-boston.php for the term “boston.”
• taxonomy-{taxonomy}.php
  If the taxonomy were location, WordPress would look for taxonomy-location.php.
• taxonomy.php
  This template is used for all custom taxonomies.
• archive.php
  If no taxonomy-specific template is found, then the taxonomy that lists pages will use the archive template.
• index.php
  If no other template is found, then this will be used.

Let’s use
taxonomy-location.php
to display our content. The template file could look something like this:

<?php
/**
 * Locations taxonomy archive
 */
get_header();
$term = get_term_by( 'slug', get_query_var( 'term' ), get_query_var( 'taxonomy' ) );
?>
<div class="wrapper">
	<div class="primary-content">
		<h1 class="archive-title"><?php echo apply_filters( 'the_title', $term->name ); ?> News</h1>

		<?php if ( !empty( $term->description ) ): ?>
		<div class="archive-description">
			<?php echo esc_html($term->description); ?>
		</div>
		<?php endif; ?>

		<?php if ( have_posts() ): while ( have_posts() ): the_post(); ?>

		<div id="post-<?php the_ID(); ?>" <?php post_class('post clearfix'); ?>>
			<h2 class="post-title"><a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a></h2>
			<div class="content clearfix">
				<div class="post-info">
					<p><?php the_time(get_option('date_format')); ?> by <?php the_author_posts_link(); ?></p>
				</div><!--// end .post-info -->
				<div class="entry">
					<?php the_content( __('Full story…') ); ?>
				</div>
			</div>
		</div><!--// end #post-XX -->

		<?php endwhile; ?>

		<div class="navigation clearfix">
			<div class="alignleft"><?php next_posts_link('« Previous Entries') ?></div>
			<div class="alignright"><?php previous_posts_link('Next Entries »') ?></div>
		</div>

		<?php else: ?>

		<h2 class="post-title">No News in <?php echo apply_filters( 'the_title', $term->name ); ?></h2>
		<div class="content clearfix">
			<div class="entry">
				<p>It seems there isn't anything happening in <strong><?php echo apply_filters( 'the_title', $term->name ); ?></strong> right now. Check back later, something is bound to happen soon.</p>
			</div>
		</div>

		<?php endif; ?>
	</div><!--// end .primary-content -->

	<div class="secondary-content">
		<?php get_sidebar(); ?>
	</div><!--// end .secondary-content -->

<?php get_footer(); ?>

(Normally, we would load a template part for the loop, but for the sake of simplicity, I’ve skipped that step. As an alternative to
get_term_by()
, we could use single_term_title() and term_description() on this taxonomy archive template to display or retrieve the title and description of the taxonomy term.)

In this example, we’ve used a function called
get_term_by()
to retrieve all of the data associated with a taxonomy term in the form of an object. The object returned by the get_term_by() function contains the following details about the term:

• ID
  325
• name
  Boston
• slug
  boston
• group
  0
• taxonomy
  location
• taxonomy ID
  325
• description
  If you need to know the latest news in Boston, then look no further.
• parent
  0 (or the ID)
• count
  1 (i.e. the number of posts with this term selected)

We’ve used this object, then, to display information about the current term
name
and
description
in the
taxonomy-location.php
template.

Using Taxonomy Conditionals

Conditional tags can be used in WordPress to determine what content is displayed on a particular page depending on the conditions met by the page. Taxonomy templates have their own set of conditionals:

• is_tax()
  When any taxonomy archive page is being displayed.
• is_tax( 'location' )
  When a taxonomy archive page for the “location” taxonomy is being displayed.
• is_tax( 'location', 'boston')
  When the archive page for the “location” taxonomy with the slug of “boston” is being displayed.
• is_tax( 'location', array( 'boston', 'new-york', 'philadelphia' ) )
  Returns true when the “location” taxonomy archive being displayed has a slug of either “boston,” “new-york” or “philadelphia.”
• taxonomy_exists()
  When a particular taxonomy is registered via register_taxonomy().

Working With Taxonomy Functions

Many functions for working with taxonomies are available in WordPress. Let’s go through a few commons examples of how to use them in practice.

Display a List of Taxonomy Terms

Most navigation systems begin with an unordered list. You can generate an unordered list of links to taxonomy archive pages using the
wp_list_categories()
function. This function is very customizable and can handle most of the scenarios that you’ll encounter as a theme developer.

/**
 * Create an unordered list of links to active location archives
 */
$locations_list = wp_list_categories( array(
  'taxonomy' => 'location',
  'orderby' => 'name',
  'show_count' => 0,
  'pad_counts' => 0,
  'hierarchical' => 1,
  'echo' => 0,
  'title_li' => 'Locations'
) );

// Make sure there are terms with articles
if ( $locations_list )
	echo '<ul class="locations-list">' . $locations_list . '</ul>';

If you encounter a situation that requires a custom structure, I would recommend exploring the Walker class or the
wp_get_object_terms()
function.

Create a Taxonomy Tag Cloud

A tag cloud provides a great way for users to browse content. The
wp_tag_cloud()
function makes creating a tag cloud with a custom taxonomy easy.

Let’s use it to display a tag cloud of our location terms:

// Locations tag cloud
<?php
$locations_cloud = wp_tag_cloud( array(
	'taxonomy' => 'location',
	'echo' => 0
) );

// Make sure there are terms with articles
if ( $locations_cloud ): ?>
<h2>News by Location</h2>
<div class="locations-cloud">
	<?php echo $locations_cloud; ?>
</div>
<?php endif; ?>

Get All Terms in a Taxonomy

You will often need to work with a full list of terms in a taxonomy, and the
get_terms()
function can be quite handy for this. Let’s use it to show off the number of locations to which we’re providing news:

<?php
// Get a list of all terms in a taxonomy
$terms = get_terms( "location", array(
	'hide_empty' => 0,
) );
$locations = array();
if ( count($terms) > 0 ):
	foreach ( $terms as $term )
		$locations[] = $term->name;

	$locations_str = implode(', ', $locations);
?>
<h2>Nationwide Coverage</h2>
<p>We cover stories around the country in places like <?php echo $locations_str; ?> and more. If we're not the best source for the latest news in your area, let us know!</p>
<?php endif; ?>

This will output the following HTML:

<h2>Nationwide Coverage</h2>
<p>We cover stories around the country in places like Boston, London, New York, San Francisco and more. If we're not the best source for the latest news in your area, let us know!</p>

This simple approach may not show it, but the get_terms() function is incredibly powerful. It allows you to get terms from multiple taxonomies at once by passing an array that contains the names of your taxonomies as the first parameter.

Working With WP_Query and tax_query

The WP_Query class enables you to create a custom loop. WordPress 3.1 introduced a new parameter for the class called tax_query, which allows you to display content from a taxonomy in many unique ways.

Let’s use it to create a list of the most recent news posts in Boston.

<?php
/**
 * Display a list of the most recent news in Boston
 *
 * @class WP_Query http://codex.wordpress.org/Class_Reference/WP_Query
 */
$locations_query = new WP_Query( array(
	'post_type' => 'post',
	'posts_per_page' => 10,
	'tax_query' => array(
		array(
			'taxonomy' => 'location',
			'field' => 'slug',
			'terms' => 'boston'
		)
	)
) );
// Display the custom loop
if ( $locations_query->have_posts() ): ?>
<h2>Latest News in Boston</h2>
<ul class="postlist">
	<?php while ( $locations_query->have_posts() ) : $locations_query->the_post(); ?>
	<li><span class="date"><?php the_time(get_option('date_format')); ?></span> – <a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a></li>
	<?php endwhile; wp_reset_postdata(); ?>
</ul><!--// end .postlist -->
<?php endif; ?>

We could easily make this set-up dynamic by using the
get_term_by()
or
get_terms()
functions that we discussed earlier.

Attaching Additional Data to a Taxonomy

Each taxonomy term has specific data associated with it. Out of the box, WordPress allows you to store the following information for each taxonomy term:

• Name,
• Slug,
• Parent,
• Description.

But what if you need to store more information, such as an image for the taxonomy term or a title and description for search engines, or maybe even attach the term to a particular author the way a traditional news column does? Since WordPress 2.9, developers have been able to attach additional meta data to posts, pages, custom post types, comments and users using the
add_metadata()
,
update_metadata()
and
get_metadata()
functions. But this does not include taxonomies such as tags and categories.

With the help of the Taxonomy Metadata plugin, we can attach meta data to taxonomy terms for both built-in and custom taxonomies. This enables us to create additional taxonomy fields that will be stored in a new
taxonomymeta
database table.

Note to Multisite developers: I’ve encountered issues using the Taxonomy Metadata plugin on a WordPress Multisite installation. Activating the plugin network-wide results in data not being saved. Instead, activate the plugin individually for each website, and it will work properly.

(Knowing the story behind this technique and what it might mean for future WordPress upgrades is important. Currently, there is a debate on the WordPress Trac project about the best method for this. The method I’ll show you is one suggested by various WordPress core developers. But I strongly urge you to review the Trac project and the Codex. A standard approach could very well be built into WordPress in the future, which would therefore be more practical than what I am about to show you.)

The prerequisite to all of the examples below is to install and activate the Taxonomy Metadata plugin.

Add Search Engine Title and Description Fields to Categories and Tags

We will use action hooks to gracefully attach additional fields to our taxonomies without editing WordPress’ core. If you’ve made it this far, then you probably have a working knowledge of WordPress filters and actions. To learn about working with hooks, I highly suggest Daniel Pataki’s article on the subject.

Let’s start by adding a text
input
and a
textarea
field to the “Add New” and “Edit” term pages on the WordPress admin screen. We do this by placing the following functions in our theme or plugin.

The taxonomy_metadata_add() function attaches the fields to the /wp-admin/edit-tags.php?taxonomy=%taxonomy% page.

The
%taxonomy%
item in the URL above will change depending on the term you are editing.

/**
 * Add additional fields to the taxonomy add view
 * e.g. /wp-admin/edit-tags.php?taxonomy=category
 */
function taxonomy_metadata_add( $tag ) {
	// Only allow users with capability to publish content
	if ( current_user_can( 'publish_posts' ) ): ?>
	<div class="form-field">
		<label for="meta_title"><?php _e('Search Engine Title'); ?></label>
		<input name="meta_title" id="meta_title" type="text" value="" size="40" />
		<p class="description"><?php _e('Title display in search engines is limited to 70 chars'); ?></p>
	</div>

	<div class="form-field">
		<label for="meta_description"><?php _e('Search Engine Description'); ?></label>
		<textarea name="meta_description" id="meta_description" rows="5" cols="40"></textarea>
		<p class="description"><?php _e('The meta description will be limited to 156 chars by search engines.'); ?></p>
	</div>
	<?php endif;
}

The taxonomy_metadata_edit() function attaches the fields to the /wp-admin/edit-tags.php?action=edit&taxonomy=%taxonomy%&tag_ID=%id%&post_type=%post_type% page.

The
%taxonomy%
,
%id%
and
%post_type%
items in the URL above will change depending on the term you are editing.

We’ll use the
get_metadata
function here to display any saved data that exists in the form.

/**
 * Add additional fields to the taxonomy edit view
 * e.g. /wp-admin/edit-tags.php?action=edit&taxonomy=category&tag_ID=27&post_type=post
 */
function taxonomy_metadata_edit( $tag ) {
	// Only allow users with capability to publish content
	if ( current_user_can( 'publish_posts' ) ): ?>
	<tr class="form-field">
		<th scope="row" valign="top">
			<label for="meta_title"><?php _e('Search Engine Title'); ?></label>
		</th>
		<td>
			<input name="meta_title" id="meta_title" type="text" value="<?php echo get_term_meta($tag->term_id, 'meta_title', true); ?>" size="40" />
			<p class="description"><?php _e('Title display in search engines is limited to 70 chars'); ?></p>
		</td>
	</tr>

	<tr class="form-field">
		<th scope="row" valign="top">
			<label for="meta_description"><?php _e('Search Engine Description'); ?></label>
		</th>
		<td>
			<textarea name="meta_description" id="meta_description" rows="5" cols="40"><?php echo get_term_meta($tag->term_id, 'meta_description', true); ?></textarea>
			<p class="description"><?php _e('Title display in search engines is limited to 70 chars'); ?></p>
		</td>
	</tr>
	<?php endif;
}

These two functions control the output of the form fields. I’ve used HTML that follows WordPress’ UI patterns and styles guidelines for the admin area.

Saving the form’s data to the taxonomymeta database table

Now that we’ve added the form fields, we’ll need to process and save the data with the
update_term_meta
function that is provided by the plugin.

/**
 * Save taxonomy metadata
 *
 * Currently the Taxonomy Metadata plugin is needed to add a few features to the WordPress core
 * that allow us to store this information into a new database table
 *
 *	http://wordpress.org/extend/plugins/taxonomy-metadata/
 */
function save_taxonomy_metadata( $term_id ) {
	if ( isset($_POST['meta_title']) )
		update_term_meta( $term_id, 'meta_title', esc_attr($_POST['meta_title']) );

	if ( isset($_POST['meta_description']) )
		update_term_meta( $term_id, 'meta_description', esc_attr($_POST['meta_description']) );
}

Add the new taxonomy fields
Now that everything is in place, we’ll use action hooks to load our new functions in all the right places. By hooking the following function into the
admin_init
action, we ensure that it runs only on the admin side of WordPress. First, we need to make sure that the functions added by the Taxonomy Metadata plugin are available. Next, we use the
get_taxonomies()
function to attach the new taxonomy fields to every public taxonomy, including the built-in tags and categories.

/**
 * Add additional taxonomy fields to all public taxonomies
 */
function taxonomy_metadata_init() {
	// Require the Taxonomy Metadata plugin
	if( !function_exists('update_term_meta') || !function_exists('get_term_meta') ) return false;

	// Get a list of all public custom taxonomies
	$taxonomies = get_taxonomies( array(
		'public'   => true,
		'_builtin' => true
	), 'names', 'and');

	// Attach additional fields onto all custom, public taxonomies
	if ( $taxonomies ) {
		foreach ( $taxonomies  as $taxonomy ) {
			// Add fields to "add" and "edit" term pages
			add_action("{$taxonomy}_add_form_fields", 'taxonomy_metadata_add', 10, 1);
			add_action("{$taxonomy}_edit_form_fields", 'taxonomy_metadata_edit', 10, 1);
			// Process and save the data
			add_action("created_{$taxonomy}", 'save_taxonomy_metadata', 10, 1);
			add_action("edited_{$taxonomy}", 'save_taxonomy_metadata', 10, 1);
		}
	}
}
add_action('admin_init', 'taxonomy_metadata_init');

That’s it. We’re done!

You should now see two additional fields in your tags, categories and public custom taxonomies. As mentioned at the beginning of this section, the technique can be used to handle many different scenarios. This basic framework for storing and retrieving information associated with a taxonomy should have you well on your way to mastering the management of taxonomy content.

In Conclusion

I hope you better understand how to organize WordPress content with the help of taxonomies. Whether hierarchal or multifaceted, a well-implemented taxonomy will simplify the way content is organized and displayed on a website. WordPress has all of the tools you need to create custom taxonomies and to group your content in new and exciting ways. How you use them is up to you!

Additional Resources

• Custom taxonomy theme templates in WordPress
• “Custom Taxonomies in WordPress 2.8”
• “A Refresher on Custom Taxonomies”
• Official documentation on register_taxonomy()
  
• “Introducing WordPress 3 Custom Taxonomies”
• “Adding Meta Data to Taxonomy Terms”

Post Source

The “tech world” is really more of a “tech family.” Between digital giants’ appetites for acquisitions and the tendency of their ex-employees to start new companies, it’s easy to see how nearly every blip in the ecosystem is closely related.

We’ve mapped just a few of these family ties between “Xooglers,” the “PayPal Mafia”, “Softies” and the many other tech connectors who have yet to be nicknamed.

Our guess is that if you gathered a handful of tech veterans in a room, you could keep the tech connection game going forever. So while this graphic is hardly exhaustive, we’ll keep it going in the comments — feel free to add connections to the list!

WebKit now supports styling of the scrollbars in overflow sections, listboxes, dropdown menus and textareas. Internet Explorer supported this feature after version 5.5 . Unfortunately Firefox still doesnt support custom scrollbars. Anyways, checkout the screenshots and style your scrollbars.

DEMO
DOWNLOAD

Source Code

<doctype! html>
<html>
	<head>
		<title>Custom Css3 Scrollbars</title>
		<style>
			body{
				font-family: sans-serif;
				font-size:12px;
				background: #fff;
				overflow-y: hidden;
			}
			#widget{
				width: 300px;
				height:400px;
				overflow: auto;
			}
			::-webkit-scrollbar {
				width: 10px;
				height: 10px;
			}
			::-webkit-scrollbar-button:start:decrement,
			::-webkit-scrollbar-button:end:increment  {
				display: none;
			}

			::-webkit-scrollbar-track-piece  {
				background-color: #3b3b3b;
				-webkit-border-radius: 6px;
			}

			::-webkit-scrollbar-thumb:vertical {
				-webkit-border-radius: 6px;
				background: #666 url(scrollbar_thumb_bg.png) no-repeat center;
			}
		</style>
	</head>
	<body>
		<div id="widget">
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam id est sapien. Maecenas aliquam scelerisque eros quis luctus. Phasellus nisi lectus, tempus ut scelerisque in, adipiscing nec neque. Nullam ac metus eget lorem imperdiet luctus non in mauris. Maecenas porta ultricies sapien, non laoreet nisl accumsan egestas. Etiam viverra tincidunt euismod. Vestibulum dui massa, ultrices ac malesuada eu, varius quis ipsum. Nam tincidunt tempor nulla, id consequat velit hendrerit a. Fusce bibendum condimentum massa non fringilla. Ut sagittis, lorem eu varius tempus, nisl nisi aliquet odio, eu fringilla arcu arcu at lectus. Sed ligula magna, dapibus fringilla vestibulum quis, pulvinar vitae libero. Nunc tempor elementum magna, volutpat lacinia neque suscipit bibendum. Nunc vel pulvinar turpis. Etiam pretium malesuada nibh vel pellentesque.</p>

			<p>Cras vitae justo arcu. Proin at tellus id libero adipiscing ornare. Aliquam pharetra consequat velit id mollis. Aenean imperdiet libero ut velit viverra eget posuere purus rhoncus. Vestibulum leo mi, malesuada nec commodo eget, condimentum sit amet urna. Nam sem lectus, pellentesque ut commodo eget, scelerisque porta diam. Suspendisse potenti. Curabitur in neque sem. Nullam molestie quam aliquet lorem convallis id semper nisi eleifend. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
		</div>
	</body>
</html>