Menu and Widgets
You can organize your top and side menus in a few different ways.
- Just use the default
- Widgets for side bar
- Drop down menus
You can also customize in the css file but we will look at that in the advanced section. There are a few great plugins to give your menus even more functionality. There are already some basic widgets preinstalled in your WordPress.
Widgets
To Use Widgets you must have a compatible theme and when you go to presentation you will see a widget menu if it is compatible. Most good themes are already widget compatible.
What is a Widget?
“Widgets” is just a silly buzzword we’ve chosen for this sidebar-chopping plug-in we have developed. They could have been called Gadgets or Gizmos or Wizbangs or Whatevers. On the surface, they’re just things you can use to personalize your WordPress site without knowing HTML. Way down deep, they may be something entirely more significant. Anyway, here’s a peek:
Even more widgets
Follow the WordPress Widgets Blog for more widgets and themes, and send widget-related news and questions to “widgets” at wordpress.com.
Some of the widgets will have a little icon on the right side of the draggable widget device. Click that icon to reveal that widget’s options. Click the X or the area outside the options box to return to the widget page. Your options are not saved until you click “Save changes” on the main page, so don’t forget to save.
? 
Two of the included widgets, Text and RSS, can be replicated several times. Below the palette you will find forms to change the number of Text and RSS widgets available. Reducing the number will only cause the extra widgets to be removed from the visual interface; the contents of the widgets is preserved.
Widget and Menu Plugins
Folding Pages Widget - Download - (6kb)
This is a particularly nice widget as it lets you create a menu system like in this blog. Very good for Content Management sites like this one. look at the Page Order plugin below to give even more functionality.
This widget provides a hierarchical list of WordPress pages. It expands/collapses to display only
- the current page,
- the children of the current page,
- the page’s parents,
- and siblings of the current page and its parents.
If you’re not on a “page” you only see the top-level pages.
Download & Install
- Download nrs_fold_pages.zip and upload the unzipped php file to your plugins directory
- Activate the plugin.
- Go to Presentation and click on the widgets menu
- Drag the NRS Folding Pages widget
Options
You may set:
- the widget title
- the way the pages are sorted in the list
- by page title
- by page order
My Page Order - Download - (2k)
I personally love this one especially on this blog as it has so many pages. If a page gets put in the wrong place I can simply reorder its position. Most new themes works straight out of the box. It also manages sub pages which is great.
The page order doesn’t automatically increment when you start a new page and it is a major pain to insert a page where you want it. Got a new page you want to insert at the top of 25 other pages? Have fun incrementing the order on 25 pages (unless it accepts a negative number which is just another bad idea).
This plugin gives you a simple interface that allows you to arrange the order of your static pages. It uses and sets the same field in the database as WP does so if you have set an order before it will be preserved.
Installation instructions:
- Extract zipped files
- Upload mypageorder.php to /wp-content/plugins/ on your server.
- Activate the My Page Order plugin on the Plugins menu.
- Plugin tab appears under the Manage menu, give the pages an initial order.
- If you are using widgets then just make sure the “Page” widget is set to order by “Page order”. That’s it.
- Make sure your templates have the correct sort parameter, see below.
Sort attribute
In your templates (accessible through the theme editor or downloading the file off the server) there might be several places your list of pages gets outputted. To use your sort order each instance must have the sort column argument set like the following:
wp_list_pages(’sort_column=menu_order’);
That’s it. Out of the box everything is there to make the manual ordering happen, it just needs a better interface to make it less time consuming for the WP user to manage and my plugin is really just a stopgap measure until something better gets built into the WP release.
Drop Down Menu - Download - (53kb)
This one requires a fair bit of knowledge however in the downloads section in advanced we have taken some of the more popular themes and alsready implemented it for you and also optimized for cross browser compatibility.
The Webdezine Pure CSS Horizontal Menu is a dropdown, cross browser multi-level (nested) css navigation system for Wordpress that can be displayed across the top of your header area. It includes support for Pages, Categories, Archives, Blogroll and Meta Links. The menus can be used in place of or in addition to the default Wordpress fuctions wp_list_categories, wp_list_pages, wp_get_archives, wp_list_bookmarks, and meta data that is contained in the sidebar.php. The menu is currently compatible with Wordpress 2.1.* and will soon be available to 2.0.* Wordpress users. The menu is as always, free for personal use, although support is greatly appreciated. Commercial users (including developers) should download the commercial version of the menu.
The Demos
- Menu Demo - All menus displayed with Titles
- Menu Demo - Pages and Categories displayed without Titles
The Features
- The Menu
- The menu is entirely CSS based. It does not rely on client-side scripting such as Javascript to hide or reveal the menu levels.
- The menu is based a degradable unordered html list
- The menu can be nested to a maximum of 4 levels (do the users really want more than that?).
- The menu is compatible with PHP4+
- A sitemap is connected to the title links in case of menu failure (unlikely).
- Each menu or nested level can be styled individually if you wish
- The css classes are based on divs and links for maximum compatibility
- You can now choose which menus to display and how
- You can exclude pages or categories from your menus
- You can display page, post or link counts in your menus
- You can organize your blogroll into multiple top-level categories
- …………etc.
- The Sitemap
- The sitemap is also based a degradable unordered html list
- Each menu or nested level can be styled individually if you wish
- The css classes are based on divs and links for maximum compatibility
- A sitemap page is created upon activation
- If you already have a great sitemap, you can detour this one and link your menu to the one already in place
- The Admin
- The admin is now a pimped up wonder
- Tabs separate the option sections
- Display the options in English, French, Spanish, German, or Italian
- Choose to display the titles (Pages/Categories/Archives) or spread the top levels across the header. Each menu is individually customized - e.g. display the archive title, but not the page title
- More options for the menu - Choose the date format for the archives, exclude categories, ….
- Input your old sitemap url and the menu takes care of the rest
- Edit the CSS directly from the option page (and the IE6 css!)
- Preview your changes in the option page (I got tired of refreshing my development site - this is much better)
- The Machine
- Nonce security has been added
- Personal and Commercial License payments are now accepted through the option screen
- Licensees are automatically registered for the in-depth support forum for help with customization, support and feature requests
- If caching is enabled the calls to the database are cached
- If a new category or post is created the cache is refreshed allowing your visitors to get the newest information instantly.
- Upon activation, the plug-in loads up the default values - Upon deactivation, the plugin removes all options/sitemap from the database….almost like it was never there.
Why the tag soup? To make it compitable with IE of course!
The Compatibility
| OS | Browser | Version | Compatible? | Issues? |
|---|---|---|---|---|
| Windows XP | Firefox | 2.X | Yes | None |
| Windows XP | Internet Explorer | 6 | Yes | None |
| Windows XP | Internet Explorer | 7 | Yes | None |
| Windows XP | Opera | 9.1 | Yes | None |
| Linux | Firefox | 2.0.0.3 | Yes | None |
| Linux | Konqueror | 3.5.6 | Yes | None |
SITEMAP FIX for 2.0.3 (2)
COMMERCIAL: Webdezine.ca Wordpress Menu V2.0.3 (444)
PERSONAL: Webdezine.ca Wordpress Menu V2.0.3 (1028)
The Why
I found the default lists impractical and IMHO quite ugly. I also wanted to use the same menu for my blog that I will be using for my main site.
The How
The Installation Instructions
- Download the .zip file
- Extract the .zip file
- Upload the folder called ‘webdezine_menu’ and the file called ‘webdezine_css_menu.php’ into your plugin directory located in /wp-content/plugins
- Upload the webdezine_sitemap.php page template into your theme file located in /wp-content/themes.
- Add this code to your header file
<?php if (function_exists('get_menu')) get_menu('topmenu'); ?>It will look like this in the default theme
<div id="header"> <div id="headerimg"> <h1><a href="<?php echo get_option('home'); ?>/"> <?php bloginfo('name'); ?></a></h1> <div class="description"><?php bloginfo('description'); ?> </div> <?php if (function_exists('get_menu')) get_menu('topmenu'); ?> </div> </div> <hr /> - Head over to your admin interface and activate the plugin
- Head over to the webdezine css menu option page and customize to your liking
- IMPORTANT! When using the Blogroll menu you must only use top parent categories to store your links. These are special categories you have created that have a category parent ID of ZERO. You may organize your links into those categories. The links will pop out in a list from each “0? level link category.
The Customization
The function variables can be changed from the admin option menu. Note: Please remember that should you change the CSS class names available through the option menu, you will also have to change the class names within the CSS file.
