Hide a Menu Page
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'); ?>or
<?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.)
© 2009, BuyNowShop. All rights reserved.
Related posts:
-
Buy them a coffee?
Need a Host?
17 Comments
great post!
But i have a question : How to make a page at menu bar invisible but no hidden?
thanks!-sorry for my bad english!
i mean how to unlink a page at menu bar -just appear the pages name
@gcreator – Thank you. If you mean to have the page not show in the menu but show, for example, in the side bar then you would need to “reverse” the CSS property for that specific item. Using the example above, and a theme with a ‘sidebar’ element, you could consider something like this:
[...] link: Hide a Menu Page | BuyNowShop Tags: atalak, menua, [...]
Hi Edward. In my theme there is no wp_list_pages() function and the Exclude plugins dont seem to work as I cant exclude pages from my header. Pls help.
Satish.
@Satish – I see you are using a version of StudioPress and I am quite surprised to see it does not have any identifiers for the elements in their nav menu. I do not see an immediate way of using the method I described above. I would suggest making use of the StudioPress support forums for additional help as that is what you are paying them for.
Hi, it´s very interesting, I tried to hide the home page but I don´t know how to hide whith CSS, Inove mg12, please help me
@arachelito – At a quick glance I would suggest adding the following property: ‘visibility: hidden;’ to the ‘#menus li a.home’ element in the style.css file. You can experiment with using the ‘display:none’ property in its place but IMHO it did not look very good.
I get this to work fine .page-item-220 {display: none:} for 1 page
but how would I need to input it to hide multiple pages in the navigation menu?
So far what you’ve shown here has helped my ignorant self a lot! Thanks for any further help!
@Aaron – If you just want to create the same effect you can add additional page references, for example:
.page-item-220, .page-item-345, .page-item-1337 { display: none; }The above can be written on one line if you like; I wrote each page reference on a separate line for easier reading and to make sure to show the comma after each element.
Hi, I’m very new in using WP. I have the same problem, I would like to hide multiple pages from the header. Where exactly in style.css do I have to put the code you’re talking about?
@Pat – I would only recommend the method I described in this post for a very few (generally one or two) pages; otherwise, I would suggest using a Custom Menu to display only the pages you want in your menu.
Hi Edward, I’m using a contactform and for this includes a page for when the form is send (thanks) and one in the case of a problem (oops). These 2 I want to hide since they are now showing in the header. I’m only not sure where exactly I have to paste your code.
@Pat – Following the general method from above you could add the following to your style.css file (at the end):
.page-item-423, .page-item-435 { display: none; }… of course, these numbers may be different when you go “live” but the idea is the same.
Why not consider installing a plugin that will hide your page or pages. Like PC Hide Pages?
Pranshavs´s last post … CBSE Improvement Exam Admit Card 2012 update
@Pranshavs – There are many different methods that can be used, the ones being offered are just examples of what can be done within the basics of WordPress and/or CSS.
Agree with as they say “Code Is Everything”
Pranshavs´s last post … CBSE Improvement Exam Admit Card 2012 update