RSS Feeds: WordPress Sidebar Scrollbox
I've noticed this on some blogs. When a widget (recent posts, categories, archives, etc.) gets too long and you have to scroll down seemingly like forever, that widget either gets its own page or gets trimmed in some way. I'm here to offer an alternative, but it's not for the code queasy. You'll have to edit your theme by hand.
Let's take my own "Recent Posts" widget (from either the Tiga or Tigapedia themes) and make a scrollbox, changing the one on top to look like the one on the bottom:
Step 1:
Find the code in the style sheet that affects the "Recent Posts" widget". In my style sheet, it's called "left-widget":
.left-widget {
border-color:<?php tiga_widgetBorderColor(LEFT);;
width:<?php tiga_leftWidgetWidth(); ?>px;
border-width:0px 1px 1px 1px;
border-style: solid;
color:#000000;
background-color:#f8fbfd;
padding:5px;
margin-bottom:5px;
font-size:13px;
}
Step 2:
Add a new widget to the bottom of the style sheet:
.scrollbox {
border:0px;
margin:-5px;
padding:5px;
width:<?php tiga_leftWidgetWidth(); ?>px;
height:350px;
overflow:auto;
}
a. The border is set to 0 to prevent an extra or double-thick border within the widget.
b. The margin is set to -5px to counteract the 5px from the left-widget.
c. The padding is set to 5px to make everything line up with with widgets above or below.
d. You can specify any height you wish, but it shouldn't be very short. Other items not specified are inherited from the left-widget.
Step 3:
Find the code in your theme that displays the "Recent Posts" widget. Mine is in the "sidebar.php" file:
<!– Begin – Recent Posts –>
<div class="left-widget-title"><?php _te('Recent Posts'); ?></div>
<div class="left-widget">
<ul><?php get_archives('postbypost',tiga_recentPostsCnt(),'custom','<li>','</li>'); ?></ul>
</div>
<!– End – Recent Posts –>
Step 4:
a. Above the line starting with <"ul">, insert "<div class="scrollbox">".
b. After the line starting with <"ul">, insert "</div>
That's all there is to it!
I only did this temporarily to my theme because none of my widgets are that long yet, except maybe the link categories. The cool thing about this is that I can have as many "Recent Posts" as I want and it won't make the widget any bigger.
Eventually, my archive months and my categories will start getting longer than I like. When it gets out of hand, I'll be using this code.
Similar Posts:
OK. I found it. This is awesome. I can't wait to implement this on my blog because I don't like when the sidebar widgets get too long.
Your site is very easy on the eyes and I want that same effect for my readers too.
Thanks for posting this!
what is the Tigapedia theme? Is that your modification?
No, it's done by Sizlopedia.com – Mine is a highly modified version of the Tigopedia theme which is a highly modified version of the Tiga theme. Does that make sense? It confused me to say it.
Hi.
I tried these instrux on my site for my "Categories" Widget.
I did Step#2 for both left and right widgets. I placed them one right after another. I tried putting them at the end of the Sidebar Section in the style.php sheet. didn't work. Then I tried putting them all the way at the very bottom and that didn't work either.
This is what step #4 looks like for me:
Can you suggest anything to help me? If not, I understand. Thank you!
It didn't take the code. I did what you said for step #4. thx.
Try this in sidebar.php:
<!– Begin – Categories –>
<div class="left-widget-title"><?php _te('Categories'); ?></div>
<div class="left-widget"><div class="scrollbox"><ul><?php wp_list_cats('sort_column=name&optioncount=1'); ?></ul></div></div>
<!– End – Categories –>
If it doesn't work, then shoot your sidebar.php and style.php over to me. I'll make them work.
[...] Untwisted Vortex: Blogging from the Philippines on any subject that takes his fancy, RT also produces some quality stuff on blogging, from coding to writing, monetizing to networking and plenty more besides: Taster Article: Create your own WordPress Sidebar Scrollbox. [...]
[...] used to Richard's site for that). I googled for a solution and I found his own post about it here! I didn't want to play with my template so I simply used a text widget where I put : <div [...]
Hi,
Would this affect all widgets in my sidebar? I only really want the scrollbar feature one custom text widget "Upcoming Events", but not the others in the same sidebar.
Cheers,
TW
No, this is on a per-widget basis.