How to add tabbed menu in WordPress

I was asked to created tabbed menu for WordPress website where some pages show posts from chosen categories and others show single post. But unfortunately I could not find the decision on the web so I made my own.

Here it is:

I went to header.php in my template and modified it this way:

 <div class="w3-bar w3-black">
    <button class="w3-bar-item w3-button tablink w3-red" onclick="openCity(event,'Aboutme')">About me</button>
    <button class="w3-bar-item w3-button tablink" onclick="openCity(event,'Photos')">Photos</button>
    ...
  </div>
  
  <div id="Aboutme" class="w3-container w3-border city">
  ...
  </div>
 <div id="Photos" class="w3-container w3-border city">
  ...
  </div>

Also I added a script:

<script>
function openCity(evt, cityName) {
  var i, x, tablinks;
  x = document.getElementsByClassName("city");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablink");
  for (i = 0; i < x.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" w3-red", "");
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " w3-red";
}
</script>
(Visited 3 times, 1 visits today)

Leave a comment

Your email address will not be published. Required fields are marked *