Frumph.NET

Someone on twitter was asking how to ‘hide’ menubar items from being displayed to the end user, but still exist. This can be done with various plugins on the WordPress repository. Going to show you how to do it with CSS.

Well this is how it works, the wp_list_pages() function generates the links  that are shown in your menubar, with a side-effect of adding CSS class statements.

If you view’ your source code (view-source) while looking at your site you will see the ‘end result’ output of your website you can see what classes are created for each menu item.

For example, here at frumph.net if you view the source, by right-clicking the screen then choosing view-source you will see that the “archive” link shows that there is

<li class="page-item page-item-3">

.. that class page-item-3 is specific and individual for that archive link.

If I wanted to hide the archive link from being viewed in the menubar I just need to do a little CSS.

.page-item-3 {
     display:none;
}

Creating a class in your stylesheet of the name you found for that menu item will let you do what you want with it. Adding display:none; to the class in the css will make it ‘not visible’ to be seen in a browser.

– Phil