Genesis Framework

Comment Author Link Bug in Genesis 2.1.0

Gary Jones · Jul 14, 2014 ·

It’s come to my attention about a bug in Genesis 2.1.0. It wasn’t spotted until after Genesis 2.1.1 was released, and since that’s the latest release, it still exists in sites with Genesis 2.1.0 or 2.1.1.

This post explains the problem and how to fix it, so you’re not waiting until Genesis 2.1.2 or 2.2.0 comes out.

If you’re competent, you can skip to the TL;DR Fix.

Update 2014-07-15: This has now been fixed in Genesis 2.1.2, so ensure you’re running at least that version to not be affected.

The Background

In 2.0.*, for a HTML5 child theme, a comment author link would appear something like:

<a href="https://genesischangelog.com" rel="external nofollow" itemprop="url">
    Gary Jones</a>

Simple enough – an anchor link, that links my name to my site, and includes two attributes. The first is the rel attribute, with the important value of nofollow. This value has been recognised by Google et al for nearly 10 years. They introduced it as a way to prevent comment spam. Since search engine take into account which sites link to the one being ranked, the intent was to negate the benefit from someone posting spam comments all over the web, just to apparently have those high-ranking websites link to their little site. Google says:

From now on, when Google sees the attribute (rel=”nofollow”) on hyperlinks, those links won’t get any credit when we rank websites in our search results.

The second attribute is itemprop. This has a value of url here, and is microdata for marking-up a Person. Not having it present is not as critical as the missing rel attribute.

The Comment Author Link Problem

The problem can be clearly seen in the comment author link markup for Genesis 2.1.0 and 2.1.1. It produces markup like:

<a href="https://genesischangelog.com/" comment-author-link="">Gary Jones</a>

The link still points my name to my site, but the attributes have changed. Gone are the important rel and itemprop attributes. There’s an attribute called comment-author-link instead, and this makes the markup for the page invalid.

So what’s going on here?

The comment-author-link is our clue as to where to find the problem. In Genesis 2.1.0, one of the changes was to make more of the comment markup was passed through the Genesis Markup API. This is made up of two functions – genesis_markup() and genesis_attr(). They allow developers to filter markup and attributes as needed. The bug looks to be related to this.

The Fix

At this moment in time, it’s not actually been confirmed as a bug and a bug fix by Copyblogger, but it’s so clearcut I have no problems with recommending that everyone who is able to edit a file go ahead and do the fix below. Obviously, take a backup first and know how to restore it if you’re not confident.

If you open the file at wp-content/themes/genesis/lib/structure/comments.php and look at line 294, then you’ll see this:

$author = sprintf( '<a href="%s" %s>%s</a>', esc_url( $url ), esc_attr( 'comment-author-link' ), $author );

Let me write that another way to make it clearer to reference:

$author = sprintf(
    '<a href="%s" %s>%s</a>',
    esc_url( $url ),
    esc_attr( 'comment-author-link' ),
    $author
);

What we have here is a variable, $author, being assigned a value from a sprintf() call. That call might look odd if you’ve not seen it before. For the simple case here, take the %s in the first argument (second line) as placeholders which are replaced with the corresponding values in the next three lines.

The important bit here is the second %s, that with the current code is replaced with esc_attr(). The esc_attr() is a WordPress function that escapes attribute values (the bit inside the double quotes). The esc_url() function is a special case that handles attribute values which are URLs, so you can see how it replaces the first %s correctly.

However, we don’t want to put an attribute value in that second placeholder – we want a list of all the attributes and their values that have been filtered in!

Remember that genesis_attr() function I mentioned? That takes two arguments, the first of which is a string that provides the context. The second argument is optional and not important here.

What we really wanted then was:

$author = sprintf(
    '<a href="%s" %s>%s</a>',
    esc_url( $url ),
    genesis_attr( 'comment-author-link' ), // This line changed
    $author
);

or in the original format:

$author = sprintf( '<a href="%s" %s>%s</a>', esc_url( $url ), genesis_attr( 'comment-author-link' ), $author );

That will replace the second %s placeholder with a list of all the attributes and their values (already escaped) for the comment-author-link context. Elsewhere in Genesis (lib/functions/markup.php:619 if you’re curious) is a function which uses this context to filter in our rel and itemprop attributes.

Conclusion

If you’re competent in editing code, I’d say go ahead and make this comment author link change to your copy of Genesis. While it’s not usually advised to edit Genesis files, in this case, it’s applying the same change as will likely be in the next version of Genesis anyway, so your change will be overwritten with the correct (and likely same) change anyway.

If you’re using a custom callback for comments (advanced customisation), then you may not be affected by this bug. If your custom callback started off as a copy of genesis_html5_comment_callback(), then you probably are.

TL;DR Fix

In lib/structure/comments.php, line 294, replace:

$author = sprintf( '<a href="%s" %s>%s</a>', esc_url( $url ), esc_attr( 'comment-author-link' ), $author );

with

$author = sprintf( '<a href="%s" %s>%s</a>', esc_url( $url ), genesis_attr( 'comment-author-link' ), $author );

Pre-launch of UK Genesis

Gary Jones · Feb 17, 2014 ·

At the time of writing, over 112,000 website owners use the Genesis Framework as their base WordPress theme. These people come from over 40 countries, and the UK, of course, is one of those countries.

I’m a developer who works a lot with, and on, the Genesis Framework. I’d say I’m known within the Genesis developer community, more-so after I released my first Genesis guide. Many of the leads I get have come from searches that include a reference to “UK”.

Yet other than a small handful of people, I don’t know that many UK-based web professionals who only work with Genesis. I’m sure they exist, but I haven’t seen them in the Genesis communities on Twitter, Facebook, Google+ or LinkedIn. There isn’t an existing UK Genesis community.

UK Genesis

One of those handful who I do know about is Jo, and we’ve started off UK Genesis. At the moment, it is a resource for designers and developers who want to be found because they use Genesis. Once launched, the site will be for clients who want to find a developer or designer because they use Genesis. It may also support the community side, with optional meet ups, and a handy list of people to refer to if a lead warrants it.

A few of us are getting together for a meeting at the end of February 2014, which will help shape how this project will go ahead. Some initial suggestions said it could be a directory of profiles. These would show where the professional is, the type of clients they work with and the price-range they work within. This could be a paid listing, so that those who contribute to maintaining the site can justify their voluntary time.

There is a separate project to do something similar for the wider UK-based WordPress developers. I’m hoping we can collaborate with them so that we end up with the best of both camps. I’m not aware of any other country-specific communities for Genesis, but if there are, please let me know.

If you’d like to find out more or become involved in UK Genesis, then sign-up at ukgenesis.co.uk.

How To Add A Split Sidebar in the Genesis Framework

Gary Jones · Sep 24, 2013 ·

This tutorial was originally posted to https://code.garyjones.co.uk on 2011-08-12. The comments have been carried across to this site. It has been updated here with a more detailed description and improved code.

Visually splitting the primary sidebar in a Genesis Framework child theme into two smaller sidebars is a powerful design feature. It allows prominent important areas to apparently span a double width, before breaking down into narrower columns for other widget content.

Get A Split Sidebar

If you’re thinking “How did I get a widget to span two sidebars?” or “What CSS do I use to split a sidebar?”, then you’re over-thinking the problem. We don’t actually split a sidebar, but we introduce two new widget areas that are completely independent, and then just display them below the main one instead. Kudos to Brian Gardner for originally suggesting this approach after I was trying to recreate the Custom Content Box above the two sidebars as it appeared in Thesis.

By using new widget areas, users get clear guidance on where their widget will appear without having to work out if the new widget will appear in the normal sidebar, or in one of the split sidebar areas.

Here’s what we’re trying to achieve (screenshot from an client site I did):

Screenshot showing a split sidebar, with one sidebar split into two narrower sidebars — One sidebar, split into two (each with their own widget area)

Ready for some code?

PHP

Add the following to your child theme function.php file:

The first function registers the two widget areas. For more info about genesis_register_sidebar() see the StudioPress tutorial on How to Register a Widget Area (login needed).

The function is attached to the after_setup_theme action hook at priority 5 so that the split sidebar widget areas appear after Genesis has registered the Primary and Secondary sidebars, but before the footer widget areas.

Screenshot showing a list of widget areas — Sensible registration of the widget areas can determine the order in which they appear on the Widgets screen.

The second function handles the output of the widget areas. Here we use the genesis_widget_area() function. This function is a wrapper for the WordPress function dynamic_sidebar() but it sets up the default markup for before and after the widget area and calls two contextually-named action hooks before and after the dynamic_sidebar() call, making it more flexible for plugins or later code. You can see that the single argument being passed to each call is just the ID of the widget areas we registered in the first function.

The second function is attached to the genesis_after_sidebar_widget_area hook, which is what determines the location of the split sidebar output (after the Primary sidebar). If it was attached to the genesis_before_sidebar_widget_area then the split sidebar would be above the Primary sidebar.
Attaching it to genesis_before_sidebar_alt_widget_area or genesis_before_sidebar_alt_widget_area would make it appear before or after the Secondary sidebar instead.

CSS

The CSS is relatively trivial but might need adapting to fit in to your existing theme styles. We give each widget area half of the available width, and float them so they fill in the space instead of the second one stacking underneath the first.

If you need to target the left sidebar you can use the .split-sidebars > .widget-area:first-child {} selector, and .split-sidebars > .widget-area:last-child {} for the right sidebar.

Conclusion

You can now register new widget areas, and output them above or below the primary and secondary sidebars, giving a “split sidebar” appearance. If you have any questions, let me know in the comments.

Move the Floating Social Bar Outside of Entry Content in Genesis

Gary Jones · Sep 10, 2013 ·

The Floating Social Bar plugin is a way for readers to easily share posts on their social networks – the key difference is that it’s very fast, and doesn’t front-load the loading of the all of the scripts for the social sites. At the time of writing, I’m using it on this site, and you can see it just above.

In actual fact, it’s in a very slightly different place to where it would be by default. You see, to make the plugin work for all themes, Thomas and Syed appended the FSB output to the top of the post content. And that’s fine for most cases.

Looking at a page with the Floating Social Bar enabled, in the Google Structured Data Testing Tool, I could see that the textual output from the Floating Social Bar was being included within the blogPosting item text.

Screenshot of Google Structured Data Testing Tool showing the text value includes the textual output from the Floating Social Bar — The text value includes the textual output from the Floating Social Bar

I didn’t want this. I’m not sure if Google actually uses this microdata value in any specific way, but I wanted to at least try and clear it up.

Moving the Floating Social Bar in Genesis

Here’s the solution for Genesis child themes (add to functions.php). Other themes could do the same, except they’ll need to pick their own specific action hook on which to add the Floating Social Bar back in.

The code itself is documented with a couple of notes.

In Genesis child themes then, it simply moves the Floating Social Bar output from immediately after the <div class="entry-content" itemprop="text"> tag to immediately before it. Unless your entry-content has a background colour or a top border (which might be another reason for moving it anyway), you shouldn’t notice any visual difference.

Plugin

Since I’m going to be using this across all the sites where I use Floating Social Bar and Genesis, I’ve turned this into a plugin. Feel free to fork and improve or tweak to your own preference.

Move Floating Social Bar in Genesis plugin on GitHub

How to Style a Comment Count Number in the Genesis Framework

Gary Jones · Sep 9, 2013 ·

This tutorial was originally posted to http://code.garyjones.co.uk on 2010-08-25. The comments have been carried across to this site. It has been updated here for HTML5 child themes.

If you’re using a Genesis child theme and need to style the comment count number for a post so that it’s different from the word “Comment(s)”, then there are two steps we need to take. First, we need to add some extra markup around the number part, and second, add some CSS to style that markup.

Comment Count Number?

The comment count is the link and number that appear in the byline for each post in most Genesis Framework child themes, after the date and author. It acts as a shortcut to jump straight down to the comments for people who have already read the post, but want to see what new feedback there might be.

Markup

Add the following to your functions.php file:

What we’re doing here is editing the Genesis [post_comments] shortcode output that you may be using within another function, or in use by your child theme already. We use a regular expression to target the right bit of output, then replace it with similar code that has the extra markup in it. We then finish the filter by returning our amended output.

The output would be something like:

Styles

Now that’s done, we can use that extra span to target the CSS.

In this case, we’ve simply made the text larger for the comment count number, but you can add in other styles as needed. You can even give the number a background image, and not the “Comment” part:

It’s Not Working For Zero Comments!

The default output for more than one comment in Genesis is “<number> Comments”.

The default output for exactly one comment is “1 Comment”.

The default output for exactly one comment is “Leave a Comment”.

Can you spot the problem?

The inconsistent lack of a comment count number when there are no comments means that the regular expression in the first PHP function won’t match and therefore won’t do the replacement that adds in our markup. Luckily, the [post_comments] shortcode has an attribute that allows you to set the format when there are zero comments. (You can also do it for one comment and more than one comment). You can add this attribute via Genesis Simple Edits plugin, or just filter in it via the functions.php file:

Conclusion

You can now add markup around the comment count number, and let your creative juices flow about how interesting you can make it look.