Create ghost page

1 Views

I want to create the ghost page /foo/ so that it appears in the list of pages, but is unclickable and has no content.

An example use of this is that in my menu it displays the pagename foo and when you hover it, it displays the subpages (which are “real” pages) bar and baz. The URLs of them would be /foo/bar/ and /foo/baz/.

Read More

I figured I could simply remove the <a> tags of foo in Javascript and put a redirect in the /foo/ page. but that doesn’t feel right. What would be an elegant/serverside solution for this problem?

Post Views: 1

Related posts

1 comment

  1. You can do it this way. check for a unique class for the page in the menu or add an unique class. you can do it by checking CSS classes under screen options in the menu edit page.

    lets say the class you added is ghost-page

    Then in the js file 

    jQuery(document).ready(function(){
    jQuery('.ghost-page').on('click', function(e){
        e.preventDefault(); 
    });
});

    But the page will still be accessible by home_url()/page-slug but the above will disable the click event from the menu for this page.

    But if you don’t want a page to exist then, add a custom link to the menu with # in the url and add the css class and label as foo, by doing so there wont be a page to link with and the above js code will disable the click event.

    enter image description here

    Hope it helps!

Comments are closed.