How to create dynamic buttons on the front page that are linked with categories?

  • Resolved addocode

    (@addocode)


    4 years, 7 months ago

    Hello,

    I just returned to WordPress after quite some time. The reason for that is because I have to create an own website for school based on HTML, CSS and PHP and that’s linked with WordPress.

    So far I took the “Twenty Seventeen” theme and edited some lines of CSS code to make the website look the way I wanted to have it. My intention was to create an individual front page that looks different than the other sub sites. Here’s a picture of the front page which I created from scratch and without a theme using HTML and CSS:

    See image1.png

    This is the design that all the other sites besides the front page have. This is the part where I changed the base from the “Twenty Seventeen” theme:

    See image2.png

    If you look closely at the second screenshot, you will see the navigation bar with the following navigation points:

    • Home
    • Betrieb und Armee
    • Ausbildung
    • Stagen
    • Diverses

    Inside of these navigation points there are also sub navigation points (except “Home”). This navigation isn’t an actual navigation. It’s created through the usage of categories because I thought it would be more comfortable to use since the website’s main use is going to be a workbook about different topics that are in specific categories. Let me show you how it exactly works with this list:

    Home: This is the only page
    Betrieb und Armee: This is a category
    – Sub site 1: Every single sub site is a post which gets assigned to a category!
    – Sub site 2
    – Sub site 3
    – …
    Ausbildung: This is a category
    – Sub site 1
    – Sub site 2
    – Sub site 3
    – …
    Stagen: This is a category
    – Sub site 1
    – Sub site 2
    – Sub site 3
    – …
    Diverses: This is a category
    – Sub site 1
    – Sub site 2
    – Sub site 3
    – …

    Now my problem is: I want to implement the static front page that I created into the WordPress site (frontpage.php). A special thing about it would be this:

    See image3.png

    The content of the “navigation buttons” on the front page should be the same ones like the ones from the navigation bar that you saw on the sub sites. Additionally, if you click on one of these buttons, you will see the posts as sub navigation buttons I previously mentioned. I also would like to automatically display the post image (an example is seen on image2.png) inside of this box using the CSS background-image command.

    I hope I expressed myself understandable. I unfortunately have no clue how I could do that because I only learned basic WordPress and PHP so far. If anyone could help I would be really thankful for that. 🙂

    Kind Regards

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Moderator bcworkz

    (@bcworkz)

    4 years, 7 months ago

    Welcome back 🙂 You can use wp_list_categories() to generate a HTML list of categories. You can style this list any way you like. Categories normally are not associated with images, but there are plugins that add such functionality.

    As you may recall, category links lead to archive lists of posts in the category. The post list is typically title, excerpt and meta data. However, the template can be altered to list simple links to each post. Then once again, you can style the links any way you like. With posts however, they natively support featured images. You can use the featured image assigned to posts as the background for your buttons if you like.

    You could instead assign other images to posts or categories and store each item’s information in post meta or term meta tables.

    Thread Starter addocode

    (@addocode)

    4 years, 7 months ago

    Thank your for the reply. 🙂 I tried it with the wp_list_categories() command on a dummy site. That looks like a good idea. However, I now have another problem which makes the implementing of the categories list more difficult.

    I tried to check a few plugins and did some research about this topic but I’m still unsure and confused. The problem is that I don’t know how to “reset” the standard front page of my theme and replace it with a custom one which I’ve written in HTML. I didn’t use any PHP because I’m not that familiar with it.

    I tried to copy paste the HTML code into the front-page.php file but that didn’t really work and I also assume that this wasn’t the right way. The linked CSS was not found as well as the images even though they were in the same folder like the front page.

    Is there an easy way to fix this problem?

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘How to create dynamic buttons on the front page that are linked with categories?’ is closed to new replies.