WordPress Menu examples
WordPress Menu/AllWebMenus features

The AllWebMenus WordPress Menu add-in & plugin combination is designed to retrieve information from your blog (such as posts, pages, etc.) and import it into the AllWebMenus application to create stylish, feature-rich navigation menus, and not only! Apart from creating menu items derived from your blog's structure, fully customize your menus adding your own non-wordpress menu items with external or internal links, html-rich content, colors, borders, effects, designs of your choice and many more!

 

The solution consists of a combination of two parts:

1. The AllWebMenus Add-in

This already exists inside your AllWebMenus installation (v5.1.754 or above only - no need to download and install separately), and can be accessed through the following menu:

You can use the add-in to specify the blog's domain you create a menu for, import/update the menu structure from your blog and eventually compile the menu for use on your WordPress pages.

The per-domain licensing is based on Server-Side Menus API domain licenses, which means that you actually purchase Server-Side domain licenses for use with wordpress.

As an owner of an AllWebMenus Pro license, you already have 1 free license for a Server-Side Menus API domain, which lets you use the Add-in on your selected blog for free.

Click here for domain purchase info and licensing details.

 

2. The WordPress Plugin

This is the plugin that you need to install on your WordPress blog.

Through the plugin you can choose what information of your blog should be part of your menu (like pages, posts, etc.), with what menu hierarchy and what options.

The plugin generates the Menu Structure Code to paste into the Add-in of your AllWebMenus installation. You can then further process your menu with the hundreds of options that the AllWebMenus desktop application offers and compile/upload it to your WordPress blog.

 

Step 1 - Download the plugin's zip file

Release Version: 1.0.9   what's new Download link: Download the WordPress plugin Distribution Size: 355 KB Requirements: The current version of WordPress "Plugin" (i.e. the code installed on your WordPress online) requires that AllWebMenus PRO v5.1.772 or above is also installed in your computer. To find out the version of your current AllWebMenus installation, open the program, click the [Help] menu and then the [About] item. Download the latest AllWebMenus version if you do not have it installed yet. The "Add-in" (i.e. the functionality inside the AllWebMenus application) already exists inside your AllWebMenus installation by default (v5.1.772 or above), so there is no download link to install separately.

 

Step 2 - Install the plugin to your WordPress blog

• Extract the allwebmenus-wordpress-menu-plugin.zip file you downloaded in the previous step
• Upload the entire allwebmenus-wordpress-menu-plugin folder (not just the files inside) to your plugins directory in your blog (ROOT/wp-content/plugins)
• Activate the plugin in your administration panel

 

Step 1 - Configure your menu

While in WordPress:

• Login to the Admin area of your WordPress blog
• Go to the AllWebMenus-WP-Menu plugin options (found at "Settings" after installing the plugin)
• Configure the menu options
• Click "Generate Menu Structure Code"
• Copy the generated code
• Switch to the AllWebMenus desktop application and go the the "Add-ins -> WordPress Menu" options:
  
  
  
  
• Choose the "Import/Update Menu Structure from WordPress" option (item [2] on screenshot)
• Paste the "Menu Structure Code" previously copied from WordPress
• Configure further your menu (colors, borders, effects, styles, etc.) through the AllWebMenus properties or add your own custom items with their own external or internal links

 

Step 2 - Choose how/where the menu is positioned on WordPress

While in AllWebMenus, choose the <Positioning> property (or click the "Menu Positioning" button).

There are three different ways to position your menu on your pages:

• "Relative to Window":
  To position your menu relative to the browser window you only need to set the Window Anchor and the X and Y Offsets in the Menu Positioning options.


• "Relative to an Element":
  It is most common to add a menu in an element that is found in the header or the default area of the blog, thus in the 'header.php' file that is found in the /wp-content/themes/ThemeYouAreUsing/ folder. Open the file in a text editor and find in which element you want your menu to be positioned relative to, and copy its id's value. Select "Relative to an Element" positioning in the application and paste the value in the "Custom ID" property under the "Element Anchor ID" options. Don't forget to set the "Element Anchor", the "Menu Anchor" and the offsets that you want your menu to have.
  
  If for example you want to add it to an element like
  
  <div id='header'> (...) </div>
  
  then you should copy the 'header' and paste it in the "Custom ID" property.
  If the element does not have an 'id' property, then you have to add the 'Element Anchor ID (Defalut ID)' to the element's attributes.
  
  If for example you want to add it to an element like
  
  <div class='styling'> (...) </div>
  
  then you should copy the Default ID under Element Anchor ID and paste it in the id property like this:
  
  <div class='styling' id='awmAnchor-menu'> (...) </div>


• "Relative to an Image":
  Find the name of the image to which you want to position your menu relative to and add its name in the "Image Filename" box of the "Relative to an Image" tab. Don't forget to set the "Image Anchor", the "Menu Anchor" and the offsets that you want your menu to have.

View how positioning works through detailed examples/use cases >

 

 

Step 3 - Setup, Compile and Upload the menu files

While in AllWebMenus:

• Choose the Domain where the menu will be used through the "Add-ins -> WordPress Menu -> Setup WordPress Menu/Choose Domain" (item [1] on screenshot).
  Note: Domains are based on "Server-Side Menus API domain licenses" and therefore you need to use and purchase them as such. Click here for domain purchase info and licensing details.
  
  
• Compile the menu using the "Add-ins -> WordPress Menu -> Compile WordPress Menu" (item [3] on screenshot).
  Note: When asked for "Site_Root folder" use any local folder on your hard drive you like for the compiled files to be produced.
  
  
• Upload the compiled menu files (found at the above mentioned local folder) on the exact online folder you specified when configuring the plugin options in WordPress (default is 'menu' - create new folder if it does not exist).
  Note: The name of the menu is again the one you selected in the options of the plugin (default is 'menu'). You can change these options in the Tools > Project Properties > Folders in the AllWebMenus application. It is strongly recommended not to edit the above properties, just leave them default.

 

Step 4 - "Link Menu" to your WordPress pages

Switch to WordPress:

• Add the following menu-linking code RIGHT BEFORE the closing </body> tag in the footer.php file of the theme you are using (should be in the /wp-content/themes/ThemeYouAreUsing/ folder):
  
  <?php AWM_generate_linking_code(); ?>
  
  (the above is the "menu-linking code" for WordPress implementations)

 

The AllWebMenus WordPress Menu Plugin offers the ability to add an item at the end of your menu that contains a submenu that displays the most relevant posts (or pages) of the post you are currently viewing (the item will appear only when you are viewing a single post).

This feature is build on Yet Another Related Posts Plugin by mitcho (Michael Yoshitaka Erlewine).