Martin Taylor

PHP, CSS, MySQL and WordPress tips and techniques

Genesis

Using CSS Grid for layout

I have used a CSS Grid layout to display a Calendar, as described here. I was impressed by how easy it was to implement responsive behaviour with a grid, just by changing the ‘grid-template-columns’ value.

The other day, I decided to try CSS Grid as a way to lay out a WordPress page, and in this case one that uses a Genesis child theme. The layout of particular interest was in the body of the page, containing the content and sidebar.

The sidebar can be placed to the left or right of the content, according to theme customisation options in the admin UI. The stylesheets I’ve seen generally use “float: left” and/or “float: right” to achieve the layout.

Thing is, I’m not hugely fond of “float”, apart from quite limited contexts such as images in text blocks. I’ve often had problems with other page elements being affected by the float, which leads me to look for alternatives.

So the technique I’ve used is, first, to associate a grid-area with each of the two elements. Note that in Genesis at least, the elements are of the types <main> and <aside>.

main {
	grid-area: main;
}
aside {
	grid-area: aside;
}

Once these grid area names have been defined, they can be used to define the layout of the grid columns as follows:

.content-sidebar-wrap {
    display: grid;
}
.content-sidebar .content-sidebar-wrap {
    grid-template-columns: 66% 33%;
    grid-template-areas: "main aside";
}
.sidebar-content .content-sidebar-wrap {
    grid-template-columns: 33% 66%;
    grid-template-areas: "aside main";
}

Note that Genesis handily assigns a class to the <body> element, to define the layout that the admin has selected. It’s either ‘content-sidebar’ or ‘sidebar-content’ in this case, but this approach would be easy enough to adapt for other scenarios.

This page itself uses the technique – take a look at the HTML/CSS sources for more detail.

For small / mobile devices, it’s straightforward enough – just apply “display: block” or something like that to the wrapping container.

Now, I must be honest and say that while this works really well, I have a niggling reservation. Many many years ago, we used HTML tables to apply structure and layout to web pages. It’s certainly not deemed best practice these days … use tables where you have tabular data, and nowhere else. Could the same be said of CSS Grids?

Overriding site title in a Genesis theme

I wanted to make the whole site title and tagline area into a link to the home page, on my Genesis-themed site. By default, only the site title is hyperlinked by Genesis. To make matters a tad more complicated, the area containing the two pieces of text has a background image, offset to the left of the text.

The HTML for the area in question, as output by Genesis, goes like this:

<div class="title-area">
<h1 class="site-title" itemprop="headline">
<a href="http://mysite.com/">Site name</a>
</h1>
<p class="site-description" itemprop="description">Site tagline</p>
</div>

Essentially, then, I wanted to add a hyperlink around the whole of this block, and to remove the link you can see on the site name.

Reading up about Genesis filters, I found that there are a number of likely candidates. They all belong to the genesis_markup family, and you can be quite specific in targeting a particular context.

For example, Genesis precedes the title area with this code:

genesis_markup(
	[
		'open'    => '<div %s>',
		'context' => 'title-area',
	]
);

It looked like it should be possible to apply a filter to this at the hook named genesis_markup_title-area, or even genesis_markup_title-area_open.

Suffice to say that I tried for some time to use one or other of these filters but was unsuccessful. Maybe one day I’ll work it out.

In the end I took a more radical approach, and completely over-rode the function that creates this area of the page. I added this code to the functions.php file in my child theme.

remove_action ('genesis_header', 'genesis_do_header');
add_action ('genesis_header', 'custom_do_header');

function custom_do_header() {
	echo '<a class="title-link" href="',get_home_url(),'">';
	echo '<div class="title-area">';	
	echo '<h1 class="site-title" itemprop="headline">',get_bloginfo( 'name' ),'</h1>';
	do_action( 'genesis_site_description' );
	echo '</div>';
	echo '</a>';
}

This works, of course, and i suppose it has the advantage of being simple. It always concerns me, though, that by overriding a parent theme function, I run the risk of missing out on a theme update / improvement. Using hooks and filters should ideally be the way to customise a parent theme.