My problem, or maybe it is just a preference, is that I do not like teeny-tiny 16×16 icons. I want large in-your-face icons that just shout out “click me now”.

The current design is great for a location inline with your post heading. But the Sociable block of code follows your post or page content.

Assuming that your reader has ventured to the end of the post and has been interested, then shout at him/her with larger-than-life calls to action. Make it easy for them to see the buttons, do not dim them. Make them want to click that button now!

First replace the default icon set, two methods

Venture around on the web and look for a set of social bookmarking icons that will fit in nicely with your theme. There are several free icon sets out there – Google it. Or, you could just create your own (I can’t, not that graphically talented.)

Once you have found your icon set, rename image filenames to match the Sociable icon filenames. You may do this to none, some, or all of the files. Depends on the set.

Method One: Upload all of the new icons to the Yoast Sociable image directory, directly overwriting them. Keep a backup of your new icons for safe keeping in case Sociable update resets or you want to use for other theme designs.

Sociable image directory can be found in:

 (WPInstallDirectory)/wp-content/plugins/sociable/images

Method Two: Create a directory for your new icons inside of the Yoast Sociable image directory.

Open and edit main Sociable file sociable.php per the following:

// Find the following line around line 600:
$imagepath = $sociablepluginpath.'images/';

// Revise $imagepath to point to new directory
$imagepath = $sociablepluginpath.'images/newdirectoryname';

Hey Joost: It would be great to allow the user to set a custom directory for icon image sets. It would extend Sociable very nicely, allowing people to plop image sets in easily.

Image filetypes: The image filetypes of your custom icon set may not match the hard coded filetypes in the Sociable plugin. Filetypes are mostly PNG though, with some GIFs here & there.

You can either convert your icon to the Sociable image type, or edit the plugin code

I was lazy and edited the plugin! But you should probably convert to the correct type, and preserve the transparent areas of the image as well.

Another suggestion: Since most freely available icon sets on the Internet are PNG format, perhaps converting all icons in the default Sociable set to PNG? This would facilitate easy swapping of PNG icon sets. Might even spur some graphically talented individuals to develop sets for Sociable — that would be kewl.

And now, the CSS for “in-your-face”

This is the easy part.

First go into WpAdmin->Settings->Sociable and make sure the option for using the Sociable stylesheet is unchecked. Save your settings.

Add the following into your main theme stylesheet:

/*---:[ Yoast Sociable Plugin ]:---*/
.sociable { margin: 16px 0; text-align: center; background-color: #dcdcdc; border: 1px solid silver; padding: .7em 0; }
.sociable_tagline { padding-bottom: .7em;  font: bold 1.6em Verdana, Geneva, Arial, Helvetica, sans-serif;}
.sociable ul {  display: inline; margin: 0 !important;  padding: 0 !important; }
.sociable ul li {display: inline !important;  list-style-type: none; margin: .3em; padding: 1px;}
.sociable img {width: 48px; height: 48px;  }

.sociable-hovers {opacity: 1;  -moz-opacity: 1;filter: alpha(opacity=40);}
.sociable-hovers:hover {opacity: .45;-moz-opacity: .45;filter: alpha(opacity=100);}

.sociable a { border:0 !important; }      
.sociable a:hover {background-color: #dcdcdc; }  

Feel free to edit CSS to your own preference. This is just a basic, not hard to notice type of style.

Play close attention to the width/height of .sociable img class. I am using 48×48 here. If you have a lot of icons, you may want to adjust .sociable img to 32×32, thereby reducing the 48’s if you get squeezed for space.

I suggest using only buttons for the social sites you frequent regularly, if at all possible, plus a couple of the biggies & email. Focus on your crowd and give them the buttons they know and want to see. Too many choices for your users, and they may not notice their call to action.

You will also notice that I reversed the hover opacity. It is set to be fully visible, and will fade when hovered over. The reasoning is that some people, myself included, find it hard to see what is there without hovering over each icon individually only to find out there is no Stumble or whatever.

Hopefully, this will make it easier on your readers (less difficult actually) and will spur more clicking from them. You want them to smack that button, so show it off. Dimming and diminishing the size of these icons seems counter-productive, silly.

And feel free to test these buttons for me right now.

<style type="text/css">.recentcomments a{display:inline !important;padding: 0 !important;margin: 0 !important;}</style>

Ever wonder how it got there, and how to get rid of it?

The inline style gets injected into the head section when you use the Recent Comments widget. The widget applies a filter to wp_head() when it is activated.

In order to get rid of the inline style, short of modifying the core file (not advised), is to apply a filter of our own. Let’s get to work on that.

Move the styling to your theme style.css file

Copy the following code to your theme css file:

.recentcomments a{display:inline !important;padding: 0 !important;margin: 0 !important;}

Add a filter to remove a filter

Yep, seems a little crazy, but we are going to add a filter to remove the stock WordPress filter.

Add the following to your theme functions.php file:

function remove_wp_widget_recent_comments_style() {
   if ( has_filter('wp_head', 'wp_widget_recent_comments_style') ) {
      remove_filter('wp_head', 'wp_widget_recent_comments_style' );
   }
}
add_filter( 'wp_head', 'remove_wp_widget_recent_comments_style', 1 );

The second argument is the callback to our custom filter, remove_wp_widget_recent_comments_style().

The third parameter is the priority of when our filter will get processed. We are setting this to 1 to insure that it takes priority over the WordPress core function. If this argument is too higher of a number, then we run the risk of our filter not taking precedence.

Our custom filter is simple, it first checks to see if the WordPress filter is present. If it is present, then we simply remove the filter. The remove_filter() function takes the same arguments as add_filter()

Some thoughts

While the inline style does not hurt anything, some purists just hate seeing it there in the first place. It is one of those quirky things that WordPress code does to you.

The remove_filter() WordPress function can come in handy for other things that bug the heck out of you. One example would be the curly quotes that replace normal quotes inside of your posts and pages.

You can remove the wptexturize filter from any of the following hooks for example:

remove_filter('category_description', 'wptexturize');
remove_filter('list_cats', 'wptexturize');
remove_filter('comment_author', 'wptexturize');
remove_filter('comment_text', 'wptexturize');
remove_filter('single_post_title', 'wptexturize');
remove_filter('the_title', 'wptexturize');
remove_filter('the_content', 'wptexturize');
remove_filter('the_excerpt', 'wptexturize');

You can think of remove_filter is to WordPress, as reset.css is to style sheets. Wonderful world it is.

The list is in no particular order. It is first found, first listed. Newer findings at the end.

• Tutorial Outpost Digg style bookmarking site.
• Good-Tutorials.com User submitted and ratings site.
• PhotoshopCAFE Ugly site. Active forum area.
• Photoshop Tutorials Slightly dated, but original tutorials.
• Photoshop From Tutorialized User submission and rating site.
• CreativePro Photoshop Articles Original, but slightly dated.
• Photoshop for Photographers A few digital photography tips (CS2, CS3)
• Axialis Tutorials Integration with Axialis products.
• HeathRowe Photoshop Tutorials Basic tips and tricks. Outdated.
• TeamPhotoshop Tutorials & Tips Original submissions and user forum.
• Grafika PS Tutorials (Czech) Original tutorials (Czech only).
• BioRust PS Tutorials Original tutorial community.
• CBT Cafe PS Tutorials & Articles Wide topic range. Some video tutorials.
• Photoshop Lover Submission and rating site. Massive.
• Planet Photoshop Tutorials Excellent, original. And in video!
• Computer Darkroom Misc. digital photography tutorials. Still being updated.
• Phong PS Tutorials Very detailed.
• Magic Pixel PS Workshop Very dated.
• Informit Photoshop Articles Sample chapters from popular books.
• Digital Photography Tutorials Dated, but good digital photo information.
• The Makeshift Miracle Tutorials Techniques from a cartoonist.
• Shanzcan Photoshop Tutorials Downloadable tutorials. Somewhat dated.
• Photoshop Brushes Tutorials More than just brushes. Seems to be updated.
• GrafX Design PS Tutorials Original tuts, updated on a regular basis.
• Pegaweb PS Tutorials Very original. Retro-web effects too.
• RetouchPRO Tutorials Restoration and retouch techniques.

The new kids on the block.

• PhotoshopTutorials.ws Includes Elements. Plans for older versions of PS.
• Layers Magazine Photoshop Tutorials How-to for everything Adobe.
• PhotoshopStar Very original and lesser known gem.
• PSDTuts Original. Paid submissions. Very popular.
• Absolute Cross Original and organized.
• Free Online Classes Original and easy to follow.
• Abduzeedo Original tutorials and design inspiration.
• PSHero.com Original tutorials, custom shapes and more.
• Tutorial9 Original, with photography tutorials.
• Photoshop Talent Exclusives Large community driven site, with contests.
• Adobe Tutorialz Original. Includes photo editing techniques.
• Maciej Kwas Young talent from Poland.
• PSD Fan Original and very active.

There are probably more out there than listed above. If you have a suggestion to add to the list, drop a comment below.

There are a couple of avenues you can take to get a handle on this twitter overload. Probably more than a couple, but I will cover two of them right now.

Group your tweets with TweetDeck

If you haven’t heard of TweetDeck, then it is worth investigating. TweetDeck has a neat feature for creating groups. Once a group is created, then you can add any of your tweeps to the group.

I have a few groups. One in particular is a group that I labeled uber-friends. This group displays tweets from people that I really want to follow daily.

Another group I have for technical Php broadcasts from places such as Zend and other noteworthy people or sites. This type of group is just great for daily goings-on in the Php sector.

I have other groups, but I think you can get the idea of how groups in TweetDeck can work to your advantage.

Filter your tweets with Twitter Throttle

If you are used to your web based Twitter home page and want a viable solution for filtering out the noise, then I would suggest a new GreaseMonkey script for Firefox called Twitter Throttle by Jon Fox.

Twitter Throttle hides multiple tweets from the same person. Hidden tweets have an ‘expand’ link so you can still view the tweet if you wish.

If two or more tweets in a row are from the same person, then it will group all of those tweets into a single hidden, and expandable, box. If this is the case, the leftover room from the consolidated tweets are filled in with previous tweets until 20 lines of tweets are filled.

Setting up Twitter Throttle is fairly easy, if you are used to working with GreaseMonkey scripts. The only thing you need to edit in the script would be your username and password.

How do you filter through the noise?

If you have any hints or tips on how you use Twitter more efficiently and filter through the noise, drop a comment below. I would be interested in knowing your thoughts.

Oliver Twardowskis Flavour icon set

One restriction does apply, depending upon the icon package author, you cannot redistribute, sell, or provide a download service for the icon packages.

The aim of this site is simple. We list a whole bunch of icons which are all great to use for your web development projects. But we are different to other icon-related websites because we only list icons which you can use for free on personal AND commercial projects AND without having to provide back-links/credit to the author. These types of icons can be tough to find, so here is a list for your convenience!

While no backlinks or attributions are required to use the icon packages, you are encouraged to donate to the author. Or at the least, give them some credit where credit is due in the form of a backlink recognizing their efforts.

All icons are free to use at the time of their posting to the website, but it is still your responsibility to confirm the license and any restrictions of the icons via the authors website before using them in any project.

Hat tip to @nourayehia via Twitter.

Since you can define a function that can be used in several template files of your theme, a useful function to have around would be breadcrumbs. Breadcrumbs are a user-friendly navigation tool to complement your blog with. They are also good for internal linking structure, which is a sound SEO practice.

Organization First

We can write new functions and place them inside functions.php without any problems. However, as we will be writing more functions in the future, this file will start to grow. The file will become bloated, unorganized, and harder to manage.

We will use functions.php to include another function file. This external file will contain our breadcrumbs function, and other functions that are related to it. One related function for breadcrumbs will be a helper function that will generate the Html for anchor links (more on this later).

Also, instead of cluttering the main theme directory with all of our new function files, we will create a subdirectory to store them all in. This will have the added benefit of moving the entire directory into other theme designs without having to dig around looking for them in the main theme directory.

Structuring Directories and Files

Create a subdirectory inside of your main theme directory named /functions/.

Inside the new subdirectory, create a blank file named template-functions.php. We could have named this new file breadcrumbs.php, but I am planning on adding more template functions in the future.

Insert the following code into the newly created template-functions.php file and save it:

<?php

/***********************************************************
* wsf_breadcrumbs() - Shows breadcrumbs in template
***********************************************************/
function wsf_breadcrumbs() {
}

/***********************************************************
* Helper Functions for template coding
***********************************************************/
function wsf_make_link () {
}

 ?>

Right now, the functions in this file do not do anything. Don’t worry, we will be fleshing that all out below.

Also note that I prefixed my function names with wsf_. All of my functions will be prefixed this way. The reason is to avoid any conflict with pre-existing functions or plugins.

Hopefully this prefix is an unique one, and makes sense where it is coming from — in this case, wsf_ stands for WebStractions Function. Feel free to use your own prefix in place of this one.

Open up the functions.php file inside your theme directory. Most themes should have this file. If yours does not, create it.

From this point on, I am assuming that you have a basic grasp of coding Wordperfect templates and some knowledge of how Php works. Remember that Php statements must reside between the <?php and ?>

Near the top of the functions.php file, and after the opening <?php tag, add the following line of code:

   require_once('functions/template-functions.php');

Template Helper Functions

Breadcrumbs contain at least one link, or they can contain many links. Each step in building the breadcrumbs involves repetitive Html coding for anchor links.

Lets create a helper function to dynamically create the Html for the anchor link and add in some optional goodies along with it.

Edit your functions/template-functions.php file for the wsf_make_link function:

/***********************************************************
* Helper Functions for template coding
***********************************************************/
function wsf_make_link ( $url, $anchortext, $title=null, $nofollow=false ) {
   if ( $title == null ) $title=$anchortext;
   $nofollow==true ? $rel=' rel="nofollow"' : $rel = ''; 
 
   $link = sprintf( '<a href="%s" title="%s"%s>%s</a>', $url, $title, $rel, $anchortext );
   return $link; 
}

This helper function takes two required parameters and two optional parameters. They are pretty much self-explanatory and you will notice that extra goody for setting the relationship of the link to Nofollow.

The helper function formats the parameters into a string variable and returns that variable for you to process further. Let’s put this function to work in our breadcrumbs function now.

The breadcrumbs() Template Function

Edit your functions/template-functions.php file for the wsf_breadcrumbs function:

The breadcrumbs function takes two optional parameters for the crumb separator and the label which gets pre-pended. Hopefully this is all pretty much explanatory.

Currently this function will only work on single post pages and pages that you create by hand.

For single posts, this function will look like the breadcrumb at the top of this page. If I have a post that contains more than one category, then they all will be listed and separated by a comma. (Ugly, I know. Will work on a better method in the future).

For your hand generated pages, there is a loop that will recursively step through the hierarchy of parent categories. You can have a page nested three, four, or more levels deep and this loop will follow it all the way back to the top.

In the future I plan on adding loops for tags, categories, archives, etc. But for now, the two biggies are here.

Using Your breadcrumbs() Function in a Theme

This is easy to plug into any theme. Since breadcrumbs will only show up for single posts and custom pages, you will only need to add the function to your single.php and page.php files.

Add this line in your theme file where you want the breadcrumbs to appear:

   <?php wsf_breadcrumbs('&raquo;','You are here') ?>

That will generate a breadcrumb like this:

Kewl, eh?

That is about all there is to it. You just wrote some functions that you can re-use in all of your Wordpress themes. Congratulations!

If you have any problems with this, let me know with a comment below.

My plugin of choice right now is Scott Reilly’s Preserve Code Formatting. Scott’s plugin prevents modification by WordPress and other plugins while retaining original whitespace and characters.

I looked at other plugins that included syntax highlighting, but quickly dismissed them. Syntax highlighting produces a ton of inline style spans wrapping the code fragments, and frankly, my choice of styling choices may not agree with your choices.

Now I can just paste code into <code>, <pre>, and/or other tags I can additionally specify and this plugin will:

• Prevent WordPress from HTML-encoding text (i.e. single- and double-quotes will not become curly; -- and --- will not become en dash and em dash, respectively; ... will not become a horizontal ellipsis, etc)
• Prevent most other plugins from modifying preserved code
• Optionally preserve whitespace (in a variety of methods)
• Optionally preserve code added in comments

One caveat with the plugin is that you turn of the Visual Editor in your Wordpress settings. No biggy, I do this anyway.

Another quirk to the plugin is that it appears that the code block seems to get double wrapped with the <pre> tag. Why it does this, I do not know. But I took advantage of the quirk in my style sheet to apply a border effect.

   <pre>     /* additional <pre> element added to Html output */
      <pre>  /* start of my post's code snippet */
         ... my code snippet sample here
      

The option to preserve code in comments (on by default) was left on. This will come in handy for any commenters who wish to leave sample code snippets if they wish. So give it a try, that will be kewl to do.

Leave a comment if you are using this plugin and tell me about it. Or another plugin that you are using. Will be interested in seeing some samples in action.

Via xkcd – A Webcomic. Hat tip to Matthew.

My goal was simple — suppress the Blogroll and Meta sections in the sidebar for any page except the Home Page. Logically, I thought, just surround the sections with the conditional tag is_home() should accomplish this simple feat. The Wordpress Codex even has a dynamic sidebar example for the use, pretty straight forward.

Take the following snippet of sidebar code for example. I am displaying a list of recent posts, immediately followed by the conditional blogroll.

<ul class="sidebar_list">
   <li class="widget">
      <h3>Latest Blog Entries</h3>
      <ul>
      <?php query_posts('showposts=10'); ?>
      <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
         <li><a href="<?php the_permalink() ?>"><?php the_title() ?></a></li>
      <?php endwhile; endif; ?>
      </ul>
   </li>
   <?php if(is_home() && !is_paged()): ?>
   <li class="widget">
      <h3>Blogroll</h3>
      <ul>
      <?php  wp_list_bookmarks('title_li=&categorize=0'); ?>
      </ul>
   </li>
   <?php endif; ?>
</ul>  

The above code returns true for is_home() on each and every non-home page or post. Why is that? This is where I lost quite a bit of hair, mostly from the left side of my head and therefore most of the insulation to the thinking part of the brain. Good thing the heat works around here.

It took quite a lot of searching. This is not an easy thing to Google for, but eventually came across some answers.

The culprit in the code was the use of query_posts() in the recent posts widget. If I swapped the positions of the two widgets, is_home() functioned correctly. The query_posts() function has an obscure little bug if you do not destroy it properly with a call to wp_reset_query().

There isn’t any documentation on wp_reset_query() in the Codex, so I will cite the comment heading from the Wordpress core file, query.php, which this function is from:

wp_reset_query() destroys the previous query and setup a new query. This should be used after query_posts() and before another query_posts(). This will remove obscure bugs that occur when the previous wp_query object is not destroyed properly before another is setup.

So I added that function immediately following the endwhile in the recent comments widget, and bam, everything was right in the universe again.

      ....
      <?php query_posts('showposts=10'); ?>
      <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
         <li><a href="<?php the_permalink() ?>"><?php the_title() ?></a></li>
      <?php endwhile; endif; ?>
      <?php wp_reset_query(); ?>
      ....

Searching for references to wp_reset_query() in the Wordpress core files reveals only one instance of usage. That instance, oddly enough, is in the widget.php function for displaying the recent entries widget. Imagine that!

Reviewing the code, however, I made another discovery. Instead of using query_posts(), they create a new WP_query object to cycle through the posts and generate the recent entry list items. They use the new object in order to preserve the original query in the main loop, the loop that displays your posts on page. More importantly, the new object preserves the values of is_home() and other conditional tags — the use of wp_reset_query is really not needed here. Seems to be a left over from a previous version and not edited out of the core code.

In order to do this the wordpress-ian way, I recoded my sidebar widget for recent posts (sans wp_reset_query):

<li class="widget">
   <h3>Latest Blog Entries</h3>
   <ul>
      <?php $r = new WP_Query(array('showposts' => '10', 'what_to_show' => 'posts', 
           'nopaging' => 0, 'post_status' => 'publish', 'caller_get_posts' => 1)); ?>
      <?php if ($r->have_posts()) : while ($r->have_posts()) : $r->the_post(); ?>
      <li><a href="<?php the_permalink() ?>"><?php the_title() ?></a></li>
      <?php endwhile; endif; ?>
   </ul>
</li>

If you follow my logic in tracking down this little bugger, you will notice that my first resource to check was the conditional tag documentation in the Codex. Sadly, there is no mention of the consequences you will encounter by using query_posts() which alters the original page loop.

The WP support forum is filled with questions of ‘why is this not working’. Some go unanswered, some they fix and leave no reason how, some get the ‘review the conditonal tags documentation’ buddy, and so on. It took a lot of searching to get a whiff of what I needed to do to correct the situation.

My suggestion is to at least insert a caveat into the documentation for conditional tags warning of what will happen to those tags if another query_posts() is called. This is the first place people will actually look for help after all. And it would probably save a lot of people’s time in the long run, not only the people seeking it, but the people offering a solution as well.

UPDATE: The discussion for the creation of wp_reset_query() function can be found at http://trac.wordpress.org/ticket/4741 if you are interested. Thanks to Stephen’s post Automated Indexes and wp_reset_query() at Nerdaphernalia for pointing this out.

I am now starting from scratch with Wordpress 2.7 — this is the first time I have used this later version. The backend Admin area was totally rearranged. I rather like it though, especially the way Posts are laid out. It felt more comfortable to use to me.

What follows is an abstract for some of the high-points during the creation of this blog. More for documentation purposes, and in the future will be updated to include links to newer posts in which I can go into more detail.

Wordpress Settings

Moved Wordpress to the root domain per Codex article.

Turned off the Visual Editor in profile settings.

Custom structure for Permalinks /%category%/%postname%/

Wordpress Plugins

Akismet, of course.

That is about it. Pretty much lean and mean.

Wordpress Theme (Webstractive)

Early stages of theme development

Future Work

Will update this post as needed, add in screenshots, document procedures, etc. yada, yada. As mentioned in my inaugural post, there is an undocumented ’snafu’ with the is_home() and is_front() functions in the WP core – more on that later too.