Angular + Wordpress

Displaying custom menu prev/next links

So the idea of this tutorial is to display 'Previous Page' and 'Next Page' links on your site while adhering to the structure of your custom menu.

I am writing this on the the presumtion that:

  1. You already have Angular working and integrated with your Wordpress theme
  2. You already have a custom menu set up and populated.
  3. Your custom menu is linked to a menu location (Don't worry if it's not. You will still be able to follow along.)

Part1. The Plugins

First thing you will need (if you don't already) is the almighty WordPress REST API (Version 2).

Then you will need the Menu addon WP API Menus.

Once installed go ahead and test your menu. goto:

Here is an example call if your menu location is called 'main_navigation_menu'
/wp-json/wp-api-menus/v2/menu-locations/main_navigation_menu

If it's working you should see something like this.

'[{"ID":25,"order":1,"parent":0,"title":"Cool Menu Item","url":"http:\/\/... etc etc'

Part2. Organising the routes

You want to make sure you pass your :slug into your controller through your $routeProvider. It should look something like this:

The :slug variable is essentially a 'catch all'. If you have a specific slug it may look like this.

Either way, it is important to know the slug for the next part.

Part3. The controller.

So here is an example of the controller which is calling the JSON menu. If it sucessfully retrieves the menu we will log it to the console.

Filtering through the menu.

Once we have the JSON call working sweet. we have to:

  1. Find the current menu item by matching the slug
  2. Find what item is after it
  3. Find what item is before it
  4. Add some extra functionality if the item is at the start or end
  5. Pass the items to the view

Part4. The View.

So with our items passed though the scope all we have to do is display the menu data.

View the Repo

I plan to style this page and make the tutorial better, however, if you can't wait you can follow me here @iamlukem and ask any questions.