Wow, this on really made my head hurt for a bit.

So I’ve been building a WordPress site hat is using a custom post type of “help.” As you can probably guess, this is for a help section. The data on these help pages is fairly extensive, so I set my post type up to be hierarchical. No problem so far.

Next, I setup a page template for these custom posts (single-help.php). This is where it got a bit tricky; I had three levels of data, all which needed a functional editor so users could input html, and each level needed its own layout, pulling in only its sub posts. So essentially, my page template ended up looking like so (albeit a bit more convoluted).

<?php
	// setup your arguments:
	$args = array(
		// We want to call all posts the custom post type 'help'
		'post_type' => 'help',
		'posts_per_page' => -1,
		'post_status' => 'publish',
		'order' => 'ASC',
		// Next, we want to see if the current post is a parent of any help posts
		'post_parent' => $post->ID
	);
	// We then pass these to a wordpress query, and setup our loop
	$loop = new WP_Query( $args );
?>
<?php if ($loop->have_posts()) : while ($loop->have_posts()) : $loop->the_post(); ?>
	<!-- This post has children, so we'll list them out -->
	<a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a>
<?php endwhile; ?>
<?php else : ?>
	<!-- This post has no children -->
<?php endif; ?>

So basically, this code allowed my single-help file to handle all three levels of the help page hierarchy, loading in each when necessary.

Lemme know your thoughts. I’d love to clean this up a bit more.

Well, I took a quick look at my Page Speed results today, and it looks like Google is angry at me for my inability to leverage browser caching. Essentially, I’m reaching out to the server for every image on my site, even if the user has loaded it already. Seems like a ton of extra unnecessary work eh?

Well, htaccess to the rescue! I added the following to my .htaccess file, which sped up my site considerably (and also upped my Page Speed score). I opted to set my headers to a long time for both images, css, and js for now, since I don’t really update the look of my site that often. When I do decide to, I’ll most likely rename my js and css files, and removed the old ones.

# Setting Cache Control Headers
# 480 weeks
<filesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
Header set Cache-Control "max-age=290304000, public"
</filesMatch>

# 2 DAYS
<filesMatch ".(xml|txt)$">
Header set Cache-Control "max-age=172800, public, must-revalidate"
</filesMatch>

# 2 HOURS
<filesMatch ".(html|htm)$">
Header set Cache-Control "max-age=7200, must-revalidate"
</filesMatch>

Anyone out there have any suggestions on ways to set cache control? This was my first attempt at it, and I’d love some feedback!