Skip to content

Instantly share code, notes, and snippets.

@alexdelorenzo
Created February 12, 2017 21:28
Show Gist options
  • Save alexdelorenzo/64ab5ab3e9fd1be59e0f9300ba90d262 to your computer and use it in GitHub Desktop.
Save alexdelorenzo/64ab5ab3e9fd1be59e0f9300ba90d262 to your computer and use it in GitHub Desktop.
Theme agnostic dynamic drop down menu for Wordpress
//
// Copyright Alex DeLorenzo 2017
//
// Dynamic Drop Down Menu for Wordpress
// Theme agnostic.
//
// Usage:
//
// 1) Embed this script in your page.
//
// 2) Wrap name of a menu entry with:
//
// <div class="dd_menu" id="category_name">
// Your Menu Entry Name Goes Here
// </div>
// Where `category_name` is a category used to tag articles with
//
// 3) A dynamic menu will now appear under your menu item. It will
// adopt your Wordpress theme's appearance and behavior
//
const BASE_URL = "https://organicallergyrelief.com"
const CATEGORY_ENDPOINT = "/wp-json/wp/v2/categories"
const CATEGORY_SEARCH_URL = BASE_URL + CATEGORY_ENDPOINT + '?search='
function get_menus() {
return $(".dd_menu");
}
async function get_posts_url_for_category(category) {
const url = CATEGORY_SEARCH_URL + category;
const response = await fetch(url);
const json = await response.json();
// console.log(category)
// console.log(json)
// console.log(url)
return json[0]['_links']['wp:post_type'][0]['href']
}
async function get_posts_for_category(category) {
const post_url = await get_posts_url_for_category(category);
const posts_response = await fetch(post_url);
const posts_json = await posts_response.json();
return posts_json;
}
function get_post_titles(posts_json) {
return posts_json.map(post_json => post_json['title']['rendered'])
}
function get_post_urls(posts_json) {
return posts_json.map(post_json => post_json['link'])
}
function get_menu_html(titles, urls) {
const html = ['<ul class="sub-menu dd_submenu">'];
for (let i = 0; i < titles.length; i++) {
html.push(`<li id="menu-item-${i}" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-${i}">
<a href="${urls[i]}">${titles[i]}</a>
</li>`)
}
html.push("</ul>")
return html.join('\n')
}
function get_html_from_json(posts_json) {
const titles = get_post_titles(posts_json)
const urls = get_post_urls(posts_json)
return get_menu_html(titles, urls)
}
async function attach_menu(menu) {
const category = menu.id;
const posts_json = await get_posts_for_category(category);
const html = $(get_html_from_json(posts_json));
const parent_li = $(menu).parent().parent();
//parent_li.find("ul").remove();
parent_li.append(html);
}
async function attach_menus() {
const menus = get_menus().toArray();
return Promise.all(menus.map(attach_menu))
}
document.addEventListener('DOMContentLoaded', attach_menus, false);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment