how to display a footer button only on certain pages?

I have a page called footer.php which is included on all of my pages through PHP like so:

<?php require_once "inc/footer.php"; ?>

In the footer, I have a back to top button which I don’t want on some of my pages since they are small pages. What I have done so far is shown below.

CSS (applying to all pages):

.footer-btn{
  display: none;
}

I then put the following code in the head on pages where the button shall be displayed:

<style>
.footer-btn{
 display: block;
}
</style>

Although this works, I don’t like using internal CSS and I feel there is a better way of doing it through jquery/js (not sure how to use either well). Suggestions are appreciated.

Answer

just write the name of the page into the body class using php. You can then target that page, using CSS, to hide / show the footer.

<style>
.page-index .footer-btn,
.page-about-us .footer-btn {
   display: none;
}
</style>
<body class="page-about-us">
   <footer>
      <button class="footer-btn">
          Footer Btn
     </button>
  </footer>
</body>

Advertisement

Answer