Creating a sample menu in DHTML Menu Plugin Creator for WordPress

 

In this tutorial you will learn how to create a menu in DHTML Menu Plugin Creator for WordPress. In the program, you will create a menu structure, choose its appearance and generate the menu plugin.

 

 

Creating the menu structure

 

First, you need to create a structure of your menu. When creating the structure, you add elements that will be visible in the top-level menu bar and the pop-ups. You can do this in the Structure tab of the main program window (see the picture below).

 

Let's add a few items of a sample web site.

 

1. Open DHTML Menu Plugin Creator and go to the Structure tab. Next, click the menu item placeholder in the Menu Editor panel and type Home. You have just added the first menu item!

 

2. Then, go to the Destination URL field in the section on the right and type the URL for the Home item, let's say './'. This way, once a visitor to your website clicks this item, they will be redirected to the home page.

 

 

tutorial1-1

 

 

 

3. Let's add a few more menu items. Click the placeholder to the right from Home, type What's new and assign it an appropriate path, e.g. ?page_id=9. Next, click the placeholder below What's new and enter Food Recipes. Finally, add two more elements to the What's new pop-up, Save Driving and Exercise Myths, and two more top-level elements, My Photos and About Me.

 

Note: when you define Destination URL of a menu item, type an absolute or a relative path pointing to a target page. For example, if the full URL of a page is http://www.foo.com/?page_id=9, you can type either the full URL (an absolute path) or just the relative part of the path, in this case: ?page_id=9

 

 

tutorial1-2

 

 

 

Choosing appearance

 

4. Now it's time to choose the menu look. You can do this in the Appearance tab. As you can see in the preview panel, the menu is now using the default design.

 

 

tutorial1-3

 

 

5. Let's use one of the predefined menu designs. Click the Choose Skin... button located on the left panel. The Design Gallery window opens (see the picture below). In the gallery you can view all menu designs currently available on your machine.

 

 

tutorial1-4

 

 

6. Let's select the She Knows design. Next, click Use at the bottom of the window to apply the selection.

 

7. As you can see in the picture below, the chosen design was applied to the menu.

 

Note that in the properties panel on the left you can find a number of options that control the appearance and behavior of the menu. You can use these options to customize your menu even more.

 

 

tutorial1-5

 

 

 

Saving the WordPress menu plugin.

 

8. Now it's time to create the WordPress plugin. Next, the plugin can be copied to the WordPress wp-content/plugins folder. Click the Save button located at the bottom of the main window. In the Save dialog that opens, choose the folder where the menu plugin (xtreeme_dhtmlmenu) will be created.

 

 

 

Using the menu plugin in WordPress.

 

9. Copy the generated xtreeme_dhtmlmenu plugin folder to wp-content/plugins inside your WordPress main directory. Make sure the directory has read permissions for all users.

 

10. Next, go to the WordPress Admin panel and open the Plugins section on the left panel. Once there, activate the Xtreeme DHTML Menu plugin.

 

 

tutorial1-6

 

 

 

11. Now you need to choose where the menu will appear in your WordPress. Expand the Appearance section on the left panel and click Editor to edit the theme.

 

12. Then, choose the template in the panel on the right under Templates where you want to insert the menu.

 

13. Now you can do the actual integration. Place the <?php include WP_PLUGIN_DIR.'/xtreeme_dhtmlmenu/embed.php'; ?> tag where the menu should appear.

 

 

tutorial1-7

 

 

Viewing the result.

 

14. Now, open the home page to view the menu. Move the mouse cursor over the What's new element to expand the pop-up.

 

 

tutorial1-8