Skip to content

Instantly share code, notes, and snippets.

@artlung artlung/README.md
Last active Feb 26, 2018

Embed
What would you like to do?
WordPress Graphical Post Count Visualization
.sidebar-archive {
background-color: #000;
display: grid;
grid-template-columns: repeat(4, 1fr);
}
.sidebar-archive .archiveYear {
width: 100%;
}
@media screen and (min-width: 500px) {
.sidebar-archive {
grid-template-columns: repeat(5, 1fr);
}
}
@media screen and (min-width: 600px) {
.sidebar-archive {
grid-template-columns: repeat(6, 1fr);
}
}
@media screen and (min-width: 700px) {
.sidebar-archive {
grid-template-columns: repeat(7, 1fr);
}
}
@media screen and (min-width: 800px) {
.sidebar-archive {
grid-template-columns: repeat(8, 1fr);
}
}
@media screen and (min-width: 900px) {
.sidebar-archive {
grid-template-columns: repeat(9, 1fr);
}
}
@media screen and (min-width: 1000px) {
.sidebar-archive {
grid-template-columns: repeat(10, 1fr);
}
}
@media screen and (min-width: 1100px) {
.sidebar-archive {
grid-template-columns: repeat(11, 1fr);
}
}
@media screen and (min-width: 1200px) {
.sidebar-archive {
grid-template-columns: repeat(12, 1fr);
}
}
.archiveYear {
width: 100px;
background-color: #000;
padding: 0;
margin: 0;
display: inline-block;
height: 250px;
}
.archiveYear h4 {
background-color: #000;
padding: 15px;
margin: 0;
color: #fff;
text-align: left;
font-size: small;
font-weight: normal;
text-decoration: none;
}
.archiveYear h4 a {
padding: 15px;
margin: 0;
text-align: left;
font-size: small;
font-weight: normal;
text-decoration: none;
color: #fff;
}
.archiveYear h4 a:visited {
color: #fff;
}
.archiveYear h4 a:hover {
color: #fff;
}
.archiveYear h4 a:link {
color: #fff;
}
.archiveYear h4 a:active {
color: #fff;
}
.archiveYear ul {
padding: 0;
margin: 0;
list-style-type: none;
font-size: small;
height: 250px;
}
.archiveYear ul li {
padding: 0 15px;
text-align: left;
}
.archiveYear ul li a {
text-decoration: none;
color: #fff;
background-color: blue;
display: block;
padding: 2px;
cursor: pointer;
background-image: url("data:image/gif;base64,R0lGODdh9AEeAJEAAAAAAP///wAAAAAAACH5BAkAAAIALAAAAAD0AR4AAAKThI+py+0Po5y02ouz3rz7D4biSJbmiabqyrbuC8fyTNf2jef6zvf+DwwKh8Si8YhMKpfMpvMJjUqn1Kr1is1qt9yu9wsOi8fksvmMTqvX7Lb7DY/L5/S6/Y7P6/f8vv8PGCg4SFhoeIiYqLjI2Oj4CBkpOUlZaXmJmam5ydnp+QkaKjpKWmp6ipqqusra6voK61cAADs=");
background-repeat: no-repeat;
}
.sidebar-archive {
background-color: #000;
display: grid;
grid-template-columns: repeat(4, 1fr);
.archiveYear {
width: 100%;
}
}
@for $i from 1 through 8 {
@media screen and (min-width: 400px + ($i * 100px)) {
.sidebar-archive {
grid-template-columns: repeat(4 + $i, 1fr);
}
}
}
$black: #000;
$margin-unit: 15px;
$white: #fff;
$color_dark_blue_approx: blue;
$background-image: url('data:image/gif;base64,R0lGODdh9AEeAJEAAAAAAP///wAAAAAAACH5BAkAAAIALAAAAAD0AR4AAAKThI+py+0Po5y02ouz3rz7D4biSJbmiabqyrbuC8fyTNf2jef6zvf+DwwKh8Si8YhMKpfMpvMJjUqn1Kr1is1qt9yu9wsOi8fksvmMTqvX7Lb7DY/L5/S6/Y7P6/f8vv8PGCg4SFhoeIiYqLjI2Oj4CBkpOUlZaXmJmam5ydnp+QkaKjpKWmp6ipqqusra6voK61cAADs=');
.archiveYear {
width: 100px;
background-color: $black;
padding: 0;
margin: 0;
display: inline-block;
height: 250px;
h4 {
background-color: $black;
padding: $margin-unit;
margin: 0;
color: $white;
text-align: left;
font-size: small;
font-weight: normal;
text-decoration: none;
a {
padding: $margin-unit;
margin: 0;
text-align: left;
font-size: small;
font-weight: normal;
text-decoration: none;
color: $white;
&:visited {
color: $white;
}
&:hover {
color: $white;
}
&:link {
color: $white;
}
&:active {
color: $white;
}
}
}
ul {
padding: 0;
margin: 0;
list-style-type: none;
font-size: small;
height: 250px;
li {
padding: 0 $margin-unit;
text-align: left;
a {
text-decoration: none;
color: $white;
background-color: $color_dark_blue_approx;
display: block;
padding: 2px;
cursor: pointer;
background-image: $background-image;
background-repeat: no-repeat;
}
}
}
}
<div id="sidebar" class="sidebar-archive">
<?php
/* show archive information */
$args = array(
'type' => 'monthly',
'format' => 'custom',
'show_post_count' => true,
'echo' => 0 );
$resulthtml = wp_get_archives($args);
$archives = array_map('trim', explode("\n", $resulthtml));
$archiveMonths = array();
foreach($archives as $item) {
if (trim($item)!='') {
$archiveMonths[] = trim($item);
}
}
$archiveMonths = array_reverse($archiveMonths);
$archiveLinks = array();
$yearCount = array();
foreach ($archiveMonths as $link) {
// link looks like:
// <a href='http://artlung.com/blog/2001/02/' title='February 2001'>February 2001</a>&nbsp;(9)
// we want it to look like:
// <a href='http://artlung.com/blog/2001/02/' title='February 2001' style='background-position: -9px'>February</a>
// and we need the year;
// and we need the count;
$cssInitial = 400;
$temp = explode('</a>', $link);
// [0] <a href='http://artlung.com/blog/2001/02/' title='February 2001'>February 2001
// [1] &nbsp;(9)
$count = (int)str_replace(array('&nbsp;(', '('),'',$temp[1]);
// 0 ... -400
// 5 ... -395
// 10 .. -390
// 20 .. -380
$cssCount = ($count) - $cssIniital;
$year = (int)substr($temp[0],-4);
$yearCount[$year] += $count;
// $newLink = str_replace('\'>', ", {$count} posts.' style='background-position: {$cssCount}px 0;'>", substr($temp[0], 0, -5)) . "</a>";
$newLink = str_replace('\'>', "' style='background-position: {$cssCount}px 0;'>", substr($temp[0], 0, -5)) . "</a>";
$archiveLinks[$year][] = $newLink;//str_replace($just_text, $month, $link);
}
foreach ($archiveLinks as $k => $v) {
print '<div class="archiveYear">';
print "<h4><a href=\"/blog/{$k}/\" title=\"{$yearCount[$k]} posts in the year {$k}.\">{$k}</a></h4>";
print '<ul><li>' . implode("</li>\n<li>", $v) . '</li></ul>';
print '</div>';
}
?>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.