Tag: themes

Custom Colors with the Twenty Seventeen Theme
In building out a site, I had a cause to use Twenty Seventeen, the new theme for WordPress. I’d tested it before, helping figure out the usability of features. This time I was using it ‘for real’ and as I often say, there’s nothing quite as impressive as ‘for real.’

Overall, I still find Twenty Seventeen as easy to work with as any other theme I’ve used. Customizing a theme to look like how you want is incredibly weird as it’s always a unique experience. This is to be expected. Themes are difficult when we’re trying to guess what people want. They’re second only to search in complex usability. In my use, I found two places where I felt other themes did things better.

Documentation

While there is a technical document on how to theme with Twenty Seventeen there is no walk through. For example, when I use StudioPress’ Genesis themes, every single one comes with a walkthrough of “How to make the theme look like our demo!” Twenty Seventeen has the luxury of the new default content, but even then, it’s not the same as directions. I have to do trial and error to figure out things like how to change the ‘section’ images on the front page.

Answer? Change the featured image. Of course. That was logical to me because I’m an experienced WordPress user. I can’t say it was logical to anyone else.

A great deal of the theme makes sense contextually. By which I mean if you look at it, it all follows and you can suss out what’s next. But it’s not perfect. No theme is. I still think if a simple walkthrough doc existed, it would help a lot of first time WordPress users.

Colors

About a day into my project, I’d used Twenty Seventeen, ditched it for something else, wrote a lot of custom post type/taxonomy code, and then came back to Twenty Seventeen. By the time I did, I had a very clear-cut idea in my head about what I wanted the base color to be.

I have to explain it like that because that’s pretty abnormal, I feel. Most people don’t go “I want to use #d1548e as my base color for links and stuff!” They go “I want pink!” The problem here is that if you look at the color tool for customizing colors, it’s a slider. And worse, it’s a slider without an override.

Now compare that to the picker you get for the Header text color:

Right there I can go in and put my color in hex format and it uses it. Perfect.

I can guess why they don’t have this for the custom color, though. Twenty Seventeen does something special with colors and instead of just saying “Links are pink and headers are magenta,” it uses saturation. This lets the theme create a dynamic color scheme based on your selection. Which is fucking awesome, right up until you’re me (or you try to use the exact same color schema twice).

I want to stress that I do not feel this was a bad choice for the theme. Since the theme is going to use math to cleverly calculate out what the related colors should be for the theme, it’s genius to set the colors on a slider. This puts the concept in your head, when you move the slider, that the colors are relative to each other. It’s a perfect example of seamlessly introducing new users to a tool. It’s actually intuitive.

How I ‘Fixed’ My Color Woe

First I made a lot of jokes with my buddy James about how they would ‘hue the day’ for this one. Because thats how I roll. Then I dug into where the hell this was set at all. Like all WordPress settings, its saved in the database in the wp_options table, under theme_mods_twentyseventeen which has a value like this:
```
a:5:{i:0;b:0;s:18:"nav_menu_locations";a:2:{s:3:"top";i:2;s:6:"social";i:3;}s:18:"custom_css_post_id";i:-1;s:11:"colorscheme";s:6:"custom";s:15:"colorscheme_hue";i:312;}'
```
Yours may be longer. The important bit is here: s:15:"colorscheme_hue";i:312

That number, 312, is the color hue! If you change it, it changes the colors. Once I knew that, I had to reverse engineer a hex code into a hue. To do that, I used workwithcolor.com. That site has a color picker, and if you put in the value you want (say d15483 it spits back a whole lot of information.

That part I circled, the 337, that’s the important part. I can now go into my database and change 312 to 337 and magically it works.

But boy that sucks. Instead I used set_theme_mod() to fix it by putting this in my theme’s function:
```
add_action( 'after_setup_theme', 'helf_after_setup_theme' ); 
function helf_after_setup_theme() {
	$hue = '337';	
	if ( get_theme_mod('colorscheme_hue') !== $hue ) set_theme_mod( 'colorscheme_hue', '337' );
}
```
If I wanted to get fancy, I’d put in a real control for it, but this at least gets me started.
6 February, 2017
Custom AMP Design
The basic design of a page using AMP works for news articles. This is by design. It’s meant to be fast to load and fast to display, and that means removing the majority of cruft we shove in sidebars and footers. It means a streamlined website.

That’s a basic page but it works well for what it needs to be. The issue happens when you consider pages that aren’t your typical ‘news’ pages.

Compare the information in a character page. On the left is the normal page and the right is the AMP page.

There’s some work to be done, obviously. Enter Custom Templates.

Calling the Right Template for the Job

The example code works great when you want to universally replace things. I don’t. I want to use a different template per-CPT, so my code is this:
```
/*
 * AMP custom templates
 */
add_filter( 'amp_post_template_file', 'lez_amp_post_template_file', 10, 3 );
function lez_amp_post_template_file( $file, $type, $post ) {

	$post_type=$post->post_type;

	if ( 'post_type_characters' === $post_type || 'post_type_shows' === $post_type ) {
		$file = get_stylesheet_directory() . '/amp-templates/shows-chars.php';
	}
	return $file;
}
```
That was the easy part.

Making Your Template

Now I need to make the template. It’s actually not as obvious as it might be. You can’t just copy the single.php file from the AMP templates folder and go. No, if you want to use it as-is, you will need to set up how to pull the custom templates.

For the quick example, we have the Single Template and with that we have to replace all the calls to load_parts. They look like this:
```
<?php $this->load_parts( array( 'header-bar' ) ); ?>
```
We have to change them because the code for load_parts is relative to the file, and it doesn’t call .php so it’s a bit of a drama to call them. I replaced it with this:
```
<?php include_once( WP_PLUGIN_DIR . '/amp/templates/header-bar.php' ); ?>
```
This is pretty much what I tell plugin developers not to do. Never ever use WP_PLUGIN_DIR unless you absolutely have to. Always use plugins_url() and plugin_dir_path() please and thank you. But since I can’t use a URL in include_once() because it’s https) and I can’t use plugin_dir_path() because it’s relative to the file it’s called from, and this is called from the theme. So yes, here I have to use the one constant I tell you not to use. I’m aware of the irony.

The rest of the template is mostly removing things I can’t filter out. I removed the feature image, I removed the byline (we don’t care who wrote the CPTs, authorship isn’t an issue), and I removed the taxonomies.

Fix The Images

Once the main file is loading properly, it’s time to address the two problems with the images: size and location. There’s, thankfully, some default code that can help with this that didn’t need a template. AMP comes with directions on changing your featured image but the example code had to be tweaked in order to handle multiple post types:
```
add_action( 'pre_amp_render_post', 'lez_amp_add_custom_actions' );
function lez_amp_add_custom_actions() {
	add_filter( 'the_content', 'lez_amp_add_featured_image' );
}

function lez_amp_add_featured_image( $content ) {
	global $post;

	$post_type=$post->post_type;
	$post_id=$post->ID;
	$image_size = 'featured-image';

	if ( $post_type === 'post_type_characters' ) $image_size = 'character-img';
	if ( $post_type === 'post_type_shows' ) $image_size = 'character-img';

	if ( has_post_thumbnail() ) {
		$image = sprintf( '%s', get_the_post_thumbnail( $post_id, $image_size ) );
		$content = $image . $content;
	}
	return $content;
}
```
But. This made double images! Why? Because this is a lie: “The default template does not display the featured image currently.”

It does. This is why I removed the featured image in my template. If I can figure out how not to do that, I’ll be 90% of my way to not needing a custom template at all, because everything else I did in the filter.

Add the Extra Content

Remember function lez_amp_add_featured_image() above? Yeah I threw it out and made an insanely complex. I renamed it function lez_amp_add_content() and the if ( $post_type === 'post_type_characters' ) {} section became huge so that I could output the code the way I wanted.

In the image above, you can see I’ve not only added in a lot more meta content from the post, but I also tweaked the CSS to float the image to the left and resize the SVGs. I went super image light on this, loading the smallest image that would work, and the SVGs are very small sized.

Overall? It should be easier

The biggest issue I have with this is that I wish I could filter more. If I could turn off the featured images and remove the bylines, then I wouldn’t need the custom template at all. At least, not for the characters. The shows? That’s another matter.
19 December, 2016
Passing Variables in WordPress Templates
I don’t theme, generally speaking. I’m not bad at it, I just don’t have that particular aspect of ‘design’ in my head where I can create out of nothing. What I can do (and do do) is tweak the heck out of themes. This means I’m sure, if you theme, you know all this and think I’m a bit silly. That’s okay.

One thing I hate about code is duplicated effort. I don’t mind including the same library in 100 different projects, but I hate when I have to use the exact same code over and over in multiple files. Like I did in my theme.

I talked about using Chart.js in my theme before, and in that work I made use of get_template_part() to show the includes. It actually doesn’t look like that any more. Here’s the original code:
```
function lez_stats_footer() {
 get_template_part( 'stats' );
}
```
And here’s the current code:
```
function lez_stats_footer() {
	if ( is_page( 'stats' ) ) {
		get_template_part( 'inc/statistics', 'base' );
	}
	if ( is_page( 'death' ) ) {
		get_template_part( 'inc/statistics', 'death' );
	}
	if ( is_page( 'characters' ) ) {
		get_template_part( 'inc/statistics', 'characters' );
	}
	if ( is_page( 'shows' ) ) {
		get_template_part( 'inc/statistics', 'shows' );
	}
}
```
While get_template_part( 'stats' ) calls the file stats.php, the call to get_template_part( 'inc/statistics', 'shows' ); gets /inc/statistics-shows.php instead.

This lets me organize things a little better. My /inc/ folder is filled with this:
```
archive-characters.php
archive-shows.php
excerpt-characters.php
excerpt-shows.php
sidebar-characters.php
sidebar-shows_archive.php
sidebar-shows_single.php
statistics-base.php
statistics-characters.php
statistics-code.php
statistics-death.php
statistics-shows.php
```
As the help doc says, this makes it easy for a theme to reuse sections of code and that’s actually what I’m doing.

I have a call to get_template_part( 'inc/archive', 'characters' ); in multiple files, including some page templates but also in my category and taxonomy lists.
```
if ( get_post_type( get_the_ID() ) === 'post_type_characters' ) {
	get_template_part( 'inc/archive', 'characters' );
}

if ( get_post_type( get_the_ID() ) === 'post_type_shows' ) {
	get_template_part( 'inc/archive', 'shows' );
}
```
That means if it’s a show, use one format, and if it’s a character use another.

But…

One of the things I do is a little weird. On the single display pages for shows, I loop through all the characters related to the show and display them. There’s custom post meta to link the two, and what I do on the single page (single-post_type_shows.php) is grab the value for the post-meta of ‘shows’ on every single character page, and if the show ID is the same as the post ID of the page you’re on, add the character to an array.

This is not very efficient. I know. It’s basically running an extra loop on every ‘show page’ load and collecting this query. What’s important here though is the array:
```
$havecharacters[$char_id] = array(
	'id' => $char_id,
	'title' => get_the_title( $char_id ),
	'url' => get_the_permalink( $char_id ),
	'content' => get_the_content( $char_id ),
);
```
This is important because I needed to pass this data through to my template part. On the template page for characters, I call get_template_part( 'inc/excerpt', 'characters' ); and it works fine because it knows exactly what page it’s on and calling get_the_post_thumbnail() will work because of what show it is. But when I call it from the shows page, though, it tried to use the values based on the show page, not the character.

What I needed to do was pass the parameters of the character array to the excerpt. And you can’t do that with get_template_part but you can with a different call.
```
include(locate_template('inc/excerpt-characters.php'));
```
This passed through my array, which let me call it with a nice for-loop :
```
if ( empty($havecharacters) ) {
	echo 'There are no characters listed for this show.';
} else {
	foreach( $havecharacters as $character ) {
	?>
		<ul class="character-list">
			<li class="clearfix"><?php include(locate_template('inc/excerpt-characters.php')); ?></li>
		</ul>
	<?php
	}
}
```
And now my excerpt template can use $character['title'] and everything looked great on the show pages.

They did not, however, look so great on the character page, which used get_template_part remember. This was simply because the array for $character was empty. In order to make this work for the single character page, I had to recreate the array. Only I did it a little differently.
```
if ( empty($character) ) {
	$character = array(
		'id' => get_the_ID(),
		'title' => get_the_title(),
		'url' => get_the_permalink(),
		'content' => '',
		'ischar' => true,
		'shows' => get_post_meta( get_the_ID(), 'lezchars_show', true ),
	);
}
```
The reason I wiped out the content (which held get_the_content in the original array, remember) is that on a single character page, WordPress knows to show the content, so I don’t need to double that work. I also added in new array items for ischar and shows so I could check if ( $character['ischar'] !== true ) {...} in some places and show slightly different content depending on what page I’m on.

Whew.
26 August, 2016
Pagination and Static Front Pages
This is a post skewed towards the Genesis Framework. Actually, if you’re not using the Genesis Metro Pro theme, I don’t know how well this will work.

My problem was simple. I used the Metro Pro Static Front Page to show some widgets and then custom displays of posts via those widgets. It works pretty darn well and looks like this:

There was just one small issue. It doesn’t show me pagination at the bottom of the page. Oh and the normal method of example.com/page/2/ just showed me the same front page over and over. Not what I wanted.

One way I could work around this would be to treat the front page as a static front page and make a “blog” page. Except then my urls would be example.com/blog/page/2 and I’d have duplicate content on example.com/blog/ which is not desirable. Causing me more frustration was the fact that the documentation said this:

If no widgets are placed in any of the home page specific widget areas, a blog-style home page will be displayed.

What I wanted was that blog-style page on the sub pages, along with navigation.

Show Navigation Links

This part was easy. In the file front-page.php I edited the function function metro_homepage_widgets() to have this at the bottom:

genesis_posts_nav();

Really, that was it. Now I had navigation! But (as I already knew) the navigation didn’t work properly.

Fix Paged Content

At the top of the front-page.php file is a call to add an action with all the metro_home_genesis_meta content. I wrapped that in a check to see if the page we’re on is a ‘paged’ page using is_paged(), which specifically checks if the query is for paged result and not for the first page.
```
if ( !is_paged() ) {
	add_action( 'genesis_meta', 'metro_home_genesis_meta' );
}
```
Again, really, that was it.
12 August, 2016
Multisite And Theme Activation Checks
Earlier this week I talked about how you can’t actually network activate all plugins. As it happens, I have a plugin for a specific theme, and it doesn’t like being Network Activated.

The plugin is Genesis Simple Hooks and, logically, it only works if you have a Genesis theme installed and active.

How It Works

When the plugin is activated it properly runs the following activation hook:
```
register_activation_hook( __FILE__, 'simplehooks_activation' );
/**
 * This function runs on plugin activation. It checks to make sure Genesis
 * or a Genesis child theme is active. If not, it deactivates itself.
 *
 * @since 0.1.0
 */
function simplehooks_activation() {

	if ( ! defined( 'PARENT_THEME_VERSION' ) || ! version_compare( PARENT_THEME_VERSION, '2.1.0', '>=' ) )
		simplehooks_deactivate( '2.1.0', '3.9.2' );

}
```
First this looks to see if there’s no parent theme or if the parent theme version is less than 2.1.0, and if either of those are the case (that is if there’s no parent theme, and the version is less than…) it calls simplehooks_deactivate.
```
/**
 * Deactivate Simple Hooks.
 *
 * This function deactivates Simple Hooks.
 *
 * @since 1.8.0.2
 */
function simplehooks_deactivate( $genesis_version = '2.1.0', $wp_version = '3.9.2' ) {

	deactivate_plugins( plugin_basename( __FILE__ ) );
	wp_die( sprintf( __( 'Sorry, you cannot run Simple Hooks without WordPress %s and <a href="%s">Genesis %s</a>, or greater.', 'genesis-simple-hooks' ), $wp_version, 'http://my.studiopress.com/?download_id=91046d629e74d525b3f2978e404e7ffa', $genesis_version ) );

}
```
And you know what? That sucks. It never checks for Genesis as the parent theme name, based on the assumption that only Genesis themes use the define of PARENT_THEME_VERSION which probably made sense a few years ago, but doesn’t anymore. And more importantly for this explanation, you can’t network activate it because unless you’re lucky enough to be running a Genesis child theme on the main site of your network, it won’t activate.

Worse, it will throw errors on sites that aren’t.

How I’d Fix It

First I made a list of the action/function calls that require a Genesis Child Theme to be active in order to run properly: simplehooks_load_textdomain, simplehooks_init, simplehooks_execute_hooks

Then I moved them all to their own section and wrapped them in a check:
```
if ( simplehooks_can_run() ) {
	add_action( 'plugins_loaded', 'simplehooks_load_textdomain' );
	add_action( 'genesis_init', 'simplehooks_init', 20 );
	add_action( 'genesis_init', 'simplehooks_execute_hooks', 20 );
}
```
What’s simplehooks_can_run? That’s a new function I’ve created to check for the requirements:
```
/**
 * Can Simple Hooks Run
 *
 * This function checks if the requirements for Simple Hooks are met.
 *
 * @since 2.3.0
 */
function simplehooks_can_run() {
	
	global $wp_version;
	$my_theme = wp_get_theme();
	$genesis_theme = wp_get_theme( 'genesis' );

	if ( ( version_compare( $genesis_theme->get( 'Version' ), '2.1.0', '>=' ) && !is_null( $genesis_theme->get( 'Version' ) ) && !empty( $genesis_theme->get( 'Version' ) ) ) && ( $my_theme->get( 'Name' ) == 'Genesis' || $my_theme->get( 'Template' ) == 'genesis' ) ) {
		return true;
	}
		
	return false;
	
}
```
What this checks is if the parent theme is 2.1.0 or higher and, if it is, if the theme or it’s parent is named Genesis. By having it use return I don’t have to check if it’s true or false, the if-check is smart enough for me not to do it explicitly.

Finally I changed the if check in simplehooks_activation to look like this:
```
	if ( !is_multisite() && !simplehooks_can_run() )
```
What this isn’t doing is checking for WordPress 3.9.x anymore, as it’s 2016 and that was 2014 and I’m not worried about it. If I was, I’d toss && version_compare( $wp_version, '3.9.2', '>=' ) to the if-check in simplehooks_can_use to CYA.

This also isn’t giving you an error on Multisite. That means if you network activate the plugin and, on Multisite, go to a site that does not have Genesis running, you don’t get an error. This is by design. There’s no point in telling a site-admin “Hey there’s this Genesis thing you can’t have because you’re not using it! NEENER!”

I’m actually using this here on this site. If you’re interested at testing it out, grab it from my Github repo.

Pull requests welcome.
22 June, 2016
Custom Excerpts Read More for Genesis
I nearly always make a custom excerpt for every post I write. This has the benefit of letting my lede be extended into a great sub-headline. It has the downside of killing my ‘Read More’ links.

The objective is simple. Have a custom excerpt and a read more link. The problem is that there are multiple excerpts and WordPress handles them all in different ways.
1. The teaser – This is what you write in a post and end with a  tag.
2. The automatic excerpt – This is the first 55 words of a post.
3. The custom excerpt – This is what you put in the ‘excerpt’ box on a post.
Those are parsed in reverse order, so the custom excerpt is given the highest priority. That means in order to show my read-more links, I need to put this in my theme’s function.php file:
```
function new_excerpt_more( $more ) {
	return ' <a class="read-more" href="'. get_permalink( get_the_ID() ) . '">' . __('Read More', 'your-text-domain') . '</a>';
}
add_filter( 'excerpt_more', 'new_excerpt_more' );
```
But. I’m using StudioPress’ Genesis theme. This means I’d like to take advantage of some of the awesome accessibility friendly features so that my read more link looks like this:
```
<a href="http://example.com/cookies-and-cake" class="more-link">Read more about Cookies and Cake</a>
```
Okay, cool. How do I do that? Back in the old days, this was how you’d edit the link for Genesis:
```
//* Modify the WordPress read more link
add_filter( 'the_content_more_link', 'sp_read_more_link' );
function sp_read_more_link() {
	return '<a class="more-link" href="' . get_permalink() . '">[Continue Reading]</a>';
}
```
As of Genesis 2.2, we’re into a world of properly accessibility friendly code, and the function get_the_content_limit() has a major change where it calls genesis_a11y_more_link and that is the function that added in the span for the screen-reader, which requires me to add in the genesis-accessibility theme support for my theme.
```
// Customize the read-more links in all situations
add_filter( 'the_content_more_link', 'sp_more_link_text' );
add_filter( 'excerpt_more', 'sp_more_link_text' );

function sp_more_link_text() {
	return '&#x02026; <a class="more-link" href="'. get_permalink( get_the_ID() ) . '">[' . genesis_a11y_more_link( 'Continue Reading' ) . ']</a>';
}
```
And as far as it goes, that’s perfect. It makes sure everything matches nicely and is accessibility friendly. But it doesn’t take care of my custom excerpts. For that I need a force command:
```
add_action( 'genesis_after_entry_content', 'sp_force_more', 15 );
function sp_force_more() {
	global $post;
	if ( has_excerpt( $post->ID ) && !is_singular() ) {
		echo '<a class="more-link" href="'. get_permalink( $post->ID ) . '">[' . genesis_a11y_more_link( 'Continue Reading' ) . ']</a>';
	}
}
```
If there was an genesis_after_entry_excerpt sort of function to hook into, I’d be happier, but this works. It puts a [Continue Reading] paragraph at the end of each of my excerpts for my front page, my archives, and not my individual pages. This helps my readers who are, perhaps, not always as aware as they might be about where to click.
28 September, 2015