Use Genericons with Twenty Twelve Theme

Twenty Thirteen and my Twenty Plus Pro theme use a font pack called Casinos in US, which is an efficient way to display icons on your site without increasing load times. They also allow for quick and simple styling without the use of an image editing program, which is great for me because I’m terrible at using them.

Here’s how you can use Genericons in Twenty Twelve theme to add small icons to your meta information “Posted by, Posted on, Posted in” etc etc.

Twenty Twelve does not use classes around each of these items, so we’ll have to add them ourselves which isn’t hard to do. Twenty Twelve allows us to use the same function in our child theme as it uses in its own functions, so we can just copy and edit it.

Genericons Twenty Twelve WordPress - zeaks.org

Keep in mind, when I refer to Genericons as fonts, it’s because they are fonts that are made to look like icons.

Add Meta info Function

Start off by using a child theme, once you have that, download or open a copy of functions.php from Twenty Twelve theme and open it.

Around line 362 you should see a line that reads like this

function twentytwelve_entry_meta() {

That’s the beginning of the function we need to copy to our Child Theme. Copy right down to line 398. The entire code should look like this.

function twentytwelve_entry_meta() {
	// Translators: used between list items, there is a space after the comma.
	$categories_list = get_the_category_list( __( ', ', 'twentytwelve' ) );

	// Translators: used between list items, there is a space after the comma.
	$tag_list = get_the_tag_list( '', __( ', ', 'twentytwelve' ) );

	$date = sprintf( '<a href="%1$s" title="%2$s" rel="bookmark"><time class="entry-date" datetime="%3$s">%4$s</time></a>',
		esc_url( get_permalink() ),
		esc_attr( get_the_time() ),
		esc_attr( get_the_date( 'c' ) ),
		esc_html( get_the_date() )
	);

	$author = sprintf( '<span class="author vcard"><a class="url fn n" href="%1$s" title="%2$s" rel="author">%3$s</a></span>',
		esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ),
		esc_attr( sprintf( __( 'View all posts by %s', 'twentytwelve' ), get_the_author() ) ),
		get_the_author()
	);

	// Translators: 1 is category, 2 is tag, 3 is the date and 4 is the author's name.
	if ( $tag_list ) {
		$utility_text = __( 'This entry was posted in %1$s and tagged %2$s on %3$s<span class="by-author"> by %4$s</span>.', 'twentytwelve' );
	} elseif ( $categories_list ) {
		$utility_text = __( 'This entry was posted in %1$s on %3$s<span class="by-author"> by %4$s</span>.', 'twentytwelve' );
	} else {
		$utility_text = __( 'This entry was posted on %3$s<span class="by-author"> by %4$s</span>.', 'twentytwelve' );
	}

	printf(
		$utility_text,
		$categories_list,
		$tag_list,
		$date,
		$author
	);
}

Paste that into your child theme, you can remove the commented areas if you like. Now that we have this in the child theme, it will use it instead of Twenty Twelves.

Take a look at the second last section of this code where it says “// Translators: 1 is category, 2 is tag, 3 is the date and 4 is the author’s name.” the bit under it has 3 sections, one for tag pages, one for category pages and the last is for everything else. We need to add classes within this so we can style it and add our icons.

Add Classes to Meta Info

Our classes will be simple to read

.posted-by
.posted-on
.posted-in
.tagged-in

Replace this block of code

	// Translators: 1 is category, 2 is tag, 3 is the date and 4 is the author's name.
	if ( $tag_list ) {
		$utility_text = __( 'This entry was posted in %1$s and tagged %2$s on %3$s<span class="by-author"> by %4$s</span>.', 'twentytwelve' );
	} elseif ( $categories_list ) {
		$utility_text = __( 'This entry was posted in %1$s on %3$s<span class="by-author"> by %4$s</span>.', 'twentytwelve' );
	} else {
		$utility_text = __( 'This entry was posted on %3$s<span class="by-author"> by %4$s</span>.', 'twentytwelve' );
	}

With this

	// Translators: 1 is category, 2 is tag, 3 is the date and 4 is the author's name.
	if ( $tag_list ) {
		$utility_text = __( '
		<span class="posted-in">This entry was posted in %1$s</span>
		<span class="tagged-in">and tagged %2$s</span>
		<span class="posted-on">on %3$s</span>
		<span class="posted-by"> by %4$s</span>.', 'twentytwelve' );
	} elseif ( $categories_list ) {
		$utility_text = __( '
		<span class="posted-in">This entry was posted in %1$s</span>
		<span class="posted-on"> on %3$s</span>
		<span class="posted-by"> by %4$s</span>.', 'twentytwelve' );
	} else {
		$utility_text = __( '
		<span class="posted-on">This entry was posted on %3$s</span>
		<span class="posted-by"> by %4$s</span>.', 'twentytwelve' );
	}

You’ll noticed I used span tags instead of div tags, for anyone who doesn’t know this already, span displays content inline and div displays them as block. We need them to display as inline, so we’re using span class.

Anyways, we have our classes added to the meta function so you can save and close functions.php.

Adding Genericons

Next thing to do is to download and add the Genericons to our theme. Visit Genericons and grab yourself a free copy of them, then extract them. Open the folder, you should see a folder inside called “font” rename it to “fonts” (I’m picky with my folder names) Upload the fonts folder to your child theme.

Now you should open style.css of your child theme and add this to it.

/* FONTS */
@font-face {
	font-family: Genericons;
	src: url(fonts/genericons-regular-webfont.eot);
	src: url(fonts/genericons-regular-webfont.eot?#iefix) format("embedded-opentype"),
		 url(fonts/genericons-regular-webfont.woff) format("woff"),
		 url(fonts/genericons-regular-webfont.ttf) format("truetype"),
		 url(fonts/genericons-regular-webfont.svg#genericonsregular) format("svg");
	font-weight: normal;
	font-style: normal;
}

This tells the theme where the fonts are.

Next we’re going to style all of the fonts at once, so using our classes I mentioned before add this to your stylesheet.

/* Genericons */
.posted-in:before,
.posted-on:before,
.tagged-in:before,
.posted-by:before,
.comments-link:before {
    display: inline-block;
    width: 24px;
    height: 16px;
    -webkit-font-smoothing: antialiased;
    font-size: 23px;
    line-height: 1;
    font-family: 'Genericons';
    text-decoration: inherit;
    font-weight: normal;
    font-style: normal;
    vertical-align: top;
}

Noticed I also added a comment-link class so we could include an icon to that as well. We’re also using the :before pseudo class which tells the icon to display before the element instad of on or after it. You can read more about pseudo classes here www.w3schools.com

You can do a lot with Genericons, if you want the fonts larger, or you want to change the color, treat them just as you would any other font. Use color: red; if you want them to be red. Feel free to experiment with them, this CSS will add a regular sized dark icon. You can also open the example.html file in the Genericon package you downloaded to get a list of all the icons available, in case you want to use them for other areas.

This last bit of CSS will add the icon to each class

/* Meta icons */
.posted-in:before { 
	content: "\f301";
}
.posted-on:before {
	content: "\f307";
}
.tagged-in:before {
	content: "\f302";
}
.posted-by:before { 
	content: "\f304";
}
.comments-link:before {
	content: "\f300";
}

Save and close style.css and refresh your site and check out your new icons! Remember you can go back and edit the meta info we added to functions.php if you want to change the text after each icon, or even remove it.

Let me know how your icons turned out by leaving a comment!

Comments

  1. says

    I need some help, i want to display “This entry was posted in” in all pages except in home page. tell me how to remove it only from home page and here is my website thanks in advance

    • says

      Try .home .entry-meta { display: none; } if you want the date to show, you’ll need to create a custom meta data function then add classes around each section.

    • says

      Hi sandeep, If you want to hide compleete entry-meta in home / blog page, add a if statement before entry-meta function inside content.php.

      A varients of this code is works perfect on my blog.

  2. Nikanj says

    How do you translate those changes in the language files (po/mo)? I tried to add your changes to a po file without any luck.

  3. says

    Great tutorial Zeaks One question, if I don’t want the “leave reply, posted by and etc” appear in each post, how do I removed. you have any trick for this Regards Wayan Adika

    • says

      Try adding this to your child theme

      footer.entry-meta, .entry-meta { display: none; }

      I’m pretty sure those are the classes, i’m posting from a cell phone so I can’t check right now. If not, just use firebug to find the classes and use display:none to hide them. Your other option is to edit template files to remove the links.

      The problem with the meta info for this theme is it’s not separated so you can hide all or none unless you edit the function.

Leave a Reply