cc licensed ( BY ) flickr photo by Meagan Jean Wooley: http://flickr.com/photos/meaganjean/3550038732/

Since the last post, I have started the theme tinkering with this blog that is part of the first week of headless ds106

I just fished around the themes on wordpress.org you get to right inside the dashboard (Appearance — Themes — Install). I checked the option to show themes related to photoblogging, and took a play with the Snaps theme, which turns out to be a free one from one of my favorite theme houses, Graph Paper Press.

since I knew I would inevitably start modifying the theme, I set up a child theme by creating a directory in /wp-content/themes I called 106snaps. IN that directory, I created a new styles.css file with the correct syntax to make it a child theme — essentially making sure the header info referred to the parent theme via the Template value:

Theme Name: 	106snaps
Theme URI:      http://106tricks.net/
Description:    Child theme of Graph Paper Press Snaps theme
Author:         Alan Levine
Author URI:     http://cogdogblog.com
Template:       snaps
Version:        0.1.0

This is the name of the directory that contains the parent theme. And then making sure we pick up the styles:

@import url(../snaps/style.css);

If you do this right, when you go to Appearance — Themes you can select your child theme.

I went inside the Theme Customizer, and changed the header color to a turquoise color, and uploaded one of my own photos to be the header background.

The menu colors are hardwired as colors in the parent theme CSS, so I used the color I had used in the header, and a lighter variant, and overrode the parent CSS by putting on my child theme style sheet:

.main-navigation a:hover {
	background: #02c9c9;
}

.main-navigation ul ul {
	background: #02eded;
}

.main-navigation li:hover > a {
	background: #02c9c9;
}

.main-navigation ul ul a:hover {
	background: #02c9c9;
}
.main-navigation ul li:hover > ul {
	background: #02eded;
}

You have to know a bit how the colors work for the menus- they are in html as a set if nested HTML lists.

I did my first post and ran into a challenge. The theme uses image from the post to generate the ones that appear on the front page, but there is no indication if it is extracted from an image used in the post, or if a Featured image needs to be explicitly set (experiment shows the latter). But when I used this, the image on the cover was a different aspect ratio then the boxes and ones seen on the theme demo.

Having been fiddling with this on another project, it seems to be a common shortfall of these themes which generate images for an index- it is using the thumbnail size of images created for all uploads, but the defaullt thumbnail size is 150 x 150. There is code they can have in a theme which changes the thumbnail size, but I just figured out the size of the boxes, and changed the Settings – Media option to make the thumbnails 240px wide by 318px high.

Change the thumbnail settings to match front page layout size

This only affects images uploaded after the setting changes; to back change other media, you will have to install the Regenerate Thumbnails plugin.

For my posts, I am uploading flickr images (rather then linking) so I can use uploads to be my thumbnails– once I have an image in my media library, I can use the feature image controls (bottom right of post editor), to select the same image I used in my post as my featured one:

That got me closer:

But all those black boxes bugged me- those were posts from last time I used this blog (Spring 2012) and were not really relevant. For now, I want the front page to show posts only in my Headless Tricks category.

More code fun. I needed to modify the main loop on index.php, which in basic fashion, shows the latest posts. I copied index.php from the parent theme to the child theme directory.

SO just before the line that starts the “Loop”, the series of actions it performs for each post

<?php if ( have_posts() ) : ?>

I add a command which tells WordPress to just pull the latest posts from my Headless 106 category (I find the category ID number from the Posts– Categories screen. The command query_posts modifies the database query that fetches posts.

<?php query_posts( 'cat=18' );?>

With this done, the only thing you will see on the front page are posts to my special category:

So here are the changes done up to now:

As soon as this post is published, the dog icon will push the cat one over to the right.

Not huge steps, but I do like to let WordPress know who is in charge!