How to Widgetize your WordPress sidebar
WordPress widgets are great. They have tons of amazing functions and are extremely easy to use. The only problem is that not all themes support them. But that is a problem that is very easily solved with just a little bit of coding.
First you need to open up your theme’s functions.php file. IF you don’t have one, create one and place it in your theme’s directory. Make sure you have an opening and closing PHP tag.
Here you have two options. The simple option is:
if (function_exists("register_sidebar")) { register_sidebar(); } |
The more complex option is:
if (function_exists("register_sidebar")) { register_sidebar(array( 'name' => 'left-sidebar', 'before_widget' => '<div class="side-widget">', 'after_widget' => '</div>', 'before_title' => '<h2>', 'after_title' => '</h2>', )); } |
The complex option gives you the ability to name your sidebar. Here you have “left-sidebar” as your name (just in case you ever want to add a second sidebar). You have also coded what you want to appear before the widget, after the widget, before the widget’s title and after the widget’s title. So now all your widgets will appear on the front end with HTML like this:
<div class="side-widget"> <h2>Widget Name</h2> <em>Widget stuff</em> </div> |
You can now style your Widgets to appear how ever you want by creating a style for .side-widget in your style.css stylesheet. You should also create a style for the unordered lists that will appear, since most widgets display text under a list. Add .side-widget ul and .side-widget ul li to you style.css file as well.
Next you need to add some code to your sidebar.php files to make it all functions properly.
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?> <!-- Add your stuff here --> <?php endif; ?> |
or
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(1) ) : ?> <!-- Add your stuff here --> <?php endif; ?> |
or
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('left-sidebar') ) : ?> <!-- Add your stuff here --> <?php endif; ?> |
The above will all do the same thing (but the second and third option are necessary if you have multiple sidebars).
Now all you have left to do is go into your WordPress admin section for your widgets and add some to your sidebar.
Hey, How do I add that named sidebar to my template?
I followed these instructions and then tryed:
Didnt work
It cut off your code. Can you please try putting it inside a <code></code> tag so I can take a look.
I’ve followed your tutorial and registered the 3rd sidebar on my site, the left and right are working correctly, but the one in the middle displays question marks before and inside the widgets.
Do you know what went wrong?
Hmm. I would have to see it to try to figure out the issue.
How would I specify different $args array for 2 different sidebars?
Two sidebars should look like this:
I am trying to follow your widgetize instructions down to the T, and it is riddled with tiny errors that would frustrate anyone who is not comfortable to php coding. Finally got it working now.
What errors did you encounter?
I would suggest including the opening and closing PHP tags of the first two coding options for the functions.php file to avoid any confusion. The 2nd error I encountered was the PHP if statements didn’t end properly.
It took me a few minutes to figure out. I did manage to get my widgets activated thanks to your article.
I recently came across your blog and have been reading along. I thought I would leave my first comment. I don’t know what to say except that I have enjoyed reading. Nice blog, I will keep visiting this blog very often.
I dont have
register_sidebar(array(
‘name’ => __(‘Second Sidebar’),
‘before_widget’ => ”,
‘after_widget’ => ”,
‘before_title’ => ”,
‘after_title’ => ”,
));
AND is ok
It is a very informative and useful post… Thank you it is good material to read this post
Hi,
Can you tell me where in the header i have to put this code:
Widget Name
Widget stuff
And is the code OK? Or do i have to open end close it with a php or html tag?
i my message above i mean the code you have to put in the header, the 3rd code of the tutorial
None of that code needs to go in the header.php file. The only code that could go in the header.php file would be the call to the sidebar, ie. the
get_sidebar()function.Thanks for nice info. It’s useful for me. Can you give me some more information with details? I will wait for your next post.
A perfect info source for souvenirs from Vienna I came to your article from another article and am really interested in this learning about this. , I feel strongly about information and love learning more on this. If possible, as you gain expertise, It is extremely helpful for me.
Thanks for the tips, will give it a go
It is a very informative and useful post… Thank you it is good material to read this post increases my knowledge
Hi and thank you for this nice tutorial but you forgot to give your 3 last codes an end tag
when I realised why it wasn’t working.You are correct, sir. Thanks for pointing that out. I just fixed it.
Here you can see a lot of BDSM videos with the famous model: Cecilia Vega. The video of the most beautiful and depraved Cecilia only on our blog. Only the best clips and videos with this model. Many people say that Vega is one of the most interesting actresses of the BDSM category. Our video to prove it.
Hello,
I just need some quick help with my wordpress blog. My sidebar is showing up at the bottom of the page after my posts. I don’t know how to get it back to it’s normal place.please help me.
Regards,
John
You might have a conflicting plugin or maybe you added something to your post content that is causing the issue. Look at your post content in the HTML editor to make sure you don’t have any rogue tags.
What an awesome job you’ve done here. I simply love WordPress and all the customization possibilities it brings.
Thanks,
Thomas from Denmark