Custom slugs for Each Tab

Question

I have a website for musicians information. The information is divided to few different subjects, using tabs - 'General', 'Songs', 'Albums' and 'Videos.

<?php if($tab_story){?>
<li role="presentation" class="active">
    <a href="#story" aria-controls="story" role="tab" data-toggle="tab">Information</a>
</li>
<?php } ?>
<?php if($tab_album && !empty($check_album)){?>
    <li role="presentation">
        <a href="#album" aria-controls="album" role="tab" data-toggle="tab">Albums</a>
    </li>
<?php } ?>
<?php if($tab_video && !empty($check_video)){?>
    <li role="presentation">
        <a href="#video" aria-controls="video" role="tab" data-toggle="tab">Videos</a>
    </li>
<?php } ?>
<?php if($tab_song && !empty($check_song)){?>
    <li role="presentation">
        <a href="#song" aria-controls="song" role="tab" data-toggle="tab">Songs</a>
    </li>
<?php } ?>

I want to replace the code here, as well as in WordPress in general so when I click on any of the tabs I would be redirected to new URL with a related slug. For example, clicking on the 'Songs' tab would do:

• https://example.com/artist/name/
• https://example.com/artist/name/songs/

I have tried using add_rewrite_endpoint() and add_rewrite_rule(), but after serval good tries I couldn't get the result I'm looking for. 'endpoint' is more likely what I need, as I don't have any tags or search options on the page which is needed for the 'rule' function. But with endpoint function, I create new slugs for the entire site, including post_types which doesn't require these extensions.

Example to a site with a similar concept: https://www.allmovie.com/movie/godzilla-king-of-the-monsters-v599127

Thanks!

Answer 1

Probably some javascript that's capturing the click which you will need to find and turn off, changing the anchor tags href to your links once the js has been fixed should make the tabs go to the correct page rather then opening a normal tab and work like allmovie.