Custom WordPress nav menu the last li item – two social icons

Question

I need to create WordPress custom nav menu containing two social icons in the last li item.

document.addEventListener('DOMContentLoaded', function() {

  // Toggle

  const btn = document.querySelector('#btnToggle');
  btn.addEventListener('click', function(e) {
    e.preventDefault();
    document.body.classList.toggle('nav-show');
    this.classList.toggle('btn-toggle--toggled');
  });


  // Highlight current page active menu item.

  const selector = '.nav__link';
  const elems = Array.from(document.querySelectorAll(selector));
  const navigation = document.querySelector('nav');

  function makeActive(evt) {
    const target = evt.target;

    if (!target || !target.matches(selector)) {
      return;
    }

    elems.forEach(elem => elem.classList.remove('active'));
    evt.target.classList.add('active');
  };

  navigation.addEventListener('mousedown', makeActive);

});

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  display: block;
}

.social__link {
  display: block;
}

svg {
  width: 100%;
  display: block;
}

li {
  list-style: none;
}

a {
  text-decoration: none;
}

.container {
  margin: 0 auto;
  width: 100%;
  max-width: 1400px;
}

.header {
  position: sticky;
  top: 0;
  background-color: #fff;
  z-index: 1;
}

.logo__container {
  padding: .3125rem .3125rem .625rem;
}

.logo {
  display: flex;
  align-items: center;
}

.logo__heart {
  flex-basis: 27%;
}

.hgroup {
  padding-left: .625rem;
}

.headline__light {
  display: none;
}

.headline {
  font-size: 1.25rem;
  text-transform: uppercase;
  margin: 0;
}

.navigation__container {
  align-items: center;
}

.header__item {
  display: flex;
}

.btn-toggle button {
  background: none;
  border: 0;
}

.btn-toggle {
  width: 40px;
  height: 40px;
  cursor: pointer;
  border: 1px solid #DDD;
  border-radius: 4px;
  padding: 9px;
  position: absolute;
  top: 24px;
  right: 20px;
  background: none;
}

.btn-toggle .line {
  background: #888;
  border-radius: 10px;
  display: block;
  position: absolute;
  height: 2px;
  transform: translate(-50%, -50%) rotate(0deg);
  transition: transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.25s cubic-bezier(0.22, 0.61, 0.36, 1);
  opacity: 1;
  top: 50%;
  left: 50%;
  width: 80%;
}

.btn-toggle .line:nth-child(1) {
  margin-top: -6px;
}

.btn-toggle .line:nth-child(3) {
  margin-top: 6px;
}

.btn-toggle--toggled .line:nth-child(2) {
  opacity: 0;
}

.btn-toggle--toggled .line:nth-child(1) {
  margin-top: 0;
  transform: translate(-50%, -50%) rotate(45deg);
}

.btn-toggle--toggled .line:nth-child(3) {
  margin-top: 0;
  transform: translate(-50%, -50%) rotate(-45deg);
}

.nav {
  background: #F2EFE8;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
  max-height: 0;
  overflow: hidden;
  transition: 0.5s max-height;
}

.nav-show .nav {
  max-height: 700px;
}

.nav__list {
  display: flex;
  flex-direction: column;
  background: #F2EFE8;
  border-top: 1px solid #DDD;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
}

.nav__item {
  flex-basis: 100%;
  text-transform: uppercase;
  font-size: .875rem;
  text-align: center;
  border-bottom: 1px solid #888;
  letter-spacing: .0625rem;
}

.nav__link {
  display: block;
  text-decoration: none;
  text-transform: uppercase;
  color: #222;
  padding: .625rem;
}

.nav__link:hover {
  background: #c2def7;
}

.nav__link.active {
  background: #abd4f8;
}

.icon__container {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.nav__item.social__icon {
  padding: .625rem;
}

.icon {
  width: 10%;
}

@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (orientation: landscape) {
  .nav__list {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .nav__item {
    width: 50%;
    flex-basis: 50%;
  }
  .nav__item:nth-of-type(1) {
    order: 1;
  }
  .nav__item:nth-of-type(2) {
    order: 3;
  }
  .nav__item:nth-of-type(3) {
    order: 5;
  }
  .nav__item:nth-of-type(4) {
    order: 7;
  }
  .nav__item:nth-of-type(5) {
    order: 9;
  }
  .nav__item:nth-of-type(6) {
    order: 2;
  }
  .nav__item:nth-of-type(7) {
    order: 4;
  }
  .nav__item:nth-of-type(8) {
    order: 6;
  }
  .nav__item:nth-of-type(9) {
    order: 8;
  }
  .nav__item:nth-of-type(10) {
    order: 10;
    padding: .3125rem 0;
    border-bottom: 1px solid #888;
  }
  .icon {
    width: 9%;
  }
}

@media only screen and (min-width: 768px) {
  .logo__heart {
    flex-basis: 25%;
  }
  .hgroup {
    flex-basis: 71%;
  }
  .headline__light {
    display: block;
    font-size: .875rem;
    text-transform: none;
  }
  .nav__list {
    flex-grow: 1;
    flex-wrap: wrap;
    flex-direction: row;
  }
  .nav__item {
    width: 33.33%;
    flex-basis: 33.33%;
  }
  .nav__item:nth-of-type(1) {
    order: 1;
  }
  .nav__item:nth-of-type(2) {
    order: 4;
  }
  .nav__item:nth-of-type(3) {
    order: 7;
  }
  .nav__item:nth-of-type(4) {
    order: 2;
  }
  .nav__item:nth-of-type(5) {
    order: 5;
  }
  .nav__item:nth-of-type(6) {
    order: 8;
  }
  .nav__item:nth-of-type(7) {
    order: 3;
  }
  .nav__item:nth-of-type(8) {
    order: 6;
  }
  .nav__item:nth-of-type(9) {
    order: 9;
  }
  .nav__item:nth-of-type(10) {
    order: 10;
    padding: .625rem;
    flex-basis: 100%;
  }
  .icon {
    width: 4%;
  }
}

@media only screen and (min-width: 1024px) {
  .logo {
    width: 100%;
  }
  .logo__heart {
    flex-basis: 30%;
  }
  .hgroup {
    flex-basis: 100%;
    padding: 0;
  }
  .unboxing__trick {
    background-color: #F2EFE8;
    width: 100vw;
    position: relative;
    margin: 0 calc(-50vw + 50%);
    padding: 0 calc(50vw - 50%);
  }
  .btn-toggle {
    display: none;
  }
  .nav {
    max-height: 100%;
    transition: none;
    transition-duration: 0s;
    display: flex;
    flex-direction: row;
  }
  .nav__list {
    flex-direction: row;
    flex-wrap: nowrap;
    border-top: none;
    padding: .625rem 0;
  }
  .nav__item {
    flex-basis: auto;
    width: auto;
    flex-grow: 1;
    flex: 1 1 auto;
    position: relative;
    border-bottom: none;
  }
  .nav__item:after {
    content: '';
    position: absolute;
    width: 1px;
    left: 0;
    top: 0;
    bottom: 0;
    background: linear-gradient(hsla(0, 0%, 0%, 0) 0%, hsla(0, 0%, 0%, .20) 50%, hsla(0, 0%, 0%, 0) 100%);
  }
  .nav__item:last-of-type {
    border-right: 0;
  }
  .nav__item:nth-of-type(1) {
    order: 1;
  }
  .nav__item:first-child::after {
    display: none;
  }
  .nav__item:nth-of-type(2) {
    order: 2;
  }
  .nav__item:nth-of-type(3) {
    order: 3;
  }
  .nav__item:nth-of-type(4) {
    order: 4;
  }
  .nav__item:nth-of-type(5) {
    order: 5;
  }
  .nav__item:nth-of-type(6) {
    order: 6;
  }
  .nav__item:nth-of-type(7) {
    order: 7;
  }
  .nav__item:nth-of-type(8) {
    order: 8;
  }
  .nav__item:nth-of-type(9) {
    order: 9;
  }
  .nav__item:nth-of-type(10) {
    order: 10;
    flex: 1 1 8%;
    padding: .3125rem 0;
    border-bottom: none;
  }
  .nav__link:hover {
    background: none;
    color: #b8795a;
  }
  .nav__link.active {
    background: none;
    color: #b8795a;
  }
  .icon {
    width: 25px;
  }
}

@supports (position: sticky) {
  .header {
    position: sticky;
    top: 0;
  }
}

<!doctype html>
<html lang="pl">

<head>
  <meta charset="utf-8">
  <title></title>
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="style.css">
  <script src="app.js"></script>
</head>

<body>
  <header class="header">
    <section class="container">
      <div class="header__container">
        <div class="logo__container header__item">
          <div class="logo">
            <div class="logo__heart">
              <a href="#"><img class="img__logo" src="http://placehold.it/169x160" alt="" title=""></a>
            </div>
            <div class="hgroup">
              <h1 class="headline__bold headline">Czysta świadomość</h1>
              <h2 class="headline__light headline">
                ... stan bycia poza umysłem, wolny od goniących myśli, wszelkich uwarukowań, pobudek ego.<br> Czysta Świadomość to prawdziwe JA... to Światło i Miłość
              </h2>
            </div>
          </div>
        </div>

        <nav class="navigation__container">
          <button class="btn-toggle" id="btnToggle" aria-label="Open / Close Menu">
                    <span class="line"></span>
                    <span class="line"></span>
                    <span class="line"></span>
                </button>

          <div class="unboxing__trick">
            <div class="nav">
              <ul class="nav__list">
                <li class="nav__item">
                  <a class="nav__link active" href="#">Strona Główna</a>
                </li>
                <li class="nav__item">
                  <a class="nav__link" href="#">Ja jestem</a>
                </li>
                <li class="nav__item">
                  <a class="nav__link" href="#">Kalendarz</a>
                </li>
                <li class="nav__item">
                  <a class="nav__link" href="#">Warsztaty</a>
                </li>
                <li class="nav__item">
                  <a class="nav__link" href="#">Wykłady</a>
                </li>
                <li class="nav__item">
                  <a class="nav__link" href="#">Artykuły</a>
                </li>
                <li class="nav__item">
                  <a class="nav__link" href="#">Audio</a>
                </li>
                <li class="nav__item">
                  <a class="nav__link" href="#">Youtube</a>
                </li>
                <li class="nav__item">
                  <a class="nav__link" href="#">Kontakt</a>
                </li>
                <li class="nav__item social__icon">
                  <figure class="icon__container">
                    <div class="icon">
                      <a class="social__link social__link--fb" href="#">
                        <svg version="1.1" id="Social_Icons" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-297.5 123.5 595 595" enable-background="new -297.5 123.5 595 595" reserveAspectRatio="xMidYMid meet" xml:space="preserve">
                                                <rect x="-64.47" y="206.101" fill="#FFFFFF" width="276.871" height="512.399"/>
                                                <path id="Facebook" fill="#4460A0" d="M20.309,718.5H-264.66c-18.143,0-32.84-14.707-32.84-32.84V156.342
                                                c0-18.144,14.698-32.842,32.84-32.842h529.324c18.135,0,32.836,14.698,32.836,32.842V685.66c0,18.137-14.701,32.84-32.836,32.84
                                                H113.042V488.082h77.34l11.581-89.799h-88.921v-57.328c0-26,7.218-43.713,44.5-43.713l47.548-0.02v-80.316
                                                c-8.223-1.092-36.449-3.538-69.289-3.538c-68.561,0-115.496,41.851-115.496,118.698v66.222H-57.23v89.798H20.31V718.5H20.309z"/>
                                            </svg>
                      </a>
                    </div>
                    <div class="icon">
                      <a class="social__link social__link--youtube" href="#">
                        <svg version="1.1" id="Social_Icons" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 36.305 595 595" enable-background="new 0 36.305 595 595" reserveAspectRatio="xMidYMid meet" xml:space="preserve">
                                                <polygon fill="#FFFFFF" points="214.04,443.136 214.04,214.49 432.938,328.812 "/>
                                                    <path id="Youtube" fill="#CE1312" d="M589.05,214.115c0,0-5.819-41.248-23.65-59.408c-22.629-23.849-47.991-23.959-59.611-25.343
                                                        c-83.265-6.06-208.158-6.06-208.158-6.06h-0.261c0,0-124.895,0-208.157,6.06c-11.641,1.384-36.984,1.495-59.63,25.343
                                                        C11.75,172.873,5.948,214.115,5.948,214.115S0,262.565,0,310.993v45.417c0,48.445,5.949,96.875,5.949,96.875
                                                        s5.802,41.247,23.633,59.407c22.647,23.851,52.379,23.102,65.617,25.591c47.6,4.602,202.301,6.021,202.301,6.021
                                                        s125.024-0.185,208.288-6.246c11.621-1.4,36.983-1.514,59.611-25.36c17.831-18.166,23.652-59.408,23.652-59.408
                                                        S595,404.859,595,356.41v-45.417C595,262.565,589.05,214.115,589.05,214.115z M236.066,411.443l-0.019-168.18l160.762,84.38
                                                        L236.066,411.443z"/>
                                            </svg>
                      </a>
                    </div>
                  </figure>
                </li>
              </ul>
            </div>
          </div>
        </nav>
      </div>
    </section>
  </header>
</body>

</html>

I create my theme. This is my pure HTML, CSS and JS files: http://www.marypieroszkiewicz.com/Pure__Conciousness__Light__And__Love/index.html — Mary Pieroszkiewicz, Jun 13 '18 at 15:02
in your wordpress themes.. look for the navigation file and just add the two li with the social icons — Marcogomesr, Jun 14 '18 at 10:02
Please let me know how can I add manually item WordPress menu... — Mary Pieroszkiewicz, Jun 14 '18 at 20:21
login on your wordpress ...in your left menu head to Appearance / Editor... that would show you all the files on your themes...I can't really tell you where is your navigation menu.. it really depends on the theme..but the easiest way is inspecting header.php and checking if the navigation is set it there or in another file.... — Marcogomesr, Jun 15 '18 at 08:51
Could you help me write Walker Nav Menu add this social icon at the last of li item and add highlight current page active menu item (.active) — Mary Pieroszkiewicz, Jun 15 '18 at 17:54

Florian Brinkmann · Accepted Answer · 2018-07-08T08:55:57.290

I cannot comment on Marco’s answer because I have not enough reputation, so I create a new answer…

Marco’s code only needs a small adjustment, then it should work: The social icons markup needs to be added to $items, and in the end, $items needs to be returned by the filter function.

function add_last_nav_item( $items ) {
    $items .= sprintf(
        '<li class="nav__item social__icon">
   <figure class="icon__container">
     <div class="icon">
      <a href="51$s" target="_blank" class="social__link"><img src="%2$s/images/icon__facebook.svg"></a>
     </div>
     <div class="icon">
       <a href="%3$s" target="_blank" class="social__link"><img src="%2$s/images/icon__youtube.svg"></a> .
     </div>
   </figure>
  </li>',
        'https://www.facebook.com/Czysta-%C5%9Awiadomo%C5%9B%C4%87-%C5%9Awiat%C5%82o-i-Mi%C5%82o%C5%9B%C4%87pl-811435542275919/',
        get_template_directory_uri(),
        'https://www.youtube.com/channel/UCxxKwAW7JE6eCx3OjNcO6Yw/'
    );

    return $items;
}

add_filter( 'wp_nav_menu_items', 'add_last_nav_item' );

Update for adding classes

To add a class to the li and a elements of the nav items, you can use the following snippet:

/**
 * Add classes to li and a elements of the nav menus.
 *
 * @param string $items HTML of menu items.
 *
 * @return string
 */
function themeslug_add_menu_item_classes( $items ) {
    // Disable libxml errors.
    libxml_use_internal_errors( true );

    // Create new DOMDocument object.
    $dom = new DOMDocument();

    // Load the HTML.
    // Trick with <?xml endocing="utf-8" loadHTML() method of https://github.com/ivopetkov/html5-dom-document-php
    $dom->loadHTML( '<?xml encoding="utf-8" ?>' . $items, 0 | LIBXML_NOENT );

    $xpath = new DOMXPath( $dom );

    // Get all nodes.
    $nodes = $xpath->query( '//*' );

    // Loop them.
    foreach ( $nodes as $node ) {
        // Check if we have an li element.
        if ( 'li' === $node->tagName ) {
            // Get existing classes from element and add our custom class.
            $classes = $node->getAttribute( 'class' ) . ' my-custom-list-item-class';
            // Set the custom class.
            $node->setAttribute( 'class', $classes );
        } // End if().

        // Check if the node is an a element.
        if ( 'a' === $node->tagName ) {
            // Get existing classes from element and add our custom class.
            $classes = $node->getAttribute( 'class' ) . ' my-custom-a-element-class';
            // Set the custom class.
            $node->setAttribute( 'class', $classes );
        } // End if().
    } // End foreach().

    // Save the dom.
    $items = themeslug_save_html( $dom );

    // Return the items.
    return $items;
}

add_filter( 'wp_nav_menu_items', 'themeslug_add_menu_item_classes' );

/**
 * Enhanced variation of DOMDocument->saveHTML().
 *
 * Fix for cyrillic from https://stackoverflow.com/a/47454019/7774451.
 * Replacement of doctype, html, and body from archon810\SmartDOMDocument.
 *
 * @param DOMDocument $dom DOMDocument object of the dom.
 *
 * @return string DOM or empty string.
 */
function themeslug_save_html( DOMDocument $dom ) {
    $xpath      = new DOMXPath( $dom );
    $first_item = $xpath->query( '/' )->item( 0 );

    return preg_replace(
        array(
            '/^\<\!DOCTYPE.*?<html><body>/si',
            '!</body></html>$!si',
        ),
        '',
        $dom->saveHTML( $first_item )
    );
}

It uses DOMDocument to parse the HTML of the nav items and DOMXPath to get all HTML nodes. After that, the nodes are looped and inside the loop it checks for the element type and adds a class if it is a li or a element.

I don’t understand what you are trying, could you explain it more detailed? — Florian Brinkmann, Jul 06 '18 at 06:08
Florian I will try to explain more clearly what I mean... I need to set my class for

Marcogomesr · Answer 2 · 2018-06-26T11:56:21.907

could you paste this code on your functions.php
it should add the li at the end of your wp_nav_menu()

function add_last_nav_item($items) { 
  ?>
  <li class="nav__item social__icon">                                                    
   <figure class="icon__container">                                                        
     <div class="icon">                                                            
      <a href="https://www.facebook.com/Czysta-%C5%9Awiadomo%C5%9B%C4%87-%C5%9Awiat%C5%82o-i-Mi%C5%82o%C5%9B%C4%87pl-811435542275919/" target="_blank" class="social__link"><img src="<?php echo get_template_directory_uri(); ?>/images/icon__facebook.svg"></a>                                                     
     </div>
     <div class="icon">                                                            
       <a href="https://www.youtube.com/channel/UCxxKwAW7JE6eCx3OjNcO6Yw/" target="_blank" class="social__link"><img src="<?php echo get_template_directory_uri(); ?>/images/icon__youtube.svg"></a> .                                                          
     </div>
   </figure>
  </li>
  <?php
}

add_filter('wp_nav_menu_items','add_last_nav_item');

Marco. It added the li with social icon but my menu with links disappeared. — Mary Pieroszkiewicz, Jun 28 '18 at 14:36
in your config.php file..have you define the WP_DEBUG as true? `define('WP_DEBUG', true);` ... so we can see if there is an error — Marcogomesr, Jun 28 '18 at 14:41
Marco. I changed config.php file as you told me, but I don't see any errors... Another suggestion how can I get this menu as I have in pure HTML / CSS project. Truly appreciate for help! — Mary Pieroszkiewicz, Jul 02 '18 at 16:00

score 0 · Answer 3 · answered Jul 03 '18 at 05:59

0

You can extend the WordPress Walker class to build a custom menu.

Have a look at the codex documentation.

https://codex.wordpress.org/Class_Reference/Walker

You need to apply the required logic in that. Do not use jQuery or frontend scripts to do that. The menu is fully customiszable with the Walker.

answered Jul 03 '18 at 05:59

Krishnadas PC

5,981
2
53
54

A lot of my friend who coding for Wordpress have told me about Walker. I don't deal on a daily basis with coding for Wordpress. I need more time to understand Walker. – Mary Pieroszkiewicz Jul 03 '18 at 09:45
If you are comfortable working with PHP you can easily pick Walker. Doing things in the suggested way by the WordPress is always better. – Krishnadas PC Jul 03 '18 at 09:58

Custom WordPress nav menu the last li item – two social icons

3 Answers3

Update for adding classes