Blog Post Visualization + Code

I’ve been doing maintenance galore on this site. I have a hand-written theme and I’ve been doing things like returning the footer to a good shape and sweating the responsive details of it.

I first wrote that code in 2010 but I’ve adapted it to be a bit better and now am using CSS Grid to allow those columns to display a bit better on different screen sizes and form factors.

The header has a similar but not quite the same treatment on archive pages to allow navigating from month to month and year to year quickly.

Like I said, I first wrote the code for the years and months visualization back in 2010.

The PHP code has not changed a great deal from 2010:

	<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='https://artlung.com/blog/2001/02/' title='February 2001'>February 2001</a> (9)
		// we want it to look like:
		// <a href='https://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='https://artlung.com/blog/2001/02/' title='February 2001'>February 2001
		// [1]  (9)
		$count = (int)str_replace(array(' (', '('),'',$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>

And the CSS looks like this:

.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(images/black-500x30.gif);
  background-repeat: no-repeat;
}

The source code for all of this is available on GitHub. It also includes the SASS source code for the stylesheets. There are additional notes as well.

If anyone has any questions or comments, please give me a shout!