0

In WordPress, is it possible to hide a HTML element by class or ID with php?

I've used css rule display: none; but this is easily worked around...

I have tried the following via functions.php but to no avail:

function MyTestFunction() {
        obj = document.getElementById("div-or-class-id");
        obj.style.visibility = "hidden";
        console.log(obj.id);
        console.log(obj);
    } 
}

Basically I need to hide a HTML element for good without anyone being able to alter the code via browser inspector. I'd like to prevent having to create a child theme and mess with templates too.

Improve this question
9
  • Would it work if instead of hiding it using display:none or visibility:hidden you just removed the element? This obviously isn't a practical suggestion if for any reason the page needs that element present to perform any function, but if it's just something visual that you want to hide permanently so no one can see it, then just remove it using JS.
    – Tony Djukic
    Feb 7, 2021 at 15:49
  • No, you won't be able to!!! Php is not the right tool for this job!!! Use javascript to remove the whole thing from your html. Or you could use css display: none; to remove your element from the page. FYI, the snippet you provided us with is NOT php, so it won't work in the functions.php file. I'm actually surprised that you didn't get any error running it!!!
    – Ruvee
    Feb 7, 2021 at 18:56
  • @TonyDjukic I could do that through child theme and hooking up a template, however that can cause a lot of issues if the theme is updated and they decide to change things up in that particular template. Is JS reliable? What I mean is if users won't be able to reverse it via web browser settings? Something like changing CSS via Inspect element.
    – jade newport
    Feb 7, 2021 at 19:39
  • JS would be reliable because it would entirely remove the element from the DOM. No way to reverse that.
    – Tony Djukic
    Feb 7, 2021 at 19:41
  • @Ruvee I did get an error indeed. Hence seeking help here. Well good to know it's not PHP, I found it online :D What is it if I may ask? I don't want to use CSS because it can be easily reversed. Just change display:none; to display:block; or something and voila - the element is visible. Isn't using javascript similar? What if user disables scripts in web browser? Don't know much about javascript...
    – jade newport
    Feb 7, 2021 at 19:41

2 Answers 2

Reset to default
2

As per our discussion in the comments, all you really need to do is .remove() the element. The following is the approach I'd take. First I'd check to make sure the element exists before attempting to remove it. If it's there, then run jQuery's .remove().

if( $( '#elementID' ).length > 0 ) {
    $( '#elementID' ).remove();
}

This can't be reversed via developer tools because it will comprehensively remove the element from the DOM. Now, if someone wants to open the developer tools and add something back into the DOM manually they can do that, but that's kinda what developer tools are for right. To be able to identify this element, copy it and re-add it though, they'd have to be pretty quick.

I know you don't want to add to a child theme or whatever so you'll have to get this script into the flow somehow, not sure how you want to go about doing that.

Improve this answer
0

CSS won't work to hiding an element only if you are using the wrong selector or perhaps CSS can't locate the element using the selector you've chosen. What works for me in this type of situation is to inspect elements and copy the CSS selector. This will help you copy the selector https://learn.akamai.com/en-us/webhelp/mpulse/mpulse-help/GUID-2CDEED41-3B26-45B1-9896-85B17F8E7901.html

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.