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");

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:

<?php $home_query = 
  new WP_Query("cat=&showposts=5"); $i = 0; ?>

1 2	<?php $home_query = new WP_Query("cat=&showposts=5"); $i = 0; ?>

and then for the 20 at the bottom:

<?php $home_query_bottom = 
  new WP_Query("cat=&showposts=20&offset=5"); $b = 0; ?>

1 2	<?php $home_query_bottom = new WP_Query("cat=&showposts=20&offset=5"); $b = 0; ?>

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

<?php $home_query = 
  new WP_Query("cat=&showposts=5&orderby=rand"); $i = 0; ?>

1 2	<?php $home_query = new WP_Query("cat=&showposts=5&orderby=rand"); $i = 0; ?>

and

<?php $home_query_bottom = 
new WP_Query("cat=&showposts=20&orderby=rand"); $b = 0; ?>

1 2	<?php $home_query_bottom = new WP_Query("cat=&showposts=20&orderby=rand"); $b = 0; ?>

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:

<div class="description">
<?php bloginfo('description'); ?>
</div>

<?php bloginfo('description'); ?>

</div>

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

<div class="description">
<?php bloginfo('description'); ?> -- 
<?php echo wp_count_posts()->publish?> 
of my favorite ones</div>

<?php bloginfo('description'); ?> --

<?php echo wp_count_posts()->publish?>

of my favorite ones</div>

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:

<?php
/*
Template Name: Page: Newest Content
*/
?>
<?php get_header(); ?>
    <div id="content">
    <h6 class="sub">Newest Photos</h6>
		<?php $my_query = new WP_Query('showposts=20'); // let's get the 20 most recent ones

		while ($my_query->have_posts()) : $my_query->the_post();

		$do_not_duplicate = $post->ID; ?>
		
			<div <?php if(function_exists('post_class')) : ?><?php post_class(); ?><?php else : ?>class="post post-<?php the_ID(); ?>"<?php endif; ?>>
			<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title() ?></a></h2>
			<?php the_content(); ?>
			<div class="clear"></div>
			<div class="postmetadata">
				<div class="icon"><span class="ui-icon ui-icon-clock"></span> <?php the_time('l, F jS, Y') ?> at <?php the_time() ?></div> <div class="icon"><span class="ui-icon ui-icon-folder-open"></span> <?php if (the_category(', '))  the_category(); ?> <?php if (get_the_tags()) the_tags(' | '); ?></div> <div class="icon"><span class="ui-icon ui-icon-comment"></span><?php comments_popup_link('Leave A Comment &#187;', '1 Comment &#187;', '% Comments &#187;'); ?></div> <?php edit_post_link('Edit', '| ', ''); ?>
			<div class="clear"></div>
			</div>
			</div>



		<?php endwhile;?>
<?php get_footer(); ?>

<?php

Template Name: Page: Newest Content

<?php get_header(); ?>

<h6 class="sub">Newest Photos</h6>

<?php $my_query = new WP_Query('showposts=20'); // let's get the 20 most recent ones

while ($my_query->have_posts()) : $my_query->the_post();

$do_not_duplicate = $post->ID; ?>

<div <?php if(function_exists('post_class')) : ?><?php post_class(); ?><?php else : ?>class="post post-<?php the_ID(); ?>"<?php endif; ?>>

<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title() ?></a></h2>

<?php the_content(); ?>

</div>

<?php endwhile;?>

<?php get_footer(); ?>

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:

<?php $my_query = new WP_Query('showposts=1&orderby=rand');?>

1	<?php $my_query = new WP_Query('showposts=1&orderby=rand');?>

or the whole shebang

<?php
/*
Template Name: Page: Random Photos
*/
?>
<?php get_header(); ?>
    <div id="content">
    <h6 class="sub">Random Photo: <a href="/random">Reload</a> for More</h6>
		<?php $my_query = new WP_Query('showposts=1&orderby=rand');

		while ($my_query->have_posts()) : $my_query->the_post();

		$do_not_duplicate = $post->ID; ?>
		
<h2><?php the_title(); ?></h2>
<?php the_content(); ?>

<!-- photo meta data -->
<?php insert_exif($post->ID) ?>
</div>
<div class="clear"></div>

<div class="postmetadata alt">
	<small>
		<?php { ?>
		<div class="icon"><span class="ui-icon ui-icon-clock"></span> <?php the_time('l, F jS, Y') ?> at <?php the_time() ?></div> 
		<div class="icon"><span class="ui-icon ui-icon-folder-open"></span> <?php the_category(' | ') ?><?php if (get_the_tags()) the_tags(' | '); ?></div>
		<div class="icon"><span class="ui-icon ui-icon-signal-diag"></span>  <?php post_comments_feed_link('Feed'); ?></div> 
		<div id="dialog_link"><span class="ui-icon ui-icon-comment"></span><a href="#"> Comments</a></div>
		<div class="icon"><?php edit_post_link('Edit', '<span class="ui-icon ui-icon-pencil"></span>', ''); ?></div>
		<div id="post-nav">
		    <div class="post-nav-prev"><?php previous_post_link('%link', '<span class="ui-icon ui-icon-circle-triangle-w"></span> Previous', TRUE); ?></div>
		    <div class="post-nav-next"><?php next_post_link('%link', '<span class="ui-icon ui-icon-circle-triangle-e"></span> Next', TRUE); ?></div>
		</div>
		<?php } ?>
    <br class="clear" />
	</small>
	<div class="clear"></div>
</div>


		<?php endwhile;?>
<?php get_footer(); ?>

<?php

Template Name: Page: Random Photos

<?php get_header(); ?>

<h6 class="sub">Random Photo: <a href="/random">Reload</a> for More</h6>

<?php $my_query = new WP_Query('showposts=1&orderby=rand');

while ($my_query->have_posts()) : $my_query->the_post();

$do_not_duplicate = $post->ID; ?>

<?php the_content(); ?>

<?php insert_exif($post->ID) ?>

</div>

<small>

<?php { ?>

<div id="dialog_link"><span class="ui-icon ui-icon-comment"></span><a href="#"> Comments</a></div>

<div class="post-nav-prev"><?php previous_post_link('%link', '<span class="ui-icon ui-icon-circle-triangle-w"></span> Previous', TRUE); ?></div>

</div>

<?php } ?>

</small>

</div>

<?php endwhile;?>

<?php get_footer(); ?>

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!

If this kind of stuff has value, please support me by tossing a one time PayPal kibble or monthly on Patreon