Jan 13

WordPress – Create custom widget area

by Amit

If you are looking forward to create your own widget area in wordpress, then you are at right place. Creating custom widget area is something like creating your own sidebar widget area, but with the flexibility to place it anywhere in between your template code, so that might be in header.php, footer.php, page.php or index.php. And with the help of which you can display widgets of your own choice.

1. Locate functions.php in your active theme folder and add the bellow code in it.

if ( function_exists('register_sidebar') )
    register_sidebar( array(
   'name' => __( 'My Custom Widget Area - 1'),
   'id' => 'mycustomwidgetarea',
   'description' => __( 'An optional widget area for your site footer', 'twentyeleven' ),
   'before_widget' => '<aside id="%1$s" class="widget %2$s">',
   'after_widget' => "</aside>",
   'before_title' => '<h3 class="widget-title">',
   'after_title' => '</h3>',
   ) );

2. Next step is calling widgets area from theme template files. For that you just have to place this code in the div or any other container you wish. You can place the bellow code in – header.php, footer.php, page.php, index.php, single.php or any other template related files.

<?php 
 // Custom widget Area Start
 if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('My Custom Widget Area - 1') ) : ?>
<?php endif;
// Custom widget Area End
?>

Here you are done, your widget area is ready to drag your widgets in it. What are you waiting for go ahead and drag widgets to display on your website.

If you like you can also view our post to enable PHP code exicution in text widget

WordPress – How to resolve thumbnail issue while facebook sharing

Adding PayPal Donate Button in WordPress Post and Page

Adding Custom Widget in WordPress

← Prev post Next post →

http://www.lesbijouxdemaeva.fr/colliers-fantaisie-courts-colliers-sur-torque-ferme-xsl-349_353.html Site web

Spot on with this write-up, I truly suppose this web site wants much more consideration. I’ll most likely be again to read rather more, thanks for that info.
http://fenwayapartments.org Fenway apartments

Fantastic goods from you, man. I’ve understand your stuff previous to and you are just extremely excellent. I really like what you’ve acquired here, really like what you’re saying and the way in which you say it. You make it entertaining and you still care for to keep it sensible. I can not wait to read far more from you. This is actually a great website.
http://azael659.insanejournal.com/1933.html Jody Katzman

Does your blog have a contact page? I’m having trouble locating it but, I’d like to shoot you an e-mail. I’ve got some suggestions for your blog you might be interested in hearing. Either way, great website and I look forward to seeing it expand over time.
- http://www.tips4developer.com Amit
  
  Hi Jody,
  
  Today i have added contact us page, you can find that on top navigation. Sorry to deploy this late.
http://www.wieistmeineip.de James McDougall

I have to express my thanks to this writer just for bailing me out of this type of trouble. Right after looking through the internet and finding notions which were not beneficial, I thought my life was over. Being alive without the approaches to the difficulties you’ve fixed as a result of this article content is a crucial case, and ones that would have badly affected my career if I had not encountered your website. That know-how and kindness in taking care of all things was helpful. I am not sure what I would’ve done if I hadn’t come upon such a stuff like this. I can now look forward to my future. Thank you very much for the expert and amazing help. I will not hesitate to suggest the blog to any individual who ought to have guidelines on this area.
Poonam Jain

Thanks for the data – just what I was looking for.It would sure be sweet if this was relatively easy for a non-coder to integrate into WP (no Java!) – just HTML/CSS:
http://eternalcracked.com Born

Thanks so much dude, you rock!
http://wordpresscommunitytheme.com/ wp community

It only took 10minutes to create a custom widget area following your instructions. That was an easy to understand explanation. Thanks loads
Geoff Veitzkoff

Wow thanks for the great reading. Made it easy to understand, and made me realize with some effort I can do it. Ginger
http://slowestwp.com/ olengk

Great, I’ll try it for my themes
jethro

I’ve tried this code. But there seems to be a problem When I drag my widgets into the newly created widget area, it does not store or save the widget.

any fixes?
- http://www.tips4developer.com Amit
  
  Hi Jethro
  
  I don’t find such a issue till now, as even i used the same code on multiple sites and even no one else reported such a issue till now. This seems like some issue with the theme you are using. I can help you if you can share your site credentials. So you can personally communicate with through http://www.tips4developer.com/contact/
http://redstarwebdevelopment.com Dave

Fantastic tutorial! One quick question, since that looks like an array, could I bundle multiple widget areas into that functions.php code snippet? And what would be the syntax to do that?

I’ve added three widget areas to a page (left, middle, and right), and I figure the code could be optimized quite a bit.
- http://www.tips4developer.com Amit
  
  Hi Dave
  
  You can add as many widgets, so for that you just have to create new array. In this way your code under function.php will look something like this (In this example i am adding “My Custom Widget Area – 1″ and “My Custom Widget Area – 2″)
  
  if ( function_exists(‘register_sidebar’) )
  register_sidebar( array(
  ‘name’ => __( ‘My Custom Widget Area – 1′),
  ‘id’ => ‘myCustomWidgetArea1′,
  ‘description’ => __( ‘An optional widget area for your site footer’, ‘twentyeleven’ ),
  ‘before_widget’ => ”,
  ‘after_widget’ => “”,
  ‘before_title’ => ”,
  ‘after_title’ => ”,
  ) );
  
  register_sidebar( array(
  ‘name’ => __( ‘My Custom Widget Area – 2′),
  ‘id’ => ‘myCustomWidgetArea2′,
  ‘description’ => __( ‘An optional widget area for your site footer’, ‘twentyeleven’ ),
  ‘before_widget’ => ”,
  ‘after_widget’ => “”,
  ‘before_title’ => ”,
  ‘after_title’ => ”,
  ) );
Jon

FYI: Assigning an ID to each widget breaks it. Remove the following if you lose them when saving: ‘id’ => ‘myCustomWidgetArea1′,
http://www.ross.no/communicate Morten Ross

I’ve noticed a peculiar behavior: after I’ve added and saved widgets they do show up (in my case in the single.php), but when I return to the Widgets the “My Custom Widget Area – 1″ is now empty!

So the widgets I previously added (3 in total to display in single.php) display in all posts, but no longer in Widgets.

How to fix this?

Regards
Morten
- http://www.tips4developer.com Amit
  
  Hi Morten
  
  Thanks for you previous comment, and i will surly look for the captcha issue. Further your question is not that much clear to me. So is this something that at your end “My Custom Widget Area – 1″ or “My Custom Widget Area – 2″ are not visible in admin, like i have shown in the screen cap in my post. Or this mean that the actual widgets you dragged in widgets area “My Custom Widget Area – 1″ or else keeps removing.
http://www.ross.no/communicate Morten Ross

Hey Amit,

As per my previous post, it’s the “My Custom Widget Area – 1″ in the WP-admin that has gone empty – all the widgets previously saved in this container is gone, but not in the blog post (populated by single.php).

If I want to edit the widgets displayed in my posts, I must first browse a random post to see which widgets I had and in which order (to make sure it’s the identical order and widgets I re-add), and then re-add these into “My Custom Widget Area – 1″. Only then can I change the order or add new ones, because if I add a new widget and save, only this widget will display in the posts.

BTW: I use WP 3.4.1.

As for commenting – I highly recommend adding Disqus, as it will be your global hub for commenting from G+, F, WordPress and other visitors. Most importantly I (the commentor) will be notified when there is a reply to my comment (which did not happen here), and this thread will also be added my Disqus account comment history).
- http://www.tips4developer.com Amit
  
  Hi Morten,
  
  It seems like the issue you reported is something related to WP 3.4.1, and before to this i have never experienced this till 3.3, as i used the same code # of time. And just to inform you and other and what i noticed that starts from 3.4 there are some codes and snippets not working, including so many plugins.
  
  So i have to look in the solution for your issue, i will get back to you soon.
  
  Then i reaaaaaly appreciate your suggestion to update commenting system with Disqus. I will surly work on this by this saturday.
  - http://www.ross.no/communicate Morten Ross
    
    Hi Amit,
    
    Whops – I just posted a comment, and then Disqus replaced everything Seems I was in the middle of the upgrade and that the Disqus import was completed as I posted….. This is thus a re-post.
    
    I’ve discovered several odd behaviours in WordPress:
    
    1: After saving a post, the screen doesn’t refresh, and stays blank. When I go back and refresh posts, the post changes was saved though.
    2: The WP admin login screen does not appear! When I opened IE, Firefox and Opera I noticed there was no WP-Admin logon screen! Luckily I didn’t log out of the session in Chrome as I would have been locked out!
    
    I therefore had to painstakingly roll-back my theme to the point in time before last upgrade – no change.
    
    I narrowed it down to your code in functions.php and when I removed it all was back to normal.
    
    It seems I’m having some similarities as jethro, except that I could save the content of the widget container.
    
    Hope you can resove this soon, as I really like your solution. Yours is the best I have found – so I’m not really interested in any alternative
    
    I see you refer to twentyeleven for some reason…. I use Woothemes’ Aperture.
    
    Regards
    Morten
    - http://www.ross.no/communicate Morten Ross
      
      I matched the original functions.php with current version and found no difference (used Windiff equivalent), but there was formatting after the final “?>”, and when removed, the missing WP-admin login, and refresh after save was gone. Go figure!!
      
      Unfortunately the initial problem still remains – content of “My Custom Widget Area – 1″ container does not stick in WP admin after save. Re-entering Widgets and it’s all blank again. In posts the widgets are OK…
      - http://www.tips4developer.com/ Amit Verma
        
        Hi Morten
        
        Today i looked in the widget issue as you reported, and noticed that there are few more users who reported the same issue on wordpress official site, and it really seems like some issue in the WP latest version, further i am trying to find the solution from my end either we have to wait for WP next release.
        
        Then just to confirm this is not something related to any theme.
      - http://www.tips4developer.com/ Amit Verma
        
        Hi Mortin
        Sorry for getting late to reply, here is the solution i got – Just make sure that “ID” will have all small char so –
        ‘id’ => ‘myCustomWidgetArea1′ – WRONG
        ‘id’ => ‘mycustomwidgetarea’ – RIGHT
        
        I hope this works for you, looking fwd for your reply
      - http://www.ross.no/communicate Morten Ross
        
        Hi Amit,
        
        All lowercase ‘mycustomwidgetarea’ had no effect.
        
        Is this working in your WP 3.4.1 install?
      - http://www.tips4developer.com/ Amit Verma
        
        Hi Morten,
        Yes this works absolutely fine, either you can try by removing ID, or you can also try to convert string under “name” to all lower case and without space.
        
        But for me just converting ID to lower works well, and the same WP suggesting.
      - http://www.ross.no/communicate Morten Ross
        
        My bad here, as I did not update correctly. All lowercase on ID is the solution!
        
        Thanks again Amit.
- http://www.ross.no/communicate Morten Ross
  
  Hi Amit,
  
  I’ve discovered several odd behaviours in WordPress:
  
  1: After saving a post, the screen doesn’t refresh, and stays blank. When I go back and refresh posts, the post changes was saved though.
  2: The WP admin login screen does not appear! When I opened IE, Firefox and Opera I noticed there was no WP-Admin logon screen! Luckily I didn’t log out of the session in Chrome as I would have been locked out!
  
  I therefore had to painstakingly roll-back my theme to the point in time before last upgrade – no change.
  
  I narrowed it down to your code in functions.php and when I removed it all was back to normal.
  
  It seems I’m having some similarities as jethro, except that I could save the content of the widget container.
  
  Hope you can resove this soon, as I really like your solution. Yours is the best I have found – so I’m not really interested in any alternative
  
  I see you refer to twentyeleven for some reason…. I use Woothemes’ Aperture.
  
  Regards
  Morten
Richard

Hi Morten, thank you for simple informative tip,
i very appreciate it.
Chuck

Hello and thank you for this information.
The problem I’m having is that my widgets never save in this new area.
Chuck

I’m sorry, but I need to make a correction…
My widgets appear to be saving, and they do display in my sidebar. However, they are not appearing in the custom widget area, so I can’t delete or edit them.
Chuck

Please remove my 2 previous comments as I have fixed the issue.
My issue was caused by the fact that I needed to put the code in the functions.php file in the theme’s library folder.
Thank you for this awesome information!
hira iqbal

hello amit,
I followed your post and created something like

if ( function_exists(‘register_sidebar’) ) register_sidebar( array( ‘name’ => __(‘Related Posts Widget Area’), ‘id’ => ‘relatedpostsWidgetArea’, ‘description’ => __( ‘A widget area for displaying realted posts on side bar’, ‘academica’ ), ‘before_widget’ => ”, ‘after_widget’ => “”, ‘before_title’ => ‘
‘, ‘after_title’ => ”, ) );
then i created template and call the function like
if(is_active_sidebar(‘Related Posts Widget Area’)):?>

widget created successfully but the same problem occured as Chuck had,
the container gets empty,all the widgets in that area gone..
I am also using 3.4.1
- http://www.tips4developer.com/ Amit Verma
  
  Hi Hira
  
  Most of the users are facing the same issue, and this issue is something related to WP 3.4.1. So i will suggest to wait for WP next release
- dfgfd
  
  dfdf
misbah

hi amit..
plz tell me that how can i add a new widget e.g. myownwidget in Available widgets area??
Austin

Hello, I tried your tutorial, and it worked! However, I copied and pasted it in page.php, and now, whenever I create a new page, the widget area (and of course the widgets in that widget area) show up on that page. How would I create a widget area specifically for one designated page? Also, how do I put widgets in specific areas? For example, if I wanted to create a widget area in the footer would I copy and paste the code into the footer.php, and would it show up in all the footers? Thank you for your time, I am only 15, and pretty new to the world of wordpress, but I think I can catch on pretty quickly. I have only been working on my site using wordpress for about three days now, so I am a little slow to all the html, php, and css code, as well as all the “computer lingo,” but any input is greatly appreaciated!
- http://www.tips4developer.com/ Amit Verma
  
  Hi Austin,
  
  1. How would I create a widget area specifically for one designated page – You have to place the code in conditional statement. So for that you can refer – http://www.tips4developer.com/wordpress/wordpress-conditional-tags/
  
  2. how do I put widgets in specific areas – You have to drag and drop the widgets in your newly created widget area using “Appearance -> Widget” in WP admin
  
  3. Footer Widget – yes of course you have to place the code in footer.php
http://www.facebook.com/fonchifox Fonchi Mootoo

Hello, It worked fine. I tried to used it for a banner but the image is aligned to the left. How can I center it? Thanks for your time.
kaleel

thank you
http://www.adoperationsonline.com/ Otilia

Thanks, much appreciated!
Som Nath

It’s really good and helpful for me…….

Thanks
Youri van Dijk

Hey dude, nice and simple! Have been looking, but others are not as well explained
http://wordpressdesigner.biz/ WordPress Developers

Hi there! I was planning to make a customize widget area and it is my first time to make one. I’ve been searching for an article and tutorials to help me and I just found these article of yours. Thanks for this valuable information. It greatly helps me.
will

Thank you so much for this!!!!
Gii

THANK YOU!!!!
I have read many who failed. It was so simple. THANK YOU!
KPCTA

Great post. I manage to add widget, but, i try to add two widgets side by side, but, I can manage second widget. It is not showing in widget panel, and it is not side by side, the second one is below the first. Can anyone help me.

Here is a custom code.

/* This is for the widget. ********************************************/
// This function is for custum widget.

if ( function_exists(‘register_sidebar’) )
register_sidebar( array(
‘name’ => __( ‘Custom Widget – left’),
‘id’ => ‘mycustomwidgetarea’,
‘description’ => __( ‘An optional widget area for your site footer’, ‘twentyeleven’ ),
‘before_widget’ => ”,
‘after_widget’ => “”,
‘before_title’ => ”,
‘after_title’ => ”,
) );

/* This is for the widget. ********************************************/
// This function is for custum widget.

if ( function_exists(‘register_sidebar2′) )
register_sidebar( array(
‘name’ => __( ‘Custum Widget – right’),
‘id’ => ‘mycustomwidgetarea2′,
‘description’ => __( ‘An optional widget area for your site footer’, ‘twentyeleven’ ),
‘before_widget’ => ”,
‘after_widget’ => “”,
‘before_title’ => ”,
‘after_title’ => ”,
) );
Vorddss

Awesome and easily explained post.. Thanks Amit Bhai…
Lolo

Thx for this article. It helped me a lot
vamsi

luv u man.. it was simple n awesome
anil

Thank u
http://www.tips4developer.com Amit

Thanks your fantastic comment. You can subscribe to my blog just by entering your email ID in the text box displays on the left side “Subscribe to email feed”. And get up to date with new and fresh post entries each day

Related posts: