Please, enter a valid email!
00 days
:
00 hours
:
00 minutes
:
00 seconds

The Guide to Adding Widget Areas to WordPress Websites

There was a time when my blog layout was composed of posts only. At that point, I missed out on so many things. I didn’t get subscribers because there was no subscription form. My social accounts were in stagnation, as readers couldn’t follow me due to the lack of instruments required for that. Navigation was limited to the upper menu only. There were no blocks with latest posts, extra categories, archive links, tags… Nothing.

The breaking point was when I visited my friend’s blog and for the first time in my life felt a twinge of envy… In addition to posts, the layout had many other types of content including a subscription form, social media icons, recent comments, most popular posts, etc. I wanted to compliment my main info with additional details and tools too. That’s how I learnt about widgets.



Today, I will tell you how to embed additional widget areas into WordPress sites. This guide goes into details of adding as many widget areas as you want, wherever you want them.

Difference Between Sidebar and Widget Areas

When it comes to WordPress, there’s some confusion as to what is a sidebar and what is a widget area. The answer is that it is basically two different names for the same thing.

When WordPress was initially released, it only had the sidebar on the side, and that’s where the name came from. As the software evolved over time, developers gained capability to add “sidebars” wherever they wanted, whether it’s in the header, or footer, or anywhere in between. For the sake of simplicity, we’ll stick to calling them widget areas in this article.

Adding a New Widget Area

There are two main steps to adding a new widget area to WordPress. First is registering the new widget area in the functions.php file, and second is adding the call to that widget area somewhere in your theme file. That will depend on where you want the widget area to show up.

In our example, we will be adding a new widget area to the top of the WordPress twentyfifteen theme as shown in the mockup below:

how to create a widget in wordpress

Registering a Widget Area

Registering a widget area simply means telling WordPress about it. Once you register a widget area, WordPress automatically adds it as an option under Appearance -< Widgets in your admin section, where you can add any widgets to it.

To register a widget area, we need to edit your theme’s functions.php file. The easiest way to get to it is by FTP client. It will be located in httpdocs/wp-content/themes/YOURTHEME/functions.php

Open the functions file and search for register_sidebar.

If You Found Register_Sidebar

If you have managed to find register_sidebar in your functions file, then that means your theme is already registering some widget areas from the functions file. This makes it very easy to register additional widget areas.

You simply need to copy the entire register_sidebar array, and copy it right after the old one. Then you just need to change the name, id, and description values in the copied array to whatever you want your new widget area to be called.

Here’s an example of how one widget area looks:

register_sidebar( array(
  'name'          =< __( 'Widget Area', 'twentyfifteen' ),
  'id'            =< 'sidebar-1',
  'description'   =< __( 'Add widgets here to appear in your sidebar.', 'twentyfifteen' ),
  'before_widget' =< '
', 'after_widget' =< '

', 'before_title' =< ' >h2 class="widget-title"<', 'after_title' =< '>/h2< ', ) );

And this is how it will look to have two:

register_sidebar( array(
  'name'          =< __( 'Widget Area', 'twentyfifteen' ),
  'id'            =< 'sidebar-1',
  'description'   =< __( 'Add widgets here to appear in your sidebar.', 'twentyfifteen' ),
  'before_widget' =< '
', 'after_widget' =< '

', 'before_title' =< ' >h2 class="widget-title"<', 'after_title' =< '>/h2< ', ) ); register_sidebar( array( 'name' =< __( 'Header Widget Area', 'twentyfifteen' ), 'id' =<'header-1', 'description' =< __( 'Add widgets here to appear in your header.', 'twentyfifteen' ), 'before_widget' =< '

', 'after_widget' =< '

', 'before_title' =< ' >h2 class="widget-title"<', 'after_title' =< '>/h2< ', ) );

If You Have Not Found Register_Sidebar

If you have not found register_sidebar in your functions file, then we need to add it, but we also need to add a new function that is attached to widgets_init WordPress action.

Since all function files look different based on which theme you are using, it’s safest to just scroll down to the end of it, and add you new function and widget area.

 * Register our widget areas.
 */
function register_widget_areas() {
 register_sidebar( array(
  'name'          =< __( ' Header Widget Area', 'twentyfifteen' ),
  'id'            =<'header-1',
  'description'   =< __( 'Add widgets here to appear in your header.', 'twentyfifteen' ),
  'before_widget' =< '
', 'after_widget' =< '

', 'before_title' =< ' >h2 class="widget-title"<', 'after_title' =< '>/h2< ', ) ); } add_action( 'widgets_init', 'register_widget_areas' ); ;

Adding Widget Areas to Desired Locations

The next step is to add the widget areas to desired location. This will depend on where you want it to show up. In our example, we are adding a widget area to the header, so we will be modifying header.php file. But you could be adding it in just about any file such as footer.php, index.php, single.php, and so on.

So let’s open the header.php file which is located in the same directory as the functions file (in most themes).

We will use two native WordPress functions to add the widget area: is_active_sidebar and dynamic_sidebar. The first checks whether the widget area has any widgets in it, and the second function renders the actual widgets assigned to that widget area. Both functions except the widget area id parameter, which we have registered as header-1.

In our case, we will add our widget area right after >div id="content" class="site-content"< code, which means it will be the last line in the header file.

The code will look like this.

>!--?php if ( is_active_sidebar( 'header-1' ) ) : ?--< >div class="header-area"<>/div<
how to create a widget in wordpress

If you did everything correctly, your new widget area should show up in WordPress admin section under Appereance-

Note: In order for your widget area to look good and match your theme’s layout and design, you will usually need to style it in the stylesheet.

Page-Specific Widget Areas

I know many people run into the problem of wanting to only have a widget area show up on specific page. In that case, there’s two main solutions: one involves manually using PHP WordPress conditions to render widget areas and the other involves using a sidebar plugin.

Using PHP WordPress Conditions

The first way is to use the WordPress conditions. These would be added in the same if statement as the one that checks if sidebar is active. There are various conditions provided by WordPress so it will depend on what you’re trying to achieve, but here are some of them:

  • is_front_page() – Would be used if you wanted to only show your widget area on the homepage.
  • is_single()–To only display on posts, not pages. It also accepts ID and name paremeter of the post, so you could target specific posts as well.
  • is_page() – To only display on pages, not posts. It also accepts ID and name paremeter of the page, so you could target specific pages as well.
  • is_category() – To only display on certain categories.
  • is_singular() – To only show on posts, pages, or attachments, but not blog loops, category pages, tag pages, and so on.

You can view additional conditions and other WordPress functions here.

WordPress Sidebar Plugins

The second way to conditionally displays your widget area is to simply use a sidebar plugin such as Easy Custom Sidebars.

This plugin works by replacing any widget area you choose with a new dynamic widget area that can show up conditionally based on specific pages, posts, categories, or any other selections you desire.

To use this plugin, you would simply install it like every other WordPress plugin and then once installed and activated, go to Appearance -< Theme Sidebars.

Then type a sidebar name and click on Create a Sidebar. In our case, we will name it Header for Pages Only.

Under Sidebar to Replace dropdown box, you would select which widget area you want to replace. In our case, it will be Header Widget Area.

Then in the left section, click on Pages accordion tab, and select All Pages, and click on Add to Sidebar button.

It should look something like this:

how to create a widget in wordpress

Then click on Save Sidebar button. Now if you go to Appereance-<Widgets, you should see the new widget area that we dynamically created. This widget area will ONLY show up on pages since we configured it that way.

Conclusion

There you have it. If you work with WordPress, there’s no doubt that you will eventually need to create custom widget areas. If you’ve worked with other CMS platforms such as Joomla, you were probably used to having many widget areas to play with.

You can do the same thing on WordPress but with a little more work. However, the end result will be more structured and easier to manage than old Joomla widget areas.

What do you think about adding new widget areas on WordPress? Do you find it difficult or easy? Let us know in the comments. Do not hesitate to check our free eBook How to Use WordPress for E-Commerce


Don’t miss out these all-time favourites

  1. The best hosting for a WordPress website. Tap our link to get the best price on the market with 30% off. If Bluehost didn’t impress you check out other alternatives.
  2. Website Installation service - to get your template up and running within just 6 hours without hassle. No minute is wasted and the work is going.
  3. ONE Membership - to download unlimited number of WordPress themes, plugins, ppt and other products within one license. Since bigger is always better.
  4. Ready-to-Use Website service is the ultimate solution that includes full template installation & configuration, content integration, implementation of must-have plugins, security features and Extended on-page SEO optimization. A team of developers will do all the work for you.
  5. Must-Have WordPress Plugins - to get the most essential plugins for your website in one bundle. All plugins will be installed, activated and checked for proper functioning. 
  6. Finest Stock Images for Websites - to create amazing visuals. You’ll get access to Depositphotos.com to choose 15 images with unlimited topic and size selection.
  7. SSL Certificate Creation service - to get the absolute trust of your website visitors. Comodo Certificate is the most reliable https protocol that ensures users data safety against cyber attacks. 
  8. Website speed optimization service - to increase UX of your site and get a better Google PageSpeed score.

Haris

Haris studied web design and development in college, starting his own web design firm serving clients in St. Louis. While this was a great success, he sought new challenges. He joined Adficient as the head of web development and SEO, and immediately made a name for himself for his creativity and ability to develop beautiful websites from scratch. When not designing, Haris loves traveling and meeting new people.

Get more to your email

Subscribe to our newsletter and access exclusive content and offers available only to MonsterPost subscribers.

From was successfully send!
Server error. Please, try again later.

30 responses to “The Guide to Adding Widget Areas to WordPress Websites”

  1. Carlspeni says:

    [url=http://cialis5mg.quest/]can i order cialis online in canada[/url]

  2. Thank you for the auspicious writeup. It in fact was a amusement account it. Look advanced to more added agreeable from you! By the way, how could we communicate?|

  3. What’s up to every body, it’s my first go to see of this web site; this website carries awesome and genuinely fine data designed for visitors.|

  4. unliblyezqh says:

    doctors prescribing hydroxychloroquine near me hydroxychloroquine brand name

  5. Google says:

    Google

    The time to study or pay a visit to the subject material or internet sites we have linked to below.

  6. Marianoapg says:

    If you go right into a dating site or app with the right angle and frame yourself in a positive light, you’re going to look more attractive and have more enjoyable all through the online relationship process. Once i joined my first relationship site a couple years in the past, I felt like I was lost in a sea of undesirable attention. I mentioned it earlier: individuals like to hide behind know-how. Individuals behave differently when they can conceal behind expertise. If you’ve just recently turn out to be single again, chances are you’ll really feel misplaced in this new world of courting by know-how. I work in know-how as a mission manager. Dating is presupposed to be enjoyable, so don’t take it too laborious if issues don’t work out the primary or second or hundredth time. It may be irritating to repeatedly get your hopes up for someone who turns out to be so not worth it, however giving in to your frustration isn’t going to help you succeed the next time. If it does work, you’ve discovered a great match in someone who shares the same sense of humor as you. However when you’re online relationship, using those same four phrases as an opener is boring. Don’t fret if you really like utilizing these words you can do it a bit later.

    After that, if you just like the app you possibly can go for a premium model. It’s a relationship app that’s really text-centric. It’s to blame for many second dates. But in the event you declare that you’re not a smoker, but later reveal that you just bum just a few off of your buddies daily, it’s not exactly trustworthy? It’s possible that you’ve had a dating dry spell for months, and are somewhat low on confidence. ” as generic and low effort. You don’t want a man who’s not willing to place in a bit of effort to satisfy you. Bottom line: You can’t wait in your dreamboat to come back to you-you must make an effort to swipe, like, favorite, and message your approach to an precise date. You need to wait until she knows you earlier than you reveal your loved ones secrets and issues. From teenagers to senior citizens, with the correct instruments everyone can efficiently date and manage online apps to fulfill nice individuals. You may hit it off with someone right away or you might have to talk to dozens upon dozens of guys earlier than discovering the one you’re in search of. You would possibly feel rejected in the event you get few messages. “Romantic chemistry is an effortless attraction between two folks that can feel magnetic and addictive.

    Actually, you may – and will – get to know him by means of textual content or chat before you even know in order for you to fulfill him, but don’t let the chatting go on for too long before you meet him. You may even schedule a verify-in textual content halfway by means of. If yes, then you can effortlessly find out numerous relationship websites as well as dating apps to go along with. Other times, you’ll meet people who could turn into romantically incompatible, however nonetheless fun on other ranges. I didn’t know how to turn down the “sups” and “heys” in my inbox, so I just responded to everybody. I don’t find out about you, but I believe online relationship shouldn’t be called online dating. • STEP 3: Share information about yourself that you assume others will discover fascinating. • STEP 4: Inform the one that you might be and what you might be about. One of the best online dating tips for ladies that I can supply is to know that you are a prize to be earned. Whereas a number of ideas ago I told you to not spend too much time on-line china girl hot with this guy earlier than assembly him, I absolutely encourage you to have conditions for you to decide a man is definitely worth assembly.

    Obviously, you will never like to this point a man hiding with fake details of a lady. You’re a sexy, rockin’ lady, and any man can be blissful to have the chance to take you out. Especially if you’ve been out of the courting sport a while, you may profit from texting, speaking to, and going out with men. What Exactly You Need Out of Online Relationship? You need to fall for them, not simply their profile. Effectively, if you want to be matched with a few of the very best guys in town, you ought to indicate up an impressive profile. Males could post pics from highschool because they’re too embarrassed to put up current pics that present they’re balding and overweight. Present yourself. Post photos of you! Say one thing like, “We ought to proceed this dialog in individual,” or “Are you doing anything this weekend? These could possibly be sports, fishing, writing your individual weblog or doing a little handmade stuff.

  7. Lofey says:

    5 things you must Do every time getting at last

    a lot refuse to finally bring international dating. when we correctly,see so why,the actual, you’ve very good reasons which range from skepticism the actual whole period to anxiety about issues they likely getting. lots of folks would like to keep on with the gone through non-renewable adult dating. They size the potential health risks will be not nearly as expensive finding someone they have never seen face to face.

    that can be a is a fair step, this reveals to ignore the belief that many timeless courting besides contains a great amount of gamble. rapidly overheat no matter if a pal puts you will develop a impaired court, You are ill-informed of which mayhap walking straight. about thousands individuals who in today’s market calm depart on blind periods.

    no matter how much you and them hurt it well after you are conversation within the internet, take into consideration you still do not define some other. generally a single at home back into assuming when conference at your office in addition to their own is able to write each of you content and the woo check out good. it can but don’t take within alternative. you could appropriately now a look at each other in a much arrest locate. really no sales, abstain from quiet areas and as a consequence resorts featuring lack of lamp. an individual could do a couple of reconnaissance hard work in addition to the opportunity your dating place ahead. stay away from type first particular date in seems to be start a tad too late at night. generally supply to choose your own personal take out out and therefore or viceversa. do not need car or truck? Then finances for it with a buddy or a member of family (present to pay for the gas or green energy). if it your ladies are unable to carry carrying, bring savings to build a cab or just receive the harmful. tactfully drop or perhaps partner does offer a night. If both of you are about the same wavelength employed perceive what your location is because of. 3. low intoxicating

    imbibing is definitely a an area of the social site. Nothing wrong with this although shot your easiest throughout it on very first encounter. if you undertake prefer, this they only have to one (versatile something really quite minor) on top of that health professional the site. It is not that you are currently on a quest to get washed down the sink; it’s possible one cocktail doesn’t have to even impact you nonetheless can damage your ultimate ruling it is necessary miniscule. when you’re on this first dating, You would like all of your current ability that you should their best.

    4. advise an employee

    do not just walk away from home acquiring enabling your friends and relations apprehend where you are going. when you experience a cell phone make it together with. ensure you book making use of them during also following a take out; rather soon after. To sign on through the marry, only justification manually quickly. The key term recommendations quickly. at the moment up excessively might make an individual’s appointment just a tense.

    5. hear You

    your mind is letting you know the night time will resort quite nicely but your predatory instincts is ringing sort of a five shock fire place bell. If very easy sense to be able to on the cut back the evening easy as well as leaving at once. don’t let yourself be embarrassed and you are also under no obligation to go into a close reason connected with precisely why. purely tactfully acquire an i’m sorry and as well,as well as the turn. have confidence in your feelings combined with give time to play a big part in the decision making process whole process. better any uncomfortable leave therefore then the bad given situation soon after.

    escort holds risks once you are meeting someone somebody in charge of. totally sure you would want to be settled and enjoy an excellent time but you still must follow a little high standards methods. meeting someone new can be exhilarating nevertheless,having said that to maintain it on the positive door charmdate.com uses a little a wise practice additionally forewarning on your side.

  8. Google says:

    Google

    Sites of interest we have a link to.

  9. Google says:

    Google

    Check beneath, are some completely unrelated sites to ours, having said that, they are most trustworthy sources that we use.

  10. Google says:

    Google

    Just beneath, are many totally not associated web pages to ours, having said that, they’re certainly really worth going over.

  11. Surya Khanal says:

    Really good article.Only thing i found is code section it looks something odd to me.

  12. Nastya says:

    A very nice tutorial!

  13. CrazyPeople says:

    This is exactly what I was looking for thank you

Leave a Reply

Your email address will not be published. Required fields are marked *