How toHow to display icons for pages in the sidebar

I’ve written a function that seems to be working. I think I’m going to include it in a future version of my Category Icons plugin. So, you can have page icons the same way you have category icons in the sidebar.

The following code will add icons in front of the title page in the sidebar when you use the Pages widget. You can see that I’ve used a filter named widget_pages_args to add the filter wp_list_pages in order to parse the HTML generated by wp_list_pages. It’s because I want to display icons only in the sidebar and nowhere else.

To use that code :
1. Follow this previous how to in order to “assign a category to a page” with the custom field
2. Copy and paste it in functions.php of your theme.

add_filter('widget_pages_args','bm_go');
function bm_go() {
  add_filter('wp_list_pages','bm_sidebar_pages_icons');
}

function bm_sidebar_pages_icons($content) {
  if (preg_match_all('/page-item-([0-9]+).*><a\s+.*?href=[\"\']?[^\"\' >]*[\"\']?[^>]*(>.*?<)\/a>/i', $content, $correspondances, PREG_SET_ORDER)) {
    foreach ($correspondances as $correspondance) {
      $result = get_post_custom_values('caticons_page',$correspondance[1]);
      if (isset($result[0]) && !empty($result[0])) {
        $cat_ID = $result[0];
        $icon = get_cat_icon('echo=false&link=false&class=myicons&cat='.$cat_ID);
        $replace = substr($correspondance[2],0,1).$icon.substr($correspondance[2],1,strlen($correspondance[2]));
        $content = str_ireplace($correspondance[2],$replace,$content);
      }
    }
  }
  remove_filter('wp_list_pages','bm_sidebar_pages_icons');
  return $content;
}

If you want to display the page icons every time you call wp_list_pages, i.e. not only in the sidebar (in the header, for example), copy and paste this code, INSTEAD ( DO NOT COPY AND PASTE THE CODE ABOVE AND THE CODE BELOW, AS IT IS THE SAME FUNCTION !) :

 add_filter('wp_list_pages','bm_sidebar_pages_icons');

function bm_sidebar_pages_icons($content) {
  if (preg_match_all('/page-item-([0-9]+).*><a\s+.*?href=[\"\']?[^\"\' >]*[\"\']?[^>]*(>.*?<)\/a>/i', $content, $correspondances, PREG_SET_ORDER)) {
    foreach ($correspondances as $correspondance) {
      $result = get_post_custom_values('caticons_page',$correspondance[1]);
      if (isset($result[0]) && !empty($result[0])) {
        $cat_ID = $result[0];
        $icon = get_cat_icon('echo=false&link=false&class=myicons&cat='.$cat_ID);
        $replace = substr($correspondance[2],0,1).$icon.substr($correspondance[2],1,strlen($correspondance[2]));
        $content = str_ireplace($correspondance[2],$replace,$content);
      }
    }
  }
  return $content;
}

23 thoughts on “How to display icons for pages in the sidebar

  1. wow sub! merci! tu travailles dûr!

    mais, j’ai ajouté le code, et j’ai ajouté le page widget dans le sidebar, et j’ai des icones assignés à des pages, mais ils ne se montrent pas. Est-ce qu’il y a quel que chose que j’oublie?

    aussi, j’ai lu que tu l’as fait que il va seulement marcher dans le sidebar, est-ce que c’est possible s’ils peuvent marcher dans le header aussi? avec ce code peux-je changer le code alors que je peux assigné un icon pour le liens sans le text?

    merci!

  2. @Ben

    tu es sûr que tu as bien ajouté le champ personnalisé (custom field) “caticons_page” sur toutes les pages ? Une remarque : on n’assigne pas des icônes à des pages, mais plutôt des catégories à des pages. Ce sont les icônes qui sont assignées à des catégories.

  3. Pingback: How to assign an icon to a page | Category Icons

  4. pas de problème pour le don!

    oui, j’ai créé un categorie pour toutes les pages. Quand je clique sur un page les icônes se montrent. Mais, ils ne se montrent pas sur le home page comme les icônes avec les categories qui sont assigné à mon blog. hmmm. J’ai verifié aussi, les ID’s sont bien assignés avec les categories pour les pages… les icônes se montrent quand je clique sur le page, donc quel que chose marche…

    merci!

  5. Just delete add_filter(‘wp_list_page’,…). You must NOT redeclare the same function twice. Delete one of the bm_sidebar_pages_icons function. Are you sure you’ve read the post completely ? ;)

  6. ahhhhhh! I can’t access word press dash board anymore. My domain people are trying to help me.

  7. @Ben

    Don’t panic. Use your ftp to download the functions.php of your theme,
    edit it locally, and send the corrected version. Just erase the
    add_filter references you’ve added.

  8. @Ben

    You can also give me an access to your site, I’ll do the best I can to help you, if you want.

  9. phew!!! je l’ai reparé!! merci sub! bon idée de simplement remplacer le function.php truc… je ne reflichissais pas. Maintenant j’essaie à utiliser le function encore..

  10. wow!! Il a marché! Maintenant le dernier chose je veux essayer est faire que l’icone est le liens sans le text.

    pour le prochain fois tu sors ton plugin, est-ce que tu peux creer un code alors que quel qu’un peux changer le taille de chaque icon? Maintenant tu peux seulement le faire pour toutes les icônes ensemble.

    merci pour ton aide Sub!

  11. Nice plugin! I love this little eyecatchers… ;-)
    …but I have a problem. I’m using the Vidiyal2-Theme, and i can’t show the page icons in the side bar.
    I have changed the functions.php like in this HowTo, but it doesn’t work. I have tested it with another theme – no problem with the page icons in the sidebar – but Vidiyal2 seems to be a riddle.
    Do you have a little help for me?

    Sorry for my english, I’m blonde, german and not the youngest… :-)

    greets an thanks,
    Kattugla

  12. Hey!

    Made some modifications to my blog overnight, and I want to use the Category Icons widget as the main indexing link on my site now, instead of having top level pages with thousands of pages hanging off that one page.

    So, I went poking around in the code, and I want to know where I can insert this PHP code so that I have a “Home” link at the top of the list, so that the visitors can get back to my main page.

    ` echo “Home\n”; `

    I hope that makes sense. Please get back to me with some answer. Thank you.

  13. … tap tap tap…. tap tap tap….

    echo ” ( a href=”.get_settings ( ‘home’ ).” ) Home( /a ) \n” ;

    I hope you can tell where I replaced >< with )(

  14. Got it! Nevermind. Found where to post it, and had to hack the & nbsp ; to get it to align right, but I did it.

  15. hey, great plugin! i got the images showing in the menu, but right next to them it shows the title of the pages – so for the home-img it says “home” right next to it. where and how can i just display the image?
    thanks a lot

  16. i tried it with

    with put_cat_icons(wp_list_pages(‘title_li=&echo=0′),’icons_only=true’);

    but it doesn’t work properly :(

  17. hi there

    i hope your familiar with the suffusion theme …..as u know it has many options ..

    i actually chose the customized option ……. i installed the latest version of your pluggin …

    in your “how to” your directing to put the coding in the function.php ….. there is no such thing my theme …. how ever i know there a lot of customizing … in ” custom styles” im not sure where to put this code of your so it shows in my side bar …
    my main thing is that i want … a page to have categories … in the side bar or/and in the page itself….
    where do i paste the code .. or where do i start …. been looking at this for a long time …

    thx in advance … hope u can help me out !!!!!

  18. @lion

    I do not help with theme customizations unless you donate, as this is time-consuming… But you should find a way to do that by using Firebug. Thanks for your understanding.