Notifications
Clear all

Script Add "Recent Forum Posts" where you want it

2 Posts
2 Users
1 Reactions
18 Views
Posts: 6
Topic starter
(@pablo)
Active Member
Joined: 8 months ago

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>
1 Reply
Sofy
Posts: 5116
 Sofy
Admin
(@sofy)
Support Team
Joined: 7 years ago

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. 

Reply