The Unstandard theme: widgetized and gravatar-ized

Oct 8th 2008
60 Comments
respond
trackback

screenshot The Unstandard theme: widgetized and gravatar ized

The minute I came across the unstandard theme I knew it was the perfect theme for what I had in mind for Aytemir.com.

However I found out that it lacked a bunch of essentials features, which I missed dearly. And although there are some snippets in the comments and the forum they’re just not complete or they didn’t work for me: hence The Unstandard theme version 2, which adds the following extra’s on the already excellent theme:
-Text replaced with a logo
-Sidebar widgetized, with correct CSS layout
-Footer widgetized, with correct CSS layout
-Gravatar in comments

Live demo: You’re looking at!
Download: The Unstandard theme version 2.0!

Note: all copyrights, licence and credits concerning both versions are still a property of Derek Punsalan/5thirtyone.com.
The Unstandard v2.0 theme is distributed as is: You’re advised to install and test it locally (with XAMPP or WAMP) first and backup your originals.

It’ll probably work ‘out of the box’: I’m using it locally and live with Wordpress version 2.6.2. Please leave a comment if you’re having troubles with it.

UPDATE: Manually upgrade

If you’re already using the original Unstandard theme and you’ve already hacked it a bit than you might consider following these steps to ‘upgrade’ it manually to version 2.0:

1.Gravatarize

Somewhere around line 32 in comments.php after

  1. <div class=“fix”>
  2.                                 <div class=“author_meta”>

add the following

  1. <?php if(function_exists(‘get_avatar’)) { echo get_avatar($comment, ‘75′,‘http://www.aytemir.com/wp-content/themes/unstandard/images/default_avatar.png’); } ?>
  2. <br/>

BONUS: the last parameter is not required. It only replaces the default Wordpress avatar (mystery man) with your own default avatar!
BONUS: you might also consider reversing the comment order by displaying the last post at the top. Just add the following

  1. <?php foreach (array_reverse($comments) as $comment) : ?>

just after this line

  1. <ol class=“commentslist”>

2a.Widgetize sidebar

First copy functions.php to your themes root: copy this file from the above zip-package!
And in your sidebar.php add the following code, where you want your sidebar widget to appear

  1. <ul class=“sidebar-ul”>
  2.   <?php if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar() ) : ?>
  3.   <?php endif; ?> 
  4. </ul>

2b.Widgetize footer

Edit your footer.php and add the following code, where you want your footer widgets to appear (in my case/Aytermir.com right at the top)

  1. <ul class=“sidebar-ul”>
  2. <div id=“subfooter”>
  3.  
  4. <div class=“widget”><div class=“inner”>
  5. <?php if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar(“subfooterleft”) ) : ?>
  6. <?php endif; ?>
  7. </div></div>
  8.  
  9. <div class=“widget”><div class=“inner”>
  10. <?php if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar(“subfootercenter”) ) : ?>
  11. <?php endif; ?>
  12. </div></div>
  13.  
  14. <div class=“widget”><div class=“inner”>
  15. <?php if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar(“subfooterright”) ) : ?>
  16. <?php endif; ?>
  17. </div></div>
  18.  
  19. </div>
  20. </ul>

And adjust the CSS style.css by adding the following at the bottom

  1. /* highlight author comments*/
  2. .authcomment {
  3. background-color: #B3FFCC !important;
  4. }
  5.  
  6. /* widgetizing the footer */
  7. #subfooter {
  8. width:960px;
  9. margin-left:0px;
  10. margin-right:0px;
  11. height:300px;
  12. clear:both;
  13. }
  14.  
  15. #subfooter .widget {
  16. width:310px;
  17. float:left;
  18. margin-left:0px;
  19. margin-right:10px;
  20. }
  21.  
  22. #subfooter .widget .inner {
  23. padding:0px;
  24. }

BONUS: the first part will highlight the author comments!

3.Logo instead of title text

While your busy why not replace the title of your blog with a cool logo Don’t forget to replace my URL’s with your own! Just edit your header.php

  1. <a href=“http://www.uppedd.com”><img src=“http://uppedd.com/wp-content/themes/unstandard/images/logo.png”></a>

just after

  1. <div id=“leaderboard” class=“fix”>

BONUS: Why not add a favicon while your busy hacking? Just add the following in your header

  1. <link rel=“shortcut icon” href=“<?php bloginfo(’template_directory’); ?>/favicon.ico” />

Add it just after the < head > tag and upload your favicon.ico in your theme root.

UPDATE 2: Fixing the Recent Comments

Get this widget: Widget for Simple Recent Comments, although the default one is fine too, this one can be tweaked more.
Alter line 100 according to the following.

  1. $output .= \n\t<li><a href=\” . get_permalink($comment->ID) . “#comment-” . $comment->comment_ID  . \” title=\”on “ . apply_filters(‘the_title_rss’, $comment->post_title) . \”>” . $comment->comment_author . “: ”” . strip_tags($comment->com_excerpt) . $dots . “”</a></li>”;

That should do the trick!

UPDATE 3: An Unstandard Pagination

Wanna add pagination in your Unstandard theme homepage? Just follow these installation tips at Adding Nice Wordpress Pagination.
And find in your home.php

  1. <?php query_posts(’showposts=9′); ?>

and change it into

  1. <?php query_posts(); ?>

And don’t forget to adjust in your Settings > Reading > Blog pages show at most the desired number of posts to show. For example 9.

Share and Enjoy:
  • E-mail this story to a friend!
  • Digg
  • StumbleUpon
  • del.icio.us
  • Reddit
  • Mixx
  • Ma.gnolia
  • SphereIt
  • Live
  • NewsVine
  • MisterWong
  • Sphinn
  • Google Bookmarks
  • Design Float
  • Technorati
  • TwitThis
  • Facebook

Related posts:

  1. The Coolest blog…with the Unstandard theme
  2. Unstandard theme now Wordpress 2.7 compatible
  3. Replacing your comments with Intense Debate
  4. A fan-tas-tic start of 2009!


This post is tagged , ,

60 Comments

  1. Matthieu

    Thank you, really nice work :)

    [Reply to this comment]

  2. Hey chai , I’m back for some more of your wisdom

    I’ve edited some of the code so that the plugin wp- page navi works , the first weird thing is that when you click the second page the first page’s story is still the featured one on top (I figured the second page’s top story would be the featured one with a bigger picture)

    Second which is more important to me is that is there a way to customize the search page results ? At the moment if someone searches only 7 post boxes come up , I was wondering if it’s possible without tampering with the home / index files.

    thanks chai you the best

    [Reply to this comment]

    Tschai Reply:

    I’m aware of the first issue; haven’t found a solution yet and I’m not bothering anymore…kinda like it, actually ;)

    Concerning your second issue:
    You should get the number of posts you’ve set in your admin or the number of amount in your code: see ‘UPDATE 3: An Unstandard Pagination’ in this post.

    If you have adjusted your code like stated here, you should see the max amount set here /admin and you should be able to navigate to the rest of them.

    I have not tweaked something specific to achieve this…

    [Reply to this comment]

    Rohin Reply:

    yea i knew that but if i want 7 boxes in the regular home page , what do i do if i wanted lets say 15 boxes when someone does a search on my website ?

    thanks for the fast reply chai

    [Reply to this comment]

    Tschai Reply:

    You could try something like this

    < ?php if (is_search()): ?>
    < ?php query_posts(’showposts=15′); ?>
    < ?php else: ?>
    < ?php query_posts(); ?>
    < ?php endif; ?>

    All in home.php instead of the instructions in ‘UPDATE 3: An Unstandard Pagination’ in this post.

  3. Hey there,

    I’m getting 2.7 up and running but it seems to lack a basic “read me” file with directions. I guess I must be thick in the head, but can you tell me how to add article pics to the homepage?

    Thanks in advance!!

    [Reply to this comment]

    Tschai Reply:

    Actually it’s very easy:

    Add a custom field ‘lead_image’ and ’secondary_image’ in your posts and make sure their sizes are 593×225 and 293×150 and they should be shown automatically.

    Hope this helps…

    –edit–
    Just realized that this probably wont go for the 2.7 version?
    I’m afraid you have to find your answer at http://5thirtyone.com/archives/1588 then, since I’m still using the pre-2.7 version

    The support at Derek’s blog is superb, so you should realy ask your question there

    [Reply to this comment]

  4. Their probably shown vertical instead of horizontal because of some bullet, list elements like

  5. . You might want to use the CTC plugin in the get_categories.php, where you can decide to show tags/cats in diff layouts…

    Don’t know ’bout child-categories though, whether this template is suitable for it…

  6. [Reply to this comment]

    Rohin Reply:

    thanks chai I’ll try it asap. If not that I wonder if there’s some code in the php file that I can edit so that I can just put 2 more widget sidebars there instead with the same color formatting so it doesn’t stick out too much

    [Reply to this comment]

    Tschai Reply:

    You can add virtually anywhere the code in step 2b #
    < ?php if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar(“subfooterright”) ) : ?>
    #
    < ?php endif; ?>

    to show there you’re desired widget…

    You can change ’subfooterright’ to which one you need.

    [Reply to this comment]

    Rohin Reply:

    i posted on wordpres.org about

    just want to have cat’s horizontal , no one posted yet lol. By the way could you give me a critique of my site if you have a few seconds to spare ?

  • hey chai !

    Could you help me with the way categories are displayed vertically , I would like them to be displayed horizontally , could you take a look at my website. I would hate to break the parent/child category relationship

    [Reply to this comment]

    Tschai Reply:

    Wel the answer seems to be very simple: This is how my show_categories.php looks now

    1. <?php if(function_exists(‘wp_pagenavi’)) { wp_pagenavi(); } ?> 
    2. <div id=“categories”>
    3.   <ul class=“fix”>
    4. <?php wp_list_categories(‘title_li=’); ?>
    5.         </ul>
    6. </div>

    And as you can see now here (on this blog!), the categories are shown horizontally…

    Hope this works for you too…

    Some remarks about your site:
    -It takes too long to load the data from twittercounter.com: you will loose visitors with it,
    -Don’t forget to replace the Unstandard orange color in the categories section,
    -I think you’re using two styles mixed/together: the edgy/sharpy Unstandard and rounded corners/circles, somehow it’s does not match
    -And also I see to many different shades of blue; you should stick to only 3 or 4 max

    I think overall, the site looks good and has interesting content. For this type of content you might consider the List Post titles, which somehow gets my attention always ;)
    And allow me to point you to my personal ‘wisdom’ about building sites and apps ;)

    [Reply to this comment]

  • The link to the official site/post is within this post: http://aytemir.com/unstandard-theme-now-wordpress-27-compatible/

    And it’s fully supported by the original author of the theme…!

    [Reply to this comment]

  • Thanks for fixing that link! Could you reply with the link for version 2.7, can’t seem to find it, thanks!

    [Reply to this comment]

  • The downloadlink somehow stopped working, fixed it now…thanks for noticing.

    PS: you should consider using the ‘official’ WP 2.7 compatible version of the Unstandard theme!

    [Reply to this comment]

  • Hey Tschai,

    Thanks for making the 2.0 upgrade available for all! Love the additions. I was trying to download it from you link above:

    Download: The Unstandard theme version 2.0!

    -But it seems to lead to “sorry not available” type screen. Where can I download it from?
    Thanks!

    [Reply to this comment]

  • @rohin
    I just checked out my code after your posts and it seems that I have placed the code in show_categories.php at the very top!

    –edit–
    Could you try the same code (< ?php if(function_exists('wp_pagenavi')) { wp_pagenavi(); } ?> ) in show_categories.php and let me know if it works now?

    PS: Lester does not support it, because you’re having troubles with a modified theme…

    [Reply to this comment]

  • Forgot to mention when I do replace the standard code with in home.php i get an error saying the following Warning: Missing argument 1 for query_posts() in “/html/wp-includes/query.php on line 59″

    any ideas ?

    [Reply to this comment]

  • I meant to say that when I activate wp-pagenavi and place the php code under the content area of the home page, it just doesn’t show up.

    I tried posting on lesterchan’s forum but he’s no longer helping anyone it seems unless you pay him. I don’t blame him since it’s very popular.

    [Reply to this comment]

  • @rohin
    You can customize the accompanying CSS (/wp-content/plugins/pagenavi/pagenavi-css.css) of the plugin as you wish…

    [Reply to this comment]

  • argh , why can i not get page-navi working , I read your how-to but I don’t want to go that route , i would like to customize how it looks with css and all that.

    [Reply to this comment]

  • Please refer to this post for a better and fully improved version of this theme: Unstandard theme now Wordpress 2.7 compatible

    [Reply to this comment]

  • bibi

    When i change the following lines

    and change it into

    I get the following error:

    Warning: Missing argument 1 for query_posts(), called in /home/…/home.php on line 18 and defined in /home/…/wp-includes/query.php on line 59

    and no nav bar is shown.
    Any suggestion?

    [Reply to this comment]

  • hey tschai

    thanks for the quick reply. You certainly pointed me in the right direction. Although I was not able to get the link http://url/page/2/ to work. It just keeps displaying the original page (title says “url – part2″ however).
    I have followed the instructions provided by you and the original author. The difference on your site is that you integrated the page-navi function on home.php, and not in the footer. Is there something I am overlooking?

    I am not expecting you to troubleshoot my site. As you can see I’ve set the max number of posts to whatever I have in the wordpress setting. Now it shows every post made thus far. I think displaying 13 or 15 posts with this theme is not too much. This page-navi thing is driving me nuts though. (I’ve tried to email you personnaly, but got a reply the message was not delivered)

    Thanks

    wim

    [Reply to this comment]

  • This post is updated with a lill’ pagination instruction; see Update 3 at the bottom of the post.

    [Reply to this comment]

  • just saw your post.
    And your post about the unstandard theme we are using as well.
    Luckaly I saw you were using a page navigation plugin. Just the type we are looking for as well. Could please explain how you got it to working?

    Check our site http://www.bokehs.be and you’ll see that we have been using the same theme.

    Thanks in advance

    Grts

    Wim (from Belgium) (not a code expert)

    [Reply to this comment]

  • Hey Tschai

    Thank you for sharing your work with us. We will definitly incorporate a couple of your features ! It’ll take a while to have them up and running, but if you like visit our dutch site http://www.bokehs.be.

    grts

    [Reply to this comment]

  • Hello there!

    Great changes! But can you please update your theme by automatically adding alt text on images? We want the site to be accessible to blind users. Thanks.

    [Reply to this comment]

  • Thanks for creating your version of the theme. It motivated me to finally convert my site over. Check it out at http://www.designbliss.com. I changed the color scheme and created my own custom header.

    [Reply to this comment]

  • That’s it, my site which uses your mods of the Unstandard Theme is up !

    http://www.thinkingdiver.com

    [Reply to this comment]

  • Only the instructions for ‘2a.Widgetize sidebar’ (editing your sidebar.php and uploading functions.php) should do the trick…normally.

    After having applied the above instructions, you should see in your backend/dashboard menu ‘Design’ > ‘Widgets’ all available widgets and ‘Sidebar 1′ under ‘Current Widgets’.
    So far, so good?

    Your issue is that adding a widget does not show the content of your widgets? Any widget?

    [Reply to this comment]

  • Tschai,

    I am having the same problem that Tim is. I will note, however, that I have only followed the “Widgetize sidebar” directions. Do I need to widgetize the footer as well?

    Thanks!
    Kerm

    [Reply to this comment]

  • Boris, download the whole package above: within you’ll find the full functions.php

    Thanks for the tip: I’ll update the post with a clear instruction for this.

    [Reply to this comment]

  • What code I supposed to have inside functions.php file?

    [Reply to this comment]

  • Your conclusion is right Erik and your suggested solution also. I’ve updated this post with details how to achieve this easily.

    [Reply to this comment]

  • On my installation, the Recent Comments widget contains two HREF, one for the author web site and one for the link to the comment. This and another problem causes the line to display strangely which you can see in the recent comments section of http://www.thinkingdiver.com

    The other problem causing this issue as far as I can tell is the fact that that widget defines .recentcomment inline with no padding. I can fix that in the CSS. I can also fix it with something similar to the following in functions.php:

    if ( is_active_widget(’recent-comments’) ){
    remove_filter(’wp_head’, ‘wp_widget_recent_comments_style’, 10, 1);

    }

    but I can’t seem to figure out the right syntax.

    So ideally, I’d fix it by either:

    (1) Figuring out a way to add the background image to only the first of the line ?
    (2) Changing or using another widget for recent comments which doesn’t use two links ?

    I was wondering if you faced a similar issue or if you just bypassed it by using a different widget ?

    Thanks in advance for your help, I tried to email info@ but it bounced.

    [Reply to this comment]

  • Are your sure Tim, that you’ve followed/checked all the instructions above? All should work well if you haven’t missed a step.

    And do you happen to have a link to the site you’re talking ’bout?

    [Reply to this comment]

  • when trying to activate widgets nothing happens on the site. ive tried to put widgets in each of the 3 locations but the areas just stay blank… any ideas why this could be happening? i hope i can get it working ive been after this theme for ages! thanks

    [Reply to this comment]

  • Hi Jonas,

    That is quite an impressive modification, but be warned that the site is totally messed up in IE7.
    I know…IE sucks, but a lot of people still use it (no, not me!).

    [Reply to this comment]

  • Here is a mod I did for my friend Chris:

    http://s39447.gridserver.com//new/

    Thanks for the excellent code base!

    J

    [Reply to this comment]

  • Also a fan of the Unstandard theme?

    Than check out my post The Coolest blog…with the Unstandard theme and please leave a comment, so I can get nominated.

    Thanks allready.

    [Reply to this comment]

  • Hi Farid,

    See my ‘Recent Posts’ widget in the footer: the latest post has a very long title and it gets wrapped very nicely. So that’s one option.

    Another one would be that you adjust your footer.php and the width in your CSS so that you only have two much larger widget spots.

    [Reply to this comment]

  • Hi Tschai,
    at first thank you for your help

    I prefer your theme
    just took another to have french version (this version is safe)

    I’d like to use your, BUT
    if i did it
    is it just possible, to change the css…
    cause
    i d like to use all the width of the sidebar (like seachbar)
    it s better for the long titles

    Thank you for your help !

    [Reply to this comment]

  • Hi Farid,

    First of all I would like to point you to this article of Derek: Do not download WordPress themes distributed by 3rd party sites.
    So, just make sure your template is ’safe’.

    If that is the case than all you should do is follow the instructions above.
    I checked your site and it looks like you have somehow mixed the height and width numbers in your CSS:

    Instruction: height:300px;
    You’ve got: height:310px;

    Intsruction: width:310px;
    You’ve got: width:300px;

    Please, let me know if that fixes your issue.

    [Reply to this comment]

  • Hi
    I need help with my unstandard theme
    i took a french version from niss.fr

    but

    I’d like to have the same footer you use
    could you help me
    i think i have a trouble with the .css

    [Reply to this comment]

  • Oh… I figured it out… don’t bother.. :)

    [Reply to this comment]

  • Thanks a ton, Tschai. Everything works perfectly but for the minor thing of author background colour. Somehow that is not turning up correctly for me.

    [Reply to this comment]

  • What luck finding this theme!

    One thing I hate is finding a great looking theme but later discovering that it’s old and doesn’t support widgets or works with the latest Wordpress. Great job on updating the theme Tschai.

    [Reply to this comment]

  • On request , I’ve updated the post with instructions how to widgetize and gravatarize the original Unstandard theme v0.1.
    You should do this if you’ve already hacked the original one. If you’re installing it from scratch I suggest you download and install the full package.

    Please, let me know if there are typo’s or code too much or missing, so I can edit the post.

    [Reply to this comment]

  • Thankyou, Tschai. That would be HUGELY appreciated. :)

    [Reply to this comment]

  • Hi Magneto,

    Visited your site and it’s indeed too far from the original to overwrite everything. Nice site by the way.

    I’m working on an update of this post, with instruction to widgetize and gravatarize the original.

    [Reply to this comment]

  • Hello Tschai,

    Thanks for the wonderful effort you have been putting in to refine Unstandard! I was just trying to figure out how to get the Gravatars working and also had tried to make the theme widgetized by following the instructions give at the forum. But I found that eventhough it worked on Firefox and Opera the patch didn’t work for IE 6 which makes it somewhat useless. But your version works on everything!

    But I am in a dilemma as to what to do here. I have already made numerous tweaks to the original Unstandard theme at my site at http://www.home-designing.com/ that I dread at the very thought of having to do it all over again. Can you help me as to what exactly I need to edit to add gravatars and widgetizing function on the original Unstandard theme? I think it would be easier for me to treat the original Unstandard as a starting point and make the changes you have done to support Gravatar and widgets. Hope you can help me out…

    Once again thanks for your efforts.

    Regards,
    Magneto

    [Reply to this comment]

  • Hi DT,

    You should be just fine by overwriting the original files (do backup!).

    But be aware (should you do it on a ‘live’ environment) that there are references/links to my site, which you should edit…

    But I see you changed your CSS/colors, so you should take the changes in the CSS with you…

    [Reply to this comment]

  • Is it necessary to remove the original unstandard template from the theme directory, as I’m not able to get the css to load on a test URL?

    [Reply to this comment]

  • 2kM: you can just replace show_categories.php
    take it from original theme http://5thirtyone.com/the-unstandard

    [Reply to this comment]

  • Mooie avatar Sener :-)

    [Reply to this comment]

  • I just figured out, there’s still some hard-code to some plugins I used…I will strip them and upload a new version this weekend.
    Stay tuned!

    –edit–
    Fixed and tested locally.
    Please, let me know if you still have issues.

    [Reply to this comment]

  • Hello, when I activate your modified Unstandard, I give an error message:

    “Fatal error: Call to undefined function ctc() in /pool/services/ftp/kesport/wp-content/themes/unstandard2/show_categories.php on line 4″

    Why?

    [Reply to this comment]

  • Derek, the author of the original Unstandard theme, has put an official link to my version at his blog on 5thirtyone.com, with a not that he (off course) will not support it himself.

    [Reply to this comment]

  • Incoming Links

    Leave a Reply (most recent reply shown at top)