0

I'm trying to build my archive page to have a row of years and a row of months. The user would then have to select a year and then select a month and a gallery of posts would be generated. I have an example image below of what I want. How could I achieve this?

I've searched online and I can't find anything similar to this. I have added a mockup html and css of how it should look, but I just can't figure out how to get it to work. Any help would be appreciated! I have a code pen of the html and css here http://codepen.io/anon/pen/egpZqr

what I want... enter image description here

my current page-archive.php

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

<?php
get_header(); ?>

<div class="page-header">
  <h1>ARCHIVE</h1>
</div>
<div class="archive-block">
    <span class="archive-block__alert">
        Please Select A Year First  </span>
    <ul class="archive-block__list archive-block__list--year">

                    <li class="archive-block__item ">
                <span class="archive-block__selector archive-block__selector--year " data-year="2009">
                    2009                </span>
            </li>
                    <li class="archive-block__item ">
                <span class="archive-block__selector archive-block__selector--year " data-year="2010">
                    2010                </span>
            </li>
                    <li class="archive-block__item ">
                <span class="archive-block__selector archive-block__selector--year " data-year="2011">
                    2011                </span>
            </li>
                    <li class="archive-block__item ">
                <span class="archive-block__selector archive-block__selector--year " data-year="2012">
                    2012                </span>
            </li>
                    <li class="archive-block__item ">
                <span class="archive-block__selector archive-block__selector--year " data-year="2013">
                    2013                </span>
            </li>
                    <li class="archive-block__item ">
                <span class="archive-block__selector archive-block__selector--year " data-year="2014">
                    2014                </span>
            </li>
                    <li class="archive-block__item ">
                <span class="archive-block__selector archive-block__selector--year " data-year="2015">
                    2015                </span>
            </li>
                    <li class="archive-block__item ">
                <span class="archive-block__selector archive-block__selector--year " data-year="2016">
                    2016                </span>
            </li>
                    <li class="archive-block__item ">
                <span class="archive-block__selector archive-block__selector--year archive-block__selector--current-year" data-year="2017">
                    2017                </span>
            </li>

    </ul>

    <ul class="archive-block__list archive-block__list--month">
                        <!-- printf('<option value="%u">%s</option>', $num, $name); -->
            <li class="archive-block__item">
                <span class="archive-block__selector archive-block__selector--month archive-block__selector--current-month" data-month="1">
                    Jan             </span>
            </li>
                        <!-- printf('<option value="%u">%s</option>', $num, $name); -->
            <li class="archive-block__item">
                <span class="archive-block__selector archive-block__selector--month " data-month="2">
                    Feb             </span>
            </li>
                        <!-- printf('<option value="%u">%s</option>', $num, $name); -->
            <li class="archive-block__item">
                <span class="archive-block__selector archive-block__selector--month " data-month="3">
                    Mar             </span>
            </li>
                        <!-- printf('<option value="%u">%s</option>', $num, $name); -->
            <li class="archive-block__item">
                <span class="archive-block__selector archive-block__selector--month " data-month="4">
                    Apr             </span>
            </li>
                        <!-- printf('<option value="%u">%s</option>', $num, $name); -->
            <li class="archive-block__item">
                <span class="archive-block__selector archive-block__selector--month " data-month="5">
                    May             </span>
            </li>
                        <!-- printf('<option value="%u">%s</option>', $num, $name); -->
            <li class="archive-block__item">
                <span class="archive-block__selector archive-block__selector--month " data-month="6">
                    Jun             </span>
            </li>
                        <!-- printf('<option value="%u">%s</option>', $num, $name); -->
            <li class="archive-block__item">
                <span class="archive-block__selector archive-block__selector--month " data-month="7">
                    Jul             </span>
            </li>
                        <!-- printf('<option value="%u">%s</option>', $num, $name); -->
            <li class="archive-block__item">
                <span class="archive-block__selector archive-block__selector--month " data-month="8">
                    Aug             </span>
            </li>
                        <!-- printf('<option value="%u">%s</option>', $num, $name); -->
            <li class="archive-block__item">
                <span class="archive-block__selector archive-block__selector--month " data-month="9">
                    Sep             </span>
            </li>
                        <!-- printf('<option value="%u">%s</option>', $num, $name); -->
            <li class="archive-block__item">
                <span class="archive-block__selector archive-block__selector--month " data-month="10">
                    Oct             </span>
            </li>
                        <!-- printf('<option value="%u">%s</option>', $num, $name); -->
            <li class="archive-block__item">
                <span class="archive-block__selector archive-block__selector--month " data-month="11">
                    Nov             </span>
            </li>
                        <!-- printf('<option value="%u">%s</option>', $num, $name); -->
            <li class="archive-block__item">
                <span class="archive-block__selector archive-block__selector--month " data-month="12">
                    Dec             </span>
            </li>
            </ul>
</div>


<div class="archive-block__empty-con">
    <span class="archive-block__empty">
        That combination is empty! Please select a different combination    </span>
</div>

<?php get_footer(); ?>

<!-- end snippet -->

and css

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.archive-block {
    float: none !important;
    margin: 0;
    width: 100%;
    max-width: 930px;
    margin: 0 auto;
    text-align: center;
}
.archive-block__alert {
    display: none;
}
.archive-block__list {
    padding-bottom: 15px;
    padding-top: 15px;
    display: block;
    margin: 0;
}
.archive-block__list--month {
    border-top: 1px solid #000000;
}
.archive-block__empty-con {
    text-align: center;
}


.archive-block__item {
    list-style: none;
    display: inline-block;
    vertical-align: top;
    padding: 0 23.5px;
}

<!-- end snippet -->

1 Answer 1

0

Unfortunately there is no way to nest wp_get_archives to achieve this, so you will have to build your own loop using get_month_link Like this (untested, regard this as a starting point):

$year = 2009; 
while ($year =< get_the_time('Y')) {
  echo '<ul>'
  $month = 1;
  while ($month =< 12) {
    $link = get_month_link ($year, $month);
    if ($link != '') {
      echo '<li>' . $link . '</li>';
      }
    $month = $month + 1;
    }
  echo '</ul>';
  $year = $year + 1;
  }

Beware that get_month_link doesn't test if there actually are posts to display in that month. So the link will never be empty, unless you use the month_link filter to do that test and in that case return an empty link.

Next you'll need the css to display this ordered list correctly, but that is not a WP question.

2
  • How would I add this code to my php file? Just put php tags around it? Sorry I'm still a bit new at this, so I'm not the best. Jan 9, 2017 at 15:02
  • Yeah, it's php.
    – cjbj
    Jan 9, 2017 at 15:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.