UnderArmour

As a frequent online clothing shopper, I love the ability to realistically see the change in apparel colors. It adds confidence in my color selection as I chose which one to purchase. I also love the subtle details in the background image; it adds to the design but doesn’t distract from the main focus.

Visit UnderArmour online.

Columbia

There are so many things I love about this site – the cool color palette complement the products perfectly, the textures add both insight into the product as well as add to the design, and the images fit in well with their target audience.

Visit Columbia online.

Diamond in the Rough

The big pictures on this site highlight the exquisite detail of the jewelry.

Visit Diamond in the Rough online.

Cabelas

I may be a little partial to this site as it brings me back to a childhood of hunting, fishing and outdoor adventures with my dad, but overall I think this is a great site. They have organized their plethora of products into an easy navigation and use a simple layout to not distract.

Visit Cabelas online.

Converse

There are three things about this site that stand out to me – the very unique above the fold layout, the “filter by” color wheel, and the design your own shoe. I don’t know how many times I have wanted a certain color of shoes and I’ve had to wade through every color to find what I’m looking for. The design your own shoe plays very well to their target audience.

Visit Converse online.

Bonfire Snowboarding

The interactivity potential of this site is great. The blog and multimedia layout is very unique and easy to follow. I don’t think this tactic would work for every site – but it does for this one.

Visit Bonfire Snowboarding online.

Coast

As an upscale clothing company, Coast has effectively designed their site to appeal to their market. It’s all about the clothes and the elegant shopping experience – the simply layout and emphasis on photography fits well.

Visit Coast online.

River Island

River Island is banking that pictures really are worth 1,000 words, and I think it’s working for them. From the first glance of their homepage you know exactly what type of clothing you are going to find on their site.

Visit River Island online.

Innovative Baby

Mother’s everywhere will have a hard time resisting the images on this site; just look at those sweet little tights!

Visit Innovative Baby online.

Abercrombie & Fitch

Abercrombie is known for their risqué advertising and in-store promotions – their website is no different. The provocative imagery is iconic of the brand and is exactly what their advocates are looking for in their marketing.

Visit Abercrombie & Fitch online.

Hollister

I hesitated adding Hollister to this list being as it is so similar to Abercrombie, but the textures on this site are too great to not highlight.

Visit Hollister online.

One+Only Custom Headboards

Colors, textures, and fun – without going overboard.

Visit One+Only Custom Headboards online.

RideFourEver

This site is a great example of how to use bright colors without looking like you design your site in 1997.

Visit RideFourEver online.

Dominos

With the recent rebranding of the company, the website has received a face lift as well. My favorite part? The tracker! You get to know exactly where your pizza is at in the cooking stage and when it should arrive on your doorstep. Genius!

Visit Dominos online.

Da Vinci Gourmet

The colors on this site screams gourmet. One unique tool this site has integrated into their site is a recipe finder so not only do you learn how to make yummy drinks, it provides links to their products to make sure you get all of the flavors you need.

Visit Da Vinci Gourmet online.

4^th Street Cookie

The images on this site are mouth watering! I love the little images in the drop down navigation as well.

Visit 4^th Street Cookie online.

Keedo

You’ve probably noticed by now that I am a fan of textures. This site uses subtle textures and little details to embellish the site.

Visit Keedo online.

Shoe Guru

There is little confusion about what this site is selling with the prominent pictures of shoes all over the site. The product layout is unique and very focused.

Visit Shoe Guru online.

Nestliving

This is a very modern website for a company that sells modern furniture.

Visit Nestliving online.

Apple

The apple website might be one of my favorite websites. Bold product images, simple descriptions and very personable copy. The steps to customizing your technology are incredibly straightforward to facilitate a positive shopping experience.

Visit Apple online.

Rifle Paper Co.

A DIYer’s dream site! Very easy to navigate and find exactly what you are looking for.

Visit Rifle Paper Co. online.

iStockphoto

Probably not a big surprise, but this site does photos well.

Visit iStockphoto online.

Am I missing any great sites that inspired your design? Or maybe your site is jaw droppingly good – post a link for all to see.

According to dictionary.com, typography is the art or process of printing with type. Bringing the definition up to speed with the digital world – typography is the art or process of using typefaces to communicate (not just in print). In times past typography was most closely associated with newspapers, books, and other informative sources. As graphic design expanded, so did the possibilities of typography; it has evolved into not only a means of simply creating lines of text, but into an artistic expression and communication tool.

Just like color, typography is a crucial design element that can evoke emotions, portray images, and stimulate responses: everything from happiness to anger or athleticism to elegance. It is of the utmost importance to embrace typography to ensure clear communication.

Let’s review the basics.

Leading

The space between lines of text and will contribute the most to the readability of your text

Measure

The width of your text. To long can create confusion and be visually distracting while too short creates more line breaks and can decrease the readability of your text.

Text Alignment

The standard for alignment will vary depending on your medium and intended voice. Usually websites use a flush right while newspapers are more likely to use a justified alignment.

Font

With thousands of fonts available and the ability to create your own font, the options are endless. Consider the intended purpose of your design and find a suitable font. Different fonts evoke different emotions so they should be taken into careful contemplation. For example, Victorian cursive fonts usually associate well with elegance while simple lined fonts usually associate with a modern feel.

Color

Like font, color is important in creating the right tone of voice. Hues of red can indicated warning, excitement, passion, or energy while shades of purple indicate wisdom, sophistication, or celebration (more color meanings can be found here).

Keep in mind that what I outlined are general rules and what I listed as “bad” may be exactly what you need to use in order to communicate your point to your audience. For example, if you are communicate something regarding a crowded space it might be better to decrease your leading. Typography is a fluid art form and rules can be bent (or even broken) if your message will be better received.

As you strive to master the art of typography, it is helpful to have a toolbox of resources to help you. Jacob at Six Revisions has created a great list of tools that will help you take your typography to the next level! What other tidbits of information have you picked up about typography? I’d love to hear your insight!

Below are 30 cool examples of websites using HTML5.

1. Green House

The Green Houses uses the <nav> and <hgroup> HTML5 tags to create this beautiful looking website. The website also includes information on turning your house into a greenhouse to help save the environment.

Take a look at what you can do to help the planet.

2. Vlog.it

Vlog uses the <nav> HTML5 along with a lot of JavaScript to make this site truly stand out. This site is definitely worth taking a look at if you have some extra time.

Take a look at Vlog.it

3. Overlapps

Overlapps is a headquarters for mobile device applications. This site uses the <section> HTML5 tag and JavaScript to bring the page to life.

Take a look at some Apps for your phone.

4. The Elder Scrolls Skyrim

The Elder Scrolls Skyrim is a site dedicated to Elder Scrolls Fans. This site only has a couple HTML5 tags in it but combined with JavaScript the developers were able to make a beautiful site for the fans of this game. If you are a gamer this site is definitely worth taking a look at.

Take a look around The Elder Scrolls Skyrim

5. Banner Inspiration

Banner Inspiration did a great job developing a website that is interactive with the viewers. The site only uses a couple elements new to HTML5 but they did a great job mixing it up with JavaScript and CSS.

Take a look at Banner Inspiration

6. HTML5 Awesome

The name says it all here; HTML5 Awesome uses many different elements exclusive to HTML5 to bring their site to life. Some of the major tags used include <selection>, <nav>, <header>, <figure>, <aside>, the meta charset element, and many others. This site is truly HTML5Awsome.

Take a look at HTML5 awesome for yourself.

7. Cibgraphics

Cibgraphics is a design studio that provides printed materials and web design to their clients. Their site uses the <section> and <footer> HTML5 tags nicely to bring you a clean yet powerful website.

Take a look at Cibgraphics website.

8. Keyzo

Keyzo is an IT solutions company that provides a range of services to meet their client’s needs. It is clear that Keyzo’s website was developed around HTML5 because the <section>, <header>, and <footer> elements were used frequently.

Stop by and take a look at Keyzo.co.uk

9. CSS Winner

CSSWINNER is a website show case for developers to show off their work. The site was built using only a couple HTML5 elements and a lot of JavaScript and CSS.

Take a look at some of the sites being featured at CSSWINNER.

10. Catcubed

Catcubed is a site about art, code, and design. The site has a unique look and is loaded with HTML5 elements. Some of the elements being used include <nav>, <article>, <header>, and <footer>.

Take a look at Catcubed’s unique website.

11. CSS Religion

CSS Religion is a site all about religion and is presented in a clean and efficient manner. The site does not use much HTML5 native elements but it is loaded with CSS that works with HTML5.

Take a look at the layout of CSS Religion.

12. An Event Apart

An Event Apart is a website that offers training for web developers all over the country. The site is built to attract the attention of web developers and it uses a lot of different features to do this.

Take a look at An Event Apart.

13. CSS Menu Samples

CSS Menu Samples is another site designed to show off work. It was built around the <header> and <footer> HTML5 native elements and is an attractive website.

Take a look at CSS Menu Samples’ showcase.

14. MW Template

MW Template is designed to show off websites that have gone the extra mile and created an impressive mobile website. MW Templates is another site that only uses the basic HTML5 tags and a whole lot of JavaScript and CSS. This site is very interesting if you are into mobile devices.

View some of the best mobile websites at MW Templates.

15. HTML Email Gallery

HTML Email Gallery is dedicated to emails that are HTML based. The sire offers enough content to keep you busy for a while. HTML Email Gallery is loaded with native HTML5 tags including <section>, <nav>, <header>, and <footer>.

Take a look at some HTML based emails.

16. The Inspiration Grid

The Inspiration Grid is a site designed to provide inspiration to the viewers with a gorgeous website. This site uses the <section> tag nicely and is designed for user interaction.

Get inspired at The Inspiration Grid.

17. Landing Page Gallery

The Landing Page Gallery is another site designed to showcase website. This site focuses on displaying the landing page of impressive websites. Like most other gallery sites this site was built using a lot of HTML5 tags. Some of the tags used include <header>, <section>, and <footer>.

Take a look at some cool landing pages.

18. Rockstar Working

Rockstar Working is a web site designing company with a unique website of their own. This site was designed to draw in the users attention and was built using the <header>, <section>, and <footer> HTML5 commands.

Checkout Rockstar Working’s website.

19. Teespiration

Teespiration is a website that sells unique tee shirts. This website is loaded with JavaScript, CSS, and some HTML5 elements. This site is worth taking a look at even if you are not in the mood to buy a new tee.

Check out some tee shirts at Teespiration.

20. Garbage.ro

Garbage.ro has a very unique website that uses blocks for navigation and content display. This site was designed primarily on JavaScript while still using some HTML5 elements. I have to say I have not seen many sites with this type of design.

Take a look at Garbage.ro’s truly unique site.

21. JQM Gallery

JQM Gallery is a gallery of cool and unique mobile websites. This site was built using mainly on JavaScript and CSS but it does use some HTML5 functions. If you are looking for ideas for a mobile website this is a good starting point.

Check out some mobile websites at JQM Gallery.

22. Theme Design Gallery

Theme Design Gallery is a website dedicated to showing off and selling cool and unique websites. This site was built using a mix of CSS, JavaScript, and HTML5 to give the viewer the best experience.

Get some website ideas from Theme Design Gallery.

23. Will Work for Art

Will Work for Art is a site that is designed to show case different types of art. This site was not designed like a typical gallery giving it some extra points in my book. This site release heavily on the <article> HTML5 tag and without it the site would not be able to function.

View some cool art at Will Work for Art.

24. Web Banner Galler

Web Banner Gallery is a banner display site that offers a user rating section. This site was built using a mix of HTML5, JavaScript, and CSS. Web Banner Gallery offers an easy way to view highly ranked web banners for webmasters to view and get ideas from.

Check out some banners at Web Banner Gallery.

25. Codedread

Codedread is a site that offers code for games and other projects. It is setup in a completely different way than most other sits of this type. The site was designed using mainly only tags found in HTML5.

Get some code for your next project from Codedread.

26. Empire State Recordings

Empire State Recordings is a site all about music. This site was designed to be unique and stand out. Empire State Recordings was built using CSS, JavaScript, and of course HTML5.

Listen to some music and Empire State Recordings.

27. Editorial Template

Editorial Template is a WordPress template that is designed to meet the publishing requirements of digital magazines. This site is one of the few sites that I have seen to actually use the <canvas> tag.

Take a look at Editorial Template’s website

28. CSS3 Designer

CSS3 Designer is a site that makes cool CSS3 buttons for webmasters. This site has a great layout ad was built using the <article>, <section>, <header>, and <footer> HTML5 tags.

Make yourself a new button at CSS3 Designer.

29. AX Visual

AX Visual Design Studio offers design services to meet the needs of their clients. This site has outstanding images on it and was built using the <header>, <footer>, and <section> HTML5 tags.

Take a look at Ax Visual’s website.

30. Film Review Friday

Film Review Friday is a film review site that is designed for smaller, or Tweet sized, film reviews. This site is loaded with HTML5 tags and has a unique look to it. The site uses many tags only available in HTML5 like the <header>, <footer>, <article>, and <section> tags.

Take a look at some of Film Review Friday’s film reviews.

Side note: In case you are new to HTML 5 and wish to learn more, also check out Jerry’s post on Learn HTML 5: 10 Must Read Lessons.

Why free resources might not be the best learning resources for you?

I know, free tutorials and blogposts (as listed here: 10 Must Read HTML5 Lessons) are good quick learning resources; but, they are not the best for many web developers and webmasters. Why? Well, for one, these individual articles often do not give a complete overall view on the big picture; and two, some of the time, these guides are not written for newbies. Take Robert’s recent article published at WHSR: 30 Cool Examples Of HTML5 Websites, generally it’s a great inspiration round up HTML5 developers – detail explanation on new HTML5 tags, big images for visual inspiration, and a collection of 30 links to other cool HTML 5 sites – but wait, what’s there for the newbies? Nothing!

And you see this in many, many other HTML5 articles.

My recommendation? Join a complete HTML5 beginner course in your local university or college or institute that offers one. Alternatively, if there’s none in your area, signup for an online course.

Introducing Udemy’s HTML5 Beginner Crash Course

Speaking of online course, my recent communication with Dan Murphy of Udemy landed me a special deal on the site’s HTML 5 Beginners Crash Course. Taught by Robin Nixon, author of Learning PHP, MySQL, and JavaScript (remember that white book with squirrels in it? ), the course covers both basic and medium level topics in HTML 5 including canvas drawing, using geolocation and local storage,  as well as introducing micro data and offline web apps.

Special Discount, 60% Off

The course original price is $99/signup but thanks to Dan, it costs $39 (that’s 60% discount!) if you signup following this promo link. So… do check it out if you think it’s right for you, alright?

Check out Udemy’s HTML5 Beginners Crash Course

These are 10 of the most indispensable iPhone apps available to users right now.

Typography Manual

Any web developer will see this app as a must once they begin to explore its contents. Because typography is such a huge part of web design and graphic design, this app is essential to any web developer looking for free apps to add to their arsenal. It comes loaded with resourceful tools such as an easy-to-use Em calculator, short guides on typesetting, history of typography, and more.  It even includes a type anatomy glossary. No developer wants to go without this powerful app.

Preview and download

Color Expert

Color Expert is a cool little app that helps match HEX codes to colors that you manually pick out. It will even import a photograph into the app, and users can pick out a specific color in the photo for analysis. Not only does the app provide these features and a swap book, you can even check out various color palettes such as the designer-friendly PANTONE colors, RGB, CMYK, and more. If you’re heavily into finding and matching colors for your projects, this app could become your best friend.

Preview and download

Designers HQ

This app is the ultimate answer for any developer looking for inspiration, help, or tips in the world of design. The app is backed by a solid community that is constantly updating the “HQ” with new tutorials, tips and freebies for designers and developers alike. While the community supplies a solid amount of content to the app, a lot of its content also comes from major sources such as Smashing Magazine and others.

Preview and download

WhatTheFont

WhatTheFont is a neat little app that allows you to use your phone to snap a photo of a particular typeface that you like. Once you’ve snapped your photo, the app will analyze the typeface pictured and match it to one in its vast database of various typefaces and fonts. Once the app matches your query with a result, you’ll get to see the typeface demoed, and you’ll even get a quick overview and history of it. Pretty nifty, huh?

Preview and download

Analytics App

Think of this app as your gateway to keeping track of what is going on with your website’s performance. It is practically a mobile version of Google Analytics with the same functionality and features as you would get on the main website. Simply log into your Google account to stay on top of the latest with your website and check over 55 different reports available for your site. If you’ve got an iPhone with high speed internet and you’re looking for something to help you stay on top of your website’s progress at all hours of the day, even when you’re away from home, the Analytics App is the perfect solution.

Preview and download

Regex Cheat Sheet

This is a wonderful app that will not only serve as a cheat sheet, but will even allow you to write and test regular expressions straight from your iPhone. The app provides you with syntaxes and commands that are also completely testable from within the app. The Regex Cheat Sheet also provides cheat sheets for PHP, Perl, Java, and so much more. This is definitely an essential tool for any web developer.

Preview and download

SQLite Database Console

Have you ever wanted to access your SQLite database straight from your iPhone? SQLite Database Console now allows you to do that with providing features for creating tables, querying, and inserting data all straight from your iPhone. This app doesn’t require you to be at the desk or computer to make changes or query your database, you can do it straight from your phone with loads of other great features such as automatically storing recently executed statements for easy re-use, an SQL console, creating lists of favorite commands, and so much more. Any web developer with a high speed internet enabled iPhone definitely needs this tool.

Preview and download

ServersMan

With ServersMan, you can instantly start using your iPhone as a flash drive. Additionally, the app can act as a true portable server by giving users access to the internal web server engine. Even if you’re just interested in using the app as a personal data backup utility, it is certainly not a bad trade-off for a free price.

Preview and download

Sketches

Sketches is great for the web developer who needs a great tool for quickly and precisely executing good ideas before they happen. Sometimes, a pencil and sheet of paper just aren’t enough, and that’s where Sketches comes in. With this app, you can place clipart, arrange text, draw with various different types of brushes, and even add fun effects. This is definitely a great tool for any web developer who always finds himself sketching or coming up with ideas on the fly.

Preview and download

Developer’s Tool Kit

Lastly, but certainly not least, the Developer’s Tool Kit is a great multi-featured app for the web developers who are constantly in need of knowing UTF-8 characters for their projects. This app is a really great help for coding websites, or needing to know a specific code for a character. What’s even better is that the codes are alphabetized by their descriptions, and not their codes! For example, the character of a snowflake is relevantly labeled as "snowflake" for easy searching. The Developer’s Tool Kit even comes with extra tools such as a color wheel for color buffs or even an extra calculator for easy calculating on the fly.

Preview and download

About The Author: Blake Sanders

Blake Sanders is a writer of high speed internet news and information at broadband comparison site Broadband Expert. He also specializes in internet providers, cell phones, and other technical news.

WordPress has become one of the largest and most customizable content management systems available today. As a result there is a high demand for custom WordPress themes and theme customization.

Below is a list of 25 handy code snippets that WordPress developers should know about, this list is in no particular order.

Display Your Most Popular Post

This code snippet will displays your most popular post based on number of comments. This snippet can easily be added to any theme.

<ul>
<?php $result = $wpdb->get_results("SELECT comment_count,ID,post_title FROM $wpdb->posts ORDER BY comment_count DESC LIMIT 0 , 5");
foreach ($result as $post) {
setup_postdata($post);
$postid = $post->ID;
$title = $post->post_title;
$commentcount = $post->comment_count;
if ($commentcount != 0) { ?>
<li><a href="<?php echo get_permalink($postid); ?>" title="<?php echo $title ?>">
<?php echo $title ?></a> {<?php echo $commentcount ?>}</li>
<?php } } ?>
</ul>

Get Your Viewers Real IP Address

This snippet gets your user’s real IP address and returns it (even if they are on proxy server), allowing you to call on the function at later.

function getRealIpAddr()  
{  
    if (!emptyempty($_SERVER['HTTP_CLIENT_IP']))  
    {  
        $ip=$_SERVER['HTTP_CLIENT_IP'];  
    }  
    elseif (!emptyempty($_SERVER['HTTP_X_FORWARDED_FOR']))  
    //to check ip is pass from proxy  
    {  
        $ip=$_SERVER['HTTP_X_FORWARDED_FOR'];  
    }  
    else  
    {  
        $ip=$_SERVER['REMOTE_ADDR'];  
    }  
    return $ip;  
}  

Unzip a File

This one allows you to unzip a file on your server. This snippet is a very useful one if you allow users to upload files.

/**********************
*@file – path to zip file
*@destination – destination directory for unzipped files
*/
function unzip_file($file, $destination){
// create object
$zip = new ZipArchive() ;
// open archive
if ($zip->open($file) !== TRUE) {
die (’Could not open archive’);
}
// extract contents to destination directory
$zip->extractTo($destination);
// close archive
$zip->close();
echo ‘Archive extracted to directory’;
}

Add http to a URL

This code adds the "http" to the beginning of a URL if it is not there.

if (!preg_match("/^(http|ftp):/", $_POST['url'])) {
$_POST['url'] = ‘http://’.$_POST['url'];
}

Show Breadcrumbs

This code snippet displays breadcrumbs in this format; Home / Post Category / Title.

<?php bloginfo(‘home’); ?> / <?php the_category(); ?> / <?php the_title(); ?>

Change Your WordPress Login Logo

Looking at the same logo every time you log into a WordPress website gets old quick. This snippet allows you to change the WordPress logo to anything you want.

It should be placed in your functions.php file.

function my_custom_login_logo() {
echo ‘<style type="text/css">
h1 a { background-image:url(‘.get_bloginfo(‘template_directory’).’/images/custom-login-logo.gif) !important; }
</style>’;
}
add_action(‘login_head’, ‘my_custom_login_logo’);

Allow Only Designated IP Address to Access wp-admin Directory

If you are concerned with your blog security then this snippet is perfect for you. Copy the code below to your .htaccess, replace "allow from xx.xxx.xx.xxx" to each IP address you want, and you’ll limit the access to your WP-Admin directory (only added IPs will be allowed).

AuthUserFile /dev/null
AuthGroupFile /dev/null
AuthName "Example Access Control"
AuthType Basic
<LIMIT GET>
order deny,allow
deny from all
allow from xx.xx.xx.xx
</LIMIT>

Display Most Popular Post of any Timeframe

This snippet allows you to search for the most popular post during a specific timeframe. You will need to change the dates you are searching through manually.

<ul>
<?php
$result = $wpdb->get_results("SELECT comment_count,ID,post_title, post_date FROM $wpdb->posts WHERE post_date BETWEEN ’2009-01-01′ AND ’2009-12-31′ ORDER BY comment_count DESC LIMIT 0 , 10");
foreach ($result as $topten) {
$postid = $topten->ID;
$title = $topten->post_title;
$commentcount = $topten->comment_count;
if ($commentcount != 0) {
?>
<li></li>
<?php }
}
?>
</ul>

Added Author Bio to Each Post

This snippet allows you to give your authors the credit they deserve. This snippet will work with any theme that has an author section. The code snippet should be inserted into the functions.php file.

function get_author_bio ($content=”){
global $post;

$post_author_name=get_the_author_meta("display_name");
$post_author_description=get_the_author_meta("description");
$html="<div class=’clearfix’ id=’about_author’>\n";
$html.="<img width=’80′ height=’80′ class=’avatar’ src=’http://www.gravatar.com/avatar.php?gravatar_id=".md5(get_the_author_email()). "&default=".urlencode($GLOBALS['defaultgravatar'])."&size=80&r=PG’ alt=’PG’/>\n";
$html.="<div class=’author_text’>\n";
$html.="<h4>Author: ".$post_author_name."</h4>\n";
$html.= $post_author_description."\n";
$html.="</div>\n";
$html.="<div class=’clear’></div>\n";
$content .= $html;
}

return $content;
}

add_filter(‘the_content’, ‘get_author_bio’);

Increase Memory Limit

By default the PHP memory limit for WordPress is 32MB, this may not be enough if you have a lot of traffic or plugins. This snippet allows you to change that limit to what you need. The code should be put into the wp-config.php .

define(’WP_MEMORY_LIMIT’, ’64M’);

Change Your Login URL

This snippet allows you to change your login URL to whatever you want. This can be used for both convenience and security. The code should be placed in the htacess file.

RewriteRule ^login$ http://yoursite.com/wp-login.php [NC,L]

Change Autosave Time Limit

This snippet allows you to change your autosave time limit for posts. The code should be added to the functions.php file.

# Autosave interval set to 5 Minutes #
define(‘AUTOSAVE_INTERVAL’, 300);

Remove Update Notice

If you are currently being bothered by the update message and don’t actually want to update your theme you should use this snippet, it will remove the message for you.

add_action(‘admin_menu’,'wp_hide_update’);
function wp_hide_update() {
remove_action( ‘admin_notices’, ‘update_nag’, 3 );
}

Add a Search Box in Your Navigation Bar

This snippet will allow you to add a search box in your navigation bar. The code should go in the functions.php file.

add_filter(‘wp_nav_menu_items’,'add_search_box’, 10, 2);
function add_search_box($items, $args) {
ob_start();
get_search_form();
$searchform = ob_get_contents();
ob_end_clean();
$items .= ‘<li>’ . $searchform . ‘</li>’;
return $items;
}

Add Google Analytics Tracking With no Theme Edits

Adding this snippet to your functions.php file will place you tracking code on every page that is generated dynamically. Sure you can use a plug-in to do this but you’re taking a chance of slowing down your site.

<?php add_action(‘wp_footer’, ‘ga_custom’);
function ga_custom() { ?>
// add google analytics code here!
<?php } ?>

Set Minimum Word Count on Posts

This snippet will allow you require all posts to be a minimum word count of whatever you choose. The snippet should go in the functions.php file.

function minWord($content) {
global $post;
$num = 100; //set this to the minimum number of words
$content = $post->post_content;
if (str_word_count($content) < $num)
wp_die( __(‘Error: your post is below the minimum word count.’) ); }
add_action(‘publish_post’, ‘minWord’);

Split Post Trackbacks and Comments

By default WordPress combines trackbacks and comments into the comments section of a post. This snippet allows you to separate them. The code should go in the comments.php page. 

<ul class="commentlist">
<?php // only comments

<span style="white-space: pre;"> </span> <?php foreach ($comments as $comment) : ?>
<span style="white-space: pre;"> </span> <?php $comment_type = get_comment_type(); ?>
<span style="white-space: pre;"> </span> <?php if($comment_type == ‘comment’) { ?>
<span style="white-space: pre;"> </span> <li>//Comment code goes here </li>
<span style="white-space: pre;"> </span> <?php }
endforeach;
</ul>

<ul>
<?php // only trackbacks

<span style="white-space: pre;"> </span>foreach ($comments as $comment) : ?>
<span style="white-space: pre;"> </span> <?php $comment_type = get_comment_type(); ?>
<span style="white-space: pre;"> </span> <?php if($comment_type != ‘comment’) { ?>
<span style="white-space: pre;"> </span> <li> <?php comment_author_link() ?></li>
<span style="white-space: pre;"> </span> <?php }
endforeach;
</ul>

Disable all Comments

This snippet will allow you to disable all comments if you are not looking for the users inputs.

UPDATE wp_posts SET comment_status = ‘closed’, ping_status = ‘closed’;

Enable all comments

This snippet will allow you to enable all comments.

UPDATE wp_posts SET comment_status = ‘open’, ping_status = ‘open’;

Excluded Categories from Your Home Page

This snippet will allow you to exclude categories from your home page. This can be useful if you only want to display specific content. Using a – before the category number makes them not visible and this code should go in your functions.php file.

function excludeCat($query) {
if ( $query->is_home ) {
$query->set(‘cat’, ‘-3,-5,-23′);
}
return $query;
}
add_filter(‘pre_get_posts’, ‘excludeCat’);

Display Different Content to Mac and Windows Users

This snippet is useful if your site has a lot of downloads. It will allow you to change the displayed content for a Mac, allowing you to change the file that a link points to.

<?php
if (stristr($_SERVER['HTTP_USER_AGENT'],"mac")) {
echo ‘Hello, I’m a Mac.’;
} else {
echo ‘And I’m a PC.’;
}
?>

Filter Your Search Results

This snippet will give your users the ability to filter their search results. This can be beneficial to both the user and the webmaster. The code will need to go in the functions.php file.

function SearchFilter($query) {
if ($query->is_search) {
$query->set(‘post_type’,array(‘post’,'page’));
}
return $query;
}
add_filter(‘pre_get_posts’,'SearchFilter’);

Display Number of Twitter Followers

This handy snippet allows you to display the number of twitter followers a specific user has. Change the USERNAME to your twitter username and add to your template.

<?php
$twit = file_get_contents(‘http://twitter.com/users/show/USERNAME.xml’);
$begin = ‘<followers_count>’; $end = ‘</followers_count>’;
$page = $twit;
$parts = explode($begin,$page);
$page = $parts[1];
$parts = explode($end,$page);
$tcount = $parts[0];
if($tcount == ”) { $tcount = ’0′; }
echo ‘<b> ‘.$tcount.’ </b> followers.’;
?>

Display a User’s Twitter Name

This snippet will allow you to display a user’s Twitter name in whatever section you put this code. This will allow you to give your visitors a warm welcome.

if (strpos($_SERVER[HTTP_REFERER], "twitter.com") == true) {
echo "Hello Twitter User!";
}

Display Total Number of Posts

With this snippet you can display the total number of published posts you have on your WordPress website. You can even exclude categories if you would like.

All posts

<?php
$total = wp_count_posts()->publish;
echo ‘Total Posts: ‘ . $total;
?>

Only posts from selected categories.

<?php
$categories = get_categories(‘exclude=1,2,3′);
foreach($categories as $category) {
$total += $category->count;
}
echo ‘Total Posts: ‘ . $total;
?>

Display Total Number of Facebook Fans

This snippet gives you the ability to display the total number of Facebook fans you have. All you need to do is replace “YOUR PAGE_ID” with your own page-id.

<?php
$page_id = "YOUR PAGE-ID";
$xml = @simplexml_load_file("http://api.facebook.com/restserver.php?method=facebook.fql.query&query=SELECT%20fan_count%20FROM%20page%20WHERE%20page_id=".$page_id."") or die ("a lot");
$fans = $xml->page->fan_count;
echo $fans;
?>

Getting Started With HTML5 & CSS3

Using HTML5 and CSS3 can help you make a spectacular website, but, unfortunately most designers don’t use them because they aren’t supported by all browsers. Most Internet users are still using Internet Explorer, so the code will not display properly for most people. Since over half a website’s traffic is with a browser that does not support these two languages, most designers do not use them for popular websites.

Both HTML5 and CSS3 are still in progress, but it is a good idea to familiarize yourself with them now so you can use them when they are the new standard in web design. Both languages will help you get a clean look for your website using simpler code.

HTML5

HTML stands for Hypertext Markup Language, and HTML5 is the latest version. Currently, it is only supported by a few browsers, but is expected to increase in popularity and usage in the next year. The entire language is expected to be fully written sometime in 2014, but some features are available now.

Since Flash is infamous for crashing and bugs, Apple does not allow it on iOS mobile phones and devices. As Apple increases in popularity, this creates a problem for developers who want the features of Flash, but also want their apps and websites viewable on an iOS device. HTML5 offers many of the same features of Flash, but runs with less bugs and more stability.

Google will be releasing a HTML5 version of YouTube soon, so this reaffirms how important this update will be in the future of the Internet. Mozilla’s Firefox, however, is resisting HTML5 and IE does not support it, so developers are hesitant to jump on the bandwagon. To further complicate things, different browsers may support different features of HTML5, and not all browsers will support all features. Designers must find out what features will be supported by different browsers when creating a website.

HTML5 lets you create smaller parts that combine and work together to make up the entire page. It allows the designer to create advanced pages with new features that aren’t always possible to create with older versions of HTML. HTML5 is built on HTML4, so designers can build upon existing code to improve the website. This eliminates the need to code the website from scratch, and new features can be added easily.

HTML5 Features

• Cache allows the user to navigate web apps while offline.
• Canvas element lets you place 2D images directly within the code.
• Editing is easier. Change text quickly by adding contenteditable=“true” to an element.
• Video and audio support is greatly improved, and you will be able to add both without using a plugin.
• It does require a doctype so a browser can display the page in a standard mode, but the doctype has been simplified. Now it is <!DOCTYPE html>.

Why Use HTML5?

• Uses WebSockets, so it loads faster than older versions of HTML.
• Smartphone apps from all phone brands and models will be able to read one language.
• Greater flexibility.
• Video, images and audio are embedded within the code, so users do not need an outside plugin.
• The language is getting more popular, so websites that do not use it will soon be outdated.
• Is is based on HTML4, so you can added new elements within the code.
• HTML5 coupled with CSS3 gives you many features and benefits not possible previously.

CSS3

CSS, which stands for Cascading Style Sheets, gives designers flexibility in presenting a website. It allows you to create better looking websites with unique features. Like HTML5, CSS3 isn’t supported by all browsers yet, but it is gaining popularity. CSS3 lets you add effects to the page without using Javascript or other plugins.

One disadvantage to using CSS is that you need to use filters to alter how things appear on the screen for different browsers. Internet Explorer is most known for being buggy and displaying CSS improperly, but Chrome and Firefox can also have bugs. Designers get around this by creating different codes for different browsers or utilize filters to block CSS completely.

CSS3 Features

Rounded Corners

Demo: http://psdslicer.com/

Before, you had to use JavaScript to mask the corner of an image or create a separate image for just the corner. Now, you can round corners with the following code:

div {
border: 5px solid #434343;
padding: 10px;
background: #e3e3e3;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
width: 500px;
}

RGBA Colors

Demo: http://vivid-ness.co.uk/

You had to use a PHP script within the CSS code to trick the browser into displaying colors in RGBA. This added unnecessary code in the PHP file. Or, you had to memorize color codes for each color, but now you can specify the amount of each color and their opacity within the code.

Here is the code for CSS3:

background: rgba(150, 25, 150, 0.5);

Text Shadow

Demo: http://www.foundationsix.com/

A text shadow adds a drop shadow below text to make it stand out or give it visual interest. Previously, the designer had to create two elements with the same text and give one a different color. The darker color was then offset by a couple of pixels and placed behind the other text. With CSS3, use the following code for text shadow:

h1 {
text-shadow: 0px 1px 1px rgba(0,0,0,.2);
}

Opacity Level

Demo: http://www.teehanlax.com/

In previous version of CSS, you had to create PNG files with transparency or use filters for Internet Explorer. Now, you can use the following code:

opacity: 0.5;

Box Shadow

Demo: http://glo.id.au/

Box shadows let content slide under another area, such as the page’s footer. It makes it look like the content is sinking into the bottom of the website. With CSS3, you don’t have to create an image for this effect. You can also make the shadow appear by hovering over the area.

Before CSS3, you had to use a JavaScript plugin for a box shadow or create an image of the shadow. Now, you can use the following code with CSS3 for a box shadow:

.blogPost img {
margin: 22px 0;
box-shadow: 3px 3px 7px #777;
}

Add Fonts

Previously, websites could only display a font found on the visitor’s computer. Now you can upload a font file to your server and use CSS to call upon that file to display on the page.

Border Images

Now you can use any image as a border rather than using a boring line or dots as a border.

Transform

Lets you code how big you want an area to be when the user hovers over it.

Resizing Elements

Now working in Chrome, Firefox and Safari, this gives users a tool to resize elements. Use the following code:

div {
resize: both;
}

Multiple Backgrounds

Demo: http://www.hangingupthemoon.com/

Lets you overlay more than one background on a single page with the following code:

body {
background:
url(../images/bottom-left.png) top right fixed no-repeat,
url(../images/bottom-right.png) top left fixed no-repeat,
url(../images/top-left.png) bottom left fixed no-repeat,
url(../images/top-right.png) bottom right fixed no-repeat;
background-color:#ffffff;
}

Final Thoughts

Although not all browsers currently support HTML5 and CSS3, they will in the future. More and more web users and switching from Internet Explorer to Mozilla Firefox or Google Chrome, so designers need to create web pages that work on these browsers and with the features they support.

Both of these languages used together let you reduce or eliminate the need for third-part plugins, which makes it easier for visitors to use your website. Now you can embed pictures, audio and video directly within the website so pages load faster for users.

The two languages provide you with features that were not available before without having to use multiple programs. Now you can code your page quicker and easier with just two languages rather than using outside plugins that require learning yet another programming or web design language. Pages will not display faster and users do not have to waste time downloading the latest versions of plugins.

Both languages have the flexibility of being used for different browsers. Turn off portions of the code for browsers that do not support that code, and use feature rich code for browsers that do support it. HTML5 and CSS3 will soon be supported by smart phones and mobile devices, so designers can use the same page for both mobile and standard versions.

About The Author: Brian Flores

Brian Flores is a SEO and copywriter for a Los Angeles web hosting company. You can follow him on Twitter @BrianAFlores.

With the explosion of web usage over the past decade, the online applications that users have access to have become more sophisticated as each year passes. While ‘internet time’ is even faster than the proverbial ‘dog years’, one recent development has radically altered online applications and will continue to do so for some time.

Dubbed ‘ajax’, this technology allows for a web application to make asynchronous method calls to perform certain tasks without refreshing the user’s browser. To the user, it may appear that the page changes as they use it, or there may be progress indicators such as ‘loading’ graphics or something similar.

While the technology that allows this to occur isn’t actually new, the availability and ubiquity of broadband internet access, along with wider browser support for advanced Javascript programming, has made it extremely common. Here are some specific points that anyone looking into creating ajax-enabled applications to make sure they aren’t just introducing something that happens to be the latest fad.

First, consider how many times your users may have to do something in the application, for example, clicking a button, which normally may cause the entire page to reload. By working to limit those types of actions to ajax methods, the user’s navigation experience will seem faster, as they don’t have to wait for the page to refresh.

Sure, there is still some time for the page to update, but showing the user a progress bar or some other similar indicator makes the time seem quicker. It should also be noted that ajax methods that update small parts of the web page should not just seem faster, however.
Since less data is being passed back and forth across the wire to the user’s browser, it will actually increase the application’s speed.

Consider, however, being careful that trying to do everything in the application within a single screen may not be the best way to go, either. Some screens simply need a different layout in order to make sense to the user. By carefully deciding which navigation elements should be moved to ajax and which should not, you will improves the accessibility and usability of the entire application.

About the author
James Mowery is a computer geek that writes about technology and related topics. To read more blog posts by him, go to laptop computers.

HTML5 is currently being developed as the next major revision of HTML and it is still far away from W3C recommended release date (year 2022 or later). However with the release of Apple iPad, the topic is got extremely heated and almost every web designer are talking/reading/writing/blogging/twitting about it.

Moreover, many early adapters (web developers and geeks) started creating some cool stuffs wtih the cleaner HTML5/CSS3 codes. In case you wanted to be one of them but don’t know where to start, here are list of useful HTML5 tutorials to get you started. It’s been a long week searching and reading on these tutorials (hey, I’m new to this too!) – I hope you make good use of them. Also, if you are one of the authors of these tutorials – I couldn’t thank you guys enough! It’s been a great learning journey reading each of these; thank you very, very much.

*Quick note: This post was updated on Nov 2011.

0. Udemy’s HTML5 Crash Course

Need a complete beginner lessons in HTML5? Udemy has the best in it. Taught by Robin Nixon, author of Learning PHP, MySQL, and JavaScript, the course covers pretty much everything a newbie need to know in HTML5, including basic HTML coding, HTML5 canvas for drawing, geolocation, local storage, as well as HTML5 audio and video.

Check out Udemy’s HTML5 Beginners Crash Course

1. HTML5 Getting Started Guide

Concise beginner guide in HTML5 – newbies should start reading from here.

Read HTML5 Getting Started

2. Preview of HTML5

This was an ‘overview’ on HTML5 published back in late 2007. Nevertheless, it is still a good learning source for those who are unfamiliar with the codes. Personally I like the ‘big picture’ this article offers.

Read HTML5 Preview

3. What Does It All Mean (Dive into HTML5)

‘Dive Into HTML5’ is a HTML guide book to be published by O’Reilly. The chapter ‘What Does It All Mean’ offers a clear explanation on the basics of HTML5 semantics/elements.

Read What Does It (HTML5 elemenets) All Mean

4. HTML5 Demos and Examples

It’s always easier to learn something new via examples. This site provides up to 20 examples of HTML5 experimentations and demos (with source code!).

HTML5 Demos

5. HTML5 Differences From HTML4

Detail comparison guide of HTML4 and HTML5 by the W3C (there is no better source than this!).

Read HTML5 differences from HTML4

6. HTML5 and CSS3: The Techniques You’ll Soon Be Using

This is a great tutorial that combines the application of HTML5 and CSS3 – must read for beginner/advance level of web developer and designer.

Read HTML5 & CSS3: The Techniques You’ll Soon Be Using

7. HTML5 localStorage()

One of the best things you can do with HTML5 is to establish a client side database (on user browser) with localStorage. To start using this awesome HTML5 function, the HTML5 localStorage() tutorial series (4 detail articles) published at PaperKilledRock.com comes very handy.

Read HTML5 localStorage()

8. HTML5 Canvas Cheat Sheet

The information provided is pretty much just a condensed copy of WHATWG specifications. However the .pdf file is definitely a must have on your notice board (especially when you are dealing with a HTML5 project that involves loads of canvas elements).

Get HTML5 Canvas Cheat Sheet

9. Designing A Blog With HTML5

This is a tutorial that every blog theme developer will need to read. (You should also read the author’s blog Bruce Lawson for more related updates.)

Read Designing a blog with HTML5

10. HTML5 Cheat Sheet

What can I say? Everyone loves a cheat sheet or two.

Get HTML5 Cheat Sheet

Download and Demo Magazine Style WordPress Themes

1. WP Clear

Details: Download / Demo

2. FX Mag

Details: Download / Demo

3. Smashing MultiMedia

Details: Download / Demo

4. iGames

Details: Download / Demo

5. Hamasaki Theme

Details: Download / Demo

6. IsoTherm News

Details: Download / Demo

7. Lap of Luxary

Details: Download / Demo

8. Mimbo Theme

Details: Download / Demo

9. Subtly Made

Details: Download / Demo

10. Trista

Details: Download / Demo

11. The Morning After

Details: Download / Demo

12. Small Magazine Theme

Details: Download / Demo

13. ColorBold

Details: Download / Demo

14. Pro Start

Details: Download / Demo

15. WebFolio

Details: Download / Demo

16. SimpleScheme Mag

Details: Download / Demo

17. RockWell

Details: Download / Demo

18. FreshMotar

Details: Download / Demo

19. PixDesign

Details: Download / Demo

20. Bueno

Details: Download / Demo

21. Berita

Details: Download / Demo

22. Magiting

Details: Download / Demo

23. Render Magazine

Details: Download / Demo

24. OrganicMoss Theme

Details: Download / Demo

25. TypoPrint

Details: Download / Demo

26. Moi Magazine

Details: Download / Demo

27. Creative by Nature

Download / Demo

28. FakeBlog

Details: Download / Demo

29. Magazeen

Details: Download / Demo

30. Milano

Details: Download / Demo

31. Elegant News

Details: Download / Demo

32. WordPress Blues

Details: Download / Demo

33. PureMagazine

Details: Download / Demo

34. Urbane

Details: Download / Demo

35. Visoko

Details: Download / Demo

36. Magnum Black

Details: Download / Demo

37. Vodpod

Details: Download / Demo

38. Brightness

Details: Download / Demo

39. DesignMagz

Details: Download / Demo

40. Equilibrium

Details: Download / Demo

Definition quoted from UWStout.edu:

‘Hover’ is an effect that occurs when you place the cursor over a link of any kind. The link can be coded to respond to the hover by changing color, showing a new graphic, or even playing a sound file.

The hover effect improves web usability and helps web owners to direct their web traffics. When you wish your web users to pay extra attention to a special link, a good way to do so is to create a link with attractive hover effect. A simple hover effect like this (a simple underline and change of text color) indicates those text are ‘click-able’ and improves web interactions. However, changing text color and styles (underline/overline/bold) is very basics and there are a lot more can be done with hover.

In this article, I’m going to show how you can create good looking links with hover effect.

Example 1: Link with hover button

First, a look at the working example (place mouse over the link to see how it works – change of icon at the side).

Example 1 – Link with hover button image

This is the completed version of what will be built in this example.

How we create it in plain CSS?

The Button Image

Step 1, as you can see, we need a arrow icons in two different versions. In our example, I used red (#CC3300) as the default link button; and grey (#333333) for the hover effect. Such button can be easily made using any image editing software.

We now have the red color button (say, b1.png) and the rey color (button say, b2.png). Merge these two into one image file with b1.png on top of b2.png. This will be our final image for the link. Name it (say, x.png) and upload the desired location (for my case, I placed it in my WP template folder).

For your reference:

b1.png , b2.png , and x.png

The CSS Code

Next, on the CSS code. Basically what we want to achieve is to indent the link text slightly to the right to make space for the button; and in the same time, display a different image when the link is in hover state. These are pretty fundamental stuffs except that we need a little twist on the background position. The trick is to show the top part of the image (the red button) for the original link; and when hover, displace the background image with a -11px (it might differs on your website) margin to show the grey button.

.x a {
color: #cc3300;
padding-left: 14px;
font-weight: bold;
background-image: url(images/x.png);
background-position: 0 2px;
background-repeat: no-repeat;
}

.x a:hover {
color: #333333;
padding-left: 14px;
font-weight: bold;
background-image: url(images/x.png);
background-position: 0 -11px;
background-repeat: no-repeat;
}

Implementation

To show off this hover effect, simply insert class x into the designated area. Here’s an example on how you can do it.

<p class=’x'><a href="http://www.webhostingsecretrevealed.com">Homepage</a></p>

Example 2: Link in hover background

With the same concept, there are endless ways you can make your links look cool. Here’s another example on what we can do with the hover effects with a slightly different method. Again, have a look on the finished version.

Example 2 – Link in hover background

In this example, what I will do is to create a button-liked hyperlink where the background will change when users place their mouse over it.

How we create it in plain CSS?

The background images

First, create two images of rounded rectangle. For demonstration purpose, we will not merge these two images in this example. We’ll name the red (#CC3300) rectangle as b1.png; and the maroon (#9F2800) rectangle as b2.png.

The CSS Code

Next, here are the codes for your style sheet (we are naming the class ‘y’ in this second example).

a.y {
width: 280px;
height: 42px;
color: #000000;
padding: 10px;
text-decoration:none;
display: block;
font-weight: bold;
background-image : url(images/b1.png);
background-repeat: no-repeat;
}

a.y:hover {
width: 280px;
height: 42px;
color: #FFFFFF;
padding: 10px;
font-weight: bold;
text-decoration:none;
display: block;
background-image : url(images/b2.png);
background-repeat: no-repeat;
}

Implementation

To display the link, simple insert the class (y) into the <a href> tag in your source code. Example:

<a href="http://www.webhostingsecretrevealed.com" class="y" >Homepage</a>

Wrapping up

I hope this article brought you valuable information and inspired some of you to use CSS in an creative way. If there’s any other points you think I should add in this guide, feel free to leave your ideas in the comment section.