How to add a dynamic sidebar in WordPress?
Do you ever wonder that you have one sidebar, but you want to display widgets in other places, and they don’t come in with manual codes that you can enter in the page and avoid using the widgets. Well there are some widgets that doesn’t have the manual tags. The solution to those is to add more than one dynamic sidebar in wordpress and display them where you want. I like this because I can manage everything from my wordpress admin panel and have everything where I want on the template. Kill two birds with one stone.
I have made a detailed video, which I will recommend you to watch because that will make the steps much more understandable, but I think you need to visit here to actually get the codes because it might not be as clear in the video.
First of all, Open your functions.php which is located in the themes folder.
[raw]
<?php
if ( function_exists(‘register_sidebars’) )
register_sidebar();
?>
[/raw]
By default it shows something like I have put above. Replace these codes with the ones below:
[raw]
<?php
if ( function_exists(‘register_sidebars’) )
register_sidebar(’2′);
register_sidebar(’3′);
register_sidebar(’4′);
?>
[/raw]
You can add the numbers as you go. Remember you start with 2 because sidebar 1 is already defined.
Now is the part where you need to see the video because that explains better with live tutorial.
You go to the admin panel, and get to the widgets page, and you will see more than one sidebar there. Upload the widgets in the desired sidebar. Say you want to display the mybloglog recent visitor widget in the footer. You copy that widget in your sidebar 2 or whichever one.
Than open the file where you want to display the codes. In our case footer.php
[raw]
<?php if ( function_exists(‘dynamic_sidebar’) && dynamic_sidebar(2) ) : else : ?>
<?php endif; ?>
[/raw]
Add the codes above, and make sure you change the sidebar number.
This should do it. Enjoy your dynamic sidebar. This will make your life so much comfortable now because you can edit settings through the admin panel rather than editing each plugin file individually.
Hey, I am Syed Balkhi, The guy who is behind Balkhis Inc. I entered the industry back in 2002 not knowing a single thing. I barely spoke English at that time. In the past six years, my language barrier has been eliminated. Aside from English, now I also speak html, and php. Along with the languages I have also managed to master a few arts. Art of web-designing started when I first entered. Messing around with photoshop, I learned how to create my first web design. Now I founded a web designing firm Uzzz Productions. After running numerous amount of websites in various niche, I have mastered the art of web-development. Now I am compiling a resource of what I already know, and what I am learning on this blog. This resource is to help me if I ever need a guide to look back to, and it is help my fellow webmasters.
Hi Syed, great video but unfortunately no matter what I did I could not see exactly some of the important parts. I even headed over to YouTube to see if it was clearer. The video is larger, but still too blurry for me to see
That aside, I’m also wondering does this only work for WP 2.5?
sorry about the blur in the video, I guess next time I would just make the fixed size window and fit it all in there. No this will work in any verson if wordpress not just 2.5. I just showed 2.5 because that is the one I have on Balkhis.
You should really upgrade to WP 2.5
It is much much better!
Nice one, this worked great your instructions were very helpful, now i can call different sidebars for different pages as i wanted to.
Diane it does work with all WordPress inc. 2.5. It is not too hard, you can do it in 2 steps.
Step 1. Open functions.php and add the first section of code.
Step 2. Then open up the template page where you want the numbered sidebar to appear, e.g category.php and add the second part of code. Please give more details of what exactly you want for more specific help.
And Syed a problem is you have spaces in your php code between question mark and <.
Again Many Thanks.
Thanks Harry, it is fixed now.
At that something new to me, and really straight to the point too. Thanks syed for the guiding video and word guide.
glad I am able to help you David
That was helpful. I figured out how to add the mybloglog widget to a few of my blogs.
I am glad that I was able to help you a bit. I first used it on Balkhis due to that reason also, but then incorporated it everywhere just to make it more friendly with the admin panel.
This was really helpful, thanks!
I added extra sidebars easily. After adding some content, including special php via “Executable PHP widget”, one of my dynamic sidebars includes a corrupt widget that I can’t remove (no “remove” button available – only error message).
Do you know how to “empty” a dynamic sidebar?
Umm you can just go to your admin panel. I am assuming that you are on the latest version 2.5
Go to Design > Widgets
On the right hand side it will show Current Widgets and below it there will be a select box saying Sidebar 1, Sidebar 2 and so on. Pick the sidebar where your widget is.
Click to edit your broken widget, and you should see the remove button there.
Hope this helped.
Thanks for the reply. I wish it were so straight forward as you say.
The fact is that the top and bottom of the right hand widget is missing — so no “edit” and thus, no “remove”. Only the middle part shows — and in it is only an error message.
Thanks for the reply. I am indeed using WP 2.5.
The fact is that the top and bottom of the right hand widget is missing — so no “edit” and thus, no “remove”. Only the middle part shows — and in it is only an error message.
I can probably just not use “sidebar 3″ which contains the error widget, but just knowing it’s there really annoys me. I wish I could make it go away.
edit your functions.php and you can get rid of the entire sidebar all together.
I tried editing Sidebar 3 out of functions and then editing it in again. It went away, and came back when I edited it in again.
I think I have a fix though (through WordPress.org’s forums):
http://wordpress.org/support/topic/169863?replies=2
I am glad you got your answer.
Im not able to get my functions.php
How to do it??
Lovely post Syed, I had never heard of such a thing before. Sounds very logical and very useful. But I still like to edit the code itself. My sidebars generally have no widgets at all. I like to put everything in the codes
Thanks for explaining i was trying to do it by myself once and it got real confusing, but i’ll watch this video and learn from it.
Thanks for the great tutorial. I will have to try this out. I was going to ask you, how do you experiment with WordPress, do you have a test blog set up because thats what I do.
[...] Dynamic sidebar [...]
Thank you for the tips! It helped me a lot. Now I have two sidebars fully working in my website!!
You should try contribute to WordPress Codex with this video. I haven’t found a clue on this issue in there.
I am glad you liked my tutorial. I made an account on codex and wrote on only one thread. I just can’t find time to go there. I wish I can make my own article saying how to make a dynamic sidebar and sticky it on WP Codecs. If you find people you are welcome to link them to this site.
Thanks for the information. I could not find it anywhere else.
It Works great,I had a problem – when i say put in 234 it will show only 123 and never the sidebar I want to access, i.e if i input 2345678 it will only show 7 sidebars, and still i could not access the one that is really active.
so i looked at the source and sidebar code, still couldnt figure it out.
So what i did was delete it all and use your code, now I can see the active widgets displayed
All i wanna do now is take off the bullet points, any tips on that?
Thanks again for your help this saved me a lot of trouble.
Glad my codes were helpful. For your current problem:
Open your style.css
Look for your id sidebar. #sidebar
Then look for the #sidebar ul or something with your specific class.
Add this:
list-style: none;
list-style-type: none;
That should take care of the problem.
Let me know whatever the outcome is whether its fixed or not
That worked! Thanks. I just put {list-style: none;} right after #sidebar in style.css. I have lost the style of the default sidebar with the theme but thats something i should learn about anyway.
p.s a tutorial on importing linked graphics to the sidebar would be awesome
thanky very much!
Hi Thanks for the article, i’m making a few WordPress pages and this has been an issue. good work
http://www.scottydonald.com
Dear Balkhis.
The code works great with me, but let’s say i want to display sidebar (2) in a page template, as a replacement of sidebar(1)?
How do you write the php code in the page template?
????
Thanks a lot.
Gionata Nencini
http://www.Partireper.it
Well in this case, you would have to place the sidebar code in the page rather than footer and modify the whole template. So basically what you will do is have the normal sidebar in the index.php, but when it is page.php insert the second sidebar …
thanks for the reply.
may i ask what is the code you would put in the page.php template to display the second sidebar?
I’ve tried few different combination, but it shows always the first one…
Thanks a lot.
Gionata Nencini
http://www.Partireper.it
Dear Balkhi again…
Sorry for commenting again, but i really would like you to help me with that php code.
What do i write in page.php to acquire the second sidebar?
Regards.
Gionata Nencini
http://www.Partireper.it
You change the number of the sidebar. If you would like me to do it please use the contact form … you can hire me to do it for you.
Thanks for the tip syed. I really like how you made it very straightforward. You saved my life and that of my actual theme cuz I was about to trash it.
Thanks for the video. How ever my dynamic side bar doesn’t work. This is what I think is the problem. My template came with a dynamic side bar.(I have gone back to the orginal sidebar) However, when I go to the widgets page on WordPress only one sidebar is shown. And none of the widgets currently on my sidebar are shown. When I try to add widgets it deletes the orginal dymanic sidebar and replaces it with one. This is why I started searching for codes to fix or replace my tool bar which isn’t working properly. Please help if you can. I would really like to be able to add more widgets to my sidebar. Thanks.
To help I have added the codes in my template
THEME FUNCTIONS
SIDE BARS
Welcome to the Working Divas Blog!
STYLE SHEET
/*——————– Sidebar ——————–*/
#sidebar { float: right; width: 290px; margin: 0; padding: 0; }
#sidebar h2 { display: block; margin: 16px 0 6px 0; padding: 0 0 10px 3px; font-size: 1.4em; list-style-type: none; color: #CC0000; }
#sidebar ul { clear: both; margin: 0; padding: 0 0 20px 0; list-style-type: none; }
#sidebar ul li { clear: both; }
#sidebar ul.no-splitted li { background: transparent url(images/bullet.gif) no-repeat 5px 1px; padding: 0 0 0 23px; }
#sidebar ul.no-splitted li:hover { background: transparent url(images/bullet-blue.gif) no-repeat 5px 1px; padding: 0 0 0 23px; }
#sidebar ul.no-splitted li a:link, #sidebar ul.no-splitted li a:visited { color: #666; text-decoration: none; }
#sidebar ul.no-splitted li a:hover, #sidebar ul.no-splitted li a:active { color: #444; text-decoration: none; }
#sidebar ul.no-splitted ul li { margin: 0 -5px; }
#sidebar p, #sidebar form { margin: 0 5px; padding: 0 0 20px 0; }
#sidebar ul.blc { padding: 0 5px; }
#sidebar li#sidebar-splitted { float: left; width: 100%; margin: 0 0 15px 0; }
#sidebar-splitted .splitted-left { float: left; width: 140px; }
#sidebar-splitted .splitted-right { float: right; width: 145px; }
ul.splittedlists li { background: transparent url(images/bullet.gif) no-repeat 5px 1px; padding: 0 0 0 23px; }
ul.splittedlists li:hover { background: transparent url(images/bullet-blue.gif) no-repeat 5px 1px; padding: 0 0 0 23px; }
ul.splittedlists ul li { margin: 0 0 0 -23px; }
ul.splittedlists li a:link, ul.splittedlists li a:visited { color: #666; text-decoration: none; }
ul.splittedlists li a:hover, ul.splittedlists li a:active { color: #444; text-decoration: none; }
With what you are describing to me, I am going to say that your template did not come with a dynamic sidebar. It have the codes without the number. I recommend you follow the tutorial and add your dynamic sidebars.
[...] How to add a dynamic sidebar in WordPress? [...]
When you are working in the new version of wordpress (2.8.1) you don’t do:
register_sidebar(1);
register_sidebar(2);
register_sidebar(3);
you do register_sidebars(3); instead and it knows to grab all three.
Good post – VERY helpful.