I use the Categories widget on my sidebar(s) and I would like to display a Font Awesome icon next to each category listed in the widget. The icon would be the same for all categories, for now, but I would like to give each category it’s own unique icon in the future.
I would like to modify the Categories widget using code in my functions.php file to add the icon by inserting markup like <i class="fa fa-chevron-right"></i>
into category’s link/anchor element after the category’s title. I could accomplish this via CSS, but in doing so I lose the ability to programmatically determine which icon to display, along with the flexibility for other improvements/changes that I may wish to make in the future.
Basically, I wish to achieve this effect:
Cat 1 > Cat 2 > Cat 3 >
(The greater-than symbol ‘>’ represents the icon placement relative to the category title)
I have Font Awesome enqueued in the functions.php file using the wp_enqueue_scripts
hook as follows, and it loads and displays the icons perfectly. Note that I do not use any Font Awesome plugin built for WordPress.
/* Enqueue Scripts
-----------------------------------------------------------------*/
add_action( 'wp_enqueue_scripts', 'essentials_enqueue_scripts' );
function essentials_enqueue_scripts() {
/* jQuery */
wp_enqueue_script('jquery');
wp_enqueue_script( 'jquery_ui', "http" . ($_SERVER['SERVER_PORT'] == 443 ? "s" : "") . "://ajax.googleapis.com/ajax/libs/jqueryui/2.0.3/jquery-ui.min.js", false, null);
wp_enqueue_script( 'waypoints', get_template_directory_uri() . '/js/waypoints.min.js');
wp_enqueue_script( 'essentials_main', get_template_directory_uri() . '/js/essentials_main.js', array(), '1.0.0', true );
wp_enqueue_script( 'essentials_show_stuff', get_template_directory_uri() . '/js/essentials_show_stuff.js', array(), '1.0.0', true );
/* Google Fonts */
wp_register_style('GoogleFonts','http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800|Bad+Script');
wp_enqueue_style( 'GoogleFonts');
/* Font Awesome Fonts */
wp_register_style('Font Awesome','//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css');
wp_enqueue_style( 'Font Awesome');
}
Despite my best research efforts, I was unable to find a solution to modify the categories widget.
Assumptions:
You don’t explain how you want to install the Font Awesome package, so I just assume for the moment that you use the plugin Font Awesome Icons.
You wrote:
so I assume you want to use the
<i>
tag directly, for example:after each category link in the widget category list.
Idea:
You can use the
wp_list_categories
filter to modify the output of the widget category list.Example:
Here is a simple example how to inject it into the category list via the
wp_list_categories
filter:This will give you an output similar to this one:
This answer contains a fairly simple CSS solution.
Essentially, you’d add the following to your stylesheet:
etc
Yes, it’s not a very dynamic solution, but your categories aren’t likely to change I suppose.
Assuming that you want to use the
fa-chevron-right
icon, you simply need to target the list item via CSS. Use the:after
pseudo-class:Edit
So, to give an idea of how you might pass dynamic CSS (which can be easily adapted to a custom Plugin option) via a callback, here’s an example:
(Note: “plugin” and “theme” are interchangeable below.)
First, we’ll modify the CSS to target list items inside of a Widget specifically. WordPress adds a class,
.widget
, to the Widget container. So you can target that:Or, if this will all be wrapped up in a Plugin that registers a custom Widget, then you can target the CSS class that you define in your custom Widget, via the
$widget_ops
array:So, you can target that custom classname:
Or, if you want to target the core “Categories” Widget, you can use the
.widget_categories
class. We’ll go with that approach for the example.We’re going to put it inside a callback, hooked into
wp_head
, though you can just as easily usewp_print_styles
:Inside, we’re just going to output a stylesheet, with our rule from above:
At this point, you’re done. Easy peasy. But, since you’re already inside a PHP function, you can easily make this stylesheet dynamic, by using a variable:
So now, it’s a simple matter to use a custom Plugin option value, just by passing it to the variable:
So that’s it! Dynamic CSS, outputting an actual icon (not a background image), pulling from a Plugin option.
And since it’s just CSS, it’s easily extensible to pretty much any selector you can imagine – not just limited to a list item inside of a Widget.
I would do it like this:
First, we enqueue the font awesome styles. Then, we hijack some filters to add/remove our own filter for the category listing. That’s it.
// EDIT:
Without the comments, adapted to the fact that you already have enqueued Font Awesome, using closures, and letting the filter remove itself, the code reads like the following:
I would not call that overkill. But yes, my code consists of more lines than birgire’s current solution.