This week I have WordPress, Facebook, William Gibson, school supplies, and more.

Enjoy

• How to Add Custom Post Types to Your Main WordPress RSS Feed – Custom post types is one of the new features in WordPress 3.0 but the posts do not go into the RSS feed by default. This tutorial explains how to add them.
• Old cell phones: How many have you recycled? – I’ve sold or given my old ones away – I don’t know if they were recycled after that. But I don’t leave them in a drawer and I don’t throw them away.
• Why You Need to Know HTML/CSS – I certainly don’t think everyone needs to be an expert but knowing the basics can make managing your site a lot easier.
• ProofPress – A photo proofing system built with WordPress. This is coming in October.
• What version of WordPress is behind that website? – This article discusses why hiding the version of WordPress for security reasons is a waste of time
• A Simple Guide to Running a Facebook Page – It may be simple but it’s also excellent.
• William Gibson Talks Zero History, Paranoia and the Awesome Power of Twitter – I’m eager to read Gibson’s new book, Zero History. Here’s an interesting interview with this great author.
• 2 Billion Pencils* and A School Supply Quandary – I’ve been ranting about the list of required school supplies and was glad to see this article. I can’t stand buying items I consider wasteful, like paper towels, that I never purchase for my home. I was so tempted to send in a couple of washable rags. ;-)
• I’ve been obsessed with Farscape recently and don’t know how I missed this sci-fi series when it was on between 1999-2003. It’s dark but has some really funny moments.
  

Post from: (Anti) Social Development

(Anti) Social Lists 9/12/10

This week I have freelancing, twitter, eating habits, funny signs and more!

As always, enjoy!

• 5 Bad Work at Home Habits: Are You Guilty? – I must admit I’m guilty of not having the same work hours everyday. I have a young child and I work around her schedule. And that’s part of the reason I work from home.
• How to Market Your Business with Twitter Lists – I’ve started making lists but haven’t gotten very far with it. It would have been a lot easier if lists had existed all along – going back through thousands of followers is tedious. This article has some great ways to use lists – things that I certainly hadn’t though of.
• Mapping America’s Eating Habits – What states spend the most on junk food? Or drink the most soda? Here are some maps that provide that information.
• Report: Facebook Pages Create More Loyal Customers – I can’t attest to how loyal my Facebook fans are to this site but I can say that my Facebook page is bringing a lot of traffic.
• 4 Ways To Check Your Twitter Statistics – Like stats? Yeah, I don’t either. ;-) But here are 4 ways to check your twitter stats.
• The Definitive Guide To Styling Web Links – Smashing Magazine has a ton of info in this article about making your links look pretty.
• Stop Spammers and Other Scumbags with a Custom Blacklist – A useful blacklist that will help take care of WordPress spammers and remove the need for a spam plugin.
• Funny Signs Group on Flickr – I am easily distracted by photo groups on Flickr. This one is a lot of fun.
• James Earl Jones was the first celebrity guest on Sesame Street. Here’s a bizarre video of him reciting the alphabet.
  
• I’ve been listening to Basia Bulat’s new album recently – well, when I’m not listening to Led Zeppelin. This is one of my favorite songs from it.
  

Post from: (Anti) Social Development

(Anti) Social Lists 2/28/10

Last week I wrote about using the WordPress More tag to control the content displayed on the front page of your blog.

As I mentioned, you can have the More link say anything you want. WordPress also provides a CSS class for the more link that you can use to style it.

When you use the more tag, you are breaking apart the content of the post in a spot that you determine. The content tag will look like this:

<?php the_content('continue'); ?>

Continue is what mine says but you can change the text between the single quotes to say anything you want. That text will be the link. Stratos has also written a tutorial on how you can have the title of your post in the read more link.

WordPress also provides the CSS class .more-link that can be used to style the Read More link.

Mine looks like the following:

.more-link {
	text-align:right;
	float:right;
	font-size:10px;
	width:72px;
	height:17px;
	text-transform:uppercase;
	padding-right:10px;
	margin-bottom:8px;
	background:url(images/b_more.png) no-repeat right top;
}

This is placing the link in the layout, giving it a font size, making the text uppercase, and placing an image behind it. You can use this class to style you link however you want or make it match your theme. This code goes in your style sheet or style.css file.

If you want to learn more about CSS and what you can use to style your links and other features of your blog, W3Schools is a great place to start.

photo credit: Barry Yanowitz

Post from: (Anti) Social Development

How to Style the Read More Link in WordPress

• 100 Amazing Free WordPress Themes for 2009 – Smashing Magazine has gathered a list of the 100 best WordPress themes of this year. And the best part is they are absolutely free.
• Watch the World According to Monsanto Online for Free David, from The Good Human, has posted links to this online documentary. If you want to be seriously disturbed by what Monsanto is doing to our food supply, watch this.
• Design a Stylish Mail Icon in Photoshop A photoshop tutorial for creating a cool looking email icon that even I can follow. ;-)
• 10 Best CSS Practices to Improve Your Code – Just what the title says. If you write your own CSS, this is a great list to follow.
• 30 Untypical WordPress Sites 30 sites that are possibly using WordPress in unusual ways. Maybe half of them really are.
• The One Freelancing Mistake That You Don’t Want to Make The #1 mistake not to make is publicly complaining about a client. The client might just see those words and you will be damaging your professional reputation. If you must complain, I recommend complaining about the off the wall emails you receive from people that you would never ever accept as a client. ;-)
• Things I Learned About WordPress Themes – Ajith has been looking for a new theme and wrote up a great list about what he learned while on his quest. Ajith has since decided to build his own theme.
• Official Footloose Live Open Twitter Thread – Recently William Wolfrum live tweeted the movie Footloose. It was very funny :-) Here is the article with the tweets and videos from the film.
• 100 Resources for Thesis WordPress Theme Users – A huge list of Thesis resources. I’m glad to see these lists being gathered because until recently the information has been scattered or only available on the DIY forums.
• Bunny recently passed away at The Elephant Sanctuary. This video is a remembrance of her life.
  
• I love Tori Amos. Her new album came our recently and I have been listening to it non-stop. This is a performance of Curtain Call from SXSW in March. This is one of my favorite songs on the album.
  

Post from: (Anti) Social Development

(Anti) Social-Lists 5/31/09

Last fall I wrote an article about improving your archives with the Thumbnails for Excerpts plugin. This plugin takes the first screenshot in your article and displays it as thumbnail next to your archives listing. The archives must use the excerpt tag, the_excerpt, in order to display the thumbnail. The plugin also has a number of settings that can be adjusted and a class that can be used in the CSS.

Anyway … now that I’ve added that background information I can move on.

I was asked to make a sidebar block on a non-widgetized sidebar that pulled the last post from a specific category, add a thumbnail image, and a little piece of text below the image. Initially I was going to use custom fields to do this but was a little hesitant.

I haven’t discussed custom fields here very much (or at all) but a lot of site customization can be done with them. If you want to read more about them now, Jeff from Perishable Press, has a great tutorial. But, by using a custom field, the thumbnail image has to be uploaded and the url to it has to be added to the custom field every time a post is written in that category. This isn’t especially hard but it is extra work for the client. And the custom field doesn’t have an image uploader. Alternatively, the image used in the post can be used but a thumbnail resizer plugin needs to be installed, that needs to be used to upload the image, and the url still needs to be added to the custom field for each post.

As I started working on the sidebar block, I discovered that the images being used in the posts weren’t being uploaded. They were being linked to on flickr, much like the way I used the flickr embed code for my posts. So, uploading a thumbnail image or uploading through a thumbnail resizer really wasn’t going to be the best solution without adding a number of extra steps for the user.

I then realized I could use the Thumbnails for Excerpts plugin with Query Posts to create the same functionality as the Custom Fields would. Query Posts would pull the last post from the category and the Thumbnails for Excerpts plugin would make the thumbnail image. The only thing that would need to be added to each post was a small piece of text in the Excerpts field on the WordPress Write Post screen.

Here’s what I did (finally getting to the point here).

1. Installed Thumbnails for Excerpts
2. Added the following Query Post code to the sidebar
   

   <div class="myclass">
   <h2 class="myclass2">title here</h2>
   
   <?php query_posts('category_name=categoryname&showposts=1'); ?>
   <?php while (have_posts()) : the_post(); ?>
   <div class="myclass3"><?php the_excerpt(); ?></div>
   <?php endwhile; ?>
   
   </div>
   

3. I discussed using query post to pull recent posts from one category in an earlier article. This is pulling 1 post from the category.
4. the_excerpt is used for the Thumbnails for Excerpt plugin
5. Wrote the CSS for myclass, myclass2 and myclass3 so the box has the border, the image is centered, the text is centered below the image, etc.
6. A piece of text then needs to be added to the Excerpt field on the Write Post screen. If an optional excerpt isn’t written, the code will put a WordPress excerpt, which is usually about a paragraph, and that is too much code to show in a small sidebar block. The Excerpt field is usually right below the area where you write your article.
7. The image in the sidebar block links to the full post.
8. Every time a new post is published in the specified category, the content in the sidebar block will be replaced.

So, in this example, Thumbnails for Excerpts, Query Posts and the Excerpt field are being used to highlight the last post in a certain category. Here it is for a giveaway. If you want to see it in action visit green LA girl, which is a totally cool urban enviro site for the LA area.

I started this article by briefly mentioning Custom Fields, which many of you may be thinking would be a better solution because it doesn’t rely on a plugin. But this method is SO much easier for the user and only requires that the Excerpt field is used when the post is written. The user does everything else the way she always has and the plugin and the Query Posts code automagically takes care of the rest.

What do you think? Can you think of other uses for this? Now that I set it up I can think of many different ways this could be used on sites.

photo credit: *SΛM

Post from: (Anti) Social Development

Using Thumbnails for Excerpts Plugin with Query Posts to Make a Custom Sidebar Block in WordPress

Last Sunday was International Women’s Day, which I didn’t realize until after the fact but I do have a link about women’s issues this week. I also have tweetdeck tips, operating systems over the years, creating a large website background in CSS, the Hawaiian Chair, USB drives, and a year in 2 minutes.

• Ides of March – March 15th is the Ides of March, which was the day that Julius Caesar was assassinated. Apparently he had been warned to beware of that day and since that time the date has had a sense of foreboding.
• Facts About Women – I somehow missed the memo that last Sunday was International Women’s Day. How nice that we get one whole day on a Sunday. Vered at MomGrind wrote an awesome post about 10 disturbing issues still facing women around the world.
• Realistic Food USB Flash Drives – Well, this was food week at (Anti) Social Development so what better way to end it than silly USB’s that look like food. The shrimp one makes me laugh.
• How to Effectively Follow 15,000 People on Twitter Using These Tweetdeck Tricks Jesse Newhart explains how he effectively follows 15,000 people using Tweetdeck. If you aren’t following him, you should because he posts some great links. @jessenewhart

• How To: CSS Large Background – A great tutorial that explains how to create a large image background and use it on your website using CSS. Now if I could just figure out how to make the awesome flowers.
• Operating System Interface Design Between 1981-2009 – A visual history of operating systems over the last 28 years. It’s interesting to watch Windows become more Apple like.
• One year in two minutes from Eirik Solheim.
  

• A funny video of Ellen demonstrating the Hawaiian chair seen on Infomercials.

Post from: (Anti) Social Development

(Anti) Social-Lists 3/15/09

Well, you can’t see it on this site because I spent a good chunk of my weekend trying to figure out how to get rid of it, but I’ve come up with three ways to get rid of the word “Says” after the commenters name in WordPress 2.7 threaded comments.

The three methods are:

• - Setting the display to none in the CSS class
• - Making the color of says the same as the background color in the CSS
• - Using the callback function to output the html so you can edit it

On wait – you’re in luck – I do have a screenshot from the WordPress default theme in my testing site.

The html output from wp_list_comments creates the Says with the following code:

<span class="says">says:</span>

So, that’s cool – a class named says exists.

The first method is a way to tell the code to not show the class via CSS. You can add the following to your stylesheet.

.says {display:none;}

I did not use this method because it caused alignment of other parts of the comments to be all out of wack. I spent way too much time trying to figure this out and could not track down the problem. Interestingly enough, I have not had the same issues when I’ve set these up for other people so it is possible it will only work properly for me when I’m getting paid to do it. Actually, it’s more likely that I have a css conflict because I mess with it so often.

The second method uses the same class and also gets added to your stylesheet file. This makes the word says the same color as your background so it is basically invisible, although it does still exist. You will use the following:

.says {color:#fff;}

That will make the word Says white, which is my background color. You can set it to whatever color you like. This solution did not work for me either. Most of my comments are in white but my replies as the site author are in green. If you visited my site on Monday you might have noticed the word Says in tiny little white letters on my replies. This solution will work great if all the comments are the same color. I almost removed the green, even though I’ve frown attached to it, until I tried solution #3.

The method that I used was the callback function, which is mentioned in the codex without much explanation and also detailed at ScriptyGoddess.

In comments.php you change

<ol class="commentlist">
<?php wp_list_comments(); ?>

to

<ol class="commentlist">
<?php wp_list_comments('type=comment&callback=mytheme_comment'); ?>

This will call a function from your functions.php file that allows you to control the html output from wp_list_comments. So, add the following to your functions.php file.

<?php
function mytheme_comment($comment, $args, $depth) {
   $GLOBALS['comment'] = $comment; ?>
   <li <?php comment_class(); ?> id="li-comment-<?php comment_ID() ?>">
     <div id="comment-<?php comment_ID(); ?>">
      <div class="comment-author vcard">
         <?php echo get_avatar
($comment,$size='48',$default='<path_to_url>' ); ?>

         <?php printf(__('%s</cite>
<span class="says">says:</span>'), get_comment_author_link()) ?>
      </div>
      <?php if ($comment->comment_approved == '0') : ?>
         <em><php _e('Your comment is awaiting moderation.') ?></em>
         <br />
      <?php endif; ?>

      <div class="comment-meta commentmetadata"><a href="<?php echo
htmlspecialchars
( get_comment_link( $comment->comment_ID ) ) ?>">
<?php printf(__('%1$s at %2$s'), get_comment_date(),
get_comment_time()) ?></a><
?php edit_comment_link(__('(Edit)'),'  ','') ?></div>

      <?php comment_text() ?>

      <div class="reply">
         <?php comment_reply_link(array_merge
( $args, array('depth' => $depth, 'max_depth' => $args['max_depth']))) ?>
      </div>
     </div>
<?php
        }

The part of this code that I am interested in for the purpose of this article is

<span class="says">says:</span>

By removing that line from the callback function, says will no longer be part of the comment output. You don’t have to remove it. You can change says to another word or phrase.

This code was contained within the comments.php file in versions prior to 2.7 and it was simply a matter of deleting it from the file.

photo credit: bcostin

Post from: (Anti) Social Development

How to Remove “Says” From WordPress 2.7 Threaded Comments

Probably one of the most talked about features of 2.7 is that threaded comments are built in. A plugin is no longer required for this functionality.

The problem is that it takes more that simply upgrading to 2.7 for this feature to be available. If you’ve got a brand new 2.7 ready theme then, yes, threaded comments will work. If not, you will need to make the theme “2.7 ready”.

So, you’re in luck because I’m going to walk you through the steps. I’m not sure if I like the way they look but I do like the functionality. I have saved my original files in case I decide to revert back.

Ok – here we go

1. Backup or copy the following theme files: header.php, style.css and comments.php We are going to be editing these three files so we want to have the originals in case something goes wrong. And believe me – I was glad I had mine when I made the threaded comments for this site.
2. Make a copy of the comments.php file in the default theme that comes with 2.7. Actually, I never upgrade the themes either so here’s a copy of it to download.
3. Go to Settings > Discussion and check the box that says “Enable Threaded (nested) Comments”. You can also set how my levels of threading you allow. It defaults to 5.

   

4. Go to Appearance > Editor and open header.php. Add the following code.
   

   <?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>
   

   Add it directly above this

   <?php wp_head(); ?>
   

   And save the file.

5. Got to Appearance > Editor> Comments.php. How you handle the next part is up to you and in how comfortable you are in editing your theme files. I replaced my comments.php code with the code from the comments.php file in the 2.7 default template. If your comments page is standard and not heavily customized, this may be all you need to do. Or, if your comments form is very customized, you may need to add code to the template that you just replaced. For example, my comment form was misaligned because the default comment form doesn’t use the same css classes that I do. My submit button uses a class called Cbutton so I needed to add that to the comments.php template. If you are more comfortable editing the theme files you can compare yours to the new 2.7 comments files and make the necessary changes. Personally I found it easier to replace the file and then adjust as needed. Some of the components in the new code are absolutely necessary and threaded comments won’t work without it.
6. But let’s take a look at some of the primary differences. The previous pre 2.7 comments file started with
   

   <?php // Do not delete these lines
   if ('comments.php' == basename($_SERVER['SCRIPT_FILENAME']))
   die ('Please do not load this page directly. Thanks!');
   
   if (!empty($post->post_password)) { // if there's a password
   if ($_COOKIE['wp-postpass_' . COOKIEHASH] != $post->post_password) {
   // and it doesn't match the cookie
   			?>
   
   <p class="nocomments">This post is password protected. Enter the
   password to view comments.
   
   <?php
   			return;
   		}
   	}
   ?>
   

   The beginning of the new comments files looks like this.

   <?php
   /**
    * @package WordPress
    * @subpackage Default_Theme
    */
   
   // Do not delete these lines
   if (!empty($_SERVER['SCRIPT_FILENAME']) && 'comments.php' == basename
   ($_SERVER['SCRIPT_FILENAME']))
   die ('Please do not load this page directly. Thanks!');
   
   if ( post_password_required() ) { ?>
   <p class="nocomments">This post is password protected.
   Enter the password to view comments.
   
   <?php
   		return;
   	}
   ?>
   

   Now, I am the first to admit that I don’t completely understand that code. I’m content knowing that I need the second one and using it. It is a password protection check and WordPress now has a function for it rather than accessing the cookie directly.

7. The primary change is the comments loop. The old method used a foreach statement and went through all of the comments one by one and output them manually. It could also be difficult to manage with a lot of theme customization. Believe me on that one – that is what took me so long to include threaded comments on my site. The new comments look also includes the have comments function rather than doing a check on the global comments variable. So, the comment look used to look like this.
   

   <?php if ($comments) : ?>
   	<h3 id="comments"><?php comments_number
   ('No Responses', 'One Response', '% Responses' );?> to “
   <?php the_title(); ?>”
   
   <ol class="commentlist">
   <?php foreach ($comments as $comment) : ?>
   <li <?php echo $oddcomment; ?>id="comment-
   <?php comment_ID() ?>">
   <cite><?php comment_author_link() ?></cite> Says:
   <?php if ($comment->comment_approved == '0') : ?>
   <em>Your comment is awaiting moderation.</em>
   <?php endif; ?>
   <br />
   <small class="commentmetadata"><a href="#comment-
   <?php comment_ID() ?>" title=""><?php comment_date('F jS, Y') ?> at
    <?php edit_comment_link('edit','  ',''); ?>
   </small>
   <?php comment_text() ?>
   </li>
   <?php
   /* Changes every other comment to a different class */
   $oddcomment = ( empty( $oddcomment ) ) ? 'class="alt" ' : '';
   ?>
   <?php endforeach; /* end for each comment */ ?>
   </ol>
   

   And now it looks similar to this.

   <?php if ( have_comments() ) : ?>
   	<h6 class="postcomment clear"><?php comments_number
   ('No Responses', 'One Response', '% Responses' );?> to “
   <?php the_title(); ?>”</h6>
   
   
   	<ul class="commentlist">
   	<?php wp_list_comments( ); ?>
   <br />
   	</ul>
   <?php endif; ?>
   
   	<div class="navigation">
   		<div class="alignleft"></div>
   		<div class="alignright"></div>
   	</div>
    <?php else : // this is displayed if there are no comments so far ?>
   
   	<?php if ('open' == $post->comment_status) : ?>
   		
   
   	 <?php else : // comments are closed ?>
   		
   		<p class="nocomments">Comments are closed.
   
   	<?php endif; ?>
   

8. The heart of this, of course is the wp_list_comments() function. This outputs the comments, the html and provides the classes to assist with styling. It is wrapped in

   <ol> </ol>

   I changed mine to

   <ul></ul>

   because I did not want a numbered list. So, speaking of styling … what classes are gifted to us with this function?

9. This list is from Stylizing Threaded/Nested Comments in WordPress 2.7 by Chris Harrison. You certainly don’t need to use all of them but you will want to use some of them. It is also very likely that your style sheet code will already be dealing with commentlist and you won’t need to change a thing. At the end of this list, I’m going to mention one that I have found especially useful.

   ol.commentlist {}
   ol.commentlist li {}
   ol.commentlist li.alt {}
   ol.commentlist li.bypostauthor {}
   ol.commentlist li.byuser {}
   ol.commentlist li.comment-author-admin {}
   ol.commentlist li.comment {}
   ol.commentlist li.comment div.comment-author {}
   ol.commentlist li.comment div.vcard {}
   ol.commentlist li.comment div.vcard cite.fn {}
   ol.commentlist li.comment div.vcard cite.fn a.url {}
   ol.commentlist li.comment div.vcard img.avatar {}
   ol.commentlist li.comment div.vcard img.avatar-32 {}
   ol.commentlist li.comment div.vcard img.photo {}
   ol.commentlist li.comment div.vcard span.says {}
   ol.commentlist li.comment div.commentmetadata {}
   ol.commentlist li.comment div.comment-meta {}
   ol.commentlist li.comment div.comment-meta a {}
   ol.commentlist li.comment  {}
   ol.commentlist li.comment div.reply {}
   ol.commentlist li.comment div.reply a {}
   ol.commentlist li.comment ul.children {}
   ol.commentlist li.comment ul.children li {}
   ol.commentlist li.comment ul.children li.alt {}
   ol.commentlist li.comment ul.children li.bypostauthor {}
   ol.commentlist li.comment ul.children li.byuser {}
   ol.commentlist li.comment ul.children li.comment {}
   ol.commentlist li.comment ul.children li.comment-author-admin {}
   ol.commentlist li.comment ul.children li.depth-2 {}
   ol.commentlist li.comment ul.children li.depth-3 {}
   ol.commentlist li.comment ul.children li.depth-4 {}
   ol.commentlist li.comment ul.children li.depth-5 {}
   ol.commentlist li.comment ul.children li.odd {}
   ol.commentlist li.even {}
   ol.commentlist li.odd {}
   ol.commentlist li.parent {}
   ol.commentlist li.pingback {}
   ol.commentlist li.pingback div.comment-author {}
   ol.commentlist li.pingback div.vcard {}
   ol.commentlist li.pingback div.vcard cite.fn {}
   ol.commentlist li.pingback div.vcard cite.fn a.url {}
   ol.commentlist li.pingback div.vcard span.says {}
   ol.commentlist li.pingback div.commentmetadata {}
   ol.commentlist li.pingback div.comment-meta {}
   ol.commentlist li.pingback div.comment-meta a {}
   ol.commentlist li.pingback  {}
   ol.commentlist li.pingback div.reply {}
   ol.commentlist li.pingback div.reply a {}
   ol.commentlist li.pingback ul.children {}
   ol.commentlist li.pingback ul.children li {}
   ol.commentlist li.pingback ul.children li.alt {}
   ol.commentlist li.pingback ul.children li.bypostauthor {}
   ol.commentlist li.pingback ul.children li.byuser {}
   ol.commentlist li.pingback ul.children li.comment {}
   ol.commentlist li.pingback ul.children li.comment-author-admin {}
   ol.commentlist li.pingback ul.children li.depth-2 {}
   ol.commentlist li.pingback ul.children li.depth-3 {}
   ol.commentlist li.pingback ul.children li.depth-4 {}
   ol.commentlist li.pingback ul.children li.depth-5 {}
   ol.commentlist li.pingback ul.children li.odd {}
   ol.commentlist li.thread-alt {}
   ol.commentlist li.thread-even {}
   ol.commentlist li.thread-odd {}
   

10. Keep in mind that I wrapped my function in an unordered list so I changed all the ol in the above styles to ul.
11. ul.commentlist li.bypostauthor {} This is very cool. I can set the color of my comment replies to be different than the rest of the comments. I’m not sure if it’s me but I couldn’t get assigning a background color to work so I did it with a very small repeating image. My full code looks like
    

    ul.commentlist li.bypostauthor {background: url(http://pathtomyimages/
    comment-bg.gif) repeat-x !important;}
    

    To insure that all other comments are white I set ul.commentlist li.comment {} to white

    ul.commentlist li.comment { background-color:#fff;}
    

    This is so much easier than the way I had my comment colors set before.

I’m guessing that most of you are napping by now or have moved on. Over the weekend I struggled with the word ‘Says’ that the wp_list_comments() function adds in it’s html output after the name of the commentor. I didn’t want that word there and found that it wasn’t that easy to remove. Carla, from Green & Chic, mentioned this too so tomorrow I am going to discuss three possible ways to remove this from your threaded comments.

Also, you can leave a comment, use the threading, and marvel at my brilliance ;-)

photo credit: Buttersweet

Post from: (Anti) Social Development

Adding WordPress 2.7 Threaded Comments to your Theme

On Monday I finally found the sticky setting and on Wednesday I showed you how to add the post class to your template so that your sticky post would actually show up on the page.

Today I am going to show you how to style the sticky post. You might want it to look different from the rest of the posts, stand out in some way or not include the date.

Since we have already added the post class to our template, styling the sticky post only requires a little bit of CSS in the style sheet template.

Post class adds the class sticky. So to style the sticky post, add the following to your style sheet:

.sticky {

}

Of course, we need to add some more CSS to that for anything to look different with the sticky post.

On my elephant website, I have the following code:

.sticky {
background:#fff8dc;
border: 1px solid black;
margin-bottom: 7px;
}

This gives the sticky post a yellow background, a thin black border, and a margin at the bottom so the posts don’t bunch together. A regular post looks like this.

A sticky post looks like this.

If you are very observant, you will see that the sticky post does not have the date in it. This is done with conditional code within the loop. I know you’re excited, but that will have to be the topic of another article.

Post from: (Anti) Social Development

How to Style a Sticky Post in WordPress 2.7

If you would like to frame the images in your blog posts like the one to the right, all you need to do is add a couple of lines to your CSS file and add the class attribute to your image tags. Don’t worry, don’t worry! I plan to provide step by step instructions.

Once this is set up, all of your images will be framed and padded in the same way, which really helps in making a blog look more professional.

OK – here we go!

**Note – I am using the most current version of WordPress. If you are using 2.3 or lower, some of the settings in the Admin area may be in different locations. Also, please upgrade!! If you need assistance with that, send me an email or a direct message on Twitter and we can discuss. My contact information is in the sidebar to the right.

1. Go to Design > Theme Editor > styles.css
2. Copy all of the text in this file and paste it into Word or your preferred text editor. I always back up the original in case I make a mistake or don’t like the changes. The backup allows me to quickly paste the original text back into the file.
3. Add the following code to your style sheet and save

.left { float:left; }
.right { float:right; }
.frame { border: 2px solid #aaa; padding: 10px; }
img.left { margin: 0 10px 10px 0; }
img.right { margin: 0 0 10x 10px; }

4. If you are unable to save and get the message in the screenshot below, you have a permissions issue with your theme files. I am not discussing permissions in this article but feel free to leave a comment or send me an email and I’ll let you know how to fix this.

5. Now you want to write a new post. Add an image. If you use the visual text editor, switch to the HTML one for the next part.
6. The following is an example of html code for your image.

[sourcecode language='html'][/sourcecode]

7. In order to use the css code we added to your style sheet, add the following to the image code.

class=”left frame”

8. If you want the image placed on the right rather than the left, than simply change the word left in the code to right.
9. The image code will now look like:

[sourcecode language='html'] height="31" class="left frame" />[/sourcecode]

10. All of your images will have the same frame, if you add this class attribute to the image tag.
11. You can change the way the frame looks by editing the code that we added to the css file. For example:

.frame { border: 2px solid #aaa; padding: 10px; }
You can make the frame border bigger or smaller by changing the 2px to a different number. Or you can change the color of the frame be editing the #aaa hex code.

That’s all there is to it. Just add a couple of lines to your style sheet and the class attribute to your image code and you will have professional framed images throughout your site.

photo credit: sveinhal

Post from: (Anti) Social Development

How to Frame Images in WordPress Posts with CSS