wordpress website development : Add a new widget area to a WordPress theme

WordPress website development : how to add widget area

If you are familiar with WordPress themes then you know that a lot of themes have a widgetized sidebar. This means that you can add, remove, and re-order widgets on your WordPress website by using the “widget” section of your WordPress dashboard.

Having a widgetized sidebar is very useful, but you may want to widgetize other parts of your WordPress theme as well. This is very easy to do, and once your theme is modified it will be simple for you, or the WordPress administrator, to swap widgets in and out of different parts of the website.

Step 1: Add code to theme

The first step is to add the following line of code to the part of your theme that you want to widgetize. Be sure to change “Name of Widgetized Area” to a name that makes sense for you. You will need to do this with a code editor and then upload the file via a FTP client.

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar("Name of Widgetized Area") ) : ?>

<?php endif;?>

Step 2: Edit functions.php

In your WordPress theme folder, there should be a functions.php file. If there isn’t, just make a new file and name it “functions.php”.

In the functions.php file, add the following code:

if ( function_exists('register_sidebar') )

register_sidebar(array(

'name' => 'Name of Widgetized Area',

'before_widget' => '<div class = "widgetizedArea">',

'after_widget' => '</div>',

'before_title' => '<h3>',

'after_title' => '</h3>',

)

);

The code above should be wrapped in PHP open and close(<?php and ?>, respectively) tags. If you already have a functions.php file those tags will already be there. If you created one yourself you will have to add them.

Make sure to change the name of the function (in this case it is “Name of Widgetized Area”) so that it matches the name you gave it in step 1.

The ‘before_widget’ and ‘after_widget’ parameters allow you to specify what code you would like to put before and after each widget. In this case I put a div with an class for styling purposes.

The ‘before_title’ and ‘after_title’ parameters allow you to wrap the widget titles in code. In this case I wrapped the title in <h3> and </h3> tags respectively.

[amazon box=”B07SDFC9QT” “small”]

Step 3: Adding Widgets

Once you have successfully added the widgetized area, you can start adding widgets to your WordPress site. To do this, log into your WordPress dashboard, then click on Widgets in the Appearance dropdown on the left side.

You should now see the “Name of Widgetized Area” section on the right side of your screen.

Now just click and drag widgets into the box just like your sidebar!