CODEWITHSUNDEEP
javascriptjquerywordpress
Frans B
Frans B

Reputation: 65

Hide div element with jquery on some wordpress pages

I want to hide certain divs for certain pages on my wordpress page. If I just use css it will hide this div in all my pages, which I do not want. I know how to do this for regular websites but not sure how to use this code for wordpress pages. 

$(function(){
  if (window.location.pathname == "mywebsite/Videos.html"||window.location.pathname == "url2.html"||window.location.pathname == "url3.html") {
        $('#navleft').hide();
  } else {
        $('#navleft').show();
  }

});

Im trying to add a similar code to this on my functions.php page.

Upvotes: 0

Views: 788

Answers (2)

Robiseb
Robiseb

Reputation: 1606

You should do this in CSS only.

Find you're page(s) ID

Check the page source code, in the body tag there is a unique class with the page ID.

<body class="[...] page-id-XXX [...]">

Or, in your admin dashboard, go to Pages section. Find you're page and look the edit link, you'll find a post parameter (post=). It's the page ID.

Change you're CSS file

You could add those lines in your CSS file

.page-id-XX #navleft,
.page-id-YY #navleft {
  display: none;
}

where XX is your Videos.html page ID and so on.

Upvotes: 3

Andy Tschiersch
Andy Tschiersch

Reputation: 3816

You do not need JavaScript to achieve this. Wordpress provides many css classes in body element that you can use. The page ID class is unique for every page, so you can create some css rules like this:

body.page-id-26 #navleft {
    display: none;
}

body.page-id-29 #navleft {
    display: none;
}

Upvotes: 0

Related Questions