Time for action – registering sidebars in functions.php

This step involves adding some more functions below your menu's function in the theme functions file:

  1. Open functions.php.
  2. Above the closing ?> tag, add the following:
    function osmag_widgets_init() {
  register_sidebar (array(
    'name'          => __('Sidebar','osmag'),
    'id'            => "sidebar-widget-area",
    'before_widget' => '<li id="%1$s" class="widget %2$s">',
    'after_widget'  => '</li>',
    'before_title'  => '<h2 class="widgettitle">',
    'after_title'   => '</h2>' )
    );
  register_sidebar (array(
    'name'          => __('Left Footer','osmag'),
    'id'            => "footer-left-widget-area",
    'before_widget' => '<li id="%1$s" class="widget %2$s">',
    'after_widget'  => '</li>',
    'before_title'  => '<h2 class="widgettitle">',
    'after_title'   => '</h2>' )
    );
  register_sidebar (array(
    'name'          => __('Right Footer','osmag'),
    'id'            => "footer-right-widget-area",
    'before_widget' => '<li id="%1$s" class="widget %2$s">',
    'after_widget'  => '</li>',
    'before_title'  => '<h2 class="widgettitle">',
    'after_title'   => '</h2>' )
    );
}
add_action('init', 'osmag_widgets_init'),
  3. Save your functions.php file.

What just happened?

We added the functions to register sidebars for our theme's footer and sidebar. Let's have a look at what we did.

Firstly, the sidebars we registered:

  • One widget area in the sidebar – it's the area most commonly used by themes for widgets. We called it sidebar but you don't have to, you could call it whatever you like.
  • Two widget areas in the footer – this gives you the option to add two areas of content in the footer using widgets.

Now let's take a look at the code we used to register each widget area:

  • The opening line function osmag_widgets_init defines a new function for our theme based on widgets_init
  • The first sidebar is registered with the function register_sidebar and an array of parameters
  • The parameters for the first sidebar are:
    • Name: __('Sidebar','osmag') defines the sidebar name. It won't work without osmag which echoes the function osmag_widgets_init.
    • ID: sidebar-widget-area is the unique ID for the widget area which we'll use shortly to add it to a template file. It's also used to give the widget area an ID which you can use for styling.
    • HTML before each widget within the widget area: <li id="%1$s" class="widget %2$s">, which opens a <li> tag and gives it an ID and class related to the widget name.
    • HTML after each widget: </li> closes the list item.
    • HTML before the title of each widget: <h2 class="widgettitle">, which opens an <h2> tag to display the title and gives it a class for styling.
    • HTML after each widget title: </h2> closes the <h2> element.
  • The two footer sidebars are set up in the same way, with only the name and ID needing to change
  • Finally, the last line beginning add_action adds an action based on our function to the init action which WordPress always runs on starting up

So, we now have our widget areas registered. You'll now see them displayed on the Widgets admin screen:

What just happened?

The next step is to add them to our theme.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset