WordPress Graphical Post Count Visualization

README.md

Notes

• Blog Post Visualization + Code 2018
• WordPress Graphical Post Count Visualization 2010
• I use an embedded base64 gif to do the background image. The image is a 500 x 30 pixel black gif. Adjust to your own usage.
• I also included a loop to do some adjustments to the number of columns shown. Straightforwardly adjustable.

Questions or comments? Leave a comment on the blog or by email at joe@artlung.com or on twitter: @artlung

wp-archive-style.css

.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;
}

wp-archive-style.scss

.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;
			}
		}
	}
}

wp-archive.php

	<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>