Most of these hacks require your WordPress template to have functions.php file, if it doesn’t exist, create one.

1. Add private notes to your WordPress blog posts

If you would like to add reference notes to your posts that will only be visible to authors of your blog, add this function to your theme’s functions.php file which will create a shortcode [note] so that you can add notes for authors by including them in [note] and [/note] while writing the post.

add_shortcode( 'note', 'sc_note' );
function sc_note( $atts, $content = null ) {
	 if ( current_user_can( 'publish_posts' ) )
		return '<div class="note">'.$content.'</div>';
	return '';
}

Source: Add Private Notes to your WordPress Blog Posts – WpRecipes

2. How to disable HTML in WordPress comments

WordPress allows some HTML tags like <a>, <em>, <strong> within comment text. But if you would like to disable this feature on your blog to prevent users from adding any HTML content within comment text, add this function to your theme’s functions.php file. This will treat the HTML content within comment text as literals and display them as it is.

// This will occur when the comment is posted
function plc_comment_post( $incoming_comment ) {

	// convert everything in a comment to display literally
	$incoming_comment['comment_content'] = htmlspecialchars($incoming_comment['comment_content']);

	// the one exception is single quotes, which cannot be #039; because WordPress marks it as spam
	$incoming_comment['comment_content'] = str_replace( "'", ''', $incoming_comment['comment_content'] );

	return( $incoming_comment );
}

// This will occur before a comment is displayed
function plc_comment_display( $comment_to_display ) {

	// Put the single quotes back in
	$comment_to_display = str_replace( ''', "'", $comment_to_display );

	return $comment_to_display;
}

add_filter( 'preprocess_comment', 'plc_comment_post', '', 1);
add_filter( 'comment_text', 'plc_comment_display', '', 1);
add_filter( 'comment_text_rss', 'plc_comment_display', '', 1);
add_filter( 'comment_excerpt', 'plc_comment_display', '', 1);

Source: How to disable HTML in WordPress Comments

3. Check if a WordPress plugin is active

You might sometime need to check whether a particular plugin is activated or not either to use its functionality or prevent any conflicts from occurring. WordPress provides a function is_plugin_active that accepts path to the plugin file and checks to see if plugin is activated or not.

<?php
if (is_plugin_active('plugin-directory/plugin-file.php')) {
    //plugin is activated
}
?>

Source: Check if a WordPress Plugin is active – WpRecipes

4. Prevent Plugins from automatically loading stylesheets and scripts

Many plugins add their own stylesheets and scripts to your site to perform their function. But if you are using a lot of plugins on your WordPress blog, then this might lead to slow loading of your web pages as lots of scripts and stylesheets will require to be loaded first. What you can do to boost performance of your site while using plugins is combine their CSS and JavaScript files and prevent them to load on their own. For that you’ll need to look into plugin files and find out the handler names of all the CSS and JS files plugins are loading using wp_enqueue_script() and wp_enqueue_style() functions.
For example, if you use wp-pagenavi plugin, it loads its own stylesheet using the function:

wp_enqueue_style('wp-pagenavi', plugins_url('wp-pagenavi/pagenavi-css.css'), false, '2.50', 'all');

The first parameter to wp_enqueue_style() or wp_enqueue_script() is the name of handler for CSS or JS file.
In this case the handler name is wp-pagenavi. Now add these lines to your theme’s functions.php file to prevent it from loading.

//Prevent Stylesheets from loading
add_action( 'wp_print_styles', 'my_deregister_styles', 100 );

function my_deregister_styles() {
	wp_deregister_style( 'wp-pagenavi' );
}

//Prevent JavaScript files from loading automatically
add_action( 'wp_print_scripts', 'my_deregister_javascript', 100 );

function my_deregister_javascript() {
	wp_deregister_script( 'nameofhandler );
}

Source: How to Disable Scripts and Styles – Justin Tadlock

5. Showing Last Modified Date for a post

If you regularly update your old blog posts, then why not show the last modified date on the post page to let readers know when the post was last updated. Use this code to display the last modified date if the post has been modified at a later date.

Posted on <?php the_time('F jS, Y') ?>
<?php $u_time = get_the_time('U');
$u_modified_time = get_the_modified_time('U');
if ($u_modified_time != $u_time) {
echo "and last modified on ";
the_modified_time('F jS, Y');
echo ". "; } ?>

Source: Showing Last Modified On Your WordPress Posts – WPHacks

6. Custom Taxonomies in WordPress

By default, WordPress has two taxonomies categories and tags to group posts but custom taxonomies allow you to group your pages in your own custom ways, for example if you are running a movie review blog, you might want to add a taxonomy of genre to group movie review by genre, or a taxonomy of actors to group posts by actors. Custom taxonomies free you from restrictions of categories and tags.

You can add a custom taxonomy by adding this code to your theme’s functions.php file.

add_action( 'init', 'create_my_taxonomies', 0 );

function create_my_taxonomies() {
	register_taxonomy( 'genre', 'post', array( 'hierarchical' => false, 'label' => 'Genre', 'query_var' => true, 'rewrite' => true ) );
	register_taxonomy( 'actors', 'post', array( 'hierarchical' => false, 'label' => 'Actors', 'query_var' => true, 'rewrite' => true ) );
}

This will add new boxes to your add post page in admin panel if you are using WordPress 2.8+ using which you can add values for custom taxonomies. Justin Tadlock has written complete tutorial on how to create and use custom taxonomies, refer to it for more.

7. Create Post Only for your RSS Subscribers

If you would like to give an exclusive offer to your regular RSS subscribers, here’s a nice trick to create a post that is only visible to your RSS subscribers.

First of all, create a category that will hold posts to show to your RSS suscribers. For example, create a category ‘RSS’ and add some posts exclusively to it. Note down the category ID of this category. Now in your theme’s functions.php file, add these lines of code so that it is only shown to RSS subscribers.

<?php
function excludeCategory($query)
{
	if($query->is_home | $query->is_archive )
	//Exclude category from all other pages except RSS
	$query->set('cat','-3');
	return $query;
}
add_filter('pre_get_posts', 'excludeCategory');
?>

Source: Create Post only for your RSS Subscribers

8. Get Rid of Curly quotes

WordPress usually replaces pair of double quotes with curly quotes e.g. "something" will become “something”. This is fine for most of the blogs and they look nice too but if you post source code in your posts, then you need to disable this functionality as it’ll also transform quotes within source code. Paste this code into your theme’s functions.php file.

<?php remove_filter('the_content', 'wptexturize'); ?>

Source: Get rid of Curly Quotes in WordPress Blog – WpRecipes

9. Deny Comment Posting to Spammers

You can keep a good number of spam comments away from your blog by checking the referrer URL of the posted comment form. Most of the spam comments are usually made by automated scripts and they just post the data to wp-comments-post.php so that there’s no referral URL through which form is submitted.
You can add a rule to your blog’s .htaccess file so that it restricts the access of wp-comments-post.php to requests that provide referral URL.
Here are the rules you need to add to .htaccess file. Do backup .htaccess file before modifying.

RewriteEngine On
RewriteCond %{REQUEST_METHOD} POST
RewriteCond %{REQUEST_URI} .wp-comments-post\.php*
RewriteCond %{HTTP_REFERER} !.*yourblog.com.* [OR]
RewriteCond %{HTTP_USER_AGENT} ^$
RewriteRule (.*) ^http://%{REMOTE_ADDR}/$ [R=301,L]

Source: How To Deny Comment Posting to no referrer requests – WpRecipes

Note: This will only prevent spam bots or automated scripts from posting comment and not those individuals that manually post them. You should use Akismet or other spam preventing tools in addition to this.

10. Insert Ads Within RSS Feed

Here’s a nice hack to add any HTML content into RSS Feeds like ads, copyright info or anything you want to show to just your RSS readers. Add this code to your theme’s functions.php file and you can customize the HTML content to anything you want to append or prepend to posts.

<?php
function insertAds($content) {
    $content = $content.'<hr /><a href="http://webdeveloperplus.com">Visit WebDeveloper Plus for latest Web Design/Development Information</a>';
    return $content;
}
add_filter('the_excerpt_rss', 'insertAds');
add_filter('the_content_rss', 'insertAds');
?>

Source: Web Invent If

11. Disable WordPress Feeds

If you are using WordPress as CMS which has just static content, then you might want to disable RSS feeds as it won’t be of any use for your users. Add this code to your functions.php file to disable RSS feeds.

function fb_disable_feed() {
	wp_die( __('No feed available,please visit our <a href="'. get_bloginfo('url') .'">homepage</a>!') );
}

add_action('do_feed', 'fb_disable_feed', 1);
add_action('do_feed_rdf', 'fb_disable_feed', 1);
add_action('do_feed_rss', 'fb_disable_feed', 1);
add_action('do_feed_rss2', 'fb_disable_feed', 1);
add_action('do_feed_atom', 'fb_disable_feed', 1);

Source: Disable WordPress Feed – WpEngineer

12. Link Post Title to External URL

If you sometimes share just a link to other article out there which your readers might find useful, then here’s a nice hack to link the title of the post in your main template directly to the external URL. This will save your readers some time as they won’t have to open the post page just to find the resource link. Here’s how to do it:
Add these lines of code to functions.php file.

function print_post_title() {
	global $post;
    $thePostID = $post->ID;
    $post_id = get_post($thePostID);
    $title = $post_id->post_title;
    $perm = get_permalink($post_id);
    $post_keys = array(); $post_val = array();
    $post_keys = get_post_custom_keys($thePostID);

    if (!empty($post_keys)) {
		foreach ($post_keys as $pkey) {
			if ($pkey=='title_url') {
				$post_val = get_post_custom_values($pkey);
			}
		}
		if (empty($post_val)) {
			$link = $perm;
		} else {
			$link = $post_val[0];
		}
    } else {
		$link = $perm;
    }
    echo '<h2><a href="'.$link.'" rel="bookmark" title="'.$title.'">'.$title.'</a></h2>';
}

Next, you need to find out following lines in your theme’s index.php file:

<h2><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h2>

Replace these lines with the following

<?php print_post_title() ?>

Now whenever you want to share an external URL, add a custom field to your post named title_url and set its value as the URL of the resource.
Source: WPBeginner

Related Posts

1. Create Post Only For Your RSS Subscribers in WordPress
2. How To Use Thumbnails Generated By WordPress In Your Theme
3. How To: AJAXify WordPress Comment Posting

1. Custom Styled Radio Buttons and Checkboxes

It is always hard and next to impossible to customize style of radio buttons and checkboxes. But using jQuery we can easily customize the radio buttons and check boxes to make them more user friendly. Here are two different ways to stylize them:

Custom Designed Checkbox and Radio Buttons


Radio Button and Checkbox replacement.

2. Setting Equal Heights with jQuery

Creating the visual effect of equal-height columns or content boxes has been a challenge ever since we abandoned table-based layouts. Here’s the jQuery way to set equal height of multiple elements using the equalHeights plugin. With this plugin, you can make equal height columns with just a single line of code.

$("someselector").equalHeights();

3. Styling Select Elements

<select> is another HTML element that is not easy to customize using CSS, but with jQuery at our disposal, we can certainly make them look cool and usable.

jQuery UI Selectmenu
This is a plugin for jQuery UI that lets you customize select elements easily.

jQuery image dropdown

4. Current Field Highlighting in Forms

It is always good to provide a visual feedback to users when they perform any action while using a web form. Highlighting the field in which user is currently typing is one of the usability features you should add to web forms. Though, this can be achieved using the :focus pseudo selector in CSS. But this technique of highlighting the label along with the selected input field from CSS Tricks provides good user experience.

5. Fix IE Overflow problem

Internet Explorer has this rather strange problem, when overflow is set to auto or scroll, the scrollbar shows up inside the width of element. This is fine when you have multiple lines of text within that element, but if you just have a single line of text, then scrollbar would cover that and it won’t be visible. This jQuery technique from Remy Sharp will fix that IE bug.

6. Block Hover Effect

Creating block hover effect with CSS using display:block is possible but when you have some other content inside a box alongside the link, then it is not possible to create a semantically correct block hover effect using CSS. Here’s a nice jQuery plugin – Bigger Link to achieve that.

7. Rounded Corners

CSS Rounded corners are now supported by most browsers like Firefox, Safari but some browsers like IE do not support them. For those unsupported browsers, you can use jQuery Curvy Corners.

8. Attractive Menus with jQuery

Creating a CSS based navigational menu that displays hover state separately is not difficult, but with a little amount of jQuery you can achieve some really nice effects. Check out these two example menus that use jQuery to produce a very subtle hover effect.
Create an Attractive jQuery Menu with Fade In and Fade Out Effect

Animated Menu Using jQuery

9. Creating a Floating HTML Menu Using jQuery and CSS

You can fix the position of an element using the position:fixed property but that won’t provide as rich user experience as Live floating menu using jQuery. It creates a floating menu on the page and as you scroll down, menu also follows your mouse scroll.

10. Splitting Content over multiple columns

Ever thought of splitting text of a page into multiple columns just like newspaper. With CSS, this will take a lot of effort but this Columnizer jQuery plugin will do all the effort for you to split content into multiple columns with a single line of code.

11. Semantic Blockquotes with jQuery

If you use blockquotes in your design to highlight important points of an article, then you also duplicate the content within blockquotes as it is also there in the article. Here’s a nice jquery way to do this leaving the duplication of content to jQuery by specifying which content to show as blockquote.

12. Text Shadows

CSS3 includes a nice property of text-shadow that allows you to set a text-shadow generate nice text-effects without using any images. But IE does not support this feature till date. Text-shadow in IE adds this support to Internet Explorer using jQuery.

13. Border Image

CSS3 lets you use images as border backgrounds in addition to just colors. But since it is not supported my many browsers, you’ll need jQuery to come to rescue. jQuery.borderimage provides cross-browser support for border-image property.

14. Opacity

Opacity is one such CSS property which is supported by most browsers including IE but each has a different way to implement it, though CSS3 standard defines a property opacity to be used for setting opacity of elements, but you end up writing many lines of CSS code just to make opacity cross-browser compatible. jQuery can make this easier too.

$("someselectoe").css("opacity", 0.5);

15. Super CSS Selector Support with jQuery

CSS 2.1 supports various types of selectors including :focus, :first-child, nth-child but not all browsers(IE!) support these selectors. but with Super CSS Selector, you can be sure to have support for those selectors even in IE.

Related Posts

1. 21 Amazing CSS Techniques You Should Know
2. 21 Brilliant jQuery Image Gallery/Slideshow Plugins

1. Facebook type image rotation and more using PHP and Javascript

How does facebook rotate images in gallery. Here’s a nice solution using the inbuilt imagerotate functionality in PHP. View Demo »

2. Retrieve Google Analytics Visits and Pageviews with PHP

Learn how to integrate Google Analytics data into your website using an easy to use PHP API
View Demo »

3. Caching Dynamic PHP pages easily

Learn how to cache database intensive heavy pages and serve the static html cached files utilizing the output buffering in PHP

4. Reading Excel Sheet in PHP

In this article you will learn, how you can read Microsoft Excel Sheet in PHP using Open Source Tool PHPExcelReader.

5. XML Parsing in PHP/XPath Way

If you are a PHP developer, you surely must have done XML parsing at some stage or the other. Parsing XML using XPath is far more better than other techniques, not only because it’s quite simple but also because it’s extendable.

6. Retrieve Your Gmail Emails Using PHP and IMAP

Grabbing emails from your Gmail account using PHP is probably easier than you think. Armed with PHP and its IMAP extension, you can retrieve emails from your Gmail account in no time.
View Demo »

7. Directory Trees With PHP and jQuery

A simple way to keep track of many files is to use a directory tree. A directory tree lists out files and directories so that it’s easy to find what you’re looking for.

8. Send Hassle Free and dependable HTML emails with PHP

A simple straightforward function that sends HTML e-mails with a plain text counterpart for those over 80 and still using AOL 2.5.

9. How To Use Custom ini Files With PHP

The config file typically holds information that will be used over and over again, such as database info. Today, we will have a look at a simple example of using a custom ini file to set our preferences.

10. From MySQL to jQuery, via PHP, XML & Ajax

This article will focus on getting data from a database using PHP, converting that to an XML document, and reading that XML in through jQuery via Ajax calls. Seems complex, but is in fact, very easy.

11. Create a Basic Web Service Using PHP, MySQL, XML, and JSON

Here’s how to create a basic web service that provides an XML or JSON response using some PHP and MySQL.

12. How URL shortner scripts work?

Ever thought of how those URL Shortening services work. Have a look at a nice technique to create your own URL shortening service.

13. Automatic Face Detection in Photos with PHP

Find out how to automatically detect and tag a face in an image.

14. Update Twitter using Command Line, Javascript, Or PHP.

Everyone seems to be all about Twitter so here’s some simple examples of how to update your Twitter status from a command line prompt, web server or simple html web site.

15. Making RESTful Requests in PHP

APIs have become a very commonplace part of many popular web sites and services, especially REST APIs. This article discusses how to get, post, put and delete with a REST API in PHP.

16. PHP Multithreading using CURL

Simultaneously fetch data from multiple websites using CURL’s multithreading option.

17. PHP HTTP Authentication

At times, you may wish to make certain pages of your site only viewable to a select few, you can do this by using PHP’s built in HTTP Authentication.

18. PHP copy directory from source to destination

To copy a directory source to a destination directory you will need to scan the source directory with all files and directory and copy to the destination. To accomplish this we should make a recursive function that will copy the files from source to target dir.

19. File Upload in PHP – Securing the things

Secure your file upload forms and prevent malicious users from attacking your web app.

20. HTML Scraper in PHP

Sometimes we want to extract the HTML content of the remote website page, this technique is called as HTML scraper. This article will discuss on how we can extract the HTML content of the remote webpage.

21. PHP Secure Login Tips and Tricks

In this article, you will get a list of PHP secure login tips and tricks that will definitely help you decide on your secure rating of your login page.

22. Use PHP To Gzip CSS Files

This technique is a powerful and simple way to reduce page download size and speed up your site that will work with most PHP installations

23. Backup Your Database into an XML File Using PHP

The database is the most important part of a web application. Imagine losing all of the data in your database — it would be tragic. Here’s a PHP snippet that outputs your database as XML.

24. How To Debug in PHP

This article breaks down the fundamentals of debugging in PHP, helps you understand PHP’s error messages and introduces you to some useful tools to help make the process a little less painful.

25. Optimizing a php application in 5 minutes

Optimizing means reducing loading and execution times, improving the user experience by making the application reacting more responsively. If your language of choice is php, fortunately this process takes only 5 minutes.

Related Posts

1. 21 Really Useful & Handy PHP Code Snippets

As these frameworks are getting popular day by day, more and more web developers are coming out with new and creative ideas every day. Here are 21 brilliant jQuery plugins which you can easily use to create an image gallery/slideshow for your website.

1. Spacegallery

Spacegallery displays your images with a nice 3D effect and it is also pretty easy to use and customize.

2. prettyPhoto

prettyPhoto might look like jQuery Lightbox clone but it supports videos, flash, YouTube videos, iFrames besides images. It also comes with useful API and 4 beautiful themes. It is a great plugin to create an image as well as multimedia gallery.

3. Zoomimage

Stylish way to present your images in a nice popup with a drop shadow and border.

4. Pirobox

Another lightbox based image gallery plugin that resizes images based on browser size and next/prev links can be placed inside or outside of the image.

5. slideViewerPro

slideViewerPro is a fully customizable jQuery image gallery engine that lets you create outstanding sliding image galleries for your projects or interactive galleries within blog posts.

6. Galleria

Galleria generates an image gallery from an unordered list and once the images are loaded, thumbnail navigation is generated. It is easy to customize using just CSS and degrades gracefully if JavaScript is disabled.

7. jQuery PanelGallery

jQuery PanelGallery generates a slideshow of images with a unique transition. Image transition occurs in a sequential manner displaying the new image panel by panel, thus the name PanelGallery. It is lightweight and allows you to change the direction of panel transition.

8. PikaChoose

Pikachoose allows easy presentation of a bunch of images using slideshows with nice thumbnails, next/prev buttons and autoplay options.

9. jQuery Gallery Plugin

This plugin will transform a list of images into a flash like image gallery. Thumbnail navigation only shows up when you hover over the image and behaves like infinite carousel.

10. EOGallery

EOGallery creates an animated slideshow and images are displayed in larger size using jQuery Thickbox plugin.

11. Smooth Div Scroll

As the name suggests, this plugin scrolls content smoothly and horizontally in either left or right direction. This plugin can scroll any html content and if you use images, you’ll end up with a nice smoothly scrolling slideshow.

12. Sliding Image Gallery

Sliding image gallery displays a number of images in an easy to use manner just like the iTunes Album Viewer. It is quite easy to implement and gives you a lot of options to customize.

13. Step Carousel Viewer

This plugin displays images or any HTML content by side scrolling them left or right with a smooth sliding animation during transition. And with its two public methods and two custom event handlers, you can customize it to your requirement easily.

14. jQuery Virtual Tour

With this plugin, you can convert panoramic views into virtual tours, it degrades gracefully if JavaScript is disabled.

15. Ultimate Fade In Slide Show

This is a robust, cross browser fade in slideshow script that incorporates some of your most requested features all rolled into one.

16. ThickBox Gallery

jQuery Thickbox plugin can be used for creating a nice image viewer that shows images in a lightbox and supports keyboard shortcuts to navigate through the images.

17. jQuery Lightbox

This one is a simple elegant and unobtrusive plugin to create an overlay image viewer that supports keyboard shortcuts and requires minimal coding effort.

18. GalleryView

GalleryView lets you create a flexible and attractive content that is very easy to implement and customize. Also, their way of explaining the anatomy of GalleryView plugin is very intuitive.

19. Flickr Gallery

Flickr Gallery generates a slideshow whose size varies with the size of image. As the name suggests, it can directly pull images from a flickr account(needs Flickr API key) or you can use just a simple unordered list. Thumbnail navigation is intuitive with a nice scrolling bar.

20.Easy Slider

Easy slider enables images to slide either horizontally or vertically and it can be styled easily using CSS. The latest version of this plugin supports continuous scroll instead of jumping over to first slide from last slide.

21. SuperSized

Using Supersized, you can display large sized photos easily as it will scale the images automatically depending on browser size and supports preloading of images for better experience.

Related Posts

1. 30+ Fresh & Amazing jQuery Plugins & Tutorials
2. 15+ Excellent jQuery Plugins To Enhance HTML Forms
3. 25 Amazing & Free Flash Based Image Galleries

1. Change Text Highlight Color

You might not have known this before! With CSS you can control the colors of selected test at least for standards compliant cutting edge browsers like Safari or Firefox.

::selection{ /* Safari and Opera */
	background:#c3effd;
	color:#000;
}
::-moz-selection{ /* Firefox */
	background:#c3effd;
	color:#000;
}

2. Prevent Firefox Scrollbar Jump

Firefox usually hides the vertical scrollbar if size of the content is less than the visible window but you can fix that using this simple CSS trick.

html{ overflow-y:scroll; }

3. Print Page Breaks

While most of the internet users prefer to read content online but some of your users might like to print your article. With CSS you can control the page breaks within content just add this CSS class to your stylesheet and add this class to any tag which you would like to print on next page.

.page-break{ page-break-before:always; }

4. Using !important

Experienced CSS programmers are usually aware of this but beginners do miss out on this !important CSS rule. By adding !important to your CSS rule, you can increase its precedence over other subsequent rules. e.g. in below code, background-color will be blue and not red due to !important.

.page { background-color:blue !important;   background-color:red;}

5. Replace Text With Image

This is a nice SEO trick that lets you show a nice fancy image instead of simple boring text to your visitors but search engines will see only the text.

.header{
	text-indent:-9999px;
	background:url('someimage.jpg') no-repeat;
	height: 100px; /*dimensions equal to image size*/
	width:500px;
}

6. Cross Browser Minimum Height

Internet Explorer does not understand the min-height property but here’s the CSS trick to accomplish that in IE.

#container{
	height:auto !important;/*all browsers except ie6 will respect the !important flag*/
	min-height:500px;
	height:500px;/*Should have the same value as the min height above*/
}

7. Highlight links that open in a new window

This piece of CSS code will highlight links that open in a new window so that user knows before hand that link will pop open in a new tab or window.

a[target="_blank"]:before,
a[target="new"]:before {
	margin:0 5px 0 0;
	padding:1px;
	outline:1px solid #333;
	color:#333;
	background:#ff9;
	font:12px "Zapf Dingbats";
	content: "\279C";
}

8. Style Your Ordered List

Style numbers of an ordered list in different way than the content of each list item.

ol {
	font: italic 1em Georgia, Times, serif;
	color: #999999;
}
ol p {
	font: normal .8em Arial, Helvetica, sans-serif;
	color: #000000;
}

9. Drop Caps Using CSS

You can create a drop caps effect like those in newspapers or magazines using the :first-letter pseudo element.

p:first-letter{
display:block;
margin:5px 0 0 5px;
float:left;
color:#FF3366;
font-size:3.0em;
font-family:Georgia;
}

10. Cross Browser Opacity

Though CSS3 standard includes the opacity property, but not every browser supports it, here’s the CSS trick for cross browser transparency.

.transparent_class {
	filter:alpha(opacity=50);
	-moz-opacity:0.5;
	-khtml-opacity: 0.5;
	opacity: 0.5;
}

11. Vertical centering with line-height

If you are using fixed height container and need to vertically center the text, use the line-height property to do that perfectly.

line-height:30px;

12. Center Fixed Width layout

If you use fixed width layout, you should center the layout so that if somebody views it on larger screen, the page displays in the center of the screen and not on left side.

body{
	width:1000px;
	margin:0 auto;
}

13. Remove vertical textarea scrollbar in IE

IE adds a vertical scrollbar to textarea input fields regardless of the height of content in it. You can fix that with this simple CSS trick.

textarea{
	overflow:auto;
}

14. Remove active link borders

Some browsers like Firefox and IE add a dotted outline border over the link user clicked. It is a useful accessibility feature that lets user know which link he clicked or is in focus. But sometimes you need to get rid of this, here’s the CSS you need to use.

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

15. Prevent Elements from disappearing in IE

Sometimes IE behaves in a peculiar way and makes some elements disappear, which appear when you try to make a selection. It is due to some IE issues with float elements. This can be fixed by adding position:relative; to elements that disappears.

16. Attribute-Specific Icons

CSS Attribute selectors are very powerful giving you many options to control styles of different elements e.g. you can add an icon based on the href attribute of the a tag to let the user know whether link points to an image, pdf, doc file etc.

a[href$='.doc'] {
	padding:0 20px 0 0;
	background:transparent url(/graphics/icons/doc.gif) no-repeat center right;
}

17. CSS Pointer Cursors

This trend has caught up lately. All user interface elements on a web page that can be clicked by user have their cursor similar to that of hyperlink. Here’s the CSS trick to do that.

input[type=submit],label,select,.pointer { cursor:pointer; }

18. Capitalize Text

This trick is especially useful for displaying title of an article on a web page with all its words starting with capital letter.

text-transform: capitalize;

19. Small Caps Text

This is one of the lesser used but useful CSS property. It capitalizes all the letters of text but the size of letters following the first letter of each word is smaller than the first letter.

font-variant:small-caps;

20. Highlight Text Input Fields

This CSS trick lets you highlight the input field currently in focus. This trick does not work in IE though.

input[type=text]:focus, input[type=password]:focus{
	border:2px solid #000;
}

21. Remove Image Border

Image hyperlinks usually get a ugly blue border that makes your image hyperlinks look horrible. It’s better to remove border on all hyperlinked images and add individually to those you want using CSS classes.

a img{ border:none; }

22. Tableless Forms Using labels

Gone are the days when tables were used to layout Forms. CSS lets you make accessible forms with table like layout using label tags. Using label tags makes sure your forms are more accessible. Here’s sample html and css code for tableless form using labels.

<form method="post" action="#" >
	<p><label for="username" >Username</label>
		<input type="text" id="username" name="username" />
	</p>
	<p><label for="password" >Username</label>
		<input type="password" id="password" name="pass" />
	</p>
	<p><input type="submit" value="Submit" /></p>
</form>

p label{
	width:100px;
	float:left;
	margin-right:10px;
	text-align:right;
}

23. Set a Consistent Base Font Size

Setting the font-size property to 62.5% in body tag makes 1em equal to 10px. This lets you use em easily as you can find out the font-size in pixels from em values.

body{ font-size:62.5%; }

24. Highlight Acronym and Abbr Tags

acronym and abbr tags provide useful information to users, browsers and search engines about acronyms and abbreviations, but most of the browsers except Firefox do not highlight them. Here’s the CSS trick to highlight acronym and abbr tags within your web page.

acronym, abbr{
	border-bottom:1px dotted #333;
	cursor:help;
}

25. CSS Reset by Eric Meyer

This piece of CSS code resets all the browser default styles preventing any browser inconsistencies in your CSS styles.

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}

/* remember to define focus styles! */
:focus {
outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}

Related Posts

1. 21 Amazing CSS Techniques You Should Know
2. 15 Ways to Improve CSS Techniques Using jQuery
3. CSS Tooltip Box Without Images

Tutorials

1. How to add preloader with loading image in a gallery using jQuery

Use a jQuery preloader while images are loading in the gallery.
» View Demo | » View Tutorial

2. Simple Lava Lamp Menu Tutorial With jQuery

Create a unique lava lamp animated jQuery navigation menu
» View Demo | » View Tutorial

3. How To Create a 3D Tag Cloud in jQuery

Amazing tutorial on creating a flash like 3D tag cloud using jQuery.
» View Demo | » View Tutorial

4. Drag & Drop With jQuery

Drag & Drop facility in a web application provides for a rich user interface, learn how to create one using jQuery UI.
» View Demo | » View Tutorial

5. Awesome Horizontal Animated menu using Kwicks for jQuery

Build a customizable and versatile horizontal animated menu using jQuery Kwicks plugin.
» View Demo | » View Tutorial

6. Create a Thumbnail Gallery With Slick Heading & Caption effect

» View Demo | » View Tutorial

7. Create an Attractive jQuery Menu with fade in and out effects

Nice tutorial on creating an attractive jquery menu with fade in background change on hover.
» View Demo | » View Tutorial

8. jQuery PHP AJAX Autosuggest

Autosuggest is one of the useful features of present web applications. Learn how to create one using jQuery and PHP.
» View Demo | » View Tutorial

9. Perfect Login Drop Down Box Like Twitter

Nice tutorial on imitating the new twitter login dropdown box using jquery.
» View Demo | » View Tutorial

10. Crafting an Animated Postcard With jQuery

Create a flashy postcard using just jQuery and no flash.
» View Demo | » View Tutorial

11. Twitter like Search With jQuery & AJAX

Create a twitter like search box that loads results using AJAX on same page.
» View Demo | » View Tutorial

12. Voting System With jQuery, AJAX, PHP

Learn how to create dzone like voting system.
» View Demo | » View Tutorial

13. AJAXed Sliding Shopping Cart Using jQuery

Amazing tutorial on creating a sliding AJAX Shopping basket that slides in and updates the cart when new item is added and auto-hides after some time. It also supports manual show hide option to view shopping cart at any time.
» View Demo | » View Tutorial

14. How To Build Animated Header in jQuery

Add motion to your header by animating its background. Amazing animation tutorial using jQuery.
» View Demo | » View Tutorial

15. Hide and Seek With jQuery

Use jQuery to display multiple modules of an application on a single page based on the event occurred.
» View Demo | » View Tutorial

16. jQuery Comment Preview

Provide comment preview to your users as they type in their comment using jQuery.
» View Demo | » View Tutorial

17. Styling Drop Down Boxes With jQuery

Since select boxes are hard to style using CSS, this tutorial shows you how to replace a select box with a textbox and an unordered list and then style them according to your choice.
» View Demo | » View Tutorial

18. Scrolling Dynamic Content Box

Load content into a div on scroll using AJAX just like Google reader loads more items as you scroll down to view more items of a feed.
» View Demo | » View Tutorial

19. Ways To Debug your jQuery or JavaScript Code

This article explains how you can easily debug javascript code using jquery console logging.
» View Tutorial

20. 5 Ways To Make AJAX Calls with jQuery

Nice tutorial from NetTuts+ about different ways of making AJAX calls using jQuery. It is even useful for those who are already familiar with jQuery as in depth coverage of various methods of making AJAX calls has been done.
» View Demo | » View Tutorial

Plugins

1. Tipsy

Display Facebook style tooltip plugins based on anchor tag’s title attribute
» View Demo | » Plugin Page

2. jQuery YouTube PlayList

Convert a list of YouTube links into playlist which allows user to see videos right on the page itself.
» View Demo | » Plugin Page

3. SuperFish Menus

Superfish Menus is an easy to use jquery plugin that converts unordered HTML lists into nice drop down menus.
» Plugin Page

4. Elastic

Elastic is a lightweight jQuery plugin that makes textareas adjust their size according to the size of content.
» View Demo | » Plugin Page

5. OverScroll

Implement iphone like click and drag to scroll behavior on your web page.
» Plugin Page

6. Tweetable

Display Twitter feed on your website easily and quickly with tweetable. Gives you option to convert twitter usernames and URLs into hyperlinks
» View Demo | » Plugin Page

7. jQuery Link nudge

Make links notorious just like ones on David Walsh blog using this jQuery Link Nudge plugin.
» View Demo | » Plugin Page

8. TimePickr

If you need to get time as input from user, then use this plugin to provide a rich UI to input time.
» Plugin Page

9. Truncatable

Truncatable lets you hide blocks of text on page and show them if user requires.
» View Demo | » Plugin Page

10. Incremental Search For Select Boxes

This plugin converts ordinary select boxes into combo boxes with incremental search, very useful if you have lots of options in the select box.
» View Demo | » Plugin Page

11. Anything Slider

Anything Slider is a full featured slider that is pretty easy to customize and adapt into your website.
» View Demo | » Plugin Page

Related Posts

1. 21 Brilliant jQuery Image Gallery/Slideshow Plugins
2. 15 jQuery Tutorials For More Interactive Navigation
3. 15+ Excellent jQuery Plugins To Enhance HTML Forms

1. Human Readable Random String

This code will create a human readable string that will look more close to dictionary words, useful for captchas.

/**************
*@length - length of random string (must be a multiple of 2)
**************/
function readable_random_string($length = 6){
    $conso=array("b","c","d","f","g","h","j","k","l",
    "m","n","p","r","s","t","v","w","x","y","z");
    $vocal=array("a","e","i","o","u");
    $password="";
    srand ((double)microtime()*1000000);
    $max = $length/2;
    for($i=1; $i<=$max; $i++)
    {
    $password.=$conso[rand(0,19)];
    $password.=$vocal[rand(0,4)];
    }
    return $password;
}

2. Generate a Random String

If you don’t need human readable string, then use this function instead, which will create a random string you can use for user id’s etc.

/*************
*@l - length of random string
*/
function generate_rand($l){
  $c= "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
  srand((double)microtime()*1000000);
  for($i=0; $i<$l; $i++) {
	  $rand.= $c[rand()%strlen($c)];
  }
  return $rand;
 }

3. Encode Email Address

With this snippet, you can encode any email address into HTML entities so that spam bots do not find it.

function encode_email($email='info@domain.com', $linkText='Contact Us', $attrs ='class="emailencoder"' )
{
	// remplazar aroba y puntos
	$email = str_replace('@', '@', $email);
	$email = str_replace('.', '.', $email);
	$email = str_split($email, 5);

	$linkText = str_replace('@', '@', $linkText);
	$linkText = str_replace('.', '.', $linkText);
	$linkText = str_split($linkText, 5);

	$part1 = '<a href="ma';
	$part2 = 'ilto&#58;';
	$part3 = '" '. $attrs .' >';
	$part4 = '</a>';

	$encoded = '<script type="text/javascript">';
	$encoded .= "document.write('$part1');";
	$encoded .= "document.write('$part2');";
	foreach($email as $e)
	{
			$encoded .= "document.write('$e');";
	}
	$encoded .= "document.write('$part3');";
	foreach($linkText as $l)
	{
			$encoded .= "document.write('$l');";
	}
	$encoded .= "document.write('$part4');";
	$encoded .= '</script>';

	return $encoded;
}

4. Validate email Address

E-mail validation is perhaps the most used validation in web forms, this code will validate email address and also optionally check the MX records of the domain provided in email address to make email validation more robust.

function is_valid_email($email, $test_mx = false)
{
	if(eregi("^([_a-z0-9-]+)(\.[_a-z0-9-]+)*@([a-z0-9-]+)(\.[a-z0-9-]+)*(\.[a-z]{2,4})$", $email))
		if($test_mx)
		{
			list($username, $domain) = split("@", $email);
			return getmxrr($domain, $mxrecords);
		}
		else
			return true;
	else
		return false;
}

5. List Directory Contents

function list_files($dir)
{
	if(is_dir($dir))
  	{
  		if($handle = opendir($dir))
  		{
  			while(($file = readdir($handle)) !== false)
  			{
  				if($file != "." && $file != ".." && $file != "Thumbs.db")
  				{
  					echo '<a target="_blank" href="'.$dir.$file.'">'.$file.'</a><br>'."\n";
  				}
  			}
  			closedir($handle);
  		}
	}
}

6. Destroy Directory

Delete a directory including its contents.

/*****
*@dir - Directory to destroy
*@virtual[optional]- whether a virtual directory
*/
function destroyDir($dir, $virtual = false)
{
	$ds = DIRECTORY_SEPARATOR;
	$dir = $virtual ? realpath($dir) : $dir;
	$dir = substr($dir, -1) == $ds ? substr($dir, 0, -1) : $dir;
	if (is_dir($dir) && $handle = opendir($dir))
	{
		while ($file = readdir($handle))
		{
			if ($file == '.' || $file == '..')
			{
				continue;
			}
			elseif (is_dir($dir.$ds.$file))
			{
				destroyDir($dir.$ds.$file);
			}
			else
			{
				unlink($dir.$ds.$file);
			}
		}
		closedir($handle);
		rmdir($dir);
		return true;
	}
	else
	{
		return false;
	}
}

7. Parse JSON Data

With most of the popular web services like Twitter providing their data through APIs, it is always helpful to know how to parse API data which is sent in various formats including JSON, XML etc.

$json_string='{"id":1,"name":"foo","email":"foo@foobar.com","interest":["wordpress","php"]} ';
$obj=json_decode($json_string);
echo $obj->name; //prints foo
echo $obj->interest[1]; //prints php

8. Parse XML Data

//xml string
$xml_string="<?xml version='1.0'?>
<users>
   <user id='398'>
      <name>Foo</name>
      <email>foo@bar.com</name>
   </user>
   <user id='867'>
      <name>Foobar</name>
      <email>foobar@foo.com</name>
   </user>
</users>";

//load the xml string using simplexml
$xml = simplexml_load_string($xml_string);

//loop through the each node of user
foreach ($xml->user as $user)
{
   //access attribute
   echo $user['id'], '  ';
   //subnodes are accessed by -> operator
   echo $user->name, '  ';
   echo $user->email, '<br />';
}

9. Create Post Slugs

Create user friendly post slugs from title string to use within URLs.

function create_slug($string){
	$slug=preg_replace('/[^A-Za-z0-9-]+/', '-', $string);
	return $slug;
}

10. Get Real IP Address of Client

This function will fetch the real IP address of the user even if he is behind a proxy server.

function getRealIpAddr()
{
	if (!empty($_SERVER['HTTP_CLIENT_IP']))
	{
		$ip=$_SERVER['HTTP_CLIENT_IP'];
	}
	elseif (!empty($_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;
}

11. Force file Download

Provide files to the user by forcing them to download.

/********************
*@file - path to file
*/
function force_download($file)
{
    if ((isset($file))&&(file_exists($file))) {
       header("Content-length: ".filesize($file));
       header('Content-Type: application/octet-stream');
       header('Content-Disposition: attachment; filename="' . $file . '"');
       readfile("$file");
    } else {
       echo "No file selected";
    }
}

12. Creating a Tag Cloud

function getCloud( $data = array(), $minFontSize = 12, $maxFontSize = 30 )
{
	$minimumCount = min($data);
	$maximumCount = max($data);
	$spread       = $maximumCount - $minimumCount;
	$cloudHTML    = '';
	$cloudTags    = array();

	$spread == 0 && $spread = 1;

	foreach( $data as $tag => $count )
	{
		$size = $minFontSize + ( $count - $minimumCount )
			* ( $maxFontSize - $minFontSize ) / $spread;
		$cloudTags[] = '<a style="font-size: ' . floor( $size ) . 'px'
		. '" class="tag_cloud" href="#" title="\'' . $tag  .
		'\' returned a count of ' . $count . '">'
		. htmlspecialchars( stripslashes( $tag ) ) . '</a>';
	}

	return join( "\n", $cloudTags ) . "\n";
}
/**************************
****   Sample usage    ***/
$arr = Array('Actionscript' => 35, 'Adobe' => 22, 'Array' => 44, 'Background' => 43,
	'Blur' => 18, 'Canvas' => 33, 'Class' => 15, 'Color Palette' => 11, 'Crop' => 42,
	'Delimiter' => 13, 'Depth' => 34, 'Design' => 8, 'Encode' => 12, 'Encryption' => 30,
	'Extract' => 28, 'Filters' => 42);
echo getCloud($arr, 12, 36);

13. Find Similarity Between Two Strings

PHP includes a function similar_text very rarely used but quite useful that compares two strings and returns the percentage of similarity between two.

similar_text($string1, $string2, $percent);
//$percent will have the percentage of similarity

14. Use Gravatars in Your Application

With ever increasing popularity of WordPress, Gravatars have become quite popular. It is very easy to integrate them into your application as they provide a very easy to use API.

/******************
*@email - Email address to show gravatar for
*@size - size of gravatar
*@default - URL of default gravatar to use
*@rating - rating of Gravatar(G, PG, R, X)
*/
function show_gravatar($email, $size, $default, $rating)
{
	echo '<img src="http://www.gravatar.com/avatar.php?gravatar_id='.md5($email).
		'&default='.$default.'&size='.$size.'&rating='.$rating.'" width="'.$size.'px"
		height="'.$size.'px" />';
}

15. Truncate Text at Word Break

This function will truncate strings only at word breaks which can be used to show a teaser for complete article without breaking words.

// Original PHP code by Chirp Internet: www.chirp.com.au
// Please acknowledge use of this code by including this header.
function myTruncate($string, $limit, $break=".", $pad="...") {
	// return with no change if string is shorter than $limit
	if(strlen($string) <= $limit)
		return $string; 

	// is $break present between $limit and the end of the string?
	if(false !== ($breakpoint = strpos($string, $break, $limit))) {
		if($breakpoint < strlen($string) - 1) {
			$string = substr($string, 0, $breakpoint) . $pad;
		}
	}
	return $string;
}
/***** Example ****/
$short_string=myTruncate($long_string, 100, ' ');

16. Zip Files on the Fly

/* creates a compressed zip file */
function create_zip($files = array(),$destination = '',$overwrite = false) {
	//if the zip file already exists and overwrite is false, return false
	if(file_exists($destination) && !$overwrite) { return false; }
	//vars
	$valid_files = array();
	//if files were passed in...
	if(is_array($files)) {
		//cycle through each file
		foreach($files as $file) {
			//make sure the file exists
			if(file_exists($file)) {
				$valid_files[] = $file;
			}
		}
	}
	//if we have good files...
	if(count($valid_files)) {
		//create the archive
		$zip = new ZipArchive();
		if($zip->open($destination,$overwrite ? ZIPARCHIVE::OVERWRITE : ZIPARCHIVE::CREATE) !== true) {
			return false;
		}
		//add the files
		foreach($valid_files as $file) {
			$zip->addFile($file,$file);
		}
		//debug
		//echo 'The zip archive contains ',$zip->numFiles,' files with a status of ',$zip->status;

		//close the zip -- done!
		$zip->close();

		//check to make sure the file exists
		return file_exists($destination);
	}
	else
	{
		return false;
	}
}
/***** Example Usage ***/
$files=array('file1.jpg', 'file2.jpg', 'file3.gif');
create_zip($files, 'myzipfile.zip', true);

Source: David Walsh

17. Unzip Zip File

/**********************
*@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';
}

18. Prepend http to a URL

Some times you need to accept some url as input but users seldom add http:// to it, this code will add http:// to the URL if it’s not there.

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

19. Convert URLs within String into hyperlinks

This function converts URLs and e-mail addresses within a string into clickable hyperlinks.

function makeClickableLinks($text) {
 $text = eregi_replace('(((f|ht){1}tp://)[-a-zA-Z0-9@:%_+.~#?&//=]+)',
 '<a href="\1">\1</a>', $text);
 $text = eregi_replace('([[:space:]()[{}])(www.[-a-zA-Z0-9@:%_+.~#?&//=]+)',
 '\1<a href="http://\2">\2</a>', $text);
 $text = eregi_replace('([_.0-9a-z-]+@([0-9a-z][0-9a-z-]+.)+[a-z]{2,3})',
 '<a href="mailto:\1">\1</a>', $text);

return $text;
}

20. Resize Images on the fly

Creating thumbnails of the images is required many a times, this code will be useful to know about the logic of thumbnail generation.

/**********************
*@filename - path to the image
*@tmpname - temporary path to thumbnail
*@xmax - max width
*@ymax - max height
*/
function resize_image($filename, $tmpname, $xmax, $ymax)
{
	$ext = explode(".", $filename);
	$ext = $ext[count($ext)-1];

	if($ext == "jpg" || $ext == "jpeg")
		$im = imagecreatefromjpeg($tmpname);
	elseif($ext == "png")
		$im = imagecreatefrompng($tmpname);
	elseif($ext == "gif")
		$im = imagecreatefromgif($tmpname);

	$x = imagesx($im);
	$y = imagesy($im);

	if($x <= $xmax && $y <= $ymax)
		return $im;

	if($x >= $y) {
		$newx = $xmax;
		$newy = $newx * $y / $x;
	}
	else {
		$newy = $ymax;
		$newx = $x / $y * $newy;
	}

	$im2 = imagecreatetruecolor($newx, $newy);
	imagecopyresized($im2, $im, 0, 0, 0, 0, floor($newx), floor($newy), $x, $y);
	return $im2;
}

21. Detect AJAX Request

Most of the JavaScript frameworks like jQuery, mootools send and additional HTTP_X_REQUESTED_WITH header when they make an AJAX request, so that you can detect AJAX request on server side.(source)

if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest'){
	//If AJAX Request Then
}else{
//something else
}

If you would like to recommend a snippet to include in this list to make this list a more useful resource, tell us about it in comments below.

Related Posts

1. 25 New & Useful PHP Techniques & Tutorials
2. AJAX User Poll Using jQuery and PHP
3. Integrate Customized reCaptcha in your PHP Application

1. Cross Browser CSS SlideShow

Amazing demonstration of how to create a cross browser image gallery  using just CSS.

2. CSS Based Image Maps

This tutorial demonstrates a crazy way to create an image map using just CSS.

3. No JavaScript LightBox Using CSS

Create a lighbox using just CSS with no JavaScript required.

4. Image Replacement for Buttons

Replace the submit buttons with images using CSS, degrades back to submit button if CSS is disabled.

5. Animated Navigation Menu using CSS

Amazing tutorial on how to create an animated navigation menu using just CSS.

6. Tree Like Navigation Using CSS

Create a tree like navigation from nested lists of links. Very useful for creating sitemaps.

7. CSS Gradient Text Effect

Create eye-catching titles with nice gradient effect using just CSS.

8. CSS Menu List Design

Very easy to understand tutorial on how to create a menu list using either CSS border-style or background-image property.

9. Creating Liquid Layouts With Negative Margins

Amazing way to create a liquid layout using negative margins

10. Making Your Footer Stay Put With CSS

This might occur to you some time when a content page has not enough content to fill the page, so footer also moves up due to this. This tutorial shows you how to deal with this and make footer stay at bottom even when content is not enough.

11. Simple, Scalable CSS Based BreadCrumbs

Create a nice scalable breadcrumb navigation

12. Snazzy Pullquotes for Your Blog

Make the blockquotes in your content or blog posts standout from rest of content. Very useful to highlight major points in long content pages.

13. CSS Stacked Bar Graphs

Display graphs on your website using just CSS without any JavaScript or other heavy plugins.

14. How To Create a Block Hover Effect For List of Links

15. Multi-Column Lists

This article shows all possible ways you can use to stack up an unordered list into multiple columns.

16. Date Display Technique with Sprites

If you have ever visited Learning jQuery then you might have noticed the awesome date display next to each blog post. This tutorial will show you how to achieve that using CSS Sprites.

17. Date Badges and Comment Bubbles for your Blog

Display date and comments on your blog posts in a nice way that takes less space.

18. How To Build a CSS Image Viewer The Clever Way

Create a nice image viewer using CSS that will work even if user has disabled flash and JavaScript in the browser.

19. Creating a CSS Image Preloader

Use the CSS background-image property to preload images without any javascript required.

20. Fade Out The Bottom of Pages

This tutorial shows you how to make page content fade away into the bottom of the page just like the fortuito.us blog.

21.  Creative and Cool Uses of the CSS Border Property

This article shows you how the CSS Border property can be used to achieve some cool effects. You’ll be surprised to know how cool the CSS Border property is.

Related Posts

1. 15 Ways to Improve CSS Techniques Using jQuery
2. 30+ Fresh & Amazing jQuery Plugins & Tutorials
3. 25 Amazing & Free Flash Based Image Galleries

Showing off the best content of your website or blog in a nice intuitive way will surely catch more eyeballs. Using an auto-playing content slider is the one of techniques to show your featured content. It saves you space and makes for a better user experience, and if you add a pinch of eye candy to it, then there’s no looking back.

There are a few tutorials on creating featured content sliders like the one from CSS-Tricks, but it uses jQuery Coda Slider plugin. Today I’m going to show you how to create a featured content slider for your website using the jQuery UI library.

Let’s start with it..

Add JavaScript Files

First of all, grab the jQuery and jQuery UI libraries, if you haven’t already and include them in your page header. For this tutorial, you’ll need jQuery UI version 1.5.3. I usually use Google AJAX libraries to load jQuery and jQuery UI files as it acts as a CDN for your JavaScript files.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js" ></script>

The Featured Content Structure

Now create a div with its contents as the tabs structured as a list and content corresponding to each tab within a separate div.

<div id="featured" >
	<ul class="ui-tabs-nav">
	    <li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href="#fragment-1"><img src="images/image1-small.jpg" alt="" /><span>15+ Excellent High Speed Photographs</span></a></li>
	    <li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><img src="images/image2-small.jpg" alt="" /><span>20 Beautiful Long Exposure Photographs</span></a></li>
	    <li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><img src="images/image3-small.jpg" alt="" /><span>35 Amazing Logo Designs</span></a></li>
	    <li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"><img src="images/image4-small.jpg" alt="" /><span>Create a Vintage Photograph in Photoshop</span></a></li>
	</ul>
	<!-- First Content -->
	<div id="fragment-1" class="ui-tabs-panel" style="">
		<img src="images/image1.jpg" alt="" />
		<div class="info" >
		<h2><a href="#" >15+ Excellent High Speed Photographs</a></h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum lacus. Pellentesque ut diam....<a href="#" >read more</a></p>
		</div>
	</div>
	<!-- Second Content -->
	<div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style="">
		<img src="images/image2.jpg" alt="" />
		<div class="info" >
		<h2><a href="#" >20 Beautiful Long Exposure Photographs</a></h2>
		<p>Vestibulum leo quam, accumsan nec porttitor a, euismod ac tortor. Sed ipsum lorem, sagittis non egestas id, suscipit....<a href="#" >read more</a></p>
		</div>
	</div>
    <!-- Third Content -->
    <div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style="">
		<img src="images/image3.jpg" alt="" />
		<div class="info" >
		<h2><a href="#" >35 Amazing Logo Designs</a></h2>
		<p>liquam erat volutpat. Proin id volutpat nisi. Nulla facilisi. Curabitur facilisis sollicitudin ornare....<a href="#" >read more</a></p>
	    </div>
	</div>
    <!-- Fourth Content -->
    <div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style="">
		<img src="images/image4.jpg" alt="" />
		<div class="info" >
		<h2><a href="#" >Create a Vintage Photograph in Photoshop</a></h2>
		<p>Quisque sed orci ut lacus viverra interdum ornare sed est. Donec porta, erat eu pretium luctus, leo augue sodales....<a href="#" >read more</a></p>
	    </div>
	</div>
</div>

The class names ui-tabs-selected and ui-tabs-hide should not be changed, you can change other class names to your own.

The CSS Styles

Now for the CSS part, I fixed the width and height of the outer container div with id #featured and added a right padding of 250px to make space for the absolutely positioned navigation tabs for our featured content slider. Also, i set its position attribute to relative so that i can absolutely position elements inside #featured div relative to it.

#featured{
	width:400px;
	padding-right:250px;
	position:relative;
	height:250px;
	background:#fff;
	border:5px solid #ccc;
}

The navigation tabs are absolutely positioned to the right with following styles:

#featured ul.ui-tabs-nav{
	position:absolute;
	top:0; left:400px;
	list-style:none;
	padding:0; margin:0;
	width:250px;
}
#featured ul.ui-tabs-nav li{
	padding:1px 0; padding-left:13px;
	font-size:12px;
	color:#666;
}
#featured ul.ui-tabs-nav li span{
	font-size:11px; font-family:Verdana;
	line-height:18px;
}

The content panels are given following styles so as to fit them inside featured div container. The ui-tabs-hide class is essential to working of this script as it decides which content panels are hidden and which is displayed.

#featured .ui-tabs-panel{
	width:400px; height:250px;
	background:#999; position:relative;
        overflow:hidden;
}
#featured .ui-tabs-hide{
	display:none;
}

And the selected tab is given a background image with a left arrow. Here are the styles for selected tab.

#featured li.ui-tabs-nav-item a{/*On Hover Style*/
	display:block;
	height:60px;
	color:#333;  background:#fff;
	line-height:20px;
	outline:none;
}
#featured li.ui-tabs-nav-item a:hover{
	background:#f2f2f2;
}
#featured li.ui-tabs-selected{ /*Selected tab style*/
	background:url('images/selected-item.gif') top left no-repeat;
}
#featured ul.ui-tabs-nav li.ui-tabs-selected a{
	background:#ccc;
}

Since i used small thumbnail images in the navigation tabs, i applied following styles to them.

#featured ul.ui-tabs-nav li img{
	float:left; margin:2px 5px;
	background:#fff;
	padding:2px;
	border:1px solid #eee;
}

Also, in the content panel which is displayed, it has one image of size 400px x 250px and some relavent title and description inside the div with class info. To display .info div over the image i absolutely positioned it over the image with a transparent background to add some eye-candy.

#featured .ui-tabs-panel .info{
	position:absolute;
	top:180px; left:0;
	height:70px; width: 400px;
	background: url('images/transparent-bg.png');
}
#featured .info h2{
	font-size:18px; font-family:Georgia, serif;
	color:#fff; padding:5px; margin:0;
	overflow:hidden;
}
#featured .info p{
	margin:0 5px;
	font-family:Verdana; font-size:11px;
	line-height:15px; color:#f0f0f0;
}
#featured .info a{
	text-decoration:none;
	color:#fff;
}
#featured .info a:hover{
	text-decoration:underline;
}

Note: All the required styles are within style.css file.

The JavaScript Code

Finally the JavaScript code, that’ll make our featured content slider work. I’m using rotating tabs feature of jQuery UI library that makes the content panels rotate automatically after given time interval.

	$(document).ready(function(){
		$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
	});

And there you are with a nice looking featured content slider.

View Working Demo or Download the source code and try it.

Update(Aug 20, 2008)

How To Use With Latest version of jQuery UI

If you are using the latest jQuery UI version aleady on your website, then do not use the earlier version I am using above, simply change the code as below(Thanks Deni Sri Supriyono for commenting about this):

Just change this line from the JavaScript code:

$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);

to:

$("#featured").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);

Pausing Slideshow on Hover

Here is a nice solution from Vernon(in comments below) for those who were looking to enable pause on hover for the current slide. Use this piece of JavaScript code instead of above.

$(document).ready(function(){
$("#featured").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
$("#featured").hover(
function() {
$("#featured").tabs("rotate",0,true);
},
function() {
$("#featured").tabs("rotate",5000,true);
}
);
});

Related Posts

1. Create Flipping Content Tabs Using jQuery
2. Creating Content Tabs with jQuery
3. Create a Dynamic Scrolling Content Box Using AJAX

But WordPress has inbuilt functionality of generating thumbnails of the images you add to your post. This functionality is enabled by default unless you have explicitly set it from Media Settings in WordPress Settings panel.

Today, I’m going to show you how to use thumbnails generated by WordPress in your theme without requiring any third party script, plugin or custom field.

1. First of all set the thumbnail size to what you want in the Media Settings of WordPress.

2. Now open up index.php of your WordPress theme and inside the WordPress loop, add the following lines of code to get the path of thumbnail image of the first image in the post.

<?php
//Get images attached to the post
$args = array(
	'post_type' => 'attachment',
	'post_mime_type' => 'image',
	'numberposts' => -1,
        'order' => 'ASC',
	'post_status' => null,
	'post_parent' => $post->ID
);
$attachments = get_posts($args);
if ($attachments) {
	foreach ($attachments as $attachment) {
		$img = wp_get_attachment_thumb_url( $attachment->ID );
                break;
        }
//Display image
}
?>

Code Explanation: Firstly we fetch the images attached to the post in the order they were added to the post. And if images are there we fetch the path to the thumbnail image of the first image in the post using wp_get_attachment_thumb_url function.

Now you have path of the image in $img which you can use to display the post thumbnail using img tag.

If you have visited the homepage of Web Developer Plus, I am using this technique to display post thumbnails with post excerpts.

Related Posts

1. 23+ Excellent Tutorials For WordPress Theme Developers
2. Free WordPress Theme For Personal Blogs – YouAre
3. 12 Lesser Known But Useful WordPress Hacks