Tag: menu

What’s the best tool to build a website menu?

I have an article website with 85 pages in total. It’s just html, css and some javascript. I need to change the website menu so I’ll have to make the change in all 85 pages.

What tools should I use to be able to change the website without having to change every single page?

I know I could use php or python with a database but I’m sure there’s something better than that. I want to avoid database because it can make the website slow and it’ll compromise SEO.

How can I make this type of outline-type menu? [closed]

I really want to add this kind of expandable outline-type menu to my website. I’ve seen it before in digital help manuals, but I’ve never seen one online. Each item would link to a page in my website.

This kind of menu

The reason why I want this kind of menu rather than a regular dropdown menu or megamenu are:

  1. It’s more compact.
  2. It’s more aesthetically pleasing (in my opinion).
  3. Almost all the pages of my website are under 3-4 levels of hierarchy, so having this kind of menu would make for fast navigation.

How can I make this type of menu? Preferably the solution would only involve HTML, CSS and Javascript, but I am open to using something else if it would be radically easier.

Thanks!

Add custom admin menu item for pages using a certain template

I am looking to add a new, custom menu item to the WordPress admin sidebar that displays pages that use a certain template. For example: a group of pages uses the template called “Retailer Sendout” (page-retailer-sendout.php) would be displayed below the default “Pages” top-level menu item.

I have tried the following URL combinations, but none of them have worked so far.

  • http://domain.test/wp-admin/edit.php?post_type=page&page_template=page-retailer-sendout
  • http://domain.test/wp-admin/edit.php?post_type=pagetemplate=page-retailer-sendout
  • http://domain.test/wp-admin/edit.php?post_type=page&page_template=retailer_sendout

I have also tested some admin menu customization plugins, but they do not offer the ability to link to pages with a specific template name.

I am comfortable with adding a custom function to the theme’s functions.php file, but I do not know where to start.

Any help is greatly appreciated.

Invalid Menu Items

I told the question on youtube video

also I tell the question here again:

I cant add my taxonomies to menu except 000 taxonomy.I dont know why but it works:

the error : invalid items… ( red showing as you can see on youtube video )

this one works:

function deneme() {      // Add new taxonomy, make it hierarchical like categories     //first do the translations part for GUI          $  labels = array(             'name' => _x( '000', 'taxonomy general name' ),             'singular_name' => _x( '000', 'taxonomy singular name' ),             'search_items' =>  __( '000' ),             'all_items' => __( 'All Locations' ),             'parent_item' => __( 'Parent Locations' ),             'parent_item_colon' => __( 'Parent Location:' ),             'edit_item' => __( 'Edit Location' ),             'update_item' => __( 'Update Location' ),             'add_new_item' => __( 'Add New Location' ),             'new_item_name' => __( 'New Topic Location' ),             'menu_name' => __( '000' ),         );      // Now register the taxonomy          register_taxonomy('000',array('post'), array(             'hierarchical' => true,             'labels' => $  labels,             'show_ui' => true,             'show_admin_column' => true,             'query_var' => true,             'show_in_rest' => true,             'rewrite' => true,             'rewrite' => array( 'slug' => '000' ),             'has_archive' => true,         ));      }      add_action( 'init', 'deneme', 0 );

this one doesnt work:

// 2. ekleme  function masallah() {  // Add new taxonomy, make it hierarchical like categories //first do the translations part for GUI      $  labels = array(         'name' => _x( 'Districts', 'taxonomy general name' ),         'singular_name' => _x( 'District', 'taxonomy singular name' ),         'search_items' =>  __( 'Search Districts' ),         'all_items' => __( 'All Districts' ),         'parent_item' => __( 'Parent Districts' ),         'parent_item_colon' => __( 'Parent District:' ),         'edit_item' => __( 'Edit District' ),         'update_item' => __( 'Update District' ),         'add_new_item' => __( 'Add New District' ),         'new_item_name' => __( 'New Topic District' ),         'menu_name' => __( 'Districts' ),     );  // Now register the taxonomy      register_taxonomy('Districts',array('post'), array(         'hierarchical' => true,         'labels' => $  labels,         'show_ui' => true,         'show_admin_column' => true,         'query_var' => true,         'show_in_rest' => true,         'rewrite' => true,         'rewrite' => array( 'slug' => 'districts' ),         'has_archive' => true,     ));  }  add_action( 'init', 'masallah', 0 );

Invalid Menu Items – The most interesting question


The question needs it so I captured the error.It is necessary so please watch it.

https://youtu.be/lME3lY-kNbA if it doesnt open, please try this:

I told the question on youtube video so I share only the code like what I said on video.

I hear that video,video,video are you youtuber? 😀 no, it needed

this one works:

function deneme() {      // Add new taxonomy, make it hierarchical like categories     //first do the translations part for GUI          $  labels = array(             'name' => _x( '000', 'taxonomy general name' ),             'singular_name' => _x( '000', 'taxonomy singular name' ),             'search_items' =>  __( '000' ),             'all_items' => __( 'All Locations' ),             'parent_item' => __( 'Parent Locations' ),             'parent_item_colon' => __( 'Parent Location:' ),             'edit_item' => __( 'Edit Location' ),             'update_item' => __( 'Update Location' ),             'add_new_item' => __( 'Add New Location' ),             'new_item_name' => __( 'New Topic Location' ),             'menu_name' => __( '000' ),         );      // Now register the taxonomy          register_taxonomy('000',array('post'), array(             'hierarchical' => true,             'labels' => $  labels,             'show_ui' => true,             'show_admin_column' => true,             'query_var' => true,             'show_in_rest' => true,             'rewrite' => true,             'rewrite' => array( 'slug' => '000' ),             'has_archive' => true,         ));      }      add_action( 'init', 'deneme', 0 );

and this is the problem source:

nowadays, I select prayer for functions names 😀 such as masallah ( I hope the god protect ) or insallah ( I hope God will help to become real ) but yes I am here to ask 😀

// 2. ekleme  function masallah() {  // Add new taxonomy, make it hierarchical like categories //first do the translations part for GUI      $  labels = array(         'name' => _x( 'Districts', 'taxonomy general name' ),         'singular_name' => _x( 'District', 'taxonomy singular name' ),         'search_items' =>  __( 'Search Districts' ),         'all_items' => __( 'All Districts' ),         'parent_item' => __( 'Parent Districts' ),         'parent_item_colon' => __( 'Parent District:' ),         'edit_item' => __( 'Edit District' ),         'update_item' => __( 'Update District' ),         'add_new_item' => __( 'Add New District' ),         'new_item_name' => __( 'New Topic District' ),         'menu_name' => __( 'Districts' ),     );  // Now register the taxonomy      register_taxonomy('Districts',array('post'), array(         'hierarchical' => true,         'labels' => $  labels,         'show_ui' => true,         'show_admin_column' => true,         'query_var' => true,         'show_in_rest' => true,         'rewrite' => true,         'rewrite' => array( 'slug' => 'districts' ),         'has_archive' => true,     ));  }  add_action( 'init', 'masallah', 0 );

Bootstrap Menu Toggle not workin

I created a menu using Bootstrap, when I try it statically in a static html page it works without problems, but when I try in a wordpress-theme page it doesn’t work. I tried with Navwalker, but the problem it’s not here because the menu doesn’t work also if not dinamic.

When I click the toggle menu button, links appears for a moment, so they disappears again. Also sticky-top doesn’t work.

function blankbootstrap_scripts() {     wp_enqueue_style('bootstrap-main-css', get_template_directory_uri() . '/bootstrap/css/bootstrap.min.css');      if(!is_admin()) {         wp_deregister_script('jquery');         wp_register_script('jquery', includes_url('/js/jquery/jquery.js'), array(), false, true);         wp_enqueue_script('jquery');          //bootstrap scripts         //wp_register_script('popper-script', get_template_directory_uri() . '/bootstrap/js/popper.min.js', 'jquery', false, true);         //wp_enqueue_script('popper-script');          wp_register_script('bootstrap-script', get_template_directory_uri() . '/bootstrap/js/bootstrap.min.js', 'jquery', false, true);         wp_enqueue_script('bootstrap-script');      }     wp_enqueue_style( 'blankbootstrap-style', get_stylesheet_uri() );      wp_enqueue_script( 'blankbootstrap-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '20151215', true );      wp_enqueue_script( 'blankbootstrap-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), '20151215', true );      if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {         wp_enqueue_script( 'comment-reply' );     } } add_action( 'wp_enqueue_scripts', 'blankbootstrap_scripts' );

HTML

<nav class="navbar navbar-expand-md navbar-dark bg-dark sticky-top">       <button class="navbar-toggler" data-toggle="collapse" data-target="#collapse_target">         <span class="navbar-toggler-icon"></span>       </button>        <div id="collapse_target" class="collapse navbar-collapse">         <a class="navbar-brand"><img src="img/ic_terrain_white_18dp.png" style="height: 1em;"></a>         <span class="navbar-text">Example1</span>          <!-- bg-primary, bg-success, bg-warning, bg-info, bg-danger, bg-light -->         <ul class="navbar-nav">           <li class="nav-item">             <a class="nav-link" href="#">Item1</a>           </li>           <li class="nav-item dropdown">             <a class="nav-link dropdown-toggle" data-target="dropdown_target" data-toggle="dropdown" href="#">               Item2               <span class="caret"></span>             </a>             <ul class="navbar-nav">               <div class="dropdown-menu" aria-labelledby="dropdown_target">                 <a class="dropdown-item">Sub1</a>                 <a class="dropdown-item">Sub2</a>                 <div class="dropdown-divider"></div>                 <a class="dropdown-item">Sub3</a>               </div>             </ul>           </li>           <li class="nav-item">             <a class="nav-link" href="#">Item3</a>           </li>           <li class="nav-item">             <a class="nav-link" href="#">Item4</a>           </li>         </ul>       </div>      </nav>

WordPress + Bootstrap: Replace primary navigation menu on mobile?

So, I have a site that has a main navigation bar at the top and a secondary nav in the sidebar. The secondary nav includes the same links in the main nav but with dropdowns for the child pages. It works fine on desktop but when the navs collapse, I get two navbars at the top, basically showing the same thing. So, I’m thinking, for mobile, since the sidebar nav is just a more detailed version of the main nav, I just need to replace the menu in the main nav with the menu in the sidebar then hide the sidebar.

Essentially, I need to switch the sidebar menu location for mobile with a different menu. But, I a bit stumped on how to do that.

Here’s my header.php:

    <header id="masthead" class="site-header fixed-top <?php echo wp_bootstrap_starter_bg_class(); ?>" role="banner">         <div class="container-fluid">             <nav class="navbar navbar-expand p-0 flex-column flex-md-row px-0">                 <div class="navbar-brand">                     <?php if ( get_theme_mod( 'wp_bootstrap_starter_logo' ) ): ?>                         <a href="<?php echo esc_url( home_url( '/' )); ?>">                             <img src="<?php echo esc_url(get_theme_mod( 'wp_bootstrap_starter_logo' )); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>">                         </a>                     <?php else : ?>                         <a class="site-title" href="<?php echo esc_url( home_url( '/' )); ?>"><?php esc_url(bloginfo('name')); ?></a>                     <?php endif; ?>                  </div>                 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#main-nav" aria-controls="" aria-expanded="false" aria-label="Toggle navigation">                     <span class="navbar-toggler-icon"></span>                 </button>                   <?php                  wp_nav_menu(array(                 'theme_location'    => 'primary',                 'container'       => 'div',                 'container_id'    => 'main-nav',                 'container_class' => 'collapse navbar-collapse d-flex justify-content-end',                 'menu_id'         => false,                 'menu_class'      => 'navbar-nav',                 'depth'           => 3,                 'fallback_cb'     => 'wp_bootstrap_navwalker::fallback',                 'walker'          => new wp_bootstrap_navwalker()                 ));                 ?>             </nav>         </div>     </header><!-- #masthead -->

Here’s my sidebar.php

<aside id="secondary" class="widget-area col-md-3 col-xl-2 sidebar" role="complementary">      <?php dynamic_sidebar( 'sidebar-1' ); ?>              <nav class="navbar sidebar-nav navbar-light">                 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#secondary-nav" aria-controls="" aria-expanded="false" aria-label="Toggle navigation">                     <span class="navbar-toggler-icon"></span>                 </button>                                  <?php                                 wp_nav_menu(array(                                 'theme_location'    => 'sidebar',                                 'container'       => 'div',                                 'container_id'    => 'secondary-nav',                                 'container_class' => 'collapse navbar-collapse',                                 'menu_id'         => false,                                 'menu_class'      => 'navbar-nav flex-column',                                 'depth'           => 3,                                 'fallback_cb'     => 'wp_bootstrap_navwalker::fallback',                                 'walker'          => new wp_bootstrap_navwalker()                                 ));                                 ?>              </nav>  </aside><!-- #secondary -->

twentysixteen child theme – responsive menu – ham icon button not working – Cannot read property ‘classList’ of null

I am trying to convert this site http://buildandtest.atspace.cc/ into twentysixteen child theme. It appears that /js/menu.js in my child theme is not working as nothing happens when the ham icon button is clicked (pls.see my site link above to check correct behavior). On inspecting via Google Chrome Inspect I am getting the following errors:

Uncaught TypeError: Cannot read property ‘classList’ of null at mediaqueryresponse (menu.js?ver=5.3.2:19) at menu.js?ver=5.3.2:10 at menu.js?ver=5.3.2:31 mediaqueryresponse @ menu.js?ver=5.3.2:19 (anonymous) @ menu.js?ver=5.3.2:10 (anonymous) @ menu.js?ver=5.3.2:31

Any advice is appreciated

header.php in child theme

<header class="header" id='myTopnav'>  <?php  wp_nav_menu(              array(                   'theme_location'=> 'topnav',                   'container' => 'nav',                   'menu_class' => 'topnav',                   'menu_id'    => 'myTopnav',                   )  );?>  <button class="ham-icon"><span class="fa fa-bars fa-2x"></span></button>  </header>

/js/menu.js in child theme

(function () {   var mql = window.matchMedia("screen and (max-width: 960px)");   //detect media query    var navTop = document.querySelector(".header");   //return first element within the document that matches .header    var toggle = document.querySelector(".ham-icon");    mediaqueryresponse(mql);   //ensures that addListener function is executed when the page loads, by default addListener only fires when state of the window changes   mql.addListener(mediaqueryresponse);    function mediaqueryresponse(mql) {     if (mql.matches) {       toggle.addEventListener("click", clickMenu);       //if media query matches, execute click or clickMenu event     } else {       navTop.classList.remove("responsive");       //otherwise remove .responsive       toggle.removeEventListener("click", clickMenu);       //and remove EventListener     }    }    function clickMenu() {     navTop.classList.toggle("responsive");   }  })();

Aria issues with navigation menu bar

I have a menu bar but
It seems like I had the functionalilty wrong, according to this page https://www.w3.org/TR/wai-aria-practices/examples/menubar/menubar-1/menubar-1.html

the menu bar should open with the down arrows, and navigate via up and down keys, to go to the next tab you should be pressing left or right not TAB, tab should get out of the menu itself and on to the content… how can i do this with the given code i have above. thank you

 <!DOCTYPE html> <html lang="en">...
Code (markup):

Aria issues with navigation menu bar