WPGarage.com

Giving each comment its own link in WordPress

Being able to link to specific comments in your WordPress blog could be very handy. Good comments can really add a lot of value to a blog, and you or others may want to refer to specific comments in your posts by linking to them. In general, comments can be linked to, but to figure out what the URL is for every comment is virtually impossible, unless…you set up your comments section of your blog so that every comment gets a link.

Here’s how you would create a link around the date and time of your comment:

<p><a href="#comment-<?php comment_ID() ?>" title=""><?php comment_date('F jS, Y') ?> at <?php comment_time() ?></a></p>

This piece of code should appear in your comments.php theme file where your comment code appears.

If you want an “Edit Comment” link to appear next to the comment for those who are logged in and have permissions to edit, you would add the following code:

<p><a href="#comment-<?php comment_ID() ?>" title=""><?php comment_date('F jS, Y') ?> at <?php comment_time() ?></a><?php edit_comment_link('Edit comment',' ~ ',''); ?></p>

So there you have it boys and girls: now you can link to comments, and share the love with your commenters!

Posted in Code Snippets | 4 Comments »

Giving each WordPress post a thumbnail, and display the thumbnail on the home page

You may encounter situations where you need to automatically display a thumbnail or image of some kind that will link to posts. Here’s an example of this kind of situation: you want to display recent posts from a certain category on your home page, with a thumbnail for each post and maybe the title and an excerpt. Or, I recently had a client that had a box on their homepage for multimedia where they wanted an image to appear that would represent the latest post in the Media category and would link to that post. A link to this site is at the end of this post, so read on.

I found the solution in two amazing WordPress themes: Mimbo and The Morning After. They both use thumbnails on their home page, and they do it by using WordPress’ mysterious Custom Fields feature.

You need to be able to upload images to your server in order to do this. You can do this via FTP, but to make this as easy as possible for clients, I use the Filosofo Old-Style Upload Plugin which creates a link on your nav bar where you select files for uploading. But first you need to configure this plugin and select a folder where all uploads will be saved:

1. Upload the plugin and activate it.
2. Go to Options > Uploads.
3. Enter your destination directory. I think the best is to use your images folder in your theme folder so that any images you upload will be in an easily portable place. So the path could be something like /home/server/public_html/wp-content/themes/themefolder/images. The plugin will suggest a path, and it is usually right.
4. Enter the URI of the folder. It’s something like http://www.yoursite.com/wp-content/themes/themefolder/images.
5. You might as well up your maximum file size. I make it 500 kb.
6. Allowed file extensions: jpg, jpeg, gif, png, pdf – I add PDF and other types of files I think clients may want to upload.
7. Minimum level to upload: I leave it at 6 since I have no idea what this means.
8. Click Update Options.

That’s done. Now for how to create a post with a thumbnail image.

1. Create an image for your post with the right width and height. The size of the image depends only on the design of your site and where it is going to appear.
2. Go into the admin of your site. Click on Upload (it’s on the upper nav bar).
3. Select the file you are uploading, select No Thanks so it won’t create a thumbnail, give it a description (that’s good for Google) and click Upload File.
4. Once it’s uploaded it will show you the entire URL of the image. Note particularly the last part of the link where it says the name of your image, especially if there are any capitals in any part of the name. You will have to enter the exact file name in step 8.
5. Go to Create Posts. Enter your post and title as you wish. Make sure to select the category you have selected as the one that will appear with the thumbnails. Now scroll all the way down to the bottom of the screen where it says Custom Fields. Click on the plus button to expand it.
6. Enter the word Image (with a capital I) in the Key field.
7. In value, enter the exact name of the file you uploaded. For example picture.jpg or image.gif. Click Add Custom Field.
8. Save your post.

Now we need the code that will make this thumbnail appear where you want it to appear. Following is the code for having a thumbnail appear with the title underneath it. This code is adapted from the Mimbo theme, but the code in The Morning After is similar:

<?php
// this is where the Features module begins
query_posts('showposts=1&cat=199'); ?> //change the showposts number to the number of posts that you want to appear, and change cat=199 to your category number, which you can find out by going to Manage > Categories
<?php while (have_posts()) : the_post(); ?>
<div class="thumbnails"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><img src="<?php echo get_option('home'); ?>/wp-content/themes/themefolder/images/<?php
// this is where the custom field prints images for each Feature
$values = get_post_custom_values("Image"); echo $values[0]; ?>" alt="" /></a>
<p class="title"><a href="<?php the_permalink() ?>" rel="bookmark">
<?php
// this is where title of the Feature gets printed
the_title(); ?></a></p></div>
<?php endwhile; ?>

Wanna see an example? Check out this site, scroll to the bottom and look at the left-most column that is called Media. That image there is a thumbnail that was uploaded and entered in the Custom Field of the post it links to.

Update Nov. 27, 2007: This post got a lot of comments here, and on Weblog Tools Collection who referred to it. Lots of people gave more recommendations on how to manage thumbnails with custom fields and/or plugins, so I collected these tips into one post which you can see here: Images, thumbnails and custom fields in WordPress.

Posted in Code Snippets, Tips | 162 Comments »

Hard-coding an SEO friendly title in the WordPress header file

The title I am referring to here is the title that appears in the top bar of your browser, and is in betweeen <title></title> tags in your code. Apparently, to make it more SEO friendly, the title of the post or article should appear before the title of your blog, but generally themes have it programmed the other way around.

You can switch it through the use of plugins, but if you want to avoid using another plugin you can fix this in the header.php file. Find the code that starts with <title>, and replace what is currently there with this:

<title><?php if ( is_single() ) { ?> <?php wp_title(''); ?> &raquo; <?php } ?><?php bloginfo('name'); ?></title>

This tells WordPress that if the page is not single, the name of the blog will appear only. This is for the homepage. If the page is single, i.e. a single post page, then the name of the post will appear and then the blog title. So, for example, a post on WordPressGarage would have the following title:

Yet another way to feed your facebook obsession » WordPressGarage

Posted in Code Snippets | 5 Comments »

Display recent posts in WordPress sidebar

Here’s a bit of code to put in your sidebar to display the most recent posts on your blog:

<?php $myposts = get_posts('numberposts=10&offset=1');
foreach($myposts as $post) >
<li><a href="<?php the_permalink(); ?>"><?php the_title();?></a></li>
<?php endforeach; ?>

You can set the number of recent posts to appear on the first line of code where it says numberposts=10 – change the 10 to the number of posts you want to appear. You can choose to offset the recent posts by any number; for example, if you select offset=1, as we did above, it won’t display the most recent post, but will start the list from the second-most recent post.

Posted in Code Snippets | 50 Comments »

Recent Comments code snippet

This code is from the Blog Oh Blog theme, and displays recent comments in the sidebar without the need for a plugin:

<?php
global $wpdb;
$sql = "SELECT DISTINCT ID, post_title, post_password, comment_ID,
comment_post_ID, comment_author, comment_date_gmt, comment_approved,
comment_type,comment_author_url,
SUBSTRING(comment_content,1,30) AS com_excerpt
FROM $wpdb->comments
LEFT OUTER JOIN $wpdb->posts ON ($wpdb->comments.comment_post_ID =
$wpdb->posts.ID)
WHERE comment_approved = '1' AND comment_type = '' AND
post_password = ''
ORDER BY comment_date_gmt DESC
LIMIT 10";
$comments = $wpdb->get_results($sql);
$output = $pre_HTML;
$output .= "\n<ul>";
foreach ($comments as $comment) {
$output .= "\n<li>".strip_tags($comment->comment_author)
.":" . "<a href=\"" . get_permalink($comment->ID) .
"#comment-" . $comment->comment_ID . "\" title=\"on " .
$comment->post_title . "\">" . strip_tags($comment->com_excerpt)
."</a></li>";
}
$output .= "\n</ul>";
$output .= $post_HTML;
echo $output;?>

Posted in Code Snippets | 32 Comments »

Display posts from specific categories on a Page

You may want to display posts from a specific category on the homepage or other pages of your site. For example, you might want to have a box that displays the latest three posts from your News category, or have links to your latest podcasts.

In a previous post, I gave the code that would display the latest posts from a specific category in the sidebar. However, that code will not work in the main content part of the page. In order to display posts from a specific category in the main content section of a page, you need to use a variation on the WordPress Loop, which is as follows:
<?php query_posts('category_name=special_cat&showposts=10'); ?>
<?php while (have_posts()) : the_post(); ?>
<!-- Do special_cat stuff... -->
<?php endwhile;?>

To use this code, change the category name to whatever the name is of the relevant category, and change the number of posts displayed from 10 to whatever number you want. Where it says <!-- Do special_cat stuff... -->, put in all the code you usually use to display the title, date, category, etc. – whatever you need.

Posted in Code Snippets, WordPress as CMS | 60 Comments »

Creating a feature post or sticky post in a WordPress blog

To get a post from a specific category to appear at the top of the page above the rest of the posts, and to only change when a new post from that particular category is added, use the following code:

<?php /*?><?php $my_query = new WP_Query('category_name=featured&showposts=1');

continue;?><?php */?>

Obviously, many things above can be changed, like how the titles, categories, tags, etc. are displayed.

Posted in Code Snippets | 3 Comments »

Creating different Page templates

To create a new Page template, add the following code to the top of the page:

<?php
/*
Template Name: Home
*/
?>

The Template Name can be changed, i.e. Home can be About Us, or anything else. When you create a Page in WordPress, on the right-hand side there is a drop down box for selecting a template. The name that you enter in the above code is what will appear there.

Posted in Code Snippets | No Comments »

Display a selected number of posts from one category in the sidebar

<?php$postlist = get_posts('category=6&numberposts=5');
foreach ($postlist as $post) ><li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li><?php endforeach; ?>

Use this in the sidebar to display a defined number of posts from a specified category. Where it says “category=6″ replace the 6 with the relevant category ID number, and where it says “numberposts=5″ replace the 5 with the number of posts that you want to appear.

Update Nov. 7, 2007:

The above code snippet can also be used to display a page in the sidebar. This is is handy if you want to create an editable chunk of text in the sidebar without using widgets. So, for example, if you want to show an excerpt of your About page in your sidebar, use the following code:

<?php$postlist = get_posts('id=54');
foreach ($postlist as $post) ><?php the_excerpt(); ?>
<a href="<?php the_permalink(); ?>">read more</a>

Where it says id=54, replace 54 with the id number of the page you want to display.

Posted in Code Snippets | 23 Comments »

Code snippets on WordPressGarage

I am going to start posting code snippets on WordPressGarage that are used in WordPress template files for different purposes. I will display the code snippet with an explanation of how it’s used, what it does, and why you would want to use it.

The goal of WordPressGarage is to be an online WordPress manual for me and my workers, and to give all of you the opportunity to benefit from this too. So while these may not be the prettiest or most fascinating posts, they serve my original goal of making it easy to find information for repeat use.

So here they come…

Posted in Code Snippets | No Comments »