Customizing K2: Part 3

Part 1 and Part 2 were swell but Part 3 has a penchant for being naughty. If this is your first time reading one of these tutorials, you should go back and read or skim over the first two. These tutorials deal with the popular K2 theme/mod for WordPress as developed by Michael Heilemann and Chris J. Davis. Get ready to leave comments if you don’t understand something or if I made a mistake as I’m watching the Rose Bowl simultaneously (yes, I started writing this a long time ago).

Sidebar Tweaks a la PHP Conditionals

You can customize the content shown on your sidebar from page to page with some nifty code. The things discussed in this section also apply to any PHP-parsed file on your WordPress install, not just sidebar.php of K2.

The concept behind PHP conditionals as we will use them is that they will contain some code of your choice that is only executed when a certain page on your blog is accessed, such as your archives page. This enables you to create and have dynamic content prominently displayed in your sidebar. Many uses for conditionals exist, such as displaying ads in your sidebar on everypage but the frontpage for design purposes. Below is a typical conditional found within your sidebar.php file in the root of your K2 directory.

<?php /* If this is the an archive page or a search page */ if ( (is_archive()) or (is_search()) or (is_paged()) or ($notfound == '1') ) { ?>
  <div class="sb-months"><h2><?php _e('Archives'); ?></h2>
     <ul>
   <?php wp_get_archives('type=monthly'); ?>
     </ul>
  </div>
  <div class="sb-categories"><h2><?php _e('Categories'); ?></h2>
     <ul>
   <?php list_cats(0, '', 'name', 'asc', '', 1, 0, 1, 1, 1, 1, 0,'','','','','') ?>
     </ul>
  </div>
<?php } ?>

The first and last lines are what you want to pay attention to. These lines start and end the conditional. Particularly, the statements in the first line in between the ORs are actual conditionals. PHP looks to see if any of those are true and if so, continues to parse the rest of the code up until it hits the last line, which ends the conditional. Okay, enough explanation, let’s get down to some code you can actually use.

For example, if you have created a page titled Contact and wanted a small paragraph to show up in the sidebar on this page you could use the following code.

<?php /* If this is the Contact page */ if (is_page('Contact')) { ?>
   <p>My name is blah and I run Blah, Inc., a subsidiary of Blah Corp...</p>
<?php } ?>

There are many attributes which you can chain onto your conditional statement with && (and) as well as or and ! (not). The main ones are as follows: is_home(), is_search(), is_archive(), is_paged(), is_single() and is_404(). You can construct your own PHP conditional to satisfy your needs by stringing them together as needed with the operators mentioned earlier (&&, or, !). The code below determines whether it is being loaded on a frontpage and the code inside executes if that is true.

<?php /* If this is the frontpage */ if ( (is_home()) && !(is_page()) && !(is_single()) && !(is_search()) && !(is_archive()) && !(is_author()) && !(is_category()) && !(is_paged()) ) { ?>
   your code goes here
<?php } ?>

One thing to note about working with PHP is that one slight error, be it an extra parenthesis or forgetting to close off the conditional, can destroy your page (in the sense that it won’t load, rather produce a PHP parse error). This is why I suggest that when working with any homebrew PHP, you should mark off your working area. For example, if you are writing something in the middle of your sidebar.php, start by spacing away from the top by 3 lines and another 3 lines after you’ve written your code. This way you know exactly what you have altered or added so you can quickly remove it if an error occurs. Also, getting in the habit of commenting even if it is only for you is a great idea. The best thing to do is go through sidebar.php line by line to get a general idea of what each line does and soon enough you’ll be writing PHP tutorials of your own.

A Sidebarless Design

This has been by far the most requested tutorial addition for this series and I gladly present it to you today. Everyone loves K2, without a doubt, but sometimes a unique design can’t be had when you have the same sidebar as every other K2 user. Removing it also allows for a minimalist design, something like a simple Snapshot-type look. You will loose some things that the sidebar was home for – things like about text, links, recent comments and latest entries. However, I will try to show you how to regain some of that functionality. Before attempting this, please download your entire K2 directory just in case something should go wrong.

The first thing to note is that a sidebarless design cannot be achieved solely with CSS. Some people on the Binary Bonsai forums said that you would simply add a display: none; to the .secondary but having tested that the sidebar still gets called and seems to result in a weird layout when searching for something (I had done this some time ago so the newer K2’s might be different). Now login to your server via FTP and navigate to wp-content » themes » K2. Edit the following files as mentioned below: 404.php, archive.php, index.php, page-archives.php, page-comments.php, page.php, search.php and single.php.

Remove the entire line below from each of those files and save them.

<?php get_sidebar(); ?>

Now open up header.php and find these lines at the very bottom.

     <?php wp_register('<li>','</li>'); ?>
   </ul>
  </div>
   <hr />

In between the </ul> and </div> add the following code:

     <div class="sb-search">
   <?php include (TEMPLATEPATH . '/searchform.php'); ?>
   </div>

That placed the search box from the sidebar in the header area, which we can use CSS to position as we like. There is a downside however. With the search box in the header you cannot have a clickable header as mentioned in a previous K2 tutorial. If you do, when ever someone click the search box to type a query it will reload the homepage instead.

To be on the safe side, you will also want to go into page-archives.php and remove the entire div with the “secondary” class. It is fairly long and near the bottom of the file.

CSS

The following CSS code is vital for properly setting up a sidebarless K2 implementation. Without the accompanying CSS your primary section would still only be the previous width, leaving whitespace from where the sidebar used to be. Add this code to your scheme stylesheet, only adding the attributes of each CSS entry if your scheme already has theme (ie, if you already have a .secondary, just add the display none line inside of it).

.secondary { display: none; }
.primary { /* this is the most important part - play with the values according to your page width */
   width: 96% !important;
   _width: 96%; /* for IE */
   float: left;
   padding: 10px 14px 10px 14px !important;
   _padding: 10px 10px 10px 15px !important; /* for IE */
   margin: 0;
}
.sb-search{ /* for position of search box - this is ALL trial and error - this won't work for you out of the box */
   margin: 0px 0 -20px 423px; /* margin: up, right, down, left in pixels */
   _margin: 0px 0 -70px 415px; /* same as above, but IE specific */
   padding-top: 107px; /* top padding - how far down you want the search box */
   _padding-top; 107px; /* for IE */
}

You can also adjust the width of the search box with this piece of code – but beware that it does not adjust the width of the livesearch graphics so the livesearch menu will be larger than the search box by default.

.livesearchform input#livesearch {
   width: 200px !important; /* width in pixels */
}

Sidebarless Design Additions

Assuming I didn’t leave any vital steps out, that is all you need for a barebones sidebarless design. The things coming up are for regaining some of the lost sidebar uses, such as related entries to the bottom of each post. I have discovered that anything you want to display on the bottom of each permalink post page can easily be done in comments.php. You can do this however you like, but here are a few suggestions.

I like to separate the end of each post with a single pixel horizontal line. I begin by encapsulating the two items I want to appear under each post (in this case recent comments and related entries) in a div with the class I called bottombar. Add the following code to your CSS:

.bottombar{ /* as you can imagine, this can be styled a number of ways */
 font-size: 10px; /* font size of items within bottombar div */
 font-family: 'Trebuchet MS', Verdana, Sans-Serif;
 border-top: 1px solid #888;
 padding: 10px;
}

This next piece of code should be placed at the absolute top of comments.php. Note: This code will result in a PHP error unless you have the Brian’s Latest Comments and the Related Posts WordPress plugins installed and activated.

<div class="bottombar">
  <div style="float: left;">
    <h3>Latest Comments</h3>   <span class="metalink"><a href="<?php bloginfo('comments_rss2_url'); ?>" title="RSS Feed for all Comments" class="feedlink"><img src="<?php bloginfo('template_directory'); ?>/images/feed.png" alt="RSS" /></a></span>
    <br/>
      <?php blc_latest_comments('5','3','false'); ?>
    <br/>
  </div>
  <div class="sb-related"><h3>Related Entries</h3>
    <br/>
     <?php related_posts(10, 0, '» ', '<br/>', '', '', false, false); ?>
    <br/>
 </div>
</div>


To get that above code to line up properly, I just used the float property in CSS to make one stay on the left and vice versa. Here is a simple way of doing that in your CSS scheme. You only need one this one because in the code above I had already included <div style=”float: left;”> to float the recent comments to the left.

.sb-related{
 float: right;
 text-align: left;
 line-height: 1.5em;
 padding: 0px;
 margin: 0px;
}

As I said before, there are many different things that can be implemented in the top of the comments.php. A good rule of thumb is to find something you want to use and pull the appropriate code for it from your sidebar.php. You can think of this new area as a sideways sidebar.

My Social Bookmarking Mod

I have also received a good amount of requests for how I was able to add the social bookmarks thing included on every page. With the new “sideways sidebar” area just discussed and a little bit of knowledge about WordPress template tags, I was able to produce some PHP code that once included at the top of comments.php results in what you see at the bottom of this post. The code may look overwhelming at first but it is a much kinder sight once you understand some basic things. Below is the code that I wrote. Attention: Read through it first and replace every reference of PaulStamatiou.com to your site name and server. Please host the images on your own server. You can download them individually from the bottom of this post.

This goes at the very top of comments.php.

<div class="center">Socially Bookmark <em><b><?php the_title(); ?></b></em>    <a href="http://del.icio.us/post?url=<?php the_permalink() ?>&title=<?php the_title(); ?> at PaulStamatiou.com"><img src="http://www.paulstamatiou.com/wp-images/delicious.gif" class="socialbkmark" alt="Post <?php the_title(); ?> to del.icio.us"/></a>    <a href="http://digg.com/submit?phase=2&url=<?php the_permalink() ?>"><img src="http://www.paulstamatiou.com/wp-images/diggman.gif" class="socialbkmark" alt="Post <?php the_title(); ?> to digg."/></a>    <a href="http://www.blinklist.com/index.php?Action=Blink/addblink.php&Description=&Url=<?php the_permalink() ?>&Title=<?php the_title(); ?>"><img src="http://www.paulstamatiou.com/wp-images/blinklist.gif" class="socialbkmark" alt="Post <?php the_title(); ?> to blinklist"/></a>    <a href="http://www.furl.net/storeIt.jsp?t=<?php the_title(); ?>&u=<?php the_permalink() ?>"><img src="http://www.paulstamatiou.com/wp-images/furl.gif" class="socialbkmark" alt="Post <?php the_title(); ?> to Furl"/></a>    <a href="http://reddit.com/submit?url=<?php the_permalink() ?>&title=<?php the_title(); ?>"><img src="http://www.paulstamatiou.com/wp-images/reddit.gif" class="socialbkmark" alt="Post <?php the_title(); ?> to Reddit"/></a>    <a href="http://cgi.fark.com/cgi/fark/edit.pl?new_url=<?php the_permalink() ?>&new_comment=<?php the_title(); ?>&new_link_other=PaulStamatiou.com&linktype=Science/Technology"><img src="http://www.paulstamatiou.com/wp-images/fark.gif" class="socialbkmark" alt="Post <?php the_title(); ?> to Fark"/></a>    <a href="http://myweb2.search.yahoo.com/myresults/bookmarklet?t=<?php the_title(); ?>&u=<?php the_permalink() ?>"><img src="http://www.paulstamatiou.com/wp-images/yahoomyweb.gif" class="socialbkmark" alt="Post <?php the_title(); ?> to YahooMyWeb"/></a></div>


That code assumes you have a CSS entry called center to center items as well as a class called socialbkmark. I don’t use the regular center tag as it is not XHTML valid. The following snippet is all you need for that to work. The socialbkmark entry just deals with the alignment of the social bookmarking service icons.

.center{
   text-align: center;
}
img.socialbkmark{
   vertical-align: middle;
   border: 0px;
   margin-bottom: 4px;
}

Now it’s time for a brief explanation of what everything does in that messy chunk of code. <?php the_permalink() ?> asks WordPress the URL of the page you are on while <?php the_title(); ?> lets WordPress give you the title of the current page (it’s what goes in the browser title bar). Most social bookmarking sites have a certain way of accepting URLs (feed via the permalink query) and titles (the_title query). I also coded alt attributes for each link for the accessibility required by XHTML valid code for images. Now you can look at that code in a different light – one that you understand. You can find more about the syntax for social bookmarking sites over at Exploding Boy, who just added a post about adding a Newsvine link.

Another implementation for the top of comments.php is easy inclusion of advertisements. Just place your ad code there and you’re set. Alternatively you can place it at the very bottom of comments.php for ads on the bottom of each permalink post page.

The Super Footer

If you have read Zach’s K2 Header tutorial, you’ve found out how to implement a “superheader” on your website. There’s one thing missing… a super footer! When I say “super” I mean something that spreads across the entire page and encompasses the browser window. You can see an example of a superfooter and superheader in action in this screenshot (drop a comment). The footer is by default just a paragraph, <p id=”footer”>, with a stylized id. By changing that to a div, we can dramatically alter the layout and size of the footer. Go to your footer.php, find <p id=”footer”> and replace it with <div id=”footer”>. Also replace the closing </p> with </div>. Now you can set the footer width to 100% and add things in the footer div similar to the items you added in our “sideways sidebar.” Below is the required CSS. The footer image should be a repeatable image. I used a single pixel wide, 200px high gradient.

#footer {
   background: url('images/footer.jpg') bottom repeat-x !important; /* replace image path with your own */
   height: 200px; /* change according to image used */
   width: 100%;
   border-top: 1px solid #a1df43; /* not necessary, just style */
   margin: 0px auto 0 !important;
   position: relative !important;
}

An example of something you might want to put in your superfooter would be archives, recent comments, recent posts, categories and/or a simple “about” statement. Whatever you decide to do, setup each separate element in its own div and then use CSS on each div to float them left/right and add margin to space each one out from the other.

For example, if you wanted to display your categories you could use this code.

<div class="sb-categories"><h2><?php _e('Categories'); ?></h2>
   <ul>
    <?php list_cats(0, '', 'name', 'asc', '', 1, 0, 1, 1, 1, 1, 0,'','','','','') ?>
   </ul>
  </div>

Display Number of Tags

Someone on this Binary Bonsai forums thread asked me how I displayed the number of tags used (via UTW plugin) on my archives page so here’s the answer to that. Everything displayed on the archives page is directly controlled with the page-archives.php file. If you open that up you will see a bunch of MySQL database calls at the top of the page. To display the number of tags we first have to acquire that information from the WordPress database. We do this by adding the following piece of code after those three database calls but before the closing ?>.

$numtags = $wpdb->get_var("SELECT COUNT(*) FROM wp_tags");
if (0 < $numtags) $numtags = number_format($numtags);

Then place <?php echo $numtags; ?> wherever you want to display the number of tags. Basically we asked for something from the database, stored it in a variable then used the PHP echo command to print that out later on the same page. I believe Jonathan Snook, 9ruler and web designer extraordinaire, had originally helped me out with that MySQL so here’s credit to him.

Flickritis

You may have noticed my Bonsai-inspired FlickrRSS implementation at the bottom of my homepage. I’m going to briefly go over how you can do the same thing. First off you will need Dave’s FlickrRSS WordPress plugin. Follow the installation directions closely as you will need to provide it with your Flickr user id, which you can find out with Dave’s idGettr. Dave has told me that v3.0 has a slight bug with caching, so don’t enable that until a fix has been released. Go into the WordPress admin » Presentation » flickrRSS settings and make sure you have set “Display” to user photos using 8 (or more depending on how wide your blog is) square images.

Now open up index.php in your K2 folder and place the code below between <?php include (TEMPLATEPATH . ‘/theloop.php’); ?> and </div>.
 <?php if ((function_exists('get_flickrRSS'))) { ?>
   <div class="sb-flickr">
    <div>
     <?php get_flickrRSS(); ?>
    </div>
  </div>
 <?php } ?>

Now its time for the most important part – styling flickrRSS. Yeah, you guessed, we will be using CSS for this one as well. You know what to do with this code. :-P

.sb-flickr{ /* this was specific for my blog width - play with it */
   margin-left: -14px;
   width: 623px;
   background: #d1f0ff;
   text-align: center;
   padding: 5px 0 5px 6px;
   border-bottom: 1px solid #94dbfc;
   border-top: 1px solid #94dbfc;
}

Denouement

I believe that is enough sitting in front of the computer for today. For all of these helpful tips and tricks, I ask one thing of you. If you learned anything out of this article, please post something about it on your blog so others can find out about this and learn as well. Also, feel free to drop a comment, I like hearing from you guys. If you spot any errors please let me know. There’s bound to be a few with an article this long with so much code. Also, the first section regarding PHP conditionals should only be used if you somewhat know what you’re doing. Messing with PHP like that has the potential to wreak havoc on your site.

Tagged as: How To's, Web Dev