Latest Flarum Discussion Widget for Wordpress

AdmiralJuicy

Hello everyone! 😊

I’m currently in love with Flarum, and I’ve integrated it into the main forum on my website!

I also created a plugin for WordPress that displays the 5 latest discussions from the Flarum forum in a widget right on the site. I wanted to share the code in case anyone else wants to do something similar!

The widget shows the Discussion Title, User’s Avatar, Nickname, and Date it was posted. You can click the Nickname to visit the user's profile and click the Date to jump straight to the latest post in the discussion!

Here’s the code:

<?php
/**
 * Plugin Name: Flarum Latest Discussion Widget
 * Description: Displays the latest discussion from your Flarum forum across all tags.
 * Version: 1.1
 * Author: Sonic City
 */

class Flarum_Latest_Discussion_Widget extends WP_Widget {

    public function __construct() {
        parent::__construct(
            'flarum_latest_discussion_widget',
            __('Flarum Latest Discussion', 'text_domain'),
            array('description' => __('Displays the latest discussion from your Flarum forum across all tags.', 'text_domain'))
        );
    }

public function widget($args, $instance) {
    // Widget output
    echo $args['before_widget'];

    $title = apply_filters('widget_title', $instance['title'] ?? 'Latest Discussions');
    if (!empty($title)) {
        echo $args['before_title'] . $title . $args['after_title'];
    }

    // Fetch the latest discussions from Flarum API
    $flarum_url = 'https://sonic-city.net/forum/public/api/discussions';
    $response = wp_remote_get($flarum_url);

    if (is_wp_error($response)) {
        echo __('Could not fetch data from Flarum.', 'text_domain');
    } else {
        $body = wp_remote_retrieve_body($response);
        $data = json_decode($body, true);

        if (!empty($data['data'])) {
            echo '<ul style="list-style: none; padding: 0;">';

            // Limit to 5 discussions
            $discussions = array_slice($data['data'], 0, 5);

            foreach ($discussions as $discussion) {
                $title = $discussion['attributes']['title'];
                $discussion_id = $discussion['id'];
                $discussion_url = 'https://sonic-city.net/forum/public/d/' . $discussion_id;
                $last_reply_url = $discussion_url . '/' . $discussion['attributes']['lastPostNumber'];
                $time = date('M d, Y H:i', strtotime($discussion['attributes']['createdAt']));

                // Get the user ID of the poster
                $poster_id = $discussion['relationships']['user']['data']['id'];
                $poster = $data['included'][array_search($poster_id, array_column($data['included'], 'id'))];
                $nickname = $poster['attributes']['displayName'] ?? $poster['attributes']['username'];
                $username = $poster['attributes']['username'];
                $profile_url = 'https://sonic-city.net/forum/public/u/' . $username;
                $avatar_url = $poster['attributes']['avatarUrl'] ?? 'https://via.placeholder.com/40';

                // Display each discussion
                echo "<li style='margin-bottom: 15px; display: flex; align-items: center;'>";
                echo "<img src='" . esc_url($avatar_url) . "' alt='" . esc_attr($nickname) . "' style='width: 40px; height: 40px; border-radius: 50%; margin-right: 10px;'>";
                echo "<div>";
                echo "<a href='" . esc_url($discussion_url) . "' target='_blank' style='font-weight: bold;'>" . esc_html($title) . "</a><br>";
                echo "<span style='font-size: 0.9em; color: #555;'>By <a href='" . esc_url($profile_url) . "' target='_blank' style='color: #0073aa;'>" . esc_html($nickname) . "</a> | ";
                echo "<a href='" . esc_url($last_reply_url) . "' target='_blank' style='color: #0073aa;'>" . esc_html($time) . "</a>";
                echo "</span>";
                echo "</div>";
                echo "</li>";
            }

            echo '</ul>';
        } else {
            echo __('No discussions available.', 'text_domain');
        }
    }

    echo $args['after_widget'];
}


    public function form($instance) {
        // Admin form for widget options
        $title = $instance['title'] ?? 'Latest Discussion';
        ?>
        <p>
            <label for="<?php echo esc_attr($this->get_field_id('title')); ?>"><?php _e('Title:'); ?></label>
            <input class="widefat" id="<?php echo esc_attr($this->get_field_id('title')); ?>" name="<?php echo esc_attr($this->get_field_name('title')); ?>" type="text" value="<?php echo esc_attr($title); ?>">
        </p>
        <?php
    }

    public function update($new_instance, $old_instance) {
        $instance = array();
        $instance['title'] = (!empty($new_instance['title'])) ? strip_tags($new_instance['title']) : '';
        return $instance;
    }
}

// Register the widget
function register_flarum_latest_discussion_widget() {
    register_widget('Flarum_Latest_Discussion_Widget');
}
add_action('widgets_init', 'register_flarum_latest_discussion_widget');

NOTE:

Be sure to change: https://sonic-city.net/forum/public/ to your own Flarum forum’s URL.

To use it, just create a file in your preferred text editor, save it as “Flarum Latest Discussion Widget.php” (or any name you prefer), and upload it to your plugin folder in your WordPress installation.

You can see it in action here: https://sonic-city.net/

Hope this helps some of you!

luceos

AdmiralJuicy thanks for this little snippet. I've moved it toResources as it's not an actual Flarum extension.

AdmiralJuicy

luceos I wasn't sure where to post it, so thank you!

clarkwinkelmann

Some remarks on the code itself:

You should use attributes.slug for the URL paths (both /d/{slug}/{lastPostNumber} and /u/{slug}), this way it will work with any slugger driver a forum admin selects in the settings.
relationships.user.data can be NULL. Your code will throw a PHP Warning when trying to access the id property, and more warnings when $poster returns empty on the following lines.
I was intrigued by the use of single quotes, but it seems to be safe as esc_attr() says it encodes them in the WP documentation (there could be quotes in the nickname attribute).

Some remarks on performance:

If you are only going to display 5 discussions, you should limit the API request to 5 results to reduce the response size and improve the database query speed: /api/discussions?page[limit]=5
It would be better for the website visitors to cache the data when retrieved server-side, or consider loading the data client-side so it can be asynchronous. A synchronous background request during page generation could significantly degrade the performance of WordPress. I guess you could use other WP plugins to implement widget caching without having to modify this code.

And finally, if you see /public/ in your forum URL, you have misconfigured your Flarum and might be vulnerable to remote code execution. Make sure you configure your forum URL properly https://docs.flarum.org/install#customizing-paths