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 - 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

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.

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

Replace this block of code

With this

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.

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.

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

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!

9 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:

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

    Thanks,

    Mike

    Reply
    1. Zeaks

      Post author

      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.

      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

      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.

      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.

      Reply
  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.

    Reply
  3. Zeaks

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

    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.

    Reply
  4. Richard

    For a couple icons I want to use I see a sqaure with the glyph code in it, in stead of the correct icon??
    I am sure thats the right code….. whats up with that?

    Reply
  5. 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

    Reply
  6. 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 */.

    Reply

Leave a Reply to Mike Turco Cancel reply