[Summary view] [Print] [Text view]

   1  <?php
   2  /**
   3   * Functions and filters related to the menus.
   4   *
   5   * Makes the default WordPress navigation use an HTML structure similar
   6   * to the Navigation block.
   7   *
   8   * @link https://make.wordpress.org/themes/2020/07/06/printing-navigation-block-html-from-a-legacy-menu-in-themes/
   9   *
  10   * @package WordPress
  11   * @subpackage Twenty_Twenty_One
  12   * @since Twenty Twenty-One 1.0
  13   */
  14  
  15  /**
  16   * Add a button to top-level menu items that has sub-menus.
  17   * An icon is added using CSS depending on the value of aria-expanded.
  18   *
  19   * @since Twenty Twenty-One 1.0
  20   *
  21   * @param string $output Nav menu item start element.
  22   * @param object $item   Nav menu item.
  23   * @param int    $depth  Depth.
  24   * @param object $args   Nav menu args.
  25   * @return string Nav menu item start element.
  26   */
  27  function twenty_twenty_one_add_sub_menu_toggle( $output, $item, $depth, $args ) {
  28      if ( 'primary' === $args->theme_location
  29          && 0 === $depth && in_array( 'menu-item-has-children', $item->classes, true )
  30      ) {
  31  
  32          // Add toggle button.
  33          $output .= '<button class="sub-menu-toggle" aria-expanded="false" onClick="twentytwentyoneExpandSubMenu(this)">';
  34          $output .= '<span class="icon-plus">' . twenty_twenty_one_get_icon_svg( 'ui', 'plus', 18 ) . '</span>';
  35          $output .= '<span class="icon-minus">' . twenty_twenty_one_get_icon_svg( 'ui', 'minus', 18 ) . '</span>';
  36          /* translators: Hidden accessibility text. */
  37          $output .= '<span class="screen-reader-text">' . esc_html__( 'Open menu', 'twentytwentyone' ) . '</span>';
  38          $output .= '</button>';
  39      }
  40      return $output;
  41  }
  42  add_filter( 'walker_nav_menu_start_el', 'twenty_twenty_one_add_sub_menu_toggle', 10, 4 );
  43  
  44  /**
  45   * Detects the social network from a URL and returns the SVG code for its icon.
  46   *
  47   * @since Twenty Twenty-One 1.0
  48   *
  49   * @param string $uri  Social link.
  50   * @param int    $size The icon size in pixels.
  51   * @return string
  52   */
  53  function twenty_twenty_one_get_social_link_svg( $uri, $size = 24 ) {
  54      return Twenty_Twenty_One_SVG_Icons::get_social_link_svg( $uri, $size );
  55  }
  56  
  57  /**
  58   * Displays SVG icons in the footer navigation.
  59   *
  60   * @since Twenty Twenty-One 1.0
  61   *
  62   * @param string   $item_output The menu item's starting HTML output.
  63   * @param WP_Post  $item        Menu item data object.
  64   * @param int      $depth       Depth of the menu. Used for padding.
  65   * @param stdClass $args        An object of wp_nav_menu() arguments.
  66   * @return string The menu item output with social icon.
  67   */
  68  function twenty_twenty_one_nav_menu_social_icons( $item_output, $item, $depth, $args ) {
  69      // Change SVG icon inside social links menu if there is supported URL.
  70      if ( 'footer' === $args->theme_location ) {
  71          $svg = twenty_twenty_one_get_social_link_svg( $item->url, 24 );
  72          if ( ! empty( $svg ) ) {
  73              $item_output = str_replace( $args->link_before, $svg, $item_output );
  74          }
  75      }
  76  
  77      return $item_output;
  78  }
  79  
  80  add_filter( 'walker_nav_menu_start_el', 'twenty_twenty_one_nav_menu_social_icons', 10, 4 );
  81  
  82  /**
  83   * Filters the arguments for a single nav menu item.
  84   *
  85   * @since Twenty Twenty-One 1.0
  86   *
  87   * @param stdClass $args  An object of wp_nav_menu() arguments.
  88   * @param WP_Post  $item  Menu item data object.
  89   * @param int      $depth Depth of menu item. Used for padding.
  90   * @return stdClass
  91   */
  92  function twenty_twenty_one_add_menu_description_args( $args, $item, $depth ) {
  93      if ( '</span>' !== $args->link_after ) {
  94          $args->link_after = '';
  95      }
  96  
  97      if ( 0 === $depth && isset( $item->description ) && $item->description ) {
  98          // The extra <span> element is here for styling purposes: Allows the description to not be underlined on hover.
  99          $args->link_after = '<p class="menu-item-description"><span>' . $item->description . '</span></p>';
 100      }
 101  
 102      return $args;
 103  }
 104  add_filter( 'nav_menu_item_args', 'twenty_twenty_one_add_menu_description_args', 10, 3 );