Widget – Custom Menu

This widget is available since version 4.3.1 and it is meant to replace both Job Board Menu and Resumes Menu widgets. This menu is a huge improvement over how menu widget work in WPJobBoard. Using Drag and Drop interface the widget allows you to configure which links will be in the menu, how the links will be titled, who will be able to see them and optionally an icon for each link.

Building Custom Menu

First step is adding the widget to the sidebar, you can do this from wp-admin / Appearance / Widgets panel. In the left side find “WPJobBoard Menu” widget and drag it to the sidebar. By default it has only 2 options, “Title” – ie. title that will displayed in the sidebar and “Add Link” drop down.

wpjb-custom-menu

In the Add Link drop-down you can select from 5 link groups

  • Job Board – this are links pointing to different parts of job board
  • Resumes – this are links pointing to different parts of resumes board
  • Pages – this is a list of Pages in wp-admin / Pages panel.
  • Custom URL – it allows you to define your own custom URL to which link will be pointing
  • Separator – this is not really a link, it’s just a horizontal line, you can use it to group links

To add a link to the menu, just click on it, this will append link to the menu.

Customizing Link Options

As you can see in the screenshot above each link has 5 options (except Separator it has only Visibility options):

  • Navigation Label – this is text visible to user in the frontend.
  • Title Attribute – this is text user will see when hovering over link
  • CSS Classes – you can use this field to append additional CSS classes to the link (useful only if you are familiar with HTML and CSS). Note that the CSS class is not added to the link itself but rather to a parent element, so the screen above would generate HTML similar to this
    <li class="custom-css">
        <a href="http://example.com" title="Display all the jobs">View Jobs</a>
    </li>
  • Icon – if you want to better visualize links you can select custom icons for them (there is over 400 icons available by default), click on the Icon drop-down, this will open a modal window which will allow you to filter and select an icon.
  • Visibility – this field allow you to control who will see current link, for example you will probably not want registered and loggedin users to see Register link, so in the visibility you will select just “Unregistered” checkbox.

Once you are done setting link options click Close to minimize it. Notice that at any time you can also drag and drop links in order change their order in menu.

Custom Menu in the Frontend

Once saved the menu in the frontend should look similarly to the one on the image below, of course at any time you can customize your menu from wp-admin / Appeareance / Widgets panel.

wpjb-custom-menu-frontend

 

  1. Hi,
    Great for this add-on.

    Which files do we have put the following css :
    <a href="http://example.com" title="Display all the jobs" rel="nofollow">View Jobs</a>

    ?

    Thank you very much for your help

    • Hi, you do not need to enter this code anywhere, it is just meant to visualize where the CSS classes are being added if you enter them in menu item options.

Leave a Reply

Your email address will not be published.