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:

<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:

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:

<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:

• advanced-custom-fields

1 Answer 1

If I'm understanding your approach correctly, you seem to have hard coded music items?

I'm suggesting that you create custom post type, which whould be Music. You should also add custom taxonomy for the post type Music.

After this you can add music items under Music post type and set music items' genres as taxonomy. When this is done, you can add category url to menu.

Creating custom post type and custom taxonomy will help you to maintain your music items.