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