Twitter: watching the Machinist, at least until i fall asleep
Subscribe via RSS or email  #7,120


Customizing K2: Part 3

Jan 21, 2006 in ,

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.

No one has saved this post on del.icio.us. Why not bookmark it?



103 Comments

  1. I might be being dumb here, but can you not simple reposition the sidebar below the primary using CSS. I have done this on my test blog and formatted the items within it using CSS.

    Its not finished, I am merely playing with it at the moment. But it was all done in CSS with i think about 4 or 5 mods to codes, but these were very minimal.

  2. When I had tested that, my sidebar would appear on the search page and at the time horribly messed with the layout. You can see here how it still shows the sidebar on the search page - where it’s not wanted. My way strips unnecessary PHP calls, getting rid of a bit of server strain, for a fool-proof sidebarless design. It really comes down to a design thing. Yours shows the sidebar at the bottom on the homepage - something I’m not too keen on. But if it works for you, that’s great.

  3. thanks for another one.

    keep them coming, please.

  4. Thanks for the shoutout even though my scheme is a bad example code wise. I will probably use some of your ideas in this post to finish SnapShot.

  5. Ah, Ihad not thought of things that far Paul. I may have to try your method now. Although I go like my sidebar at the bottom in my design. I think Michael over at binary bonsai may have done things my way, particularly looking at his about section and the positioning of the sub-page links.

  6. I was under the impression Michael kept the sub-page links like that until he could implement a better way.

  7. As always Paul you have good stuff.

  8. Very nice article… lots of helpful tips for those who want to further dress up K2.

  9. Many thanks Paul. I’ve already begun implementing a few of these techniques on my site (http://www.ekonoline.com). The sidebar-less k2 technique needed some tweaking, but it may have been my setup.

  10. Great stuff! Thanks Paul, the tutorials will surely be handy when I set up the Journal section of my website.

  11. Wonderful stuff…, for me this is the best of the three parts. I have already take cue and stared
    implementing stuff on my site.. thanks very much.

  12. typo… I meant “started”

  13. Thanks for another awesome article Paul. I just implemented a nice Flickr bar using your directions and it’s made a good improvement to my blog. Thanks mate, your effort is appreciated.

  14. Best article of the series for me, especially as I was wondering how you got those social bookmarking tabs and flickr pics at the bottom.

    Great.

  15. Nice work Paul. The quality of these ‘How to’s’ just keep getting better and better!

  16. This has been a really helpful tutorial, and I’m muddling my way through the parts I want to use. I have a question, or maybe a clarification. I would like my “latest posts” etc to be under my content, but above the flickr bar, as yours are, rather than in the “superfooter”. Where would I insert the code to do this?

  17. Paul, I have started to implement some of your sidebarless design code after your comments about how mine was doen with the CSS. However I now have 3 small diamonds above and below the search box in my header. Why is this?? and how do I get rid of them??

  18. Phil, I’m fairly sure it has to do with code in header.php or around there. Did you comment out any code? Commenting in PHP is a little tricky, so I tend to just delete things.

  19. Sorry to make another post, but I’m also having issues styling the flickr section. Nothing I do seems to be changing anything. I just want them in a nice simple line very similar to yours and the ones on BB.

  20. Phil, in your CSS you have a bunch of question marks. I’m thinking maybe you edited them in some rich text editor that added some symbols or something. Here’s what you have for your flickr entry. I suspect this is the same reason you have ‘diamonds’ showing up near the search bar - go through your code in a simple text editor and remove any offending characters.

    .sb-flickr{ /* this was specific for my blog width - play with it */
    ��� margin-left: -14px !important;
    ��� width: 550px;
    ��� background: #d1f0ff;
    ��� text-align: center;
    ��� padding: 0px 0px 0px 0px !important;
    ��� border-bottom: 1px solid #94dbfc;
    ��� border-top: 1px solid #94dbfc;
    }
  21. Going through the rest of your CSS it appears that everything you copy and pasted from this page gave you some weird characters - same for your search box.

    .sb-search{ /* for position of search box - this is ALL trial and error - this won’t work for you out of the box */
    margin: -114px 0px 0px 346px !important; /* margin: up, right, down, left in pixels */
    ��� _margin: 0px 0 -70px 278px; /* same as above, but IE specific */
    ��� padding-top: 8px !important; /* top padding - how far down you want the search box */
    ��� _padding-top; 8px !important; /* for IE */
    }
  22. Thanks Paul. I went through and typed the code out instead of copy and pasting it and it seems to be working now. Just a few tweaks needed with the CSS on flickr now.

  23. The exact thing happened to me when copy/pasting, but bizarrely only with Safari. I tried it with Firefox, and everything was mostly OK.

    Paul: any chance off addressing my request above?

  24. you have a medium sized problem with the asides code. When selected to be in the sidebar, they show fine in that respect. But when you go to comment on them you cant see the main content just a title and the comment box. If people are following links to asides from outside source like technorati then all they will be faced with is a title and comment box, im sure the visitor will then think its nothing and leave, not good news :(

    To fix it, find the line:

    /* On archive pages, show asides inline no matter what */ if (is_archive() or is_search()) { $k2asidescheck = ‘0′; } else { $k2asidescheck = get_option(’k2asidesposition’); }

    and at the end of:

    or is_search()

    Add:

    or is_single()

    So that it looks like this:

    /* On archive pages, show asides inline no matter what */ if (is_archive() or is_search() or is_single()) { $k2asidescheck = ‘0′; } else { $k2asidescheck = get_option(’k2asidesposition’); }

    Its a minor bug in code, but can provide major problems. I hope this helps :)

  25. hey Paul, thanks a lot for this “CSS for Dumies” I really needed something like this to help me understand what the heck I am doing. I am still having a little trouble, I followed all your first group of step for the “sidebareless” design, and then add snapshot CSS on top of it. I followed those instructions to for the header. But I cannot for the life of me get the picture to move down! I’ve tried changing the number of just about everything on the CSS.

    I created a secondary site so I wouldn’t mess up my regular blog, until I figure it out the way I like it.
    my test site is http://woodhouse.gatheringinlight.com. Please help if you have a second.

  26. Great Tutorials!

    Why don’t you create a theme revision for sidebarless K2 with all the bells and whistles? We can then download the finished version without playing around with the code?

  27. Okay so I am working on a new template using the K2 theme. I have almost everything done but I have run into a problem. Why is there a white space above my header image? Does anyone know how to get rid of it?

    My new site template can be seen at http://eric-taylor.com/new

    Username= guest
    password= guest

    Also, does anyone have any idea on how I can get livesearch working correctly and not have the background image go off the page.

  28. Great Tutorials!

    i have a new wordpress blog (at http://www.pdsxxi.com.ar/guerrero) but i can´t do my “SuperFooter”.

    I don´t know what i´m doing wrong. Apear, the footer.php don´t want to read de CSS file, so the background (img) for the superfooter is not showing.

    Any Help? please! Thanks!

    Saludos from Patagonia Argentina.

  29. The no-sidebar tutorial does not work for me. I’ve tried twice on WP 2.0.1 & K2 Beta Two r163.

  30. I try a sidebarless design but I have a littre problem :

    I have a flot left for last comments and float right for related items, but the comments , when there related items entries are small, go on the right so it’s really ugly

    Sorry for my english , I’m French :) (don’t blame me for ..)

  31. I fix it using a float : left for the comments div, but it’s also an ugly hack.. and I don’t no how to fix it beautifuly

  32. Hey man! I love your site and your tutorials are really helpful.
    However, I think you have a slight typo that might catch some people out (me included!)…
    I was trying to implement the “Sidebar Tweaks a la PHP Conditionals” and it wasn’t working for me. So I checked the codex and it appears that if a user has created a page called ‘Contact’ they would use “is_page()” and not “is_paged()” - which is for “an archive or the main page being split up over several pages.”
    I really should have read the codex first before making changes to my blog.
    But thanks again!

  33. foofango, you are correct it is is_page() for that particular case. I must have been thinking of something else when I wrote it as I have is_page working like that in my code. I have a slight database problem right now, but I’ll update this ASAP.

  34. Thanks for the tutorial. The Sidebar tweak conditionals was especially helpful.

  35. I am working on a sidebarless design, and I am having trouble getting the Latest Comments and Related Entries to go side by side like on this site. I am also wondering how to get rid of the whitespace at the top above the header.

  36. What about changing the layout of the page? Where does this take place within the CSS?

  37. Great set of tutorials. Thank you very much.

  38. Master!!… only one need after reading your tutorial. For me is much logic that the comments links and the publish information were on the bottom of the post (most of us reads from top to bottom…). How can i move all that info to the end of each post?

    Thanks for your great work!!!!

  39. I love all mankind now for having found this tutorial! Thanks so much! Now with my luck Apocalypse will start tomorrow.

  40. Hey paul, I have been following your tutorial for ‘A Sidebarless Design’, and when i completed it my menu items started to appear at the bottom of the page; how can i recitfy this?

    Thanks

    -ollie

  41. It seems like the a div was misplaced or the menu code in header.php was moved somehow. All I can say is double-check what you did and if all else fails, you might be able to manually move the menu up by playing with some negative top margin on ul.menu. Also, you want to go into the K2 WP admin options and enable a fixed width, not flexible width layout.

  42. Wonderful, thanks, i can’t believe i didn’t just change the align values, :D

  43. Hi Paul Stamatiou ,

    I was fretting about how get get a dividing line beteen sidebar and regular post in K2.

    Also when we click the heading of main post in K2 ..the final post is in fade grey colour .How to tweak all the fonts and display

  44. wow..this is really helpfull, THANKS!

  45. I’d posted a comment on Part 2, which I’d meant for Part 3, since it relates PHP Conditionals. Sorry for the duplicate. Here it is.

    Hey Paul,

    Do you know of a PHP Conditional that says “if logged in” or something to that effect, so that something will only appear if logged in. I’d like certain menu tabs to be visible only to me. I’ve tried setting pages to private, but then the tabs just don’t appear at all. I have a thread going in the k2 forum here: http://getk2.com/forum/showthread.php?t=1433

    Any help you could offer would be greatly appreciated.

    Thanks

  46. Hi Paul,
    I’ve got some custom category archives on a site, what’s the conditional code to show something only on one of them? Thanks!

  47. I’ve found what I was looking for - http://codex.wordpress.org/Conditional_Tags just in case anyone else is wondering the same thing

  48. Hi Paul, first off, thanks for the great tutorials. I have learned a ton from them. I seem to be having issues with the flickr bar you discuss in this post. I can’t get ANYTHING to appear I have followed the instructions the best I can…. is there something I am missing? The plugin is installed and set up … I placed the code you mention in the index.php file, and I also placed the CSS markup in the stylesheet. I am kinda new to this so is there something obviouse I am not doing? Thanks!

  49. Paul, great series of tutorials! Your link to the superheaders tutorial needs to be modified a bit; right now it gives a page not found error:

    http://dopamineaddict.com/2006/01/13/modifying-k2-series-headers.html

  50. Hi,
    I am just putting a WP site together, using K2 and the K23C 3-column extension. I wanted to add a space below my header into which I could insert something different on the front page to all the other pages. So the conditional code was exactly what I needed, and I dropped a test at the end of header.php to see how it would work out.

    But for some reason it didn’t work, so I tried the opposite way, using if (!(is_home())) and my code appeared on every page including the home page! I’m puzzled … how can my home page not be my home page? I am a novice with WP and PHP but can see there is nothing wrong with your code at all, must be something with my config, but what? Any ideas please?

  51. Heh… is now working perfectly, no explanation for the glitch, sorry.
    Thanks for the tutorial, it’s a great help :)

  52. Paul, I am a Portuguese-American and also 20 years old. I gave up making websites back in the day when html was so cool. A few years later and wow things have changed. I am trying to learn this CSS stuff, good thing I took C++. Your How-to’s are EXTREMELY helpful. I must ask you this. What stats plug-in do you recommend? There is a list here: http://codex.wordpress.org/Plugins/Statistics

    Hope to hear from you. Keep it up!

  53. Hi Paul ,, thanks for sharing your tips and tricks
    Part 2 helped me with the a link in the Main Menu

    Once again ,, thanks

    I have tons of reading to do ,,,,,

    Im new to WP and just upgraded to k2 today

    JP

  54. I’m sure this is all useful stuff to those who need it. I quite like the concept of the sidebar and so haven’t used anything from the tutorial. However, in the tutorial and the comments there are all kinds of bits and pieces of info that, taken together, are helping me put a larger picture together.
    So thanks again, and I’ll move on to part four.

  55. Hello,
    I’m new to K2, thanx for this precious help
    I’m trying to put all the sidebars of my former blog: http://gardelino.blogspot.com

    but I don’t know how to do, I’ve got the codes but well..can someone help me please?

    I’ve got Flick’r plugin too, activated with my Id. And it doesn’t work..Please help me, I’m lost! ;)

  56. Hi,

    I’m trying to post to sidebar.php on EyewitnessNation.com and get the follwing error message.

    Parse error: syntax error, unexpected T_STRING in /usr/www/virtual/amonjes/www.eyewitnessnation.com/wp-content/themes/k2/sidebar.php on line

    This is what I’m posting:

    My name is blah and I run Blah, Inc., a subsidiary of Blah Corp…

    Can you tell me what I’m doing wrong?

  57. AJ, are you pasting it in? Type it out manually, I think pasting makes the quotes weird.

  58. another request, the sidebarless is great but what if you want the sidebar to be there in main page and take it out in the single post page…. that would be super…

  59. I like the superfooter idea that you included. I was thinking about adding that into my site next time it gets a redesign. What would you suggest gets put in there?

  60. Hi Paul,

    any idea how to move the sidebar from right to left in K2?
    The website in question is: http://www.einstern.eu
    There you see the sidebar on the right. All I want is to swap sidebar and content so that the sidebar sits on the left and the content on the right.
    Your help would be much appreciated.
    Best,
    Chris

  61. Thank you for the explanation of sidebar-less design. I have been trying to get my k2 layout to have a right and left sidebar with no luck. Any help would be greatly appreciated.

    Thank you,
    Allen

  1. [...] Second Edit: At PaulStamatiou.com, we have another code implementation of post submission buttons. Look for it under My Social Bookmarking Mod. The code seems to be for a large selection of social bookmarking services (8, I think). +Del.icio.us +Furl It +Spurl +Tag!RawSugar +My Web [...]

  2. [...] Customizing K2: Part 3 Published January 22nd, 2006 Tags: Asides, customization, k2, themes, Wordpress. Customizing K2: Part 3 is the most recent in a series of articles aimed at those using the Wordpress theme K2, who are interested in more personalization. The whole series is exceptionally written though this latest “chapter” offers some more unique insight in to making K2 act the way that you need it to. Go check out the HOWTO and then give Paul the props he deserves. (0) [...]

  3. [...] Finally, someone who explains what the deal is with the php tags in WordPress in language I can understand! [...]

  4. [...] Third part of Paul’s K2 customization tutorial. A lot of tips out there. I especially liked the sidebar-less design stuff, had been waiting for a tutorial on how to acheive the same. Paul keeps coming up with good stuff.. Go get some at PaulStamatiou.com - K2 Customization I haven’t wasted any time, have already started implementing stuff for my blog. Will be working on these in the days to come… 1. A sidebar-less design. ( Working with the Deviance mod by Paul, as the base ) 2. Social Bookmarking links on single post page. 3. Sidebar stuff to the single post page.( like related posts etc..) 4. More to come….. customization, design, K2, wordpress Socially Bookmark Third part of Paul’s K2 customization tutorial                             [...]

  5. [...] acaba de ser publicada a terceira parte dos tutorials sobre modificacoes ao k2. [...]

  6. [...] Customizing k2, part 3, from Paul. [...]

  7. [...] I didn’t actually use Paul’s method; I chose to use CSS to move the “sidebar” to the bottom. There are quite a few blogs using this layout now, and I think it’s pretty handy, actually. [...]

  8. [...] Paul Stamatiou has contributed several interesting tutorials on how to customise K2, a theme for wordpress. One of his customisations is a set of icons at the bottom of a post that allow you to quickly bookmark the current page at a number of social bookmarking sites (Digg, Del.icio.us, blink, furl, etc.). You can see it in action on his blog, http://www.paulstamatiou.com, and here at MaxPower on the bottom of every page that is a post. He credits this idea to Mr. Veloso. [...]

  9. [...] You have probably noticed the quick social bookmarks at the bottom of each post. I’ve had these around for a while now and have shown you the code to do the same in Customizing K2: Part 3. Kirk Montgomery has taken this and created a fantastic WordPress plugin to easily add this functionality to your blog. The plugin, Sociable, is currently in beta but supports many social bookmarking services off the bat. Any suggestions received will go to further the development of this plugin. Download it at Kirk’s site, MaxPower.ca, and read his great instructions for implementing it. Let us know what you think and don’t forget to spread the word. Socially Bookmark Sociable: WordPress Plugin for Social Bookmarking                                 [...]

  10. [...] Custimizing K2: Part 1 / Part 2 / Part 3 [...]

  11. SnapShot for K2…

    WordPress用のテーマ”K2″ユーザーの中には1カラムのレイアウトを望んでいる方が多いようです。
    現在の2カラム右サイドバーのレイアウトはとてもベーシックで僕も気に入っていまã…

  12. [...] Customizing K2 tutorials by Paul Stamatiou: Part 1 Part 2 Part 3 [...]

  13. Tech Links for 1.29.2006…

    It’s been a while since I’ve posted, but I’ve b…

    ……

  14. [...] Customizing K2: Part 3 - Paul Stamatiou has a few additions and tweaks to the social bookmarking buttons I mentioned earlier. He seems to have been a little more familiar with Wordpress Plug-Ins when he wrote this than I was when I wrote mine. [...]

  15. [...] *** Don’t forget to check out Paul’s articles: Customizing K2: Part 1 Customizing K2: Part 2 Customizing K2: Part 3 [...]

  16. [...] Also, keep in mind that some sidebar div’s are not displayed on every page, for my site I changed a bit of the PHP in the sidebar so certain div’s that I moved into the header would display on all pages. To find out more about this read Sidebar Tweaks a la PHP Conditionals from Paul Stamatiou’s Customizing K2: Part 3. [...]

  17. [...] The original idea is credited to Paul Stamatiou and Mr. Veloso [...]

  18. [...] Here’s a link to the wonderful Paul’s article about customizink the K2 metatheme for wordpress. I’m definitely going to make some use some out of that article. [...]

  19. [...] Customizing K2: Part 3 at PaulStamatiou.com (tags: css wordpress blogging) [...]

  20. [...] Sono usciti gli Action Buttons targati Yahoo!, utili ma graficamente penosi. Tutti gli utilizzatori sono invitati a collaborare per migliorare il servizio. Io consiglio di dare un’occhiatina alla sezione “My Social Bookmarking Mod” del tutorial realizzato da Paul Stamattiou… integrare non fa male e mi pare per altro più completo e utile per i blogger! [...]

  21. [...] After installing K2, you might want to customize it according to your needs. Paul Stamatiou has put up tutorials on how to customize K2 on his site. The tutorials have three parts - part 1, part 2 and part 3 [...]

  22. [...] If you want to take it a step more you can use Pauls php conditionals tutorial to decide which pages it should show up on. [...]

  23. [...] I finally finished redesigning FoneGrabber. It is now faster and easier to look for phones. I’m not an expert designer so thanks to Wiphey’s tutorial on CSS and Paul’s tweaks for making things easier for beginners like me. [...]

  24. Customizing K2: Part 4…

    Paul Stamatiou has released Part 4 of his excellent K2 customization series. Along with his high quality stuff, he walked through the basics of How-To acheive the 3 Column layout. If you havent seen his HOW-To’s, I request all K2 users to have a …

  25. [...] Customizing K2: Part 3 [...]

  26. [...] PaulStamatiou.com » Customizing K2: Part 3 (tags: css-design wordpress blog) [...]

  27. [...] PaulStamatiou.com » Customizing K2: Part 3 (tags: css-design wordpress blog) [...]

  28. [...] for K2 : k2 mod part 1 k2 mod part 2 k2 mod part 3 k2 mod part 4 k2 mod part 5 [...]

  29. [...] ( Part 1, 2, 3, 4, 5) Feed for this Entry Trackback Address [...]

  30. Designy Stuff…

    As one of the very few Rexanni employees (and the only “designer” on the Rexanni team) I am charged with the duty to code and design EVERY Rexanni site. But, to kick off the series of new designs I am developing, I want to show you the new …

  31. [...] For those interest in K2, Paul Statimou has a great article on customizing it: Customizing K2 Part 1 Customizing K2 Part 2 Customizing K2 Part 3 Customizing K2 Part 4 Customizing K2 Part 5 [...]

  32. [...] Customizing K2: Part 3 - PaulStamatiou.com how to make a superfooter in k2 (tags: k2 superfooter k2-superfooter) [...]

  33. [...] - A Three Column K2 Mod for WordPress Customizing K2 @ http://paulstamatiou.com/: Part 1 Part 2 Part 3 Part 4 Part [...]

  34. [...] Part Three: PHP conditional statements in the sidebar, removing the sidebar, CSS features, social bookmarking mod, super footer, tags, flickr, and more [...]

  35. [...] Phil on Jan 21st, 2006 at 8:37 pm [...]

  36. [...] Customizing K2:  Part 3 [...]

Post a comment, receive Stammy points.


Send a trackback.


  • If you plan on posting code, run it through Postable first.