Use Genericons with Twenty Twelve Theme

Twenty Thirteen and my Twenty Plus Pro theme use a font pack called Genericons, 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

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!

25 thoughts on “Use Genericons with Twenty Twelve Theme

  1. Mike Turco

    Wow, that’s awesome! I hope they continue to expand their library because I can definitely use those icons in different places. Each one you use, passed the second one on a page, saves a “request”, no? That’s really helpful if you’re on a shared host.

    One question and one comment.

    Comment: your link to the genericons page is wrong. The link takes me to http://zeaks.org/use-genericons-with-twenty-twelve-theme/www.Genericons.com instead of genericons.com.

    Question: When I use external links on my site (for example, http://miketurco.com/how-to-spot-business-trends-online/ ) I use the following CSS to generate an “external link icon” at the end of each external link:

    /* add icon to external link */
    a.ext {
        background: url(http://miketurco.com/wp-content/uploads/ext.png) center right no-repeat;
        padding-right: 13px;
    }

    Is there a way to replace the image that I’m using in the CSS with the genericons character?

    Thanks,

    Mike

    1. Zeaks

      Hi Mike, thanks for pointing out the broken links, not sure what happened there.

      Yes you can use icons for that, here’s an example.

      Zeaks Blog

      make sure to add the a.ext:before class to the Genericon CSS to give it the same generic look as the rest or use your own style.

      Then use something like

      a.ext:before {
           content: "f107";
           text-decoration: none;
      }

      Here’s what it would look like, I’ve made the icon orange.
      Link with a Genericon

      You could even do it without any extra class. For Twenty Twelve using this would add an icon to any link within the post content.

      .entry-content p a:before { 
           content: "f107";
           text-decoration: none;
      }

      You’ll want to use text-decoration:none; or it will show an underline if using Twenty Twelve. You can add a unique color or change the size or even add text-shadow to it.

      If you want it after the link, use the :after class.

      They can be used just about anywhere. If you take a look at my sidebar, the icons in the custom menu are Genericons, using classes added through the menu system and using a custom menu widget.

  2. derwerff

    I followed the excellent instructions for including genericons in my WP template. I can’t figure out how to get different information in the entry header and footer. I want date, author, and comment links (with genericons) under the entry heading and category and tag links (with genericons) in the entry footer. Here is the my content file code:

    http://pastebin.com/paA4JSq0

    Thanks in advance for help and suggestions.

  3. Zeaks

    Unfortunately the meta information comes in one function and is called using

    < ?php twentytwelve_entry_meta(); ?>

    in content.php. If you move this to the entry header area of the post, all meta info will move.

    You could rewrite the function, or call each item separately, as it is, you won’t be able to divide the items like you want.

    Here’s an article on how to add post meta information to a theme http://codex.wordpress.org/Post_Meta_Data_Section , it’s not difficult. Remove the current post meta call in content, then add your own however you like. You can then style it the same way and add your icons to the classes.

  4. Richard

    Also you made small a typo in your css class.
    You used:

    .tagged-in:before {
        content: "f302";
    }

    And in your functions.php code you use:

     if ( $tag_list ) {
            $utility_text = __( '
            ...
            and tagged %2$s
            ...
  5. Richard

    I solved the problem with the icons not showing up!
    If you create a new class in the /* Meta Icons */ Section in your css file. You also have to add them in the section above named /* Genericons */.

  6. sarathlal

    I try this one and works fine.
    How I can make Genericon as a background image? It is possible? I try to replace my search icon in twenty twelve child theme.

    #searchform input[type="submit"] {
        width:60px;
        height:40px;
        background: url(image/search.png) left no-repeat; 
        border: none;
        box-shadow: none;
    }

    This is my search submit button.

    I remove the line

    background: url(image/search.png) left no-repeat;

    and
    add some line like

    #searchform input[type="submit"]:background {
    content: 'f418';
    }

    But nothing happens. Also I try before and after also, but no effect :-)
    What is wrong with me?

      1. sarathlal

        I just style the same property in your meta-entry genericons for search button for testing. But it give a white box instead of icon!
        I paste my complete search icon style here.

        #searchform input[type="submit"] {
            width:4.28571429rem;
            height:2.85714286rem;
            
            border: none;
            box-shadow: none;
        }
        
        #searchform input[type="submit"]:background {
        	display: inline-block;
            width: 1.71428571rem;
            height: 1.14285714rem;
            -webkit-font-smoothing: antialiased;
            font-size: 1.42857143rem;
            line-height: 1;
            font-family: 'Genericons';
            text-decoration: inherit;
            font-weight: normal;
            font-style: normal;
            vertical-align: top;
            padding-left: 1.6rem;
            color: #0099FF;
        	content: "f301";
        }
        

        Which one, I want to use? background or background-image to style background? I try this two option, but nothing happens.

  7. Zeaks

    Make sure you’ve added the CSS that tells your theme where the icons are

    @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;
    }
    1. sarathlal

      Thanks for your reply,
      I already add this given css one time in my style-sheet. Now genericons in meta-entry works perfectly in my blog. Also I add some genericons in widget area with help from this post. It also works.
      You can check my blog at http://tinylab.in
      Again I want to add this last css code with my style sheet?

  8. Zeaks

    If that code is already in your stylesheet then it’s fine as is. I took a look at your site, if you’re adding the genericon to #searchform input[type=”submit”] I don’t see any reason it should not work. I see you have an image there for now, I’ll try and test this out on another site and see what the issue is

    You’re site looks great

  9. sarathlal

    Thanks for your support.
    Today I get a clue about my problem.
    Actually, genericons and all other icon fonts are text. We can’t use a text as a background and we can only decorate after and before pseudo classes with texts.
    I am right na?

    1. Zeaks

      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 Comment

Your email address will not be published. Required fields are marked *

*
*