TUTORIAL

Hide or change meta info

In this tutorial I’ll show you step by step how to change the meta info in your posts and on the blog home page. The meta info is the small line that sits below or underneath your posts that shows the author, date stamp, categories, permlink and, if you’re logged in, “edit” as well.

Introduction

For a reference how it will look like, please check one of my posts as I don’t display any meta info on the blog home page.

If you want to show this style on your site too, than this what you have to do:

  • Turn off the standard display
  • Add new info to pages
  • Add new info to blog home page
  • Hide the theme icons

I only use one or two categories to show in the meta info per post because I feel that more categories only confuses one. These categories show where I wrote a post, took a picture or shared a moment. Together with a date stamp this is a perfect combination for the reader. Just have a look into one of my posts and you will understand what I’m talking about.

Now here are the single steps to change the meta info. You have to read this tutorial carefully as there are many “if”s and “in case”s.

1) Hide the standard meta info

The standard meta infos consists of author, date, category and permlink. To hide them in your post and blog home page you have to add the following lines to your CSS section:

.entry-meta {
display:none;
}

For those who only came here to hide ALL the meta info can skip the rest of the tutorial.

For those who want to to tweak the meta info so that they appear in a handy way, the following steps will show you how and where.

2) Change the posts

Now we want to bring some of the info back to the posts. Open your single.php file and after this line:

<?php pinboard_entry_meta(); ?>

add two more lines:

<span class="entry-date"><?php the_time( get_option( 'date_format' ) ); ?></span>
<span>,<?php the_category( ', ' ); ?></span>

These lines will bring back the date stamp as well as the categories for this post, each separated by a colon. As I mentioned before I only use one or two categories per post which I feel is sufficient and not confusing the reader.

When you take a close look on your screen, you will notice that there a two very small icons. One behind the date stamp and one behind the first category. Don’t worry, we’ll take care them in a later step.

The blog home page still won’t show any meta info yet, but we going to change this in the next step.

Please notice that if you not want to show the meta info on your blog home page at all you can skip to step 6) of this tutorial.

3) Change the home page

If you want the date stamp and categories to be displayed the same way like in your posts, than open the file content.php. After this line:

<?php the_excerpt(); ?>

add two more lines:

<span class="entry-date"><br><?php the_time( get_option( 'date_format' ) ); ?></span>
<span>,<?php the_category( ', ' ); ?></span>

Now ALL of your posts on the home page will show the new meta info.

4) Hide new meta info in smaller posts of blog home page

In case you only want the new meta info ONLY to show on the larger posts on top, simply add these lines to your CSS section:

.twocol .entry-date {
display:none;
}
.twocol .entry-category {
display:none;
}

Please notice, that “.twocol” depends on the layout you’ve choosen. If it is a three or four column layout you have to adjust the referring class accordingly to “threecol” respectively “fourcol”.

5) Hide new meta info in larger posts of blog home page

In case you only want the new meta info ONLY in your top posts than skip step 4) of this tutorial but add these lines to your CSS section:

.blog .onecol .entry-date {
display:none;
}
.blog .onecol .entry-category {
display:none;
}

6) Hide the standard pictograms for date and category

Now that the meta infos are in place there still is a last step we have to take: You need to hide the two very small icons for the date stamp and the categories. Here is what you have to add to your CSS section:

.entry-date {
background-image:none;
}
.entry-category {
background-image:none;
}

These lines remove the icons on both, the blog home page and the post as they target the global entry class.

AND THAT’S IT !!!

I hope you like this tutorial and it was helpful for you.

Cheers,
Alexander

  1. CallieCallie11-02-2012

    Hi Alexander, great tutorial – THANK you for taking the time to make it! I only have one question. For each step that requires editing a template, each time you say, “…open the file content.php. After this line…. “, there’s a big blank space that doesn’t show any lines of code before going in to, “add two more lines,” and then I can see the two lines of code I’m supposed to paste in.

    In short, the code telling me where in the template to add the extra lines isn’t showing up! Help?!

    • AlexanderAlexander11-03-2012

      Hi Callie,

      Thanks for pointing this out and it should be fixed now.

      Cheers,
      Alexander

  2. CallieCallie11-03-2012

    Great!! Thank you!

  3. CoenCoen11-06-2012

    Hello Alexander, you have some great tips. Thank you for sharing them with the world. I am testing a site offline and I am struggling to style the entry-date in the theme css. I tried to apply:

    # .entry-date {
    background-image:none;
    color:red;
    }

    for instance and nothing changes color, any idea?

    Adventurous greetings,
    Coen

    • AlexanderAlexander11-08-2012

      In your example the id name is missing. Try it without the hash.

      • CoenCoen11-12-2012

        I did remove the hash, but still I can’t call upon the .entry-date. When I look into the source code it shows two very strange questionmark icons. Have you any idea how this happened? And how I can call on that .entry-date?

        November 1, 2012

        • photocoenphotocoen11-12-2012

          Aahaa, got it solved; got wrong double quotes around the entry-date in the php file….

          • AlexanderAlexander11-12-2012

            I’m happy you’re sorted :)

  4. AntjeAntje12-27-2012

    Hi,
    darf ich hier auch deutsch schreiben? Mein Englisch ist miserabel ;)
    Mir gefallen die Meta-Infos eigentlich ganz gut, aber ich hätte gerne 2 Sachen zusätzlich darin. Einmal hätte ich gerne die Anzahl der Kommentare und der Leser angezeigt bekommen.
    Weißt du wie ich die da rein bekomme?
    Danke :)

    • AlexanderAlexander12-27-2012

      Hi Antje,
      Klar kannst du hier auch deutsch reinschreiben.
      Da ich nicht mehr Pinboard nutze, habe ich zwar die Tutorials noch weiterhin zur Verfügung gestellt, allerdings nur noch so wie sie sind. :)
      Ich hoffe sie helfen dennoch dem einen oder anderen weiter oder zeigen zumindest wie man die Sache angehen kann.

      • AntjeAntje12-27-2012

        Danke für deine Antwort :)
        Ich habs mir gerade kaputt gemacht und muss nun mal schauen wie ich das wieder hin bekomme :(
        Wenn man es nicht kann sollte man die Finger von lassen *seufz*

  5. AlexanderAlexander12-28-2012

    I’m no longer with the Pinboard theme.

    The tutorials are still accessible but no longer supported.

    /closed