mytechead

Android & Wordpress Help center

WordPress : get customised widget area

At times we want our own custom widget area, which we can customise according to our needs (rather than relying on the stock WP widget areas).

This tutorial helps you to create your own custom widget area.

Here is how it is done :

1. Register The Widget

To register the new widget you need to open the functions.php file in your WordPress themes editor.

Add the following code to the functions file, making sure you place it in between php tags:

if ( function_exists(‘register_sidebar’) ){
register_sidebar(array(
‘name’ => ‘my_mega_menu’,
‘before_widget’ => ‘<div id=”my-mega-menu-widget”>’,
‘after_widget’ => ‘</div>’,
‘before_title’ => ”,
‘after_title’ => ”,
));
}

Give the widget area a name – e.g. my_mega_menu and in the before/after options you can place code which you wish to appear wrapped around either the widget itself or the title.

Since we are wanting to use one of the menu widget themes, which come with plugins we dont want to wrap it in the standard widget tags, which may interfere with the CSS.

For this example we have just wrapped it in a div tag with the id – my-mega-menu-widget.

2. Add The Widget Code To Your Theme

Now we can add the code that will call the widget to the correct location in our theme files. Since we are creating a horizontal mega menu we obviously want to display this in the header.

In your WordPress themes editor open the header.php file.

Find the location where you want to place the menu and add the following code to the header.php file:

<?php /* Widgetized sidebar */
    if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('my_mega_menu') ) : ?><?php endif; ?>

Make sure that you change the “my_mega_menu” text to be the same as the name you gave to your widget area in the functions file.

Save the changes to the header.php file

If you now go to the widget area in WordPress admin you should see a new widget area in the right hand column with the name of your widget.

You can now add your mega menu, accordion menu or any other widget to this area.

Advertisements

Single Post Navigation

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: