How toHow to assign an icon to a page

In a previous post, I described how to do this with the help of another plugin : Page Category Plus, but this plugin does not exist anymore, so here is another way to do that.

I’ll use the theme “lightword” for this how to. There is 2 parts :

1. Assign a category to a page

When you’re editing the page, go to the Custom Fields, and add : caticons_page as the key, and in the value field, enter the ID of the category to which the icon is assigned to. It’s like assigning a category to a page.

The icon is assigned to the category ID 4

The icon is assigned to the category ID 4

Use the Custom Fields to display a "Page Icon"

Use the Custom Fields to display a "Page Icon"

2. Use the get_cat_icon tag to display the icon

In the page.php file, after this line :

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

add this code :

<?php $values = get_post_custom_values('caticons_page'); ?>

And just before :

<?php the_title(); ?>

Add the tag :

<?php
if (function_exists('get_cat_icon') && isset($values[0])) {
  get_cat_icon('link=false&class=myicons&cat='.$values[0]);
}
?>

You can customize the icon CSS by adding those lines to style.css :

.myicons {
vertical-align:middle;
padding:0px 8px 0px 0px;
margin:0px;
border-style:none;
border:none;
}

Here is the complete modified source code of page.php from the “lightword” theme (click on expand source) :

<?php get_header(); ?>
<div id="content-body">
<?php if (have_posts()) : while (have_posts()) : the_post();
$values = get_post_custom_values("caticons_page");
?>
<div <?php if (function_exists("post_class"))
 post_class();
 else print 'class="post"'; ?> id="post-<?php the_ID(); ?>">
<h2><a title="<?php the_title(); ?>" href="<?php the_permalink() ?>" rel="bookmark">
<?php if (function_exists('get_cat_icon') && isset($values[0]))
 get_cat_icon('link=false&class=myicons&cat='.$values[0]);?>
<?php the_title(); ?></a></h2>
<?php edit_post_link(__('Edit this page','lightword'), '', ''); ?>
<?php the_content(''); ?>
<?php wp_link_pages('before=<div>&after=</div>&next_or_number=number&pagelink=<span>%</span>'); ?>
</div>
<?php if ( comments_open() && $lw_disable_comments == "false" ) : comments_template(); endif; ?>
<?php endwhile; else: ?>
<h2><?php _e('Not Found','lightword'); ?></h2>
<p><?php  _e("Sorry, but you are looking for something that isn't here.","lightword"); ?></p>
<?php endif; ?>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

The result :

Before

Before

After

After

You should read how to display icons for pages in the sidebar, too.

17 thoughts on “How to assign an icon to a page

  1. Pingback: How to add icons to pages/subpages | Category Icons

  2. salut sub!

    merci pour tout ce que tu fais. Mais avec cela ici, je pense qu’il y a une problème…

    ce code:

    $values = get_post_custom_values(“caticons_page”);

    quand je l’ecris où tu as dit où je devrais l’ecrire, il se montre sur le page soi-même. Peut-être ce n’est pas le bon endroit pour ça. J’ai essayé des autres positions sur le page.php fiche, mais il ne marche pas. Peut-être tu sais le problème?

    merci!

  3. merci sub!!

    est-qu’il n’y a plus encore un chemin de ajouter des icones à coté des pages dans le sidebar? J’ai découvert comment le faire sous le liste “categories”. J’ai un page sous le categories maintenant. Mais est-ce qu’il y a un chemin de le faire séparément? Comme les pages se montrent naturellement?

    Aussi comment est-ce qu’on changer le taille d’un icon séparément? Je sais comment le faire pour tous les icones ensemble, mais si je veux changer d’un icon, est-ce que ça c’est possible?

    merci!

  4. est-ce que c’est possible d’avoir les icones pour le liste des pages, comme les categories?

    merci!

  5. @Ben

    Pas à ma connaissance, désolé, Ben. La raison est simple : les pages sont toutes associées automatiquement à la catégorie par défaut, donc à la catégorie n°1 : uncategorized. D’où l’utilisation du custom field, mais qui a tout de même des limites.

  6. Pingback: How to display icons for pages in the sidebar | Category Icons

  7. I’m curious if it would be possible to add pages to the plugin itself so the user does not have to enter any custom fields. Basically have the same functionality for pages as we do for categories using this plugin.

    I’m doing everything I can to try and avoid forcing my users into remembering shortcodes etc.

  8. I understand your problem and all I can say is that it should be possible with time & support. But as you can see, I don’t have the time to update the plugin often (and almost no support :P ), except once a year, in august, on holidays…

  9. Thanks for the great plugin.

    In the above tutorial: get_post_custom_values(“caticons_page”);

    Needs to have single quotes: get_post_custom_values(‘caticons_page’);

  10. Nice article it`s work fine for me with wordpress 3.0.1 And twentyten Theme.
    One more time Thx to the autor for Great Article