Deep Blue
30 Mar
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?
- Create 2 instances of WP_Query class ($recent_query and $tags_query)
- By the help of these instances we have to create loops for recent and related posts
- IDs of the recent posts must be stored in an array for later use
- Implement displaying of the related posts based on tags
- 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>
Advanced Videobox
23 Feb
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
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.
All-In-One Cufon
23 Feb
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
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)'
});
Cufon can make use of gradients
2. Add shadow to the font:
Cufon.replace('.cufon-shadow', {
textShadow: '2px 2px red'
});
Cufon can have a shadow, too!
3. Add gradient and shadow to the font:
Cufon.replace('.cufon-gradient-shadow', {
color: '-linear-gradient(blue, yellow)',
textShadow: '2px 2px #C0C0C0'
});
Cufon can even have gradient and shadow together.
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)'
}
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.
As a freelance coder I need a really reliable IDE for everyday work. I’ve tried a lot of IDEs so far. None of them suited me 100%. Until I found PHP Designer 7.
Since I am sitting by comp not less than 12 hours daily I need eye friendly background. I did myself one. If you want you can download it here. It includes colorization for languages I use most HTML, PHP, JavaScript and CSS.
What amazes me most about this software is incredible speed. It is much faster than any other IDE I tried before. Whether it is code completion or just a FTP I get what I want immediately.
Speaking of code completion. PHP Designer 7 has top support for JavaScript / Ajax. You wish jQuery, Ext JS, YUI, Dojo, MooTools or Prototype? No problem with this IDE. Pretty surprising when it’s called “PHP” Designer.
Things like highlight matching brackets, highlight matching HTML tags or highlight missing brackets are must when you customize your or someone else code. This and much more is implemented in PHP Designer 7.
More info on this software you can get on its official site.
Youtube Video Box Plugin
15 Dec
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
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>
If you are using Eclipse IDE with Aptana 2.0 plugin and want to display HTML toolbar even when you have PHP file opened, just follow these instructions:
1. Go to Preferences -> General -> Editors -> File Associations
2. In file types choose .php extension
3. In associated editors click Add button.
4. Choose “Aptana HTML editor” from internal editors.
5. Save your changes by clicking OK
6. Now you should see HTML toolbar even when you have PHP file opened.
I hope this is just a temporal solution and Aptana developers (or PDT team) will implement this feature in future realeases of PDT plugin.
For all eyes bleeding users of Aptana 2.0 on Eclipse IDE. I uploaded my colors scheme preferences for Eclipse using Aptana 2.0 as plugin. This color scheme is based on Green Chaud color scheme.
1. Download the .zip file with preferences
2. Unzip it and import: File -> Import -> Preferences -> Import All
3. That’s it!
downloaded: [download#2#hits]
Download [download#2#nohits]
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 } ?>
Free theme Sidon
23 Jul
