0

I have downloaded a plugin from the wordpress repository which allows adding font icons to the titles of posts, you can select a different icon for individual posts according to preference. Now, the plugin displays the icon just fine in the post archive template and single post template, but does not show the featured icon on the recent post widget. I am new to web development and wordpress and would really love to know how could I modify the wordpress recent post widget, (or other widgets for that matter, which display custom post types) to also display the featured icon assigned by the plugin to the specific post titles.

Thanking you very much for your time and help, Sam

Link to plugin: https://wordpress.org/plugins/post-featured-font-icon/

  • I just discovered setting posts as sticky which gives the sticky post a class .sticky, which i can then style differently instead of using the plugin, which begs the question how do I do make recent posts widget recognize a post as sticky? – Sameer Ali Nov 12 '16 at 7:02
  • Hi Sameer, welcome to WPSE - unfortunately 3rd party plugins are off-topic here, hopefully you'll have much better luck if you contact their support. – TheDeadMedic Nov 12 '16 at 13:12
  • Did you consider creating your own widget or shortcode, instead of using the default recent posts widget ? – birgire Nov 12 '16 at 13:27
  • @TheDeadMedic, Thankyou for the welcome, my apologies, I was under the impression plugins on wordpress.org are discussed on the wp stack exchange, I will contact the plugin developers and hopefully will get a better understanding of what i am trying to achieve. thankyou again – Sameer Ali Nov 12 '16 at 14:08
  • @birgire Its just that I do not have enough knowledge to develop/code on my own, and as a start I have been trying to learn from the example of others, its not been going so well, I suppose i should take some time off to cover the basics and hopefully one day will be able to discuss on stack exchange on a more technical level, thankyou for the advice – Sameer Ali Nov 12 '16 at 14:09
1

Here's an example how to prepend a span tag to the post titles, where the span class is added in the custom field wpse_post_icon_class.

We could try to restrict it to the Recent Posts widget with:

add_filter( 'widget_display_callback', function( $instance, $obj, $args )
{
    // Only target Recent Posts widgets
    if( 'recent-posts' === $obj->id_base )
    {
        // Add filter
        add_filter( 'the_title', 'wpse_title_with_icon', 10, 2 );

        // Widget output
        $obj->widget( $args, $instance );

        // Remove filter
        remove_filter( 'the_title', 'wpse_title_with_icon', 10, 2 );            

        // Override the default widget output
        return true;
    }       
    return $instance;
}, 10, 3 );

where the filter callback is defined as:

function wpse_title_with_icon( $title, $post_id )
{
    // check if the current post has the 'wpse_post_icon_class' custom field
    if( $icon = get_post_meta( $post_id, 'wpse_post_icon_class', true ) )
        $title = sprintf( 
            '<span class="%s"></span> %s', 
             esc_attr( trim( $icon ) ), 
             $title 
        );

    return $title;
}

Example:

Here's a Dashicon example where we add the wpse_post_icon_class custom field with the value of dashicons dashicons-flag:

custom field settings

Then the Recent Posts widget will display as:

recent posts

where the corresponding title is prepended with:

<span class="dashicons dashicons-flag"></span>

Notes:

It might be better to store only the flag string in a custom field, then we should consider a more specific name like wpse_post_dashicon_class, instead of the generic wpse_post_icon_class name.

We might also want to extend this and create a metabox where the user can click on the icon she wants to associate the post with.

We must enqueue the Dashicons on the front-end, or the font- or svg icons we choose to use.

Another alternatives would be to write a custom widget or shortcode for more flexibility.

Hope it helps.

  • wow, thank-you so much for the elaborate answer, admittedly *slightly above my experience level, but i can grasp how this is working, a few things not clicking inherently with my logic, I am currently picking apart each line and hope to gain a better understanding by the end of it. – Sameer Ali Nov 20 '16 at 8:38
  • I will also look into creating my own widget and weigh the pros and cons of each method, I hope i could post back and give an update on my progress later on. I really appreciate your help as this example is really teaching me alot, Thankyou again and all the best! – Sameer Ali Nov 20 '16 at 8:48
  • You're welcome, look forward to your update @SameerAli – birgire Nov 20 '16 at 10:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.