Archive-Pro-Matic – Advanced Monthly Sub Archives

This is a test to create a category archive in the following format:

  • 2020
  • January
  • February
  • Mar
  • April
  • May
  • June
  • July
  • August
  • September
  • October
  • November
  • December
  • 2018
  • Jan
  • February
  • March
  • April
  • May
  • June
  • Jul
  • Aug
  • September
  • October
  • November
  • December
  • 2013
  • Jan
  • February
  • March
  • Apr
  • May
  • June
  • July
  • August
  • September
  • October
  • Nov
  • December
  • 2012
  • January
  • February
  • March
  • April
  • May
  • June
  • July
  • August
  • Sep
  • October
  • November
  • Dec


Step one: allow the sub_options attribute to work with standard monthly archives.

[archives type="monthly" sub_options="true" limit="10" /]

Step two: add new feature to allow sub_options to be sorted ASC (1 – 12) or DESC (default: 12 – 1). New attribute: sub_order

[archives type="monthly" sub_options="true" sub_order="ASC" limit="10" /]


Step three: add the ability show empty months as placeholders. New attribute: show_empty

[archives type="monthly" sub_options="true" show_empty="true" limit="10" /]

Step four: allow month date to be formatted: January becomes Jan. New attribute: month_format just use the date_format attribute

[archives type="monthly" sub_options="true" date_format="M" sub_order="ASC" show_empty="true" limit="10" /]

Step five: test that this works with category filters. Here we use cat_id to only show archives for category id 55:

[archives type="monthly" cat_id="55" sub_options="true" sub_order="ASC" show_empty="true" limit="10" date_format="M"/]
  • 2020
    • January
    • February
    • March
    • Apr
    • May
    • June
    • Jul
    • August
    • September
    • October
    • Nov
    • December
  • 2019
    • January
    • February
    • March
    • April
    • May
    • June
    • July
    • Aug
    • September
    • October
    • November
    • Dec
  • 2018
    • January
    • Feb
    • March
    • April
    • May
    • June
    • July
    • August
    • September
    • October
    • November
    • December
  • 2017
    • Jan
    • Feb
    • March
    • April
    • May
    • June
    • July
    • August
    • September
    • October
    • November
    • December
  • 2014
    • January
    • February
    • March
    • April
    • May
    • Jun
    • July
    • August
    • September
    • October
    • November
    • December

A single category archive can be shown using the category slug with the cat attribute:

[archives type="monthly" cat="collapse-pro-matic" sub_options="true" sub_order="ASC" show_empty="true" date_format="m" limit="10" /]
  • 2020
    • January
    • February
    • 03
    • April
    • 05
    • June
    • July
    • August
    • September
    • October
    • November
    • December
  • 2018
    • 01
    • February
    • March
    • April
    • May
    • June
    • 07
    • 08
    • September
    • October
    • November
    • December
  • 2017
    • January
    • February
    • March
    • April
    • May
    • 06
    • July
    • August
    • 09
    • 10
    • November
    • 12
  • 2016
    • 01
    • February
    • March
    • April
    • May
    • June
    • July
    • August
    • September
    • October
    • November
    • December

Step six: adjust format so year and months are displayed in a single line. The following attributes have been added to add classnames to the archive elements for styling:

  • class – classname for the archive element
  • li_class – classname for a LI element
  • sub_ul_class – classname for a sub ul element
  • sub_li_class – classname for a sub LI element
  • empty_class – classname for an empty LI element

To test this we first need to define some simple classes:

.my_clean_achive {
   border: 1px dotted black;
}
.my_sub_achive {
   border: 1px dotted red;
}
.red a {
   color: red;
   font-weight: bold;
}
.green a {
   color: green;
}
.grey {
   color: #999999;
}

Now we just need to assign the classes to the archive elements:

[archives type="monthly" cat="collapse-pro-matic" sub_options="true" sub_order="ASC" show_empty="true" date_format="M" limit="10" class="my_clean_achive" sub_ul_class="my_sub_achive" li_class="red" sub_li_class="green" empty_class="grey"/]
  • 2020
    • January
    • February
    • Mar
    • April
    • May
    • June
    • July
    • August
    • September
    • October
    • November
    • December
  • 2018
    • Jan
    • February
    • March
    • April
    • May
    • June
    • Jul
    • Aug
    • September
    • October
    • November
    • December
  • 2017
  • 2016
    • Jan
    • February
    • March
    • April
    • May
    • June
    • July
    • August
    • September
    • October
    • November
    • December

Now that we can control the CSS of every element we can finally create a block style archive using the following css:

.block_archive_item {
    display:inline;
    margin-left: 5px;
    white-space: nowrap;
}
.block_archive_item a {
   color: red;
}

[archives type="monthly" cat="collapse-pro-matic" sub_options="true" sub_order="ASC" show_empty="true" month_format="M" limit="10" li_class="block_archive_item" empty_class="grey"/]

Nearly there:

  • 2020
    • Jan
    • Feb
    • Mar
    • Apr
    • May
    • Jun
    • Jul
    • Aug
    • Sep
    • Oct
    • Nov
    • Dec
  • 2018
  • 2017
  • 2016
    • Jan
    • Feb
    • Mar
    • Apr
    • May
    • Jun
    • Jul
    • Aug
    • Sep
    • Oct
    • Nov
    • Dec
  • Now if we do not want the sub_options (months in this case) to be in a separate element (ul) we need a way let the system know: new accepted value ‘block’ for the sub_options attribute: sub_options=”block”.

    [archives type="monthly" sub_options="block" limit="10" /]

    We also no longer need to wrap the entire archive in a UL element, so we use tag=”div”. Finally we need to assign a sub_ul_class to slim down the sub_ul elements:

    .my_slim_ul {
       margin: 0;
    }
    
    [archives type="monthly" cat="collapse-pro-matic" sub_options="block" sub_order="ASC" show_empty="true" date_format="M" limit="10" 
    tag="div" sub_ul_class="my_slim_ul" li_class="block_archive_item" empty_class="grey"/]

    The final result:

    • 2020
    • January
    • February
    • Mar
    • April
    • May
    • June
    • July
    • August
    • September
    • October
    • November
    • December
    • 2018
    • Jan
    • February
    • March
    • April
    • May
    • June
    • Jul
    • Aug
    • September
    • October
    • November
    • December
    • 2013
    • Jan
    • February
    • March
    • Apr
    • May
    • June
    • July
    • August
    • September
    • October
    • Nov
    • December
    • 2012
    • January
    • February
    • March
    • April
    • May
    • June
    • July
    • August
    • Sep
    • October
    • November
    • Dec

    Done!