Meta tags are capable of telling search engines and other interested parties key information about the contents of the page, the meta tag is arguably as important as the page’s actual title–yet it leaves greater room for taking advantage of keyword use and relaxing the rules of style.

Of the many attributes that can be defined using a meta tag, the description tag is likely to be the most meaningful for modern sites. As some search engines do not include support for a keywords tag (really only Yahoo uses this), creating a solid description that manages to work in keywords without over-stuffing can yield SEO-friendly results. (Though, limiting your keywords to two or three per page will help get you higher search engine rankings and more targeted traffic.) The language and robots tags are also likely to be used on a number of pages, though the majority of sites utilize English and specifically allow bots to scan and index at liberty. To achieve picture-perfect meta tags of these types, a simple copy and paste job is often sufficient.

It’s not a good idea to place long content inside HTML meta tags–5 to 10 words should be enough–and you shouldn’t use words you haven’t mentioned on the page as well. Most search engines have require a maximum of:

• 60 characters for the title.
• 160 characters for the description.

No matter which meta tag you’re defining, though, you’ll need to ensure that your syntax is in working order. Always close your tags and observe proper attribute spelling and usage:

<META name="description" content="Because when you use clean syntax and keep an eye out for errors, your work will benefit." />

Though meta tags are sometimes shrouded in an air of mystery by webmasters who insist that only their formula will work, paying attention to form and using keywords intelligently will go a long way towards making any page great.

Related posts:

1. Quick Tip: Highlight Author Comments in WordPress – The Right Way
2. Make a most beautiful tags cloud on over the world with Facelift and jQuery
3. HTML vs. XHTML – How to Convert HTML to XHTML

First, we should take a look at the code from the tutorials which highlight the comment based on the user ID:

.authcomment {
    background-color: #B3FFCC !important;
}

<li class=”<?php 

                if (1 == $comment->user_id)
                    $oddcomment = “authcomment”;
                echo $oddcomment;?>” id=”comment…">
                
                ...
                
</li>

To make it work on sites with multiple writers, we need to to get the ID of the author, then check if the ID of the person posting this comment is the same. If it is, we need to make it stand out. We still use the CSS class for post author comment.

.authcomment {
    background-color: #B3FFCC !important;
}

Now, we change the original code at the start of the article with this:

<li class="comment-container
    
    <?php
        $authID=get_the_author_meta('ID');
                                    
        if($authID == $comment->user_id)
            $oddcomment = 'authcomment';
        echo $oddcomment;
    ?>"  id="comment-<?php comment_ID(); ?>">
                                    
        ...
        
</li>

And, that’s it! We hope that you find it useful!

Related posts:

1. Quick Tip: How to Get Great HTML Meta Tags
2. 10 Useful Code Snippets And Plugins To Spice Up Wordpress Avatar
3. Wordpress Hack: Anything Can Be Added Anywhere In The Post Content

However, with the arrival of JavaScript in 1997, there has been a war between Flash and JavaScript because Flash was afraid JavaScript would one day replace them with all the animation it supports. Why? Because a ton of JavaScript frameworks are becoming increasingly popular as a result of their high scalability, performance and usability. Some include jQuery, MooTools, script.aculo.us, Prototype, among others but especially jQuery, as of late.

jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and AJAX interactions for rapid web development. Although you may have enough Javascript skills to build your own Javascript code, using jQuery instead of can simplify the process (think hundreds of lines vs. a few lines of jQuery). Furthermore, there are thousands of plugins for jQuery published and large community support for this project. jQuery deserves being the heaviest competitor with Flash.

Why should we use jQuery instead of Flash

There are a bulk of differences regarding the benefits and disadvantages between these two guys, but in this article, we just list some their most important features.

First, in order to build an application using jQuery, you don’t have to purchase anything, but with Flash you have to buy Flash software to do the encoding. And Flash software could cost you $699 and no less than $199 to upgrade from older versions. jQuery and most other JavaScript frameworks cost you nothing to use (some jQuery plugins are not free for commercial usage). At this point, jQuery wins!

The second and the most problem with Flash is it isn’t available on the iPhone, and many other mobile devices. According to Adobe, 98 percent of desktop computers and laptops currently support Flash, but the truth is it’s not compatible with all browsers including those on the iPhone, iPad and cell phones. Unlike Flash, jQuery supports screen reader accessibility. By using accDND (a jQuery plugin), we can enable keyboard and screen reader which is an accessible drag & drop functionality plugin for jQuery. jQuery wins again!.

In the next comparison, we’ll consider using jQuery instead of Flash in its customization. jQuery and other JavaScript frameworks are built for easy development and customization.

Although jQuery wins Flash in some angles of problem, it cannot fully replace Flash in use. Where Flash fully supports 3D capabilities and many extensive features for object animation, jQuery is limited. Furthermore, jQuery UI is nothing compared with Flash’s built-in UI – That’s one reason for Flash’s price tag. Besides this, we get problems with proper font display. We can use any fonts on the web with Flash, but we cannot do the same with JavaScript, although we have a ton of tools and services available to help us to embed fonts in HTML page.

One other area to look at is video. This is where HTML5 comes into the picture — which is a completely different post in and of itself.

In most cases, though, jQuery can do better than Flash. From here, we’ll round up some tutorials and jQuery plugins that are simply awesome. Each of these teaches how to get a desired "Flash" effect, but with jQuery instead.

Tutorials

Building an interactive map with jQuery instead of Flash

This tutorial helps you build an interactive map with jQuery instead of Flash. It helps you build the markup for the maps and a couple of jQuery functions to make it all work. It’ll be an interactive map that shows some information and the location of the various Marine Science outposts across the state. Information of the the locations are represented by dots, and clicking them, will display an info box.

Animated Sharing Bar With jQuery & CSS

Using pure jQuery, we can make an animated sharing bar which will enable your website visitors to share posts on a number of social networks. It runs smoothly on all browser versions.

The youlove.us scrolling background effect explained

If you have checked out the design of YouLove.us, you would be excited with its colorful animated background. Here they explained how they created their beautiful animated background. The technique is very simple. It will scroll only the body background while every element above it is transparent.

Crafting an Animated Postcard With jQuery

Learn the basics of setting up a continuous animation with an illustrated postcard which Flash usually does. This tutorial is a good one for you to learn how to work with animation loop in jQuery and the easing plugin.

Building an Animated Cartoon Robot with jQuery

A tutorial on CSS-tricks to create an incredible animated cartoon robot. It was created by layering several empty divs over each other with transparent PNGs as background images. This effect simulates a faux 3D animated background dubbed the “parallax effect” originating from old-school side scrolling video games. This is one of the best examples of where jQuery is replacing Flash.

Cloud of Bacon

In this tutorial, you will be inspired with the camera effect. The tutorial runs multiple animations (of arbitrary duration) at the same time, queues animations and even animates complex properties like colors or clipping rectangles.

A Colorful Clock With CSS & jQuery

Here’s a colorful clock created with jQuery and CSS only. This is really an interesting post to check out. It’s not a tutorial about the jQuery animate() function, but the jQuery helps CSS animation property works correctly. I highly recommend checking out all of the Tutorialzine Tutorials for jQuery inspiration.

jQuery OS X Stack and Drop Stack

A sexy menu created using jQuery and CSS with OS X style docks and stacks navigation. It’s super lightweight (~1kb) and is a really creative “outside the box” method of navigation for a website. It might be a little awkward having the navigation in the bottom right or left of the browser window but it would certainly be creative and saves lots of space.

Old School Clock with CSS3 and jQuery

Transform:rotate is a new feature of CSS3 which lets you rotate HTML elements. This tutorial will help you create an awesome “tick tock” clock that animates very smoothly. The jQuery code in this tutorial helps the clock get correct time information then inject all the CSS3 style for each element.

Making a 3D Engine in jQuery

Here they create a 3D engine that will allow us to create shapes simply by creating an array of points. This engine will have a Camera, a Scene and an Object. Perfect 3D cube in jQuery!

Puffing Smoke Effect in jQuery

An excellent tutorial features an impressive animation effect of cartoon-ish smoke which animates from factory smoke stacks. This tutorial provides a configurable jQuery plugin with instructions based on blog’s header of the author, so that you may create a similar animation effect for your website.

Plugins

jParallax

jParallax is a jQuery plugin that allows animation of simple parallax animations by animating the background-position of <div> elements.

jFlip

Create page flip using jQuery plugin instead of Flash. This plugins is useful for us to create the page flip effect that can be used in flipping page of a book. It could be a great idea for a comic book web site.

The Sexy Curls jQuery Plugin!

Another great jQuery plugin which lets you share in the beauty of the page fold. Remember in the past, we always use Flash to create this effect for ad slot. Today, forget Flash and try it with jQuery. Everything is the same except you’re not relying on Flash, guys!

Easy Slider 1.7 – Numeric Navigation jQuery Slider

This is really a nightmare with Flash because jQuery does it perfectly and even better than Flash does. There are a bulk of jQuery Slider Plugins out there, but Easy Slider is arguably the best one with a lot of features and options.

AnythingSlider jQuery Plugin

This is another awesome jQuery slider that comes with cool features. AnythingSlider is a plugin that was built to make implementing it and customizing it much easier than other plugins.

reel

Reel is a jQuery plugin which takes an image tag and makes it a live “projection” of pre-built animation frames sequence. Its aim is to provide a 360° view of something or someplace. It’s a great alternative to widely used Flash techniques.

Flot

Flot is a pure JavaScript plotting library for jQuery. It produces graphical plots of arbitrary datasets on-the-fly client-side. Like Flash, this plugin provides smooth and attractive graph for simple uses with nice features, zooming and mouse tracking.

jCrop

jCrop is a powerful image cropping engine for jQuery. It combines the ease-of-use of a typical jQuery plugin with a powerful cross-platform DHTML cropping engine that is faithful to familiar desktop graphics applications.

In conclusion

Although jQuery is a powerful JavaScript framework that can build many flash-like effects, it cannot fully replace Flash. However, jQuery is the stepping stone, helping bring the web closer to HTML5 and wider use of frameworks like Cappuccino (among others) for building non-reliant web applications.

If we are missing anything here, feel free to drop your line to make a friendly conversation. Any comment or suggestion is appreciated! What do you think? Will Flash last past this next decade?

Related posts:

1. 5 Fresh and Useful jQuery Plugins Were Born in November 2009
2. Don’t Miss Out Latest 10 jQuery Plugins Before Closing The Year 2009
3. Why Do We Love These 5 Fresh and Awesome jQuery Plugins?

There are many posts available detailing how to write your own jQuery plugin. It won’t take long before you realize that building in jQuery is very simple. Continuing in our jQuery Learning Series, here we’re going to build your first jQuery plugin. It’ll generate a bubble effect for your menu list and we’re going to call it BubbleUP.

What is BubbleUP? BubbleUP is a fun and easy plugin to get you started in jQuery. The effect is a nice starting point for learning the basics and many of the steps involved in creating other more intricate plugins you will make in the future. With this plugin, images in a list will enlarge with a smooth animation when you move your mouse over it. Then, if you move the mouse out, it will reset to the original size with the same smooth animation.

Implement jQuery

This is a plugin for jQuery, so we first have to implement the jQuery library in our webpage header (you must upload jQuery to your server or link to Google’s hosted version):

<script type="text/javascript" src="js/jquery-1.3.2.js"></script>

1. Choose a name

We will name this plugin as BubbleUP, but feel free to choose another name that suits you better.

In building a jQuery plugin, it’s recommended you write all the plugin code in one javascript file. Your jQuery plugin’s file should be named as: [Your-jQuey-Plugin-Name].jQuery.js, but if it’s too complicated for you, just name it as: bubbleup.js.

Now, we’ll start with a blank javascript file and begin with the following lines (the template for any jQuery plugin):

(function($){
    $.fn.BubbleUP = function() {

        return this.each(function() {

        });

    };
})(jQuery);

We named the plugin above “BubbleUP“, so we are going to define the name of this plugin by using this code:

...

    $.fn.BubbleUP = function() {

...

Because we have more than one item in our list, we have to use the each() function to execute the called function for every item in our list.

The first step is finished: creating the jQuery plugin template and naming it.

2. Implement jQuery Plugin to web page

Now you need to link the javascript file that you created above into your web page. For this, we’ll use this code:

<script type="text/javascript" src="js/bubbleup.jquery.js"></script>

To make the plugin work, we need to use this code below. You can insert it anywhere you want as long as it’s inside the <head> or <body> tags:

<script type="text/javascript">

$(function(){

    $("ul#menu li img").bubbleup();

});

</script>

As you can see in the demo, we are going to enlarge the image in the list. That’s why we use images in this menu as target elements.

3. Animate

Let’s write the skeleton of the code. We’re going to use the mouseover(), mouseout(), animate(), and stop() functions.

(function($){
    $.fn.bubbleup = function() {

        return this.each(function() {

            $(this).mouseover(

                function () {

                    $(this).stop();
                    $(this).animate({

                        ...

                    });
                }

            ).mouseout(

                function () {
                    $(this).stop();
                    $(this).animate({

                        ...

                    });
                }

            );

        });

    };
})(jQuery);

This code basically says this: “Upon mouseover or mouseout, stop any animations that are currently active in this element, and start a new animation (which we’re going to define later)”. We need to immediately stop active animations first to prevent undesirable behavior. This function stop() will stop the animation before it starts the new animation. The function we are using to generate the smooth bubble effect is animate().

4. Build the menu

We need to build the menu using HTML. The menu is an unordered list, so it should be something like below. Notice this list has been simplified for this tutorial.

<ul id="menu">
  <li>
    <a href="#" title="Full RSS Feed">
        <img src="images/rss.png" alt="Full RSS Feed">
    </a>
  </li>
  <li>
    <a href="#" title="E-Mail Delivery">
        <img src="images/email.png" alt="E-Mail Delivery">
    </a>
  </li>
  <li>
    <a href="#" title="Follow me on Twitter">
        <img src="images/twitter.png" alt="Follow me on Twitter">
    </a>
  </li>
  <li>
    <a href="#" title="I'm on FaceBook">
        <img src="images/facebook.png" alt="I'm on FaceBook">
    </a>
  </li>
  <li>
    <a href="#" title="E-Mail Delivery">
        <img src="delicious.png" alt="Save it!">
    </a>
  </li>
  <li>
    <a href="#" title="E-Mail Delivery">
        <img src="images/technorati.png" alt="Favorite this blog">
    </a>
  </li>
</ul>

This HTML code is very simple. You need to create just one image for each item and the jQuery plugin will do the rest. The next step is the CSS.

5. Style the menu (CSS)

The following CSS is used to style the menu. There are two important things that you should notice: position for <li> elements must be set to relative because img elements inside it must be set as absolute. Absolute positioning for an element will not work if the parent is not set as absolute or relative.

The original size of the images is 48px in this tutorial, and the size when enlarged is 96px. That means the images will start animation at 48px and enlarge to 96px. Some margins and padding is in this css code below just make the list display better.

ul#menu {
    margin: 5px 0px;
}

ul#menu li {
    padding: 0px;
    display: inline-block;
    *display: inline; /* IE 7 and below */
    position: relative;
    margin-left: 5px;
    margin-right: 5px;
    width: 48px;
    height: 48px;
}

ul#menu li img {
    width: 48px;
    position: absolute;
    top: 0px;
    left: 0px;
    padding: 0px;
    margin: 0 8px 0 0;
    border: none;
}

6. Create the animations

This is the main part of this plugin. We will pass some parameters to the animate function.

First, I strongly recommended you re-read one of our previous articles,Bubble Effect with CSS. When you return to this post, you will understand why we need to enlarge the image and move it up and left the way we are.

As you can see, we need to re-size the images in menu to make it larger. The original size is 48px; the animate function will re-size it to 96px. Take a look in detail at the javascript code below:

(function($){
    $.fn.bubbleup = function() {

        return this.each(function() {

            $(this).mouseover(

                function () {

                    $(this).stop();
                    $(this).animate({
                        left: "-=24",
                        top: "-=24",
                        width: 96
                    }, 'fast');
                }

            ).mouseout(

                ...

            );

        });

    };
})(jQuery);

We will place this image by using negative pixel amounts. The code above will listen for a mousehover() event. When the mouse is over the item, the item will be moved diagonally towards to the top left corner by 24 pixels and then also enlarged to 96px.

However, we have a few issues right here. The problem is the action for this image will cover the image next in the list. Thus, we need to set z-index for it by using css. We also need to reset the placements of all the images before and after the animation, because if the animation is not completed and we move the mouse out and over again immediately, the image will be moved once again diagonally towards the top left corner. We must understand that the amount of pixel this image animates base on the current position + (-24px)

The complete javascript code that helps the animation to work correctly:

(function($){
    $.fn.bubbleup = function() {

        return this.each(function() {

            $(this).mouseover(

                function () {

                    $(this).stop();
                    $(this).css({'z-index' : 100, 'top' : 0, 'left' : 0, 'width' : 48}).animate({
                        left: "-=24",
                        top: "-=24",
                        width: 96
                    }, 'fast');
                }

            ).mouseout(

                ...

            );

        });

    };
})(jQuery);

We do something similar with the mouseout() event, but it has a few differences. Of course, the images must be placed back to the original position and re-sized back to the initial size. However, we need to call a new function when the animation is completed. The callback function is used to reset the z-index to the original.

(function($){
    $.fn.bubbleup = function() {

        return this.each(function() {

            $(this).mouseover(

                ...

            ).mouseout(

                function () {
                    $(this).stop();
                    $(this).animate({
                        left: 0,
                        top: 0,
                        width: 48
                    }, 'fast', function() {
                            $(this).css({'z-index' : 0});
                        }
                    );
                }

            );

        });

    };
})(jQuery);

7. Add option(s)

I know there some great tutorials out there help you make a jQuery Plugin with options supported, but this one is different. The difference is not the content, because there are many ways to add options to it, it’s just a change of the code format. The difference here is in the value of this plugin – it is not just a tutorial, but is actually useful.

In this part, I will help you add options for your menu BubbleUp. So, stop right here and think about the options we might require. How about the tooltip? We can add the tooltip for this over the top of each item when the mouse is hovering over it. Let’s begin!

First, write a draft for it, as a template. jQuery plugins should have default options and users will decide to use these options or not. Change the code to this template:

(function($){
    $.fn.bubbleup = function(options) {

        //Extend the default options of plugin
        var opts = $.extend({}, $.fn.bubbleup.defaults, options);

        //Initial the tooltip
        var tip = null;

        return this.each(function() {   

            //Set the option value passed here
            var $tooltip = opts.tooltip; 

            $(this).mouseover(

                function () {

                    if($tooltip) {

                        //Display the tooltip
                        
                    }               

                    $(this).stop();
                    $(this).css({
                        'z-index' : 100,
                        'top' : 0,
                        'left' : 0,
                        'width' : 48
                    }).animate({
                        left: "-=24",
                        top: "-=24",
                        width: 96
                    }, 'fast');

                }

            ).mouseout(

                function () {

                    if($tooltip) {

                        //Hide the tooltip
                        
                    }           

                    $(this).stop();
                    $(this).animate({
                        left: 0,
                        top: 0,
                        width: 48
                    }, 'fast', function() {
                            $(this).css({'z-index' : 0});
                        }
                    );
                }

            );

        });

    };

    //All default options go here
    //Must called
    $.fn.bubbleup.defaults = {
        tooltip: false
    }

})(jQuery);

When you mouse-over

This tooltip will display in the same way as other plugins. When you mouse-over, the tooltip will show up and when the mouse is moved away, the tooltip will be invisible.

Add this code to the mouseover() code block and inside the tooltip is this enabled condition:

if($tooltip) {

    tip = $('<div>' + $(this).attr('alt') + '</div>');

    tip.css({
        color: '#333333',
        fontSize: 12,
        fontWeight: 'bold',
        position: 'absolute',
        zIndex: 100000
    });

    tip.remove().css({
        top: 0, left: 0,
        visibility: 'hidden',
        display: 'block'
    }).appendTo(document.body);

  ...

}

We will not use any external CSS, but instead style the tooltip with JavaScript. This code will create a new tooltip which uses the value of the image’s alt attribute. We put it in the div tag to display, then put the tip at the end of the HTML document.

Next, we will display the tip:

if($tooltip) {

  ...

    //Get the width and height of current image item
    var position = $.extend({}, $(this).offset(), {
        width: this.offsetWidth,
        height: this.offsetHeight
    });

    //Get the width and height of the tip element                   
    var tipWidth = tip[0].offsetWidth,
        tipHeight = tip[0].offsetHeight;

    //Set position for the tip to display correctly
    //Postion: top and center of image        
    tip.stop().css({
        top: position.top - tipHeight,
        left: position.left + position.width / 2 - tipWidth / 2,
        visibility: 'visible'
    });

}

However, our image will scale from small size to big size when we mouse-over. If the tip won’t move together with the image, then one of them will be covered by the other. The one that would be covered is the one that has the lower value of z-index.

That’s why we need to animate the tip:

if($tooltip) {

  ...

   tip.animate({
       top: "-=24",
   }, 'fast');

}

When the mouse is away

When the mouse is away, the code is very simple. We just need make the tip visible. However, we should remove it then create and create another one when the mouse is over it again. That’s better than just setting it to be invisible.

if($tooltip) {
    tip.remove();
}

You’re done!

That’s all you need to make a jQuery plugin!

Please understand that this is just a basic version of BubbleUP and it still has some issues. If we are going to create a complete jQuery plugin, we should do more. Creating a jQuery plugin by yourself is very easy if you know the basics of jQuery, and it is easier if you are creating a practical plugin, like BubbleUP, to understand the steps.

Are you going to use it on your site? It is quite a smooth and simple menu, isn’t it? Tell us how you’re using it on your website in the comments and don’t forget to subscribe to the feed!

Related posts:

1. Learning jQuery: Horizontal Panel Sliding With animate() function
2. Who-Tweet Button: Fancy jQuery Plugin for Twitter
3. Why Do We Love These 5 Fresh and Awesome jQuery Plugins?

Pure Javascript solutions usually incorporate the JSON format [The Fat-Free Alternative to XML] since it is lightweight, very easy to traverse. However, since Google Buzz was launched last Tuesday they still haven’t offered a JSON format of the Buzz feed yet.

Google Buzz API provides your buzz stream in Atom format. But, under the "same origin policy" you can’t pull data (like Atom) from another domain without using JSONP [a complement to the base JSON data format]. So, that’s when another Google service comes to the rescue: Google AJAX Feed API, a proxy that downloads your Atom/RSS feed and converts it into JSON format.

View DEMO

Now let’s go through the implementation steps:

1. CSS First

Buzzes will be added as unordered list. So, these are few CSS lines to clear margin and padding on the unordered list element and style buzz items to looks like rows.

/* ul list */
ul.gb{
   padding:0;
   margin:0;
}

ul.gb li{
   border-bottom:silver 1px solid;
   float:left;
   margin:1px 0 1px 0;
   padding:2px;
   list-style-type:none;
   height:48px;
   overflow:hidden;
   width:100%;
}
/* Buzz date */
ul.gb span.gb-meta {
   display:block;
   margin:3px 0 0 0;
}
ul.gb span.gb-meta a{
   font-size:95%;
   color:green;
   text-decoration:none;
}

2. Include jQuery

We’ll include jQuery library from Google’s high speed content distribution network.

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

3. Call When Ready

Then call the jQuery function when "document ready", to start executing the function when the DOM is fully loaded. This will ensure that Javascript will find the referenced HTML elements.

$(document).ready(function(){
   getGoogleBuzz('mikedotmore', 5, $('#my-buzz'));
});

The function takes 3 parameters: Google username, Number of entries to return, and jQuery Object of the placeholder.

4. The Function’s Process…

1. The function code starts by specifying few parameters for the Google Feed API as such: getGoogleBuzz( ‘Buzz feed username‘ , number of entries , $(‘#id of placeholder‘) );
2. Call jQuery AJAX function and define a function to be called when the JSON data is returned.
3. Show error message if Google Feed API couldn’t retrieve the Buzz stream.
4. Append a hidden unordered-list to the placeholder.
5. Loop each Buzz entry of the entries array, and…
   • Parse publishedDate into a Date object.
   • Convert links that start with "http" or "https" into hyperlinks.
   • Append List item element with Buzz content.

function getGoogleBuzz(username,n, div){
   // params for Google Feed API proxy : Buzz Feed URL, Number of Entries 
   var data = {q:'http://buzz.googleapis.com/feeds/'+username+'/public/posted' 
            ,num:n
            ,output:'json'
            ,v:'1.0'};
   // call Google Feed API
   $.ajax({
      url:'http://ajax.googleapis.com/ajax/services/feed/load'
      ,data:data
      ,dataType:'jsonp'
      ,success:function(json){
         // json from Google Feed API was returned successfully..

         // error with Google Buzz feed ?
         if(json.responseStatus!=200) {
            div.html('<b style="color:red">'+ json.responseDetails +'</b>');
            return; 
         };
         // Buzz entries array
         var entries= json.responseData.feed.entries;
         var length= entries.length;
         // no entries!
         if(length==0) return; 

         // start output by appendding a hidden unordered list
         var ul = $('<ul class="gb" style="display:none"></ul>').appendTo(div.html(''));

         // loop buzz entries
         for(var i=0; i<length; i++){
            // parse published-date string
            var pDate = new Date(entries[i].publishedDate);
            // using entry snippet version
            var snippet = entries[i].contentSnippet;
            // convert links that start with http to hyperlinks using regular expression
            snippet = snippet.replace(/\b(https?\:\/\/\S+)/gi,' <a href="$1">$1</a>');
            // append buzz to UL
            ul.append('<li>'
               +'<span class="gb-content">'+ snippet +'</span>'
               +'<span class="gb-meta">'
                  + '<a href="'+ entries[i].link +'">'+ pDate.toLocaleString() +'</a>'
               +'</span>'
            +'</li>');
         };

         // now show-in the unordered list
         ul.show('slow');
      }
   });
}

5. Add a Placeholder

This is the div element that will hold your buzzes with id set to "my-buzz"

<div id="my-buzz">loading...</div>

View DEMO

Be alert though! Google Buzz is still brand new, and the rules of the game may be changed later. So, stay tuned…

Related posts:

1. 12 Undocumented Tricks for Google Buzz
2. More Google Buzz Tips, Resources, Extensions, and Icons to Keep You Buzzed.
3. Learning jQuery: Submit form PHP Mac style Modal window

What's text-indent?

Text-indent specifies the horizontal indent from the left side of the parent block element for the first line in the block. The indent is only applied at the beginning of the block but not after any intervening line-breaking elements. Keep in mind that this property allows negative values, and if used this way, the first line will be indented to the left.

The text-indent property is supported in all major browsers. However, Internet Explorer fails to support the inherit value for the text-indent (Yes, even IE8).

Hiding text using text-indent

Let's say you have a logo and you want to display it in a link, so people can click on it. Only including the image of the logo has some drawbacks as far as SEO is concerned. Here's a solution to handle this:

<style type="text/css"> 

h1 a {
    text-decoration: none;
    position: absolute; /* Depending on your placement */
    width: 260px;
    height: 100px;
    bottom: 0px; /* Depending on your placement */
    background: url(images/aext-logo.png) no-repeat left top;
    text-indent: -99999px;
}

</style>

<h1><a href="http://aext.net">AEXT.NET</a></h1>

With this, search engines will still recognize the text, but users will only see the logo because the text is indented to the left (99999px). See:

This is not a new CSS technique and probably one of the most widely used techniques today. The way it works is very simple: the text in any block (not just links; such block-level elements, table cells, and inline blocks) will be pushed so far to the left (off screen) that its background image will remain the only thing the user see. The value of the text-indent property tells the browser at what point, relatively, the text should start.

An awesome trick using text-indent & forms

People mostly use text-indent to hide text like our example above. They often use the negative value for text-indent but forget to make use of its original intent: inset indentation. Here I'll show you how to make a beautiful text field using text-indent.

Let's use a simple search form as an example:

<form action="http://aext.net" id="search" method="get">
    <fieldset> 
        <input type="text" id="searchtxt" name="s" value=""> 
    </fieldset>
</form>

Before the CSS, your text field looks something like this:

First, let's style it up and make it look a bit better with this CSS:

<style type="text/css">

fieldset {
    border: none;
}

label
{
    font-family: Helvetica,arial,sans-serif;
    font-size: 15px;
    font-weight: bold;
    color: #9F0000;
}

input[type="text"]
{
    border:1px solid #CCCCCC;
    color:#516064;
    font-family: Helvetica,arial,sans-serif;
    font-size:16px;
    margin-bottom:20px;
    padding:8px;
    width:400px;
}
</style>

<form action="http://aext.net" id="search" method="get">
    <fieldset> 
        <label for="searchtxt">Search: </label>
        <input type="text" id="searchtxt" name="s" value=""/> 
    </fieldset>
</form>

The result?

The label is now above the input field but it'd look amazing if we wrapped it with the input element and made the entered text follow after the label. We'd usually do it with the padding value, but today we'll do it with text-indent.

Alright, now for the trick! Here it is:

<style type="text/css">

fieldset {
    border: none;
    
    /* trick */
    position: relative;
}

label
{
    font-family: Helvetica,arial,sans-serif;
    font-size: 15px;
    font-weight: bold;
    color: #9F0000;
    
    /* trick */
    left:10px;
    top:9px;
    position:absolute;
}

input[type="text"]
{
    border:1px solid #CCCCCC;
    display: block;
    color:#516064;
    font-family: Helvetica,arial,sans-serif;
    font-size:16px;
    margin-bottom:20px;
    padding:8px;
    width:400px;
    
    /* trick */
    text-indent:75px;
}
</style>

<form action="http://aext.net" id="search" method="get">
    <fieldset> 
        <label for="searchtxt">Search: </label>
        <!-- Remember to set mexlength for the input -->
        <input type="text" id="searchtxt" name="s" value="" 
                                          maxlength="35" /> 
    </fieldset>
</form>

What you get after the trick:

Although it looks great & works perfectly, you need to set the maxlength value for the input element to avoid text moving to left and getting in the way of the label. Here's a sample of how you could use this technique in the "real world":

Updated: It will display incorrectly in IE6 & IE7 because the css in this tutorial conflicts with the css in this WordPress theme. It works well in its own page. There is a bug in IE with the input element by using text-indent that I forgot. That's "Peekaboo Bug". It will make the text inside the text input display weird by floating to the left, but when refreshed, the bug is gone. Alright, edit something in your css text field:

<style type="text/css">

input[type="text"]
{   
    display:block; 
    line-height: 100%;
}

</style>

So, what do you think? If you find any issues in this tutorial, please drop a line in comment section! Hope you like it and be sure to spread the love by sharing this article with the buttons below. Thanks!

Related posts:

1. Improve your css skill, right now!
2. WordPress Theme from Scratch – Day 2: PSD to HTML
3. CSS Absolute Positioning: Create A Fancy Link Block

1. Replacement using str_replace() function

function googleadsense($content){
  
  $adsensecode = 'GOOGLE ADSENSE GOES HERE';
  
  $pattern = '<!-googlead->';
  
  $content = str_replace($pattern, $adsensecode, $content);
  
  return $content;      
}

add_filter('the_content', 'googleadsense');

2. Using Shortcode API

function googlead_shortcode() {

  $adsensecode = 'GOOGLE ADSENSE SHORCODE GOES HERE';
  
  return $adsensecode;
}

add_shortcode('googlead', 'googlead_shortcode');

Related posts:

1. Wordpress Hack: Anything Can Be Added Anywhere In The Post Content
2. 10 Useful Code Snippets And Plugins To Spice Up Wordpress Avatar
3. The Right Way To Build WordPress As A Community News

Prepare files for theme

--FrozenFlirt
-----header.php
-----index.php (Homepage display)
-----single.php (Post display)
-----archive.php (Archive display for categories, tags, date, authors...)
-----comments.php (Comment temple include form, post comments)
-----sidebar.php
-----functions.php (All of your template functions will go here)
-----footer.php
-----style.css
-----image
-----js

Split HTML layout

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>FrozenFlirt Wordpress Theme From Scratch</title>
    <link href="reset.css" rel="stylesheet" type="text/css" />
    <link href="style.css" rel="stylesheet" type="text/css" />
    <link href="pagenavi-css.css" rel="stylesheet" type="text/css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
    <script src="script.js" type="text/javascript"></script>
    <script type="text/javascript">

        $(document).ready(function() {

            var id = '35591378@N03';
            flickr(id);

            });

    </script>
    

</head>

<body>

    <div id="main-wrapper">
 
        <div class="container">
   
            <div id="header">
            
                <ul id="topmenu">
                    <li>
                        <a href="#" title="Home Page"><span>Home</span></a>
                    </li>
                    <li>
                        <a href="#" title="Tutorial Category"><span>Tutorial</span></a>
                    </li>
                    <li>
                        <a href="#" title="Freebie Category"><span>Freebie</span></a>
                    </li>
                    <li>
                        <a href="#" title="Inspiration Category"><span>Inspiration</span></a>
                    </li>
                    <li>
                        <a href="#" title="Resources Category"><span>Resources</span></a>
                    </li>
                </ul>
                
                <div id="topsearch">
                    <form action="http://aext.net/" id="searchform" method="get">
                        <fieldset>
                            <input type="text" 
                                   onblur="if (this.value == '') {this.value = 'Type Keywords And Hit Enter...';}" 
                                   onfocus="if(this.value == 'Type Keywords And Hit Enter...') {this.value = '';}" 
                                   value="Type Keywords And Hit Enter..."
                                   class="searchfield" id="searchbox" name="s"/>
                        </fieldset>
                    </form>
                </div>
                
                <div class="clear"></div>
                
                <div id="logo">
                    <a href="#" title="FrozenFlirt Homepage"><h1>FrozenFlirt Theme</h1></a>
                    <h3>"Wordpress Theme From Scratch"</h3>
                </div>
                
                <div class="clear"></div>
            
            </div>

            <div id="sidebar">
            
                <div class="widget" id="adblocks">

                    <a href="#" title=""><img src="images/ads/vivatheme.png" alt="Viva Theme" /></a>
                    <a href="#" title=""><img src="images/ads/pixelcrayons.jpg" alt="Pixel Crayons" /></a>
                    <a href="#" title=""><img src="images/ads/wpbest.gif" alt="WPBEST" /></a>
                    <a href="#" title=""><img src="images/ads/buysellstockdesign.gif" alt="Buy Sell Stock Design" /></a>
                    
                </div>
            
                <div class="widget" id="popular-posts">
                    <h3>Popular Posts</h3>
                    <ul>
                    
                        <li><a title="blablabla" href="#"><span class="wpp-post-title">5 New Useful jQuery Plugins For Your Next Projects</span></a> </li>
                        <li><a title="blablabla" href="#"><span class="wpp-post-title">35 Fresh and Cool Web Design Interfaces for Inspiration</span></a> </li>
                        <li><a title="blablabla" href="#"><span class="wpp-post-title">Bubble Effect with CSS</span></a> </li>
                        <li><a title="blablabla" href="#"><span class="wpp-post-title">CSS Absolute Positioning: Create A Fancy Link Block</span></a> </li>
                        <li><a title="blablabla" href="#"><span class="wpp-post-title">Incredible Drop Down Menu Solution With CSS Only</span></a> </li>
                    </ul>
                    
                </div>
            
            </div>
            
            <div class="clear"></div>

            <div id="flickr-stream">
            
                <h3>Flickr Stream</h3>
                <hr />
                <div class="clear"></div>
                <div id="flickr">
                    <noscript>Your message for people w/o javascript enabled goes here.</noscript>
                </div>

            
            </div>      
            
            <div id="twitter-update">
                <h3>Twitter Update</h3>
                <hr />
                <div class="clear"></div>
                <div id="twitter">
                    <ul id='twitter_update_list'></ul>
                </div>
                <a href="http://twitter.com/prlamnguyen" title="Follow me on twitter"><span id="followme">Follow Me!</span></a>
            
            </div>                      
        
        </div>
    
    </div>
    
    <div class="clear"></div>

    <div id="footer-wrapper">

        <div class="container">
        
            <p id="copyright">&copy;2009 FrozenFlirt. All Rights Reserved</p>
            
            <p id="designedby">Wordpress Theme Design by <a href="http://aext.net"><img src="images/aext.png" alt="Theme by AEXT.NET" /></a></p>
        
        </div>
    
    </div>
    
    <script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
    <script text="text/javascript" src="http://twitter.com/statuses/user_timeline/prlamnguyen.json?callback=twitterCallback2&count=2"></script>
 
</body>
</html>

header.php

<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />

<title><?php wp_title('&laquo;', true, 'right'); bloginfo('name'); ?></title>

<meta name="description" content="<?php bloginfo('description'); ?>" />

<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="alternate" type="application/atom+xml" title="<?php bloginfo('name'); ?> Atom Feed" href="<?php bloginfo('atom_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

<?php bloginfo('template_url'); ?>

<?php

  print '<style type="text/css" media="all">';
  
  print '@import "'.get_bloginfo('template_url').'/reset.css";';
  print '@import "'.get_bloginfo('template_url').'/style.css";';  
  print '@import "'.get_bloginfo('template_url').'/pagenavi-css.css";'; 

  print '</style>';
  
?>

<?php wp_head(); ?>

    <ul>
      <li><a href="<?php bloginfo('url'); ?>">Home</a></li>
      
      <?php echo wp_list_categories('echo=0&title_li='); ?>
        
    </ul>

<ul id="topmenu">
    <li>
       <a href="<?php bloginfo('url'); ?>" title="Home Page"><span>Home</span></a>
    </li>

    <?php
                    
        $args=array(
            'orderby' => 'name',
            'order' => 'ASC'
        );
                    
        $categories=get_categories($args);
                        
            foreach($categories as $category) { 
                echo '<li>';
                echo '<a href="' . get_category_link( $category->term_id ) . '" title="' . sprintf( __( "View all posts in %s" ),                       $category->name ) . '" ' . '><span>' . $category->name.'</span></a> </p> ';
                echo '</li>';
            } 
    ?>


</ul>

sidebar.php

<div id="sidebar">
            
    <div class="widget" id="adblocks">

        <a href="#" title="">
            <img src="<?php bloginfo('template_directory'); ?>/images/ads/vivatheme.png" alt="Viva Theme" />
        </a>
        <a href="#" title="">
            <img src="<?php bloginfo('template_directory'); ?>/images/ads/pixelcrayons.jpg" alt="Pixel Crayons" />
        </a>
        <a href="#" title="">
            <img src="<?php bloginfo('template_directory'); ?>/images/ads/wpbest.gif" alt="WPBEST" />
        </a>
        <a href="#" title="">
            <img src="<?php bloginfo('template_directory'); ?>/images/ads/buysellstockdesign.gif" alt="Buy Sell Stock Design" />
        </a>
                    
    </div>
                
    <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>

    <?php endif; ?>
            
</div>
            
<div class="clear"></div>

// register sidebars
if ( function_exists('register_sidebar')) {
    register_sidebar(array(
        'name' => 'Default sidebar',
        'id' => 'sidebar-1',
        'before_widget' => '<div class="widget" id="%1$s">',
        'after_widget' => '</div>',
        'before_title' => '<h3>',
        'after_title' => '</h3>'
    ));
}

footer.php file

// theme options
$options = array (

  array(    
    "name" => "<strong>Flickr ID</strong>",
    "desc" => "Enter your Flickr ID to display Flickr Stream widget",
    "id" => "flickr_account",
    "default" => ""),


  array(    
    "name" => "<strong>Twitter Account</strong>",
    "desc" => "Enter your Twitter username to display Twitter Update widget",
    "id" => "twitter_account",
    "default" => "prlamnguyen"),
   
);

function frozenflirt_options() {
  global $options;

  if ('theme_save'== $_REQUEST['action'] ) {
  
    foreach ($options as $value) {
     if( !isset( $_REQUEST[ $value['id'] ] ) ) {  } else { update_option( $value['id'], stripslashes($_REQUEST[ $value['id']])); } }
     if(stristr($_SERVER['REQUEST_URI'],'&saved=true')) {
     $location = $_SERVER['REQUEST_URI'];
    } else {
     $location = $_SERVER['REQUEST_URI'] . "&saved=true";
    }
    
    header("Location: $location");
    die;
    
  } else if('theme_reset' == $_REQUEST['action'] ) {
 
    foreach ($options as $value) {
     delete_option( $value['id'] );
     $location = $_SERVER['REQUEST_URI'] . "&reset=true";
    }
    
    header("Location: $location");
    die;
    
  }
  
  
  add_theme_page('FrozenFlirt Theme Setting', 'FrozenFlirt Theme Setting', 10, 'frozenflirt-settings', 'frozenflirt_admin');
}

<?php 
function frozenflirt_admin() {
    global $options;
?>
<div class="wrap">
  <h2 class="alignleft">Theme Setting</h2>
  <br clear="all" />
  
  
  <?php 
    //Check if settings saved!
    if ( $_REQUEST['saved'] ) {
  ?>
        <div class="updated fade"><p><strong>Setting Saved</strong></p></div>
  <?php } ?>

<form method="post" id="myForm">
<div id="poststuff" class="metabox-holder">
 
 <div class="stuffbox">
  <h3>Footer Setting</h3>
  <div class="inside">
    <table class="form-table" style="width: auto">
    <?php
     foreach ($options as $value) {
      switch ( $value['id'] ) {
        case "flickr_account": ?>
        <tr>
        <th scope="row"><?php echo $value['name']; ?><br /><?php echo $value['desc']; ?></th>
        <td>
         <input name="<?php echo $value['id']; ?>" 
                id="<?php echo $value['id']; ?>" type="text" 
                value="<?php get_option($value['id'])?printf(get_option($value['id'])): printf($value['default']) ?>" />
        </td>
        </tr>

      <?php break;
        case "twitter_account": ?>
        <tr>
        <th scope="row"><?php echo $value['name']; ?><br /><?php echo $value['desc']; ?></th>
        <td>
         <input name="<?php echo $value['id']; ?>" 
                id="<?php echo $value['id']; ?>" type="text" 
                value="<?php get_option($value['id'])?printf(get_option($value['id'])): printf($value['default']) ?>" />
        </td>
        </tr>

      <?php break;
        }
    }
    ?>
   </table>
  </div>
 </div>  

</div>
<input name="theme_save" type="submit" class="button-primary" value="Save changes" />
<input type="hidden" name="action" value="theme_save" />
</form>

<form method="post">
<input name="theme_reset" type="submit" class="button-primary" value="Reset" />
<input type="hidden" name="action" value="theme_reset" />
</form>


</div>
<?php
}
?>

<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/<?php if(!get_option('twitter_account')) { echo 'prlamnguyen'; } else { printf(get_option('twitter_account')); } ?>.json?callback=twitterCallback2&count=2"></script>

<script type="text/javascript">

        $(document).ready(function() {

            var id = '<?php printf(get_option('flickr_account')); ?>';
            flickr(id);

        });

</script>

index.php

<?php


//The Loop
if ( have_posts() ) : 

    while ( have_posts() ) : the_post();

        //Posts in the loop
    
    endwhile;
     
else:

        //No post in homepage ?????
     
endif;


?>

<?php

//Begin replace the main query
query_posts('cat=-155'); //155 is the id of Community News category

//The Loop
if ( have_posts() ) : 

    while ( have_posts() ) : the_post();

        //Posts in the loop
    
    endwhile;
     
else:

        //No post in homepage ?????
     
endif;

//Reset the query
wp_reset_query();


?>

<?php
 
/**
 * @package WordPress
 * @subpackage FrozenFlirt_Theme
 */
?>

<?php get_header(); ?>

            <div id="main-content">
            
                ..........
                
            </div>
            

            <?php get_sidebar(); ?>

<?php get_footer(); ?>

<div id="main-content">
  <div class="container">
  
    <?php
                
    if (have_posts()) : while (have_posts()) : the_post(); 
                
    ?>
    
    <div class="post exerpt clearfix"> 
      <a href="#"> 
        <img alt="ahh ahh ahh" src="images/post-image-1.png" width="200" height="200" class="thumbnail" /> 
      </a>
      
      <h2><a href="#" rel="nofollow">Fronze Flirt Theme</a></h2>
      
      <small>Written by <a href="#" title="Lam Nguyen">Lam Nguyen</a> on <strong>Dec 11th</strong> in <a href="#" title="Tutorial Category">Tutorials</a></small>
      
      <div class="summary">
        <p>Lorem ipsum dolor sit amet, this is bold text consectetur adipiscing elit. This font is in italic cras lacinia pellentesque elit nec sodales. Etiam vehicula egestas interdum. Nulla facilisi. In at lectus odio, quis iaculis dui. </p>
        <p><a rel="nofollow" title="Read more this post" href="#">Continue Reading &raquo;</a></p>
      </div>
      
    </div>
    
    <?php endwhile; ?>
    
        <?php if(function_exists('wp_pagenavi')) : ?>
            <?php wp_pagenavi() ?>
        <?php else : ?>
            <div class="navigation" id="pagenavi">
                <div class="alignleft">
                    <?php next_posts_link(__('&laquo; Older Entries','arclite')) ?>
                </div>
                <div class="alignright">
                    <?php previous_posts_link(__('Newer Entries &raquo;','arclite')) ?>
                </div>
                <div class="clear"></div>
            </div>
        <?php endif; ?>
        
    <?php else: ?>
        <p><?php printf("Sorry, no posts matched your criteria."); ?></p>
    <?php endif; ?>
    
  </div>
</div>

<?php
    if (have_posts()) : while (have_posts()) : the_post();          
?>
<div class="post excerpt clearfix"> 
  <a href="<?php the_permalink() ?>">
  <?php
        if ( has_post_thumbnail() ) {
            the_post_thumbnail(array(200,200), array('class' => 'thumbnail'));
        } else {
            // Who doesn't want a thumbnail??
        }
  ?>
  </a>
  <h2><a rel="nofollow"  href="<?php the_permalink() ?>">
    <?php the_title(); ?>
    </a></h2>
    
  <small>
        Written by <?php the_author_posts_link(); ?>
                on <strong><?php the_time('F jS') ?></strong> 
                in <?php the_category(', '); ?>
  </small>
  
  <div class="summary">
    <?php the_content( 'Continue Reading &raquo;' ); ?>
  </div>
  
</div>
<?php endwhile; ?>

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

<a href="<?php the_permalink() ?>">

    <?php

        if ( has_post_thumbnail() ) {

            the_post_thumbnail(array(200,200), array('class' => 'thumbnail'));

        } else {

            // Who doesn't want a thumbnail??

        }

    ?>

</a>

archive.php

                ...
                
                <?php
                
                if (have_posts()) : 
                    
                ?>
                
      <?php $post = $posts[0]; // Hack. Set $post so that the_date() works. ?>
      <?php /* If this is a category archive */ if (is_category()) { ?>
        <h2 class="pagetitle">Archive for the &#8216;<?php single_cat_title(); ?>&#8217; Category</h2>
      <?php /* If this is a tag archive */ } elseif( is_tag() ) { ?>
        <h2 class="pagetitle">Posts Tagged &#8216;<?php single_tag_title(); ?>&#8217;</h2>
      <?php /* If this is a daily archive */ } elseif (is_day()) { ?>
        <h2 class="pagetitle">Archive for <?php the_time('F jS, Y'); ?></h2>
      <?php /* If this is a monthly archive */ } elseif (is_month()) { ?>
        <h2 class="pagetitle">Archive for <?php the_time('F, Y'); ?></h2>
      <?php /* If this is a yearly archive */ } elseif (is_year()) { ?>
        <h2 class="pagetitle">Archive for <?php the_time('Y'); ?></h2>
      <?php /* If this is an author archive */ } elseif (is_author()) { ?>
        <h2 class="pagetitle">Author Archive</h2>
      <?php /* If this is a paged archive */ } elseif (isset($_GET['paged']) && !empty($_GET['paged'])) { ?>
        <h2 class="pagetitle">Blog Archives</h2>
      <?php } ?>
                
                <?php 
                    
                    while (have_posts()) : the_post(); 
                
                ?>
                
                ...

single.php

<div class="summary">

                    

    <p>Post Excerpt</p>



</div>

                

                            

<div class="post-content">

                    

    Post Main Content



</div>

add_filter('the_content', 'format_content');


function format_content($content) {

    if ( preg_match('/<span id="(.*?)?"><\/span>/', $content, $matches) ) {

        $content = explode($matches[0], $content, 2);

        $content = '<div class="summary">' . $content[0] . '</div>' . $matches[0] . '<div class="post-content">' . $content[1] . '</div>';
    }

    return $content;

}

<?php
 
/**
 * @package WordPress
 * @subpackage FrozenFlirt_Theme
 */
?>

<?php get_header(); ?>

            <div id="main-content">
              <div class="container">

                <?php
                
                if (have_posts()) : while (have_posts()) : the_post(); 
                
                ?>
            
                <div class="post clearfix">
                    <a href="<?php the_permalink() ?>">
                    <?php
                        if ( has_post_thumbnail() ) {
                            the_post_thumbnail(array(200,200), array('class' => 'thumbnail'));
                        } else {
                            // Who doesn't want a thumbnail??
                        }
                    ?>
                    </a>
                
                    <h2><a rel="nofollow"  href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>                
                    <small>Written by <?php the_author_posts_link(); ?> on <strong><?php the_time('F jS') ?></strong> in <?php the_category(', '); ?></small>
                
                    <?php the_content(); ?>
                        
                </div>
                
                <?php comments_template(); ?>
                
                <?php endwhile; ?>
                
                <?php else: ?>
                    <p><?php _e("Sorry, no posts matched your criteria.","arclite"); ?></p>
                <?php endif; ?>
                
              </div>
            </div>
            

            <?php get_sidebar(); ?>

<?php get_footer(); ?>

comments.php

• 30 Most Wanted WordPress Comments Page Hacks
• Styling Your Wordpress Comments
• 10 Handy WordPress Comments Hacks

<?php comment_id_fields(); ?>
<?php do_action('comment_form', $post->ID); ?>

Conclusion

Related posts:

1. WordPress Theme from Scratch – Day 2: PSD to HTML
2. WordPress Theme from Scratch – Day 1: PSD
3. Wordpress Hack: Anything Can Be Added Anywhere In The Post Content

1. Setting up your TDO Mini Form.

[tdomf_form1]

2. Modify the feed of the submissions.

<?php
  /*
  Template Name: Community Feed
  */

$numposts = 10;
$posts = query_posts('showposts='.$numposts);

<entry>
    <author>
        <name><?php the_author() ?></name>
           <?php $author_url = get_the_author_meta('url'); if ( !empty($author_url) ) : ?>
             <uri><?php the_author_meta('url')?></uri>
           <?php endif; ?>
    </author>

    <!-- this is what we add -->  
    <directurl><?php echo get_post_meta($post->ID,'post_url',true); ?></directurl>

    <title type="<?php html_type_rss(); ?>"><![CDATA[<?php the_title_rss() ?>]]></title>

Fetching feed on other websites

function getFeed($feed_url) {
    $xml = simplexml_load_file($feed_url);
    echo "<ul>";

    foreach($xml->entry as $entry) {
         echo "<li>";
         echo "<span class='post-date'>Posted: ".date(  "F j, Y", strtotime($entry->published) )."</span>";
         echo "<h3><a title='Permanent Link to ".$entry->title."' rel='nofollow' href='".$entry->directurl."'>".$entry->title."</a></h3>";
         echo "</li>";
     }

     echo "</ul>";

}

<?php getFeed("http://link-to-your-feed/"); ?>

• SimplePie Core for WordPress
• How to Read an RSS Feed With PHP – screencast
• Function Reference/fetch feed
• How to: Display any rss feed on your WordPress blog

Conclusion

Related posts:

1. WordPress Theme from Scratch – Day 3: HTML to WordPress
2. Community Blog: Should Or Should not I Run This Way?
3. Wordpress Theme Design with Options Adminstration

$wp_query->have_posts();

<ul>

  <?php $recent = new WP_Query("showposts=35"); while($recent->have_posts()) : $recent->the_post();?>
  
    <li>
      <a title="Permanent Link to <?php the_title(); ?>" rel="nofollow" href="<?php the_permalink() ?>">
      
        <?php if (get_post_meta($post->ID, "image", true)): ?>
            <img src="<?php bloginfo('template_url'); ?>/scripts/thumb.php?src=<?php echo get_post_meta($post->ID, "image", true); ?>&w=25&h=25&zc=1" alt="<?php the_title(); ?>" />
        <?php else: ?>
            <img src="<?php bloginfo('template_url'); ?>/images/thumbnail.png" width="25" height="25" alt="<?php the_title(); ?>" />    
        <?php endif; ?>

      <span><?php the_title(); ?></span></a>
    </li>
            
  <?php endwhile; ?>

</ul>

.widget ul {
    list-style-type:none;
    margin:5px auto 8px;
    padding:0 0 2px;
    width:auto;
}

.widget ul li {
    clear:both;
    letter-spacing:0;
    margin:0;
    padding:5px 0 0;
}

.widget ul li a {
    border-bottom:0 dotted #DDDDDD;
    color:#333333;
    font-family:Georgia,"Nimbus Roman No9 L",serif;
    font-size:11px;
    font-weight:normal;
    margin:0;
    padding:0;
    text-decoration:none;
}

.widget ul li img {
    border:3px solid #DFDFDF;
    float:left;
    margin-bottom:10px;
    margin-right:10px;
    padding:1px;
}

.widget ul li span {
    display:block;
    padding:0;
}

Conclusion

Related posts:

1. WordPress Theme from Scratch – Day 3: HTML to WordPress
2. Wordpress Hack: Anything Can Be Added Anywhere In The Post Content
3. How To Wrap Google Adsense In Wordpress Posts Correctly