Tricking Out the Barking Dog

I’ve written some before about a mod I made to the Graphpaper Press Full Screen Theme for my photo showcase site, Barking Dog Studio. I dig this theme for many reasons, it features large photos on single pages, it has an attractive grid on the front. It feels less bloggy:

The mod I made was to ingest any of the photo meta data and use it for the body of the post (I get the title, description, and camera XIF info form Aperture exports). So for me to post a photo, I just need to upload the image, write a title for the post, and check categories, add tags. I just posted 11 new photo posts in 25 minutes.

I recently made some other mods to this theme; hacking themes is one of my favorite wordpress things to do.

The first key to making changes to your theme is to make it a child theme (you do not know about kid themes?), so you can update the main theme later. And it keeps your alts in a place where it is weasier to fine. The structure is to create a directory for your new theme, mine is called “barkingdog”

Put the parent and child side by side. INside the child folder/directory, put a stub style.css file in there to set it up as a good child:

/*
Theme Name:     Barking Dog Child Theme
Theme URI:      http: //barkingdog.me
Description:    Child theme for the Widescreen theme 
Author:         Alan Levine
Author URI:     http://cogdogblog.com
Template:       fullscreen
Version:        0.1.0
*/

@import url("../fullscreen/style.css");

The key here is the last line- it basically says “load everything from the parent theme folder (which in my case is full screen). While this line pulls in the style sheet, WordPress will use everything from the parent theme… unless you redefine it here.

So if you decide to create your own archive.php template here in the child theme, it supercedes/replaces what is the parent. The only ones that are additive (meaning it combines the two) is if you write your own custom functions (functions.php) and and styles you add below the @import statement. Oh it is worth adding a screenshot.png file in your new theme so it looks pretty in the theme chooser.

Then in wordpress, choose this CHild theme as the one to use. It should look no different at first.

Randomizing the Home Page

I love the Fullscreen layout, but it only shows the 25 most recent photos (5 on top that are big, and 20 below). I have over 170 now and wanted to make it more dynamic.

A call of the Random.

I copied the home.php original template from the fullscreen theme to my barkingdog one. This template is using two calls to WP_Query to get the 5 for the top:

and then for the 20 at the bottom:

These are easy to make random; just have to add a new parameter orderby=random to the query string:

and

I did have to take off the offset=5 from the original- this one made sure we get the 20 posts after the first 5; in a random world there is no such order. This does mean that images might be duplicated in the bottom rows. I can live with that, especially as I add more photos (or I could write a more gnarly query to exclude the ids of the first 5, an exercise left for the reader) (dear reader, if you complete this exercise please send it my way)

This makes the front more interesting. Each time it reloads you get a different mix of 25 photos.

The other thing is I wanted to add some info to the text that appears between the photos. Ironically, that is the header.php content (the CSS is clever to make the header be in the middle, eh?) Say hello to absolute positioning.

So again I copy the header.php file from the parent and make myself a copy in the child folder.

This header has a condition to separate the home page header from the others (in the other templates, the header really sits at the top). I took the line that outputs the blog’s description:

I wanted to add something to output how many photos were on the site, easy peasy:


 -- 
publish?> 
of my favorite ones

Isn’t that cool? It’s all dynamic. It’s all mine

Other Templates

I hoped to replicate the front page layout on the other templates (category, tag views). I got it laid out, except the clever navigation on the front that toggles when the screen is not wide enough would not work (I bet the javascript is tied to the home page), and the footers were a problem as well.

But what I did that was easy was to create new kinds of output pages. Since I took away the home page flow of showing newest first, I made a new page that DOES show the newest photos.

To do this I made a copy of the archive.php template from the parent to my child theme folder but I named it page-newest.php which would be called only for a page with a slug name of newest.

Wait a minute, why the archive.php template? Cause that is the one that can display a listing of a series of blog posts, not just one. But I am going to shoe horn that into a page.

The part that makes it work is that I used WP_Query to tell wordpress what I want is the 20 most recent posts:



    
    Newest Photos
		have_posts()) : $my_query->the_post();

		$do_not_duplicate = $post->ID; ?>
		
			class="post post-">
			
			
			
			
				  at

I just need to create a page and make sure it’s slug (url name) is “newest”. Tt does not even need any content since the template generates all the content.

I do not need the page navigation because I just want the 20 newest. You could make that number anything you want.

What else could I do?

Yes, a random feature would be cool. So I have a new page that pulls a random post every time the page loads

For this one, I make a copy of the single.php template from the parent theme and name it page-random.php in my child theme. This will be used only for a page I create (again just a blank one) named… Random.

The adjustment here is seting up a wp_query to only one post and make it a random one:

or the whole shebang



    
    Random Photo: Reload for More
		have_posts()) : $my_query->the_post();

		$do_not_duplicate = $post->ID; ?>
		




ID) ?>




	
		
		  at  
		 
		   
		 Comments
		', ''); ?>
		
		     Previous', TRUE); ?>
		     Next', TRUE); ?>

Some of this may be different slightly depending on what theme you use.

But keep in mind, you can over-ride themes most easily in a parent-child relationship. And you can make pages act like posts or archives, and you cna choose what ever you want by tweaking the query.

I’ll be baaaaaaaaaaack to tweak more!