I always wanted to show the recent forum posts in any position on my website, so i discussed that problem with chatgpt, because wpforo software only allows that in sidebar widget.
So i share my discussion and output in chatgpt with u. It uses the rss feed to fetch the recent posts. Comments in code are in german, translate them with chatgpt or use google translator. the following code is only displayed when a user is logged in (this was my restriction, but it is easy to remove that restriction) and only when the button is clicked.
make sure u change "const url = 'https://YOURURL.TLD/?type=rss2&forum=g&topic=g';"
To use the following code within wordpress, use "html code" widget.
<div id="rss-container-wrapper" style="display: none;"> <style> #load-button { display: block; margin: 0 auto; padding: 10px 20px; font-size: 16px; cursor: pointer; } #rss-container { display: none; margin-top: 20px; } #rss-feed { list-style-type: none; padding: 0; } #rss-feed li { margin-bottom: 10px; } </style> <button id="load-button">Display recent posts</button> <div class="container" id="rss-container"> <ul id="rss-feed"></ul> </div> <script> document.addEventListener("DOMContentLoaded", function() { const isLoggedIn = document.body.classList.contains("logged-in"); if (isLoggedIn) { // Nur anzeigen, wenn der Benutzer eingeloggt ist document.getElementById("rss-container-wrapper").style.display = "block"; document.getElementById("load-button").addEventListener("click", function() { const rssContainer = document.getElementById("rss-container"); // Toggle der Anzeige des RSS-Containers if (rssContainer.style.display === "none" || rssContainer.style.display === "") { // Den Button-Text ändern, wenn der Container sichtbar ist this.textContent = "Hide"; // Den RSS-Container anzeigen und die Daten laden rssContainer.style.display = "block"; fetchRSS(); } else { // Den Button-Text zurückändern, wenn der Container verborgen wird this.textContent = "Display recent posts"; // Den RSS-Container ausblenden rssContainer.style.display = "none"; } }); } }); async function fetchRSS() { const url = 'https://YOURURL.TLD/?type=rss2&forum=g&topic=g'; // URL des RSS-Feeds try { const response = await fetch(url); const text = await response.text(); const parser = new DOMParser(); const xml = parser.parseFromString(text, "text/xml"); const items = xml.querySelectorAll("item"); let html = ""; items.forEach((item, index) => { if (index < 15) { const title = item.querySelector("title").textContent; const link = item.querySelector("link").textContent; const date = new Date(item.querySelector("pubDate").textContent); const description = item.querySelector("description")?.textContent || "Keine Vorschau verfügbar."; // Hier wird der Autor korrekt aus dem <dc:creator> Tag extrahiert const author = item.querySelector("creator") ? item.querySelector("creator").textContent : "Unbekannt"; html += ` <li> <a href="${link}">${title}</a> <br><small>Autor: ${author}</small> <br><small>${date.toLocaleString("de-DE")}</small> <br><p class="excerpt">${description}</p> </li>`; } }); document.getElementById("rss-feed").innerHTML = html; } catch (error) { console.error("Fehler beim Laden des RSS Feeds", error); document.getElementById("rss-feed").innerHTML = "Fehler beim Laden der Daten."; } } </script> </div>
Hi,
Please read this support topic: https://wpforo.com/community/how-to-and-troubleshooting-2/displaying-latest-forum-posts-on-websites-home-page/paged/2/#post-104627
The same question is discussed there.