Deep Blue is an easily customizable and fully widgetized beautiful web 2.0 Wordpress theme.

Features

• 6 widget areas
• 3 widget areas in the footer
• 2 widget areas in the header
• In-built Cufon support
• Automatic thumbnails
• 3 level drop-down menu
• Nested comments

Preview
Download

My client asked me to implement lists of recent and related posts below a single post without duplicating each other.

What do we have to do?

1. Create 2 instances of WP_Query class ($recent_query and $tags_query)
2. By the help of these instances we have to create loops for recent and related posts
3. IDs of the recent posts must be stored in an array for later use
4. Implement displaying of the related posts based on tags
5. In the loop for tags we have to exclude IDs of recent posts from displaying

This tutorial has two parts:

• Recent posts
• Related posts

Recent posts

This is how full code for recent posts looks:

<?php
/**
 * recent posts
 */
?>

<h2>recent 5 posts</h2>
<?php $recent_query = new WP_Query(); ?>
<?php $recent_query->query('showposts=5'); $ids = array(); ?>
<ul>
<?php while($recent_query->have_posts()) : $recent_query->the_post();
 $ids[] = get_the_ID(); // we have to store IDs in the array for later use
?>
	<li>
            <a href="<?php the_permalink(); ?>">
            <?php the_title(); ?>
            </a>
       </li>
<?php endwhile; ?>
</ul>

Now let’s go step by step:
The first we have to create instance of the WP_Query() class. Its references retain a lot of info that we can use later. More info about this class you can find in the function reference.

<?php $recent_query = new WP_Query(); ?>

With the instance of WP_QUery we can query posts. We also have to create an array $ids that we’ll use later for storing IDs of the rcent posts we displayed.

<?php
$recent_query->query('showposts=5'); // we are going to display 5 posts
$ids = array(); // create array we will use for storing recent posts' IDs
?>

Using $recent_query object we can run a loop to display last 5 posts. We also have to get the ID of each post and store it in $id array. Note that the loop is inside ul tags i.e we want to repeat only list items with unique permalinks, not whole list.

<ul>
<?php while($recent_query->have_posts()) : $recent_query->the_post();
 $ids[] = get_the_ID(); // we have to store IDs in the array for later use
?>
	<li>
            <a href="<?php the_permalink(); ?>">
            <?php the_title(); ?>
            </a>
       </li>
<?php endwhile; ?>
</ul>

Related posts

Here is a code of displaying of the related posts based on tags.

<?php
/**
 * related posts
 */

$tags = wp_get_post_tags( array('showposts' => 5, 'post__not_in'=>$ids) );

    $tag_ids = array();
    foreach ($tags as $individual_tag)
        $tag_ids[] = $individual_tag->term_id;

    $args = array(
	'tag__in'=>$tag_ids,
	'post__not_in'=>$ids, // while using $recent_query we created $ids[] array with IDs of the recent posts
	'showposts'=>5, // Number of related posts that will be shown.
	'caller_get_posts'=>1);
    $tags_query = new WP_Query($args);
    if ($tags_query->have_posts()) {
?>
    	<div class="related-posts">
            <h2>Related posts</h2>
            <ul>

    <?php while ($tags_query->have_posts()) { $tags_query->the_post(); ?>           

    		<li>
    		    <a href="<?php the_permalink() ?>"><?php the_title(); ?></a>
    		</li>   		

    <?php } ?>

            </ul>
        </div>

        <?php
      }
?>

The first we have create an array of tags and exclude recent posts. This we do by adding an array $ids to the parameter ‘post__not_in’.

$tags = wp_get_post_tags( array('showposts' => 5, 'post__not_in'=>$ids) );

Store the tags’ ID’s in the array $tag_ids

$tag_ids = array();
    foreach ($tags as $individual_tag)
        $tag_ids[] = $individual_tag->term_id;

Prepare $args – arguments we want to set for $tags_query instance of the WP_Query class.
Note argument ‘post__not_in’ => $ids to which we assign array of the IDs of the recent posts. They won’t be displayed in the related posts.

 $args = array(
	'tag__in'=>$tag_ids,
	'post__not_in'=>$ids, // while using $recent_query we created $ids[] array with IDs of the recent posts
	'showposts'=>5, // Number of related posts that will be shown.
	'caller_get_posts'=>1);
    $tags_query = new WP_Query($args);

If there are posts that meet our conditions:

if ($tags_query->have_posts()) {

Start displaying related posts based on the their tags:

<div class="related-posts">
            <h2>Related posts</h2>
            <ul>

    <?php while ($tags_query->have_posts()) { $tags_query->the_post(); ?>           

    		<li>
    		    <a href="<?php the_permalink() ?>"><?php the_title(); ?></a>
    		</li>   		

    <?php } ?>

            </ul>
        </div>

With this plugin you can add videos to your sidebar (or any other widgetized area of your site). Just copy and paste code of the video into the Advanced widget.
The Youtube’s original video code doesn’t pass W3C validation. The filtered video code of the Advanced Videobox will keep your site XHTML valid. Of course only in case the site was valid beforehand .
See sidebar for Advanced Videobox in action.

Latest version 1.0.1

Download

Features

• Web 2.0 graphics
• Plugin outputs XHTML valid code
• Change sizes of the video comfortably through widget panel
• Easily customizable CSS
• Add up to 20 videos

You can add up to 20 videos. Music, tutorials, ads or whatever you want.

How-to

• Download plugin from Wordpress repository.
• Unzip and upload it to \wp-content\plugins\. Or you can go to the admin panel:
  • Plugins –> Add New
  • Type “advanced videobox” into the search field.
  • Install.
• Drag the widget instance to the widget panel of your choice
• Choose number of videos and SAVE widget to see correct number of the input fields.
• Add width and height of the videos
• Add title and code for each video
• If you want to display customized video player, you have to check “Enable parameters”. Don’t do that if you want to keep code of the video XHTML valid.
  

  In the your youtube.com, click the wheel and play around with the colors of the player.

Buy me a beer

All-In-One Cufon plugin allows you an easy replacement of standard fonts with beautiful catchy fonts.
This plugin implements Simo Kinnunen’s Cufón script, which aspires to become a worthy alternative to sIFR.

Latest version 1.0.3

Download

Features

• Easy to use
• Automatic detection of the uploaded fonts
• Preview of the uploaded fonts
• Automatic detection of the fontFamily parameter
• Option to enable only font you really want to use
• Code tips

All-In-One Cufon admin panel with code tips, fonts preview and field where you set your font.

How-to

• Download plugin from Wordpress repository.
• Unzip and upload it to \wp-content\plugins\. Or you can go to the admin panel:
  • Plugins –> Add New
  • Type “all-in-one cufon” into the search field.
  • Install.
  • First you have to generate JavaScript file of your .otf, .ttf etc. font file. To generate this you have to go the Cufon generator.
    Make sure the EULA of the font permits web embedding.
• Create a folder called /cufon-fonts/ in the wp-content/plugins/ directory, where you need to upload your generated font .js files.
• When you’re done, just go the admin panel: Settings–>All-In-One Cufon
• There you will instantly see fonts that were detected in your \wp-content\plugins\cufon-fonts\ folder.
• Enable fonts you wish to use.
• The last step is adding the Cufón code.

Adding Cufon code

Add Cufon code to the Cufon’s code field. Basic code for replacing h2 element looks like this:

Cufon.replace('h2');

For more complex element you can use code like this:

Cufon.replace('#top-menu.menu');

1. Add gradient to the font:

Cufon.replace('.cufon-gradient', {
                	color: '-linear-gradient(red, blue)'
                    });

2. Add shadow to the font:

Cufon.replace('.cufon-shadow', {
                    textShadow: '2px 2px red'
                    });

3. Add gradient and shadow to the font:

Cufon.replace('.cufon-gradient-shadow', {
                	color: '-linear-gradient(blue, yellow)',
                        textShadow: '2px 2px #C0C0C0'
                    });

4. Add gradient and shadow to a link:

Cufon.replace('a.cufon-gradient-shadow-link', {
                	color: '-linear-gradient(#FF9900, #000000)',
                    textShadow: '2px 2px #C0C0C0',
                    hover: {
		textShadow: '2px 2px #C0C0C0',
		color: '-linear-gradient(#99CC00, #000000)'
	}
                    });

Cufon can apply gradient and shadow to links.

5. Set font, gradient and hover.

Cufon.replace('a.cufon-easy', {
                    fontFamily: 'Sketch Rockwell',
                    color: '-linear-gradient(#FF6600, #33CCCC)',
                    hover: {
            		textShadow: '2px 2px red',
            		color: '-linear-gradient(black, white)'
	}

Cufon is easy to set up.

6. Add gradient, shadow and transparency to a shadow:

Cufon.replace('a.cufon-transparent', {
                	color: '-linear-gradient(#FFFFFF, #99CCFF)',
                    textShadow: '10px 10px rgba(0, 0, 0, 0.3)',
                    hover: {
		textShadow: '10px 10px rgba(0, 0, 0, 0.3)',
		color: '-linear-gradient(#FFFFFF, #969696)'
	}
                    });

CSS code

.cufon-transparent { display: block; font-size: 40px; background: url(images/cufon-bg.jpg) repeat; }

Cufon can work with transparency in links.

You can find much more info on this amazing script on the official Cufón’s pages.
They also have active forum, where you can ask all your questions regarding Cufón.

Buy me a beer

With Youtube Videobox plugin you can add unlimited number of videos to your site in a painless way. All you need is to copy and paste code of the video into the Youtube Videobox widget.
The original video code from Youtube doesn’t pass W3C validation. My filtered video code will keep your site XHTML valid. Of course only in case the site was valid beforehand .

Latest version 0.9.1

Download

Features

• Plugin outputs XHTML valid code
• Change sizes of the video comfortably through widget panel
• Due to WP widget architecture you can add unlimited number of the widget instances

How-to

• Download plugin from Wordpress repository.
• Unzip and upload it to \wp-content\plugins\. Or you can go to the admin panel:
  • Plugins –> Add New
  • Type “youtube videobox” into the search field.
  • Install.
• Drag the widget instance to the widget panel of your choice
• Add width, height and code of the video
• If you want to display customized video player, you have to tick “Enable parameters”. Don’t do that if you want to keep code of the video XHTML valid.
  

  In the your youtube.com, click the wheel and play around with the colors of the player.

Create widgets and put your videos anywhere

Adding widgets is not limited only to sidebar. You can widgetize any part of your site. It’s incredibly easy!
This is CSS of the widget. Note that width of the widget is set to auto. This allows using setting different sizes of the video without setting new sizes of the widget in CSS.

.widget            { width: auto; margin: 0px 0 10px 0; }
.widget p          { padding: 10px 10px 10px 10px; }

In functions.php you have to register your sidebar:

<?php
if (function_exists('register_sidebar')) {
//Video widget 1
    register_sidebar(array(
    'before_widget' => '<div id="%1$s" class="%2$s widget">',
    'before_title' => '<h3 class="widgettitle">',
    'after_title' => '</h3>',
    'after_widget' => '</div>',
    'name' => Video widget 1));
//Video widget 2
    register_sidebar(array(
    'before_widget' => '<div id="%1$s" class="%2$s widget">',
    'before_title' => '<h3 class="widgettitle">',
    'after_title' => '</h3>',
    'after_widget' => '</div>',
    'name' => Video widget 2));
}
?>

The last thing we have to do is add widgets to our code.
Video widget 1 in the footer:

<div id="footer">
<?php if (function_exists('dynamic_sidebar') && dynamic_sidebar('Video widget 1')): else : ?>
<!-- some code -->
<?php endif; ?>
</div>

..and Video widget 2 in the sidebar:

<div id="sidebar">
<?php if (function_exists('dynamic_sidebar') && dynamic_sidebar('Video widget 2')): else : ?>
<!-- some code -->
<?php endif; ?>
</div>

Buy me a beer

1. If you are logged out you will see “Please log in or Register”

else if you are logged in

2. you will see “Welcome USERNAME”

<?php  if (is_user_logged_in()) {
          $user = wp_get_current_user();
          echo 'Welcome <strong>'.$user->display_name.'</strong> !';
                        } else { ?>
          Please <strong><?php wp_loginout(); ?></strong>
          or <a href="<?php echo get_option('home'); ?>/wp-login.php?action=register"><strong>Register</strong></a>
          <?php } ?>

NEW! update 1.4.1

• dropdown menu
• nested comments
• minor fixes

Sidon 1.3.1

• 3 column AdSense ready
• 2 columns widget ready
• blue and white colors
• XHTML valid Transitional

Preview
Download

If you want to display five last posts from your Wordpress blog, use this function:

<ul>
  <?php wp_get_archives('type=postbypost&limit=5'); ?>
</ul>

For more detailed info go here

Recently my client’s design required displaying posts in sidebar only from one category. To solve this problem I decided to use class WP_Query.

The first we have to create instance of WP_Query:

Then call method query(); to start the query. This is actually same as you would be using query_posts();
Parameter cat indicates which category’s posts are shown. Parameter showposts is the number of posts to be displayed.

query('cat=1&showposts=5'); ?>

Now we can use loop:

<?php while($recent->have_posts()) : $recent->the_post(); ?>
<!-- Here goes some code -->
<?php endwhile; ?>

Final code that displays last 5 posts’ permalinks from category with ID=1 looks like this:

<h2>Last posts</h2>
<?php $recent = new WP_Query(); ?>
<?php $recent->query('cat=1&showposts=5'); ?>
<?php while($recent->have_posts()) : $recent->the_post(); ?>
<ul>
	<li>
            <a href="<?php the_permalink(); ?>">
            <?php the_title(); ?>
            </a>
       </li>
</ul>
<?php endwhile; ?>

Using your own WP_Query instance and loop prevents you from problems that might cause plugins’ loops and use of conditional tags.

Multilevel-navigation plugin for Wordpress is beyond all doubts a great plugin that allows you to create beautiful dropdown menus and enrich the look of your wordpress theme.
The only problem while working with Multi level navigation plug-in is that it doesn’t keep current item ‘Homepage’ highlighted. If you have encountered the same problem and would like to keep the ‘home page’ link highlighted, here is my quick and easy solution:

This is how you can set color for ‘current’ item:

You have to use class li.current_page_parent:

#suckerfishnav li.current_page_parent,
#suckerfishnav li.current_page_parent,
#suckerfishnav li.current_page_item {color:yellow;}
#suckerfishnav li.current_page_parent a:hover,
#suckerfishnav li.current_page_parent a,
#suckerfishnav li.current_page_item a {color:yellow;}

And now how to keep homepage item of menu highlighted:

1.  In plugin’s settings disable viewing ‘Home’ item. From now on you are not going to need it.

2.  Create new page and name it ‘Home’ …or how you want to.

3.  If you want this page to be viewed as first you have to set order value of the page lower than other pages. Now the item ‘Home’ should be on the first place in your menu.

4.  Go to Settings–>Reading and set your posts page to be viewed by clicking on the ‘Home’ link. Now every time you click ‘Home’ item in your menu, you will get to your homepage.

5.  The last problem is the URL in the browser. It is viewed like this:

Probably you will want the URL after clicking on ‘Home’ item to be www.yourdomain.com without the ‘/home/’. This issue we can easily solve with Page links to plugin. You can get it here or install it directly via ‘add new plugin’ panel.

6.  The plugin adds option ‘page links to’ to the page’s options. Just type in your domain’s URL and that’s it. Multilevel navigation plugin’s Home item issue is solved.