php - How to display categories of content on another page in wordpress

Question

I am building a WordPress website and on the homepage is a category of music genres. The site is created so that can listen to music beat of different genre then go ahead to buy the beat. I have created pages that match genres(hip hop, reggae, rnb, rap etc), however my problem is displaying the music content(ie the ones on the homepage) on their respective pages.

Like for example Hip hop, Afro beat etc has their own pages, so I want a situation where when users click on the navigation link for Afrobeat page it takes them to the page displaying all the music content that matches the genre Afrobeat, which is Fine Girl. I want to music content to display on the Afrobeat page with same styling as the ones in the image below

I used the Adavanced Custom Fields plugin's Text field to display the genre's title

Here is the code:

<div class="jp-gui jp-interface">
<div class="player_controls_box">
    <div>
        <div class="jp-controls-holder player_controls">

          <audio id="myAudio3" preload="metadata">
            <source src="<?php bloginfo('template_directory');?>./files/bensound-sunny.mp3" type="audio/mpeg">
            <p>Alas, your browser doesn't support html5 audio.</p>
          </audio>

          <button
            class="jp-play player_button"
            tabindex="0"
            onclick="tooglePlay3()"
          ></button>

        </div>
    </div>
</div>

<span class="song_details">
  <div>
    <h4>SONG TITLE:</h4> <span><?php echo $fine_girl_track['song_title'];?></span>
  </div>
  <div>
    <h4>GENRE:</h4> <span><?php echo $fine_girl_track['genre'];?> // This line is displaying the genre with the (echo $fine_girl_track['genre']) part displaying the text from the advanced custom fields genre text field
  </div>

  <div>
    <h4>PRICE:</h4> <span><?php echo $fine_girl_track['price'];?>
  </div>
</span>

<button class="button tour_button">
  <a href="<?php echo $fine_girl_track['link'];?>"><?php echo $fine_girl_track['link_text'];?></a>
</button>

Below is an image of the music genres displaying on site:

Image of the site pages displaying navigation links:

question from:https://stackoverflow.com/questions/65868883/how-to-display-categories-of-content-on-another-page-in-wordpress

Answer 1

Waitting for answers