How do you hide a menu page from the top of your blog?

There are a few different methods that you can use to hide a menu page. I will show you three different methods in this post, two using simple CSS and the third using a parameter in the wp_list_pages(); or the wp_page_menu(); functions. This example will work best if you are viewing this blog using the Custom child theme of the Desk Mess Mirrored theme as its CSS has been modified specifically for this post. (Switch to the Custom child theme of Desk Mess Mirrored).

You may have noticed there is a gaping space between the “Design” (or “Contact Us”) page and the “Themes” page … why? you ask. Well, because I wanted that space there. The gaping space is actually the home of the “Hide Me” page, good reading as well, especially if you cannot see it.

OK, let’s get to this. You can easily “hide” a page by using the exclude parameter in the wp_list_pages(); or the wp_page_menu(); functions. The code would look very similar to this:

<?php wp_list_pages('exclude=220'); ?>


<?php wp_page_menu('exclude=220'); ?>

I’m using the number 220 as it is the actual page ID of the “Hide Me” page. If you are using this method, (after reading the Hide Me page for reminders) use the ID of the page you want to hide. The wp_page_menu() function is described well in the comments here at Digging into WordPress (if you want to read more comparing it to wp_list_pages). I consider this to be only one method as wp_page_menu(); calls wp_list_pages(); to generate its output.

The other two methods are strictly CSS. I noted above the post ID for my “Hide Me” page is 220. Both wp_list_pages(); and wp_page_menu(); generate default class tags for each item in the menu. The class to style in this case is the page-item-<ID>, and specifically in this case I am styling the class page-item-220.

The first of the CSS methods behaves very similar to the exclude parameter used above. The CSS to add to your style.css sheet would be something along this line, and the page will behave as though it does not exist, or as in the functions, excluded from the menu:

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

The second method is the one I am using in the Custom child theme on this blog (the “Hide Me” page will show when using the other themes):

.page-item-220 { visibility: hidden; }

This simply makes the item invisible, but it still “holds” a place in the layout and gives me the effect I wanted … and maybe the effect you are looking for.
(NB: I specify the page “order” for each page; you may need to as well to create similar effects.)