In last week’s post, we added a custom taxonomy named ‘brands’ to the Genesis Sample Theme of ThemingWP.
To display this new taxonomy in the entry footer of posts, we need to update the Genesis Entry Footer.
This post starts with an introduction of the WordPress Meta Data, and the Genesis Post Meta, followed by examples how to customize the Genesis Entry Footer.
Post Meta
According to WordPress, Post Meta Data provide administrative information about posts. This includes the author, publication date, publication time, data concerning comments, and taxonomies.
The Genesis Framework used to distinguish Post Info from Post Meta. Post Info covers author, comments data, publishing date and time. Post Meta include the taxonomies – generally categories, and tags.
With the introduction of version 2.0 of the Genesis Framework, StudioPress renamed the Post Info to Entry Header, and the Post Meta to Entry Footer.
The Post Info and Post Meta were often mixed up. Entry Header and Entry Footer leave less room for misinterpretation. It is easy to picture their proper location.
The author and publish date are generally displayed in the header of posts, while the taxonomies are listed at the bottom.
For the remaining part of this post, we concentrate on customizing the Entry Footer.
Genesis Entry Footer
The default markup of the Genesis Entry Footer is determined in /lib/shortcodes/post.php. The code from line #381 to line #517 covers category, tags, and custom taxonomy.
For an example, have a look at the Entry Footer of the Genesis Sample Theme:
It is possible to customize the entry footer with shortcodes.
This is the code regarding the default footer as the one above:
|
1 2 3 4 5 6 |
// Customize the entry meta in the entry footer (requires HTML5 theme support) add_filter( 'genesis_post_meta', 'sp_post_meta_filter' ); function sp_post_meta_filter($post_meta) { $post_meta = '[post_categories] [post_tags]'; return $post_meta; } |
How can we be sure? When you paste this code at the bottom of the functions.php of the Genesis Sample Theme, you will see no effect at all. All we do is reaffirm the markup that the Sample Theme already inherits from the Genesis Framework.
But pasting that code into the functions.php is a necessary first step to customizing the Entry Footer.
Categories and tags give you three variables for customizations:
- before – default ‘Field Under: ‘ for categories, and ‘Tagged with: ‘ for tags
- after – no default value, can be used to separate different taxonomies
- sep – separator for terms within a taxonomy, the default value is ‘, ‘
Most Genesis themes do not require markup after a taxonomy term, because the taxonomies are displayed as blocks – every taxonomy starts on a new line.
Custom post terms are equipped with the same three variable as categories and tags, but have a fourth – taxonomy. This variable allows you to address the proper custom taxonomy in case there is more than one.
The default taxonomy-value is ‘category’, and the default before-value of the custom post term is ‘Field Under: ‘, just as with categories.
The after- and sep-values for taxonomy are the same as for categories and tags: empty, respectively ‘, ‘ for the comma.
Removing the Entry Footer all together is also an option.
Add the following line to remove the entire Entry Footer:
|
1 2 |
// Remove the entry meta in the entry footer (requires HTML5 theme support) remove_action( 'genesis_entry_footer', 'genesis_post_meta' ); |
That is it. Apart from the CSS, you know everything you need to know to customize the Genesis Entry Footer.
Let’s bring the code alive with some examples.
The original Entry Footer
This is how the Entry Footer at ThemingWP looked like before introducing the brand taxonomy:
As you can see, the customization was limited to replacing ‘Filed Under: ‘ with ‘Category: ‘, and ‘Tagged With: ‘ by ‘Keywords: ‘.
That is exactly what line #5 in the code below does:
|
1 2 3 4 5 6 7 |
// Customize the post meta function add_filter( 'genesis_post_meta', 'ww_post_meta_filter' ); function ww_post_meta_filter($post_meta) { if ( !is_page() ) { $post_meta = '[post_categories before="Category: "] [post_tags before="Keywords: "]'; return $post_meta; }} |
Thanks to the use of shortcodes, it is really quite simple to customize the Entry Footer of Genesis themes.
New Entry Footer ThemingWP
Now we are going to include the ‘brands’ taxonomy in the Entry Footer.
Here is the code:
|
1 2 3 4 5 6 7 |
// Customize the post meta function add_filter( 'genesis_post_meta', 'post_meta_filter' ); function post_meta_filter($post_meta) { if ( !is_page() ) { $post_meta = '[post_terms taxonomy="brands" before="Brand: " ] [post_categories before="Category: "] [post_tags before="Keywords: "]'; return $post_meta; }} |
First, we display the brand, then the categories, and finally the tags listed as keywords.
And it looks like this:
The problem with this presentation is that it takes three lines. That is a lot of screen real estate. Especially on smartphones with small screens.
We could change the styling of the taxonomies on mobiles with media queries. Or hide these altogether. But both options are not optimal.
How about putting all terms inline? This approach would save us two lines per entry, 20 lines on an archive page.
|
1 2 3 4 5 6 7 |
// Customize the post meta function add_filter( 'genesis_post_meta', 'post_meta_filter' ); function post_meta_filter($post_meta) { if ( !is_page() ) { $post_meta = '[post_categories before="Keywords: "] [post_terms taxonomy="brands" before="" ] [post_tags before=""]'; return $post_meta; }} |
The problem persists. The three taxonomies are still displayed over three lines. That is because of the CSS regarding. More specifically these rules:
|
1 2 3 4 |
.entry-categories, .entry-tags { display: block; } |
All we have to do, is replace the display: block; with display: inline;.
|
1 2 3 4 |
.entry-categories, .entry-tags { display: inline; } |
We are not finished, though. At this stage, when a taxonomy term has two or more items, those items are separated by a comma. However, we are missing a separator between the different taxonomy terms.
The shortcodes allow us to put a comma after a post term with the after-variable. For example, after=", ". But that might get us in trouble.
The Entry Footer at ThemingWP lists categories, brands, and tags. Adding a comma after categories and brands, results in a comma too much when there are no tags. And putting a comma before brands and tags adds a superfluous space.
Fortunately, there is CSS to rescue. The shortcode example PHP#5 is just fine, when we add the following CSS:
|
1 2 3 4 5 6 7 |
.entry-meta span:after { content: ", "; } .entry-meta span:last-child:after { content: ""; } |
What are we doing here? Every taxonomy term is enclosed with a span tag.
With the code from CSS#3, we add a comma after every group of post terms, except after the last one – whichever that is. Neat!
Where to put it?
Add the CSS rules to the style.css, and the PHP code tot the functions.php of your Genesis child theme.
When you use the Dynamik Website Builder or the Genesis Extender, you add the code to the Custom CSS, respectively the Custom Functions.
Leave a Reply