UDSSL

Dynamic Menu for WordPress Site

Project brief: WordPress menu should be dynamically generated based on parent-child pages relationship. All parent pages should be listed in the menu with their child pages. Parents and children are not just pages, they are virtual folders created by another plugin called ‘Wicked Plugins’. At the end, the menu should look exactly like the eBay menu.

freelancer-project-details

The client was from the United States. They send us the project description as a Google Slides presentation. Everything needs to be done was clearly communicated before starting the project. The client had a good rating and the initial communication was genuine. We agreed on project costs and milestones. Started working on the new WordPress plugin development project.

freelancer-client-usa

Project Scope - Dynamic Menu

The client wanted to organize their pages with a plugin called ‘Wicked Folders’. This plugin is a tool to manage a large number of pages. The client hasn’t had that many pages on their website yet. But they were planning for the future.

Wicked Folders Plugin

From the official WordPress plugin repository: “Wicked Folders is the ultimate tool for managing large numbers of pages and custom post types. The plugin simplifies content management by allowing you to organize your content into folders. Wicked Folders does not alter your content’s permalinks or hierarchy giving you the freedom to organize your pages, posts, and custom post types any way you want independently of your site’s structure.”

Reference: Wicked Folders on WordPress

wicked-folders-plugin-customization

Dynamic Menu for WordPress

There were 2 menus. One in the header and one in the footer. The header menu opens only when clicked. The footer menu will always be shown. The header menu should go inside the header of the theme. There were no native hooks in the theme in the exact location the client needed. So we had to place a hook and get attached to the new location.

custom-wordpress-menu-initial

The following shows the header menu after clicking on it. It is fixed in CSS to the button so that it covers the beneath content when opening; just like the eBay menu.

custom-wordpress-menu

The menu ‘item lists’ (corresponding to ‘Wicked Folders’ custom folders) should be selected in response to the select box in the menu header.

custom-wordpress-menu-dropdown

Wicked Folder Customization

The client wanted to show ‘Wicked Folders’ folders as top links of the WordPress menu. And the items in the Wicked folders should show up as the children under the parents.

Menu segment Loading and Folding

The menu titles and items are trimmed using Javascript so that they don’t take two lines of the menu. ‘Nested Pages’ plugin dashboard menu folding features were implemented as the ‘WordPress Menu’ folding functionality (Child pages and folders should fold under their respective parents).

Readmore links

If the child link count is more than 4 then the Readmore link should be displayed. When the user clicks the Readmore link the rest of the pages should be dynamically loaded with AJAX under the hood and attached below the existing links.

Search Function

The search is done with jQ uery with already loaded links (‘Wicked Folder’ folders, subfolders, and pages.)

Challenging Feature 1 - Hooking to ‘Wicked Folders’

Later client wanted to insert a new link inside the ‘Wicked Folders’ folder list pane that should only list the pages that have children. (This folder type needed to be dynamic; Wicked Folder plugin doesn’t provide this dynamic type natively) This was challenging. We found the relevant hook inside the ‘Wicked Folder’ plugin and modified the output of the plugin so that it now contains a separate section on the page list page.

Challenging Feature 2 - eBay Menu Exact Copy

The client wanted their menu to look exactly like the eBay menu. So we even had to download the font files from the eBay menu. (MarketSans Font: MarketSans-Regular-WebS.woff2) Copied most of the styles from the eBay stylesheets and applied them to the custom menu.

ebay-menu

Challenging Feature 3 - Match Mobile Menu to Sample Given

The client wanted the newly developed menu to be responsive (The client showed us a sample). The existing theme was not well developed and it was very hard to integrate and style the menu to be exactly like the sample shown. However, we completed this task as well.

Disclaimer: All person names mentioned in this production (if there are any) are fictitious. No identification with actual persons (living or deceased) is intended or should be inferred.

The details, story, and incidents are true. We have actually built this plugin and faced the above-mentioned challenges.


Written by UDSSL