How to display the latest updates of Memos on the WordPress homepage

Preparation#

Make sure WordPress is installed and a suitable theme is enabled: for example, my theme is suitable for most WordPress themes.

Obtain the RSS subscription address for Memos: for instance, my link is https://memos.duanxiansen.com/u/1/rss.xml, replace it with your actual Memos RSS link.

Write a function to get the latest updates from Memos#

You need to write a function that uses WordPress's wp_remote_get() function to fetch data from the RSS link and parse the latest update.

First, open the functions.php file in your WordPress theme directory and add the following code:

// Get the latest update from Memos and display it
function display_latest_memo() {
    // Fetch RSS data using wp_remote_get
    $response = wp_remote_get('https://memos.duanxiansen.com/u/1/rss.xml'); // Replace with your Memos RSS URL
    if (is_wp_error($response)) {
        return 'Unable to fetch Memos data';
    }

    // Get the body content of the response
    $body = wp_remote_retrieve_body($response);

    // Parse the RSS data as XML
    $data = simplexml_load_string($body);

    // Check if the returned data is empty
    if (empty($data) || !isset($data->channel->item[0])) {
        return 'No latest Memos updates found';
    }

    // Get the latest update
    $latest_memo = $data->channel->item[0];

    // Convert the time from RSS to WordPress timezone
    $rss_date = (string)$latest_memo->pubDate; // Get the publication time from RSS

    // Create a DateTime object and set it to the RSS time
    $date = new DateTime($rss_date);

    // Convert the time to WordPress timezone
    $date->setTimezone(new DateTimeZone(get_option('timezone_string')));

    // Format the time to Y-m-d H:i:s format
    $formatted_date = $date->format('Y-m-d H:i:s');

    // Get the description content (usually the main content of the update)
    $content = (string)$latest_memo->description;

    // Limit the number of characters (e.g., display up to 300 characters)
    $excerpt = mb_substr($content, 0, 300);
    if (mb_strlen($content) > 300) {
        $excerpt .= '... <a href="' . esc_url($latest_memo->link) . '" target="_blank">Read more</a>'; // Link to the original text
    } else {
        $excerpt .= ' <a href="' . esc_url($latest_memo->link) . '" target="_blank">View original</a>'; // If the text is shorter, display "View original"
    }

    // Output the latest update's content, time, and link
    $output = '<div class="latest-memo memos-center">';
    $output .= '<h3>Latest Update:</h3>';
    $output .= '<p>' . $excerpt . '</p>';
    $output .= '<p>Time: ' . esc_html($formatted_date) . '</p>';
    $output .= '</div>';

    return $output;
}

// Create a shortcode to display the latest Memos update
add_shortcode('latest_memo', 'display_latest_memo');

Display the latest updates on the homepage#

Next, to make the latest Memos updates display only at the top of the homepage articles, you need to modify the header.php or index.php file to call the defined shortcode under the homepage condition.

Open the header.php file in the theme directory, find an appropriate location (such as the header template section), and insert the following code:

<!-- Display the latest Memos updates on the homepage -->
<?php if ( is_home() || is_front_page() ) : ?>
    <div class="memos-latest">
        <?php echo do_shortcode('[latest_memo]'); ?>
    </div>
<?php endif; ?>

is_home() and is_front_page(): These two functions ensure that the updates are displayed only on the homepage, while other pages will not show them. is_home() is used to check the blog post list page, and is_front_page() is used to check the custom front homepage.

Style adjustments (center display)#

Add the following CSS code to your theme's style.css file:

.memos-latest {
    text-align: center; /* Center the content horizontally */
    margin: 20px auto; /* Vertical margins and center the container */
    padding: 10px;
    background-color: #f5f5f5; /* Background color */
    max-width: 600px; /* Set the maximum width of the container */
    border-radius: 10px; /* Rounded corners */
}

.memos-latest h3 {
    font-size: 1.5em;
}

.memos-latest p {
    font-size: 1.2em;
}

.memos-latest a {
    text-decoration: none;
    color: #0073aa; /* Link color */
}

Conclusion#

That's it, the imperfection is that you cannot comment directly; you need to click into the memos page to continue improving.