This is a test to create a category archive in the following format:
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"/]
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" /]
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"/]
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- January
- February
- March
- April
- May
- June
- July
- August
- September
- October
- November
- December
201820172016- January
- February
- March
- April
- May
- June
- July
- August
- September
- October
- November
- December
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:
Done!
