Screenshot of website clearly indicating presence and location of additional Categories menu button

Adding the CATEGORIES navigation menu to Simone theme

I’m already forgetting how I did this, and there’s still more to do, so trying to record some of it here.

It’s all very unpolished and trial by error so far. (Like this site!) The purpose is that a primary reason behind my thinking for this site, is to be able to record and index work I do, so I can find it again. I wanted more accessible (to me) category access.

CODE SNAPSHOT 27th June 2017

  
Add the location in header.php (EXTRACT)

...

<nav id="site-navigation" class="main-navigation clear" role="navigation">
    <h1 class="menu-toggle"><a href="#"><?php _e( 'Menu', 'simone' ); ?></a></h1>

    <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
    <?php wp_nav_menu( array( 'theme_location' => 'xarta_location', 'container_class' => 'xarta-menu-class' ) ); ?>
    <?php simone_social_menu(); ?>
        <div class="search-toggle">
            <i class="fa fa-search"></i>
            <a href="#search-container" class="screen-reader-text"><?php _e( 'Search', 'simone' ); ?></a>
        </div>


Register the menu etc. in functions.php (EXTRACT)

...

/* http://www.wpbeginner.com/wp-themes/how-to-add-custom-navigation-menus-in-wordpress-3-0-themes/ */
function wpb_custom_new_menu() {
  register_nav_menu('xarta_location',__( 'Xarta Location in Theme' ));
}
add_action( 'init', 'wpb_custom_new_menu' );


/* primary menu has: menu nav-menu sf-js-enabled sf-arrows */

/* https://developer.wordpress.org/reference/functions/wp_list_categories/ */
add_filter('wp_nav_menu_items','add_categories_to_xarta_menu', 10, 2);
function add_categories_to_xarta_menu( $items, $args ) {
    if( $args->theme_location == 'xarta_location')  {
        $items .=  '<li class="menu-item menu-item-type-taxonomy menu-item-object-category"><a class="sf-with-ul" href="#">' . 'Categories' .  '</a></li>';
        $items .=  '<ul class="sub-menu xarta-categories" >';
        // $items .=  '<li class="menu-item menu-item-type-post_type menu-item-object-page"><a href="#">' . 'test1' .  '</a></li>';
        // $items .=  '<li class="menu-item menu-item-type-post_type menu-item-object-page"><a href="#">' . 'test2' .  '</a></li>';

        $categories= get_categories( array(
            'orderby'   => 'name',
            'order'     => 'ASC',
            'hierarchical' => true,
            'exclude'    => array( 56 )
        ));

        foreach( $categories as $category )
        {
            //$items .= $category->term_id;
            //$items .= esc_html( $category->name );
            $category_link = sprintf(
                '<a href="%1$s" alt="%2$s">%3$s</a>',
                esc_url( get_category_link( $category->term_id ) ),
                esc_attr( sprintf( __( 'View all posts in %s', 'textdomain' ), $category->name ) ),
                // ******* USEFUL FOR FINDING ID
                //esc_html( 'id:  '.$category->term_id.', ... '.$category->name )
                // *****************************
                esc_html( $category->name )
            );

            $items .= '<li class="menu-item menu-item-type-post_type menu-item-object-page">'.$category_link.'</li>';
        }

        /*
        $items .= wp_list_categories( array(
            'echo' => false,
            'orderby'    => 'name',
            'show_count' => false,
            'title_li' => '',
            'hierarchical' => true,
            'exclude'    => array( 10 )
        ) );
        */
        $items .=  '</ul>';
	}
    return $items;
}

Modify the Simone’s navigation.js (experimenting)

...

/**
 * navigation.js
 *
 * Handles toggling the navigation menu for small screens.
 */
( function() {
	var container, button, button1, button2, menu, menu1, menu2;

	container = document.getElementById( 'site-navigation' );
	if ( ! container )
		return;

	button1 = container.getElementsByTagName( 'h1' )[0];
	if ( 'undefined' === typeof button1 )
		return;

	//menu = container.getElementsByTagName( 'ul' )[0];
    menu1 =  document.querySelectorAll( '#site-navigation > div > ul' )[0];
    menu2 =  document.querySelectorAll( '#site-navigation > div > ul' )[1];
    button2 = menu2;

    console.log("In navigation.js ...  document.querySelectorAll( '#site-navigation > div > ul' ).length " + document.querySelectorAll( '#site-navigation > div > ul' ).length);
    console.log("In navigation.js ... menu1: " + menu1.id);
    console.log("In navigation.js ... menu2: " + menu2.id);

	// Hide menu toggle button if menu is empty and return early.
	if ( 'undefined' === typeof menu1 ) {
		button1.style.display = 'none';
		return;
	}

	if ( -1 === menu1.className.indexOf( 'nav-menu' ) )
		menu1.className += ' nav-menu';
   /*
	if ( -1 === menu2.className.indexOf( 'nav-menu' ) )
		menu2.className += ' nav-menu';
   */
	button1.onclick = function() {
		if ( -1 !== container.className.indexOf( 'toggled' ) )
        {
			container.className = container.className.replace( ' toggled', '' );
            console.log("Removing class toggled from #site-navigation");
        }
		else
        {
			container.className += ' toggled';
            console.log("Adding class toggled to #site-navigation");

    		if ( -1 !== container.className.indexOf( 'Xtiggled' ) )
            {
        	    container.className = container.className.replace( ' Xtiggled', '' );
                console.log("Removing class Xtiggled from #site-navigation");
            }
        }
	};

	button2.onclick = function() {
	    console.log("button2.onclick: container.className currently: " + container.className);
		if ( -1 !== container.className.indexOf( 'Xtiggled' ) )
        {
    	    container.className = container.className.replace( ' Xtiggled', '' );
            console.log("Removing class Xtiggled from #site-navigation");
        }
		else
        {
  			container.className += ' Xtiggled';
            console.log("Adding class Xtiggled to #site-navigation");

    		if ( -1 !== container.className.indexOf( 'toggled' ) )
            {
    			container.className = container.className.replace( ' toggled', '' );
                console.log("Removing class toggled from #site-navigation");
            }
        }

	};


} )();

Then I take Simone’s neat CSS, duplicate a lot of it (still need to reconcile/rationalise), and hack it to death

...

/*--------------------------------------------------------------
5.2 Main Menu
--------------------------------------------------------------*/
.main-navigation {
    position: relative;
    display: block;
    width: 100%;
    clear: both;
    font-family: 'Lato', sans-serif;
    text-transform: uppercase;
    background: #313131;
    background: hsl(0, 0%, 19%);
}

.main-navigation ul {
    margin: 0;
    padding-left: 0;
    list-style: none;
}

.main-navigation li {
    position: relative;
    float: left;
}

.main-navigation a {
    display: block;
    padding: 1.3em 1em;
    font-size: 14px;
    font-size: 1.4rem;
    text-decoration: none;
    line-height: 1.3em;
    color: white;
    color: hsl(0, 0%, 100%);
}

.main-navigation ul ul {
    position: absolute;
    left: 0;
    z-index: 99999;
    display: none;
    float: left;
    padding: 0;
    background: #4d4d4d;
    background: hsl(0, 0%, 30%);
}

.main-navigation ul ul ul {
    top: 0;
    left: 100%;
}

.main-navigation ul ul a { width: 200px; }

.main-navigation ul ul li { }

.main-navigation li:hover > a,
.main-navigation li > a:focus {
    color: #fff;
    color: hsl(0, 0%, 100%);
    background: #4d4d4d;
    background: hsl(0, 0%, 30%);
}

.main-navigation ul ul :hover > a { }

.main-navigation ul ul a:hover,
.main-navigation ul ul a:focus {
    background: #313131;
    background: hsl(0, 0%, 19%);
}

.main-navigation ul li:hover > ul { display: block; }

.main-navigation .current_page_item > a,
.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a:hover,
.main-navigation .current-menu-item > a:hover,
.main-navigation .current_page_item > a:focus,
.main-navigation .current-menu-item > a:focus {
    color: #313131;
    color: hsl(0, 0%, 19%);
    background: white;
}

.main-navigation .current_page_ancestor {
    background: #4d4d4d;
    background: hsl(0, 0%, 30%);
}

.main-navigation ul ul .current_page_parent,
.main-navigation .current_page_parent .current_page_item > a {
    color: #fff;
    color: hsl(0, 0%, 100%);
    background: #313131;
    background: hsl(0, 0%, 19%);
}

/* Small menu */
.menu-toggle {
    display: none;
    cursor: pointer;
}



/* ********************************************** ON MOBILE ******************************************* */
@media screen and (max-width: 600px) {
    .menu-toggle {
        display: inline-block;
        height: 3.9em;
        padding: 0 1em;
        font-weight: normal;
        font-size: 14px;
        font-size: 1.4rem;
        text-decoration: none;
        line-height: 3.75em;
        color: white;
    }

    .menu-toggle a:hover,
    .menu-toggle a:focus {
        background: #4d4d4d;
    background: hsl(0, 0%, 30%);
    }

    /* ********************************* */
    /* OVER-RIDE PARENT THEME            */
    /* ********************************* */

    .main-navigation {
        position: relative;
        display: block;
        width: 100%;
        clear: both;
        font-family: 'Lato', sans-serif;
        text-transform: uppercase;
        background: #313131;
        background: hsl(0, 0%, 19%);
    }

    .main-navigation ul {
        margin: 0;
        padding-left: 0;
        list-style: none;
    }

    .main-navigation li {
        position: relative;
        float: left;
    }

    .main-navigation a {
        display: block;
        padding: 1.3em 1em;
        font-size: 14px;
        font-size: 1.4rem;
        text-decoration: none;
        line-height: 1.3em;
        color: white;
        color: hsl(0, 0%, 100%);
    }

    .main-navigation ul ul {
        position: absolute;
        left: 0;
        z-index: 99999;
        display: none;
        float: left;
        padding: 0;
        background: #4d4d4d;
        background: hsl(0, 0%, 30%);
    }

    .main-navigation ul ul ul {
        top: 0;
        left: 100%;
    }

    .main-navigation ul ul a { width: 200px; }

    .main-navigation ul ul li { }

    .main-navigation li:hover > a,
    .main-navigation li > a:focus {
        color: #fff;
        color: hsl(0, 0%, 100%);
        background: #4d4d4d;
        background: hsl(0, 0%, 30%);
    }

    .main-navigation ul ul :hover > a { }

    .main-navigation ul ul a:hover,
    .main-navigation ul ul a:focus {
        background: #313131;
        background: hsl(0, 0%, 19%);
    }

    .main-navigation ul li:hover > ul { display: block; }

    .main-navigation .current_page_item > a,
    .main-navigation .current-menu-item > a,
    .main-navigation .current_page_item > a:hover,
    .main-navigation .current-menu-item > a:hover,
    .main-navigation .current_page_item > a:focus,
    .main-navigation .current-menu-item > a:focus {
        color: #313131;
        color: hsl(0, 0%, 19%);
        background: white;
    }

    .main-navigation .current_page_ancestor {
        background: #4d4d4d;
        background: hsl(0, 0%, 30%);
    }

    .main-navigation ul ul .current_page_parent,
    .main-navigation .current_page_parent .current_page_item > a {
        color: #fff;
        color: hsl(0, 0%, 100%);
        background: #313131;
        background: hsl(0, 0%, 19%);
    }








/* NOW ONLY APPLY MOBILE SETTINGS TO PRIMARY MENU */

    .main-navigation.toggled .menu-myprimary-container .nav-menu {
        display: block;
        border-top: 1px solid;
        border-top-color: #fff;
        border-top-color: hsla(0, 0%, 100%, .5);
    }


    .main-navigation .menu-myprimary-container ul {
        display: none;
        padding-left: 0;
    }

    .main-navigation .menu-myprimary-container li { float: none; }

    .main-navigation .menu-myprimary-container li a { padding: 1.3em 2em; }

    .main-navigation .menu-myprimary-container li li a { padding-left: 4em; }

    .main-navigation .menu-myprimary-container li li li a { padding-left: 6em; }

    .main-navigation .menu-myprimary-container li:hover > a,
    .main-navigation .menu-myprimary-container li > a:focus {
        background: #313131;
        background: hsl(0, 0%, 19%);
    }

    .main-navigation .menu-myprimary-container ul ul,
    .main-navigation .menu-myprimary-container ul ul ul {
        position: relative;
        top: inherit;
        left: 0;
        display: block;
        float: none;
        background: #313131;
        background: hsl(0, 0%, 19%);
    }

    .main-navigation .menu-myprimary-container ul ul a { width: 100%; }

    .main-navigation .menu-myprimary-container ul a:hover,
    .main-navigation .menu-myprimary-container ul ul a:hover,
    .main-navigation .menu-myprimary-container ul a:focus,
    .main-navigation .menu-myprimary-container ul ul a:focus{
        background: #4d4d4d;
        background: hsl(0, 0%, 30%);
    }

    .main-navigation .menu-myprimary-container .current_page_ancestor { background: inherit; }

    .main-navigation .menu-myprimary-container ul ul .current_page_parent {
        color: inherit;
        background: inherit;
    }

    .main-navigation .menu-myprimary-container .current_page_item > a,
    .main-navigation .menu-myprimary-container .current_page_item > a:hover,
    .main-navigation .menu-myprimary-container .current_page_item li:hover,
    .main-navigation .menu-myprimary-container .current_page_item > a:focus,
    .main-navigation .menu-myprimary-container .current_page_item li:focus,
    .main-navigation .menu-myprimary-container .current_page_parent .current_page_item > a  {
        color: #fff;
        color: hsl(0, 0%, 100%);
        background: #4d4d4d;
        background: hsl(0, 0%, 30%);
    }


    /* MY MENU */
    .main-navigation .xarta-menu-class ul {
        position: absolute;
        top: 0px;
        left: 8rem;
        display: block;
        margin: 0px;
        width: auto;
        padding-left: 0px;
        font-family: 'Signika Negative',sans-serif;
    }


} /* End responsive menu */

/* MY MENU */
.main-navigation .xarta-menu-class ul {
    position: absolute;
    top: 0px;
    right: 8rem;
    display: block;
    margin: 0px;
    width: auto;
    padding-left: 0px;
    font-family: 'Signika Negative',sans-serif;
}
/* ul > li has href categories ... and then another ul for sub-menu category list */
.main-navigation .xarta-menu-class ul > li {
    position: relative;
    width: auto;
    margin: 0;
    padding: 0;
}

.main-navigation .xarta-menu-class ul ul {
    display: none;
}


.main-navigation.Xtiggled .xarta-menu-class {
    display: block;
    border-top: 1px solid;
    border-top-color: #fff;
    border-top-color: hsla(0, 0%, 100%, .5);
}



.main-navigation .xarta-menu-class li { float: none; }

.main-navigation .xarta-menu-class li a { padding: 1.3em 2em; }

.main-navigation .xarta-menu-class li li a { padding-left: 4em; }

.main-navigation .xarta-menu-class li li li a { padding-left: 6em; }

.main-navigation .xarta-menu-class li:hover > a,
.main-navigation .xarta-menu-class li > a:focus {
    background: #313131;
    background: hsl(0, 0%, 19%);
}

.main-navigation.Xtiggled .xarta-menu-class ul ul,
.main-navigation.Xtiggled .xarta-menu-class ul ul ul {
    position: relative;
    top: inherit;
    left: 0;
    display: block;
    float: none;
    background: #313131;
    background: hsl(0, 0%, 19%);
}

.main-navigation .xarta-menu-class ul ul a { width: 100%; }

.main-navigation .xarta-menu-class ul a:hover,
.main-navigation .xarta-menu-class ul ul a:hover,
.main-navigation .xarta-menu-class ul a:focus,
.main-navigation .xarta-menu-class ul ul a:focus{
    background: #4d4d4d;
    background: hsl(0, 0%, 30%);
}

.main-navigation .xarta-menu-class .current_page_ancestor { background: inherit; }

.main-navigation .xarta-menu-class ul ul .current_page_parent {
    color: inherit;
    background: inherit;
}

.main-navigation .xarta-menu-class .current_page_item > a,
.main-navigation .xarta-menu-class .current_page_item > a:hover,
.main-navigation .xarta-menu-class .current_page_item li:hover,
.main-navigation .xarta-menu-class .current_page_item > a:focus,
.main-navigation .xarta-menu-class .current_page_item li:focus,
.main-navigation .xarta-menu-class .current_page_parent .current_page_item > a  {
    color: #fff;
    color: hsl(0, 0%, 100%);
    background: #4d4d4d;
    background: hsl(0, 0%, 30%);
}



.main-navigation, .site-footer{

    background:
    linear-gradient(27deg, #151515 5px, transparent 5px) 0 5px,
    linear-gradient(207deg, #151515 5px, transparent 5px) 10px 0px,
    linear-gradient(27deg, #222 5px, transparent 5px) 0px 10px,
    linear-gradient(207deg, #222 5px, transparent 5px) 10px 5px,
    linear-gradient(90deg, #1b1b1b 10px, transparent 10px),
    linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424);
    background-color: #131313;
    background-size: 20px 20px;

}

It’s all very much an ugly work / hack in-progress that will hopefully be neat and tidy one day.

Next steps are to allow the categories to flow into columns responsively rather than one long column. I’m debating whether or not to have it hierarchical, maybe with collapsible children.

It’s quite challenging for my limited skills (to date) to make it work reliably on all screen sizes … well … fiddly. For example, it would be nice to have collapsed children, where hovering over the parent reveals the (clickable) children … but then, on different devices / aspect ratios, I should allow room for that, potentially either side of the parent entry. Gets a bit complicated, so I might progress it with simpler goals at first.

At home I tend to use my site in portrait mode and so particularly focus on functionality suited to large-screen portrait mode, as well as mobile and classical “desktop”.

Update: 1st July 2017

With a bit of fiddling and the discovery of CSS3 columns I’ve now added columns to my category menu. Still a bit rough ‘n’ ready but will do for now.

CODE SNAPSHOT 01st July 2017

  
Updated CSS (EXTRACT)

...

/* MY MENU */  /* ********************************************************************* */

/* responsive for anything bigger than 1700px across ... so right-hand sidebar, and
   lefthand small categories showing */

/* my menu-CATEGORIES link on right-hand side of main-navigation near the magnifying-glass
   search icon */

.main-navigation .xarta-menu-class ul {
    position: absolute;
    top: 2px;
    right: 8rem;
    display: block;
    margin: 0px;
    width: auto;
    padding-left: 0px;
    font-family: "Signika Negative",sans-serif;
}
/* ul > li has href categories ... and then another ul for sub-menu category list */
.main-navigation .xarta-menu-class ul > li {
    position: relative;
    width: auto;
    margin: 0;
    padding: 0;
}

.main-navigation .xarta-menu-class ul ul {
    display: none;
    /* NOT SUPPORTED IN IE10 AND BELOW I THINK */
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
}

.main-navigation.Xtiggled .xarta-menu-class {
    display: block;
    border-top: 1px solid;
    border-top-color: #fff;
    border-top-color: hsla(0, 0%, 100%, .5);
}

.main-navigation .xarta-menu-class li { float: none; }

.main-navigation .xarta-menu-class li a { padding: 1.3em 2em; }

.main-navigation .xarta-menu-class li li a { padding-left: 4em; }

.main-navigation .xarta-menu-class li li li a { padding-left: 6em; }

.main-navigation .xarta-menu-class li:hover > a,
.main-navigation .xarta-menu-class li > a:focus {
    background: #313131;
    background: hsl(0, 0%, 19%);
}

.main-navigation.Xtiggled .xarta-menu-class ul ul,
.main-navigation.Xtiggled .xarta-menu-class ul ul ul {
    position: absolute;
    width: 1000px;
    top: 3em;
    margin 0 auto;
    left: -1200px;
    display: block;
    float: none;
    background: #313131;
    background: hsl(0, 0%, 19%);
}

.main-navigation .xarta-menu-class ul ul a {
   width: 100%;
   display: inline-block;
}

.main-navigation .xarta-menu-class ul a:hover,
.main-navigation .xarta-menu-class ul ul a:hover,
.main-navigation .xarta-menu-class ul a:focus,
.main-navigation .xarta-menu-class ul ul a:focus{
    background: #4d4d4d;
    background: hsl(0, 0%, 30%);
}


/* ****  right-hand sidebar, but no left-hand categories  ***************************** */
@media screen and (max-width: 1700px) {

    .main-navigation.Xtiggled .xarta-menu-class ul ul,
    .main-navigation.Xtiggled .xarta-menu-class ul ul ul {
        width: 1000px;
        left: -1200px;
    }
}


/* **** right-hand sidebar can grow in width above this screen width  ***************** */
@media screen and (max-width: 1600px) {

    .main-navigation.Xtiggled .xarta-menu-class ul ul,
    .main-navigation.Xtiggled .xarta-menu-class ul ul ul {
        width: 1000px;
        left: -1200px;
    }

}

/* **** right-hand sidebar, can make menus wider above this screen width  ************* */
@media screen and (max-width: 1440px) {

    .main-navigation.Xtiggled .xarta-menu-class ul ul,
    .main-navigation.Xtiggled .xarta-menu-class ul ul ul {
        width: 65vw;
        left: -80vw;
    }

}

/* **** no sidebars  ****************************************************************** */
@media screen and (max-width: 1160px) {
    .main-navigation.Xtiggled .xarta-menu-class ul ul,
    .main-navigation.Xtiggled .xarta-menu-class ul ul ul {
        width: 75vw;
        left: -60vw;
    }
}

/* **** smaller header  *************************************************************** */
@media screen and (max-width: 900px) {
    .main-navigation.Xtiggled .xarta-menu-class ul ul,
    .main-navigation.Xtiggled .xarta-menu-class ul ul ul {
        width: 600px;
        left: -400px;
    }
}

/* **** smaller header  *************************************************************** */
@media screen and (max-width: 640px) {
    .main-navigation.Xtiggled .xarta-menu-class ul ul,
    .main-navigation.Xtiggled .xarta-menu-class ul ul ul {
        width: 550px;
        left: -350px;
    }
}

/* **** ON MOBILE ********************************************************************* */
/* (but) desktop version Chrome goes down to 530px and IE 11 even smaller */
/* move the categories button to be next to the "menu" button now showing */
@media screen and (max-width: 600px) {

    /* MY MENU */
    .main-navigation .xarta-menu-class ul {
        left: 8rem;
    }

    .main-navigation .xarta-menu-class ul ul {
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
    }

    .main-navigation.Xtiggled .xarta-menu-class ul ul,
    .main-navigation.Xtiggled .xarta-menu-class ul ul ul {
        width: 85vw;
        left: -10vw;
    }
}

/* e.g. Iphone6 plus is 414 I think */
@media screen and (max-width: 500px) {

    /* MY MENU */
    .main-navigation.Xtiggled .xarta-menu-class ul ul,
    .main-navigation.Xtiggled .xarta-menu-class ul ul ul {
        width: 100vw;
        left: -22vw;
    }
}

/* galaxy note 4, and galaxy s3 that I have, are 360 css pixels */
@media screen and (max-width: 400px) {

    /* MY MENU */
    .main-navigation.Xtiggled .xarta-menu-class ul ul,
    .main-navigation.Xtiggled .xarta-menu-class ul ul ul {
        width: 100vw;
        left: -25vw;
    }
}

/* but even though iphone5 is smaller, will go into next higher bracket */
@media screen and (max-width: 350px) {

    /* MY MENU */

    -webkit-column-count: 1;
    -moz-column-count: 1;
    column-count: 1;

    .main-navigation.Xtiggled .xarta-menu-class ul ul,
    .main-navigation.Xtiggled .xarta-menu-class ul ul ul {
        width: 100vw;
        left: -25vw;
    }
}

.main-navigation, .site-footer{

    background:
    linear-gradient(27deg, #151515 5px, transparent 5px) 0 5px,
    linear-gradient(207deg, #151515 5px, transparent 5px) 10px 0px,
    linear-gradient(27deg, #222 5px, transparent 5px) 0px 10px,
    linear-gradient(207deg, #222 5px, transparent 5px) 10px 5px,
    linear-gradient(90deg, #1b1b1b 10px, transparent 10px),
    linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424);
    background-color: #131313;
    background-size: 20px 20px;
}


Print Friendly, PDF & Email