Tutorials Themes Mods Inspiration Collections Theme Store Mod Store SMF HTML CSS geek Dani UX jane Lifestyle LimeStone

Simple Recent Topics Block

Written by Mick in Tutorials on 30 Aug 2018



Let's create a very simple recent topics block using SMF's own SSi function without modifying the SSI.php file. In this tutorial we're going to add several boards with the last five recent topics.




In this demo, I'm using a bit of styling to make it look pretty but the code below it's in raw form. I'll provide the full stylized code as well. I'm also using 3 boards with the last 5 topics created from Themes, Mods and Tutorial boards. You can change this and add as many boards as you want and add as many recent topics as you want.

Create a PHP block using your favorite portal and add the following:

  echo '

   <br />';

$array = ssi_boardNews(16.0, 5, null, 250, 'array');

  echo '

         <div align="Left"><h2>Tutorials</h2></div>';

foreach ($array as $news)
{
echo '
<div align="left"><a href="', $news['href'], '">', $news['subject'], '</a></div>';

}

  echo '

<br />';

$array = ssi_boardNews(15.0, 5, null, 250, 'array');

  echo '

         <div align="Left"><h2>Plugins</h2></div>';

foreach ($array as $news)
{
echo '
<div align="left"><a href="', $news['href'], '">', $news['subject'], '</a></div>';

}

  echo '

<br />';

$array = ssi_boardNews(74.0, 5, null, 250, 'array');

  echo '

         <div align="Left"><h2>Themes</h2></div>';

foreach ($array as $news)
{
echo '
<div align="left"><a href="', $news['href'], '">', $news['subject'], '</a></div>';

}

  echo '

<br />';



What needs to be changed to suit your needs... for example,
$array = ssi_boardNews(16.0, 5, null, 250, 'array');

*The 16.0 is the board number, you can find the board number by hovering over the board name with your cursor and see it in the top or bottom of your browser.

*The 5 is the number of recent topics, you can change this to a different value. Like 10 or 15.

* The 250 is the length of the title, you can change this to 300 if your titles are very long.

* Make sure you change the category names with your own inside the <h2> brackets.



The next code is the same but with some icons.


It's totally up to you to stylize it. I use icons from Font Awesome and to use this, simply add this line to your index.template.php

Find:
// Output any remaining HTML headers. (from mods, maybe?)
echo $context['html_headers'];

echo '


Add after:
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous" />

Stylized code:

  echo '

   <br />';

$array = ssi_boardNews(16.0, 5, null, 250, 'array');

  echo '

         <div align="Left"><h2><i class="fas fa-caret-right"></i>  Tutorials</h2></div>';

foreach ($array as $news)
{
echo '
<div align="left"><a href="', $news['href'], '">', $news['subject'], '</a></div>';

}

  echo '

<br />';

$array = ssi_boardNews(15.0, 5, null, 250, 'array');

  echo '

         <div align="Left"><h2><i class="fas fa-caret-right"></i>  Plugins</h2></div>';

foreach ($array as $news)
{
echo '
<div align="left"><a href="', $news['href'], '">', $news['subject'], '</a></div>';

}

  echo '

<br />';

$array = ssi_boardNews(74.0, 5, null, 250, 'array');

  echo '

         <div align="Left"><h2><i class="fas fa-caret-right"></i>  Themes</h2></div>';

foreach ($array as $news)
{
echo '
<div align="left"><a href="', $news['href'], '">', $news['subject'], '</a></div>';

}

  echo '

<br />';



Replace:  <i class="fas fa-caret-right"> with your icon of choice found here Font Awesome Icons

Reference: Advanced SSI
Icons used: Font Awesome Icons
Mick

is an American theme designer for Simple Machines Forum software currently living in South Florida, USA. He runs idesignSMF and started tinkering with SMF in 2006 where he created several SMF forums of his own before he founded idesignSMF in 2009 to which he is dedicated full time.


12 Comments

I really like this look and was wondering if it's possible to have something like this for recent posts as well? Thanks.
#1
Quote from: chrishicks on 14 Sep 2018
I really like this look and was wondering if it's possible to have something like this for recent posts as well? Thanks.
Yeah, I can make something like that too. Mind you, I'm not keen on recent posts, meaning replies right? The reason is, when having it set to 5 or 10 replies, you'll have 5 or 10 replies of the same topic. Let me check with the SSI page and write something up.
#2
Try this, I really don't like it but here you go. Replace the 10 with the amount of recent posts.


$array = ssi_recentPosts(10, null, null, 250, 'array');

  echo '

    <h2>Recent Posts</h2>
              <br />';

    foreach ($array as $news)
    {

  echo '
   <div align="left"><a href="', $news['href'], '">' . str_ireplace('Re: ', '', $news['subject']), '</a></div>';

    }
#3
These are neat block codes, thanks for sharing them.  :wink:
#4
Quote from: lurkalot on 16 Sep 2018
These are neat block codes, thanks for sharing them.  :wink:
Thanx Mick. I've been studying the SSI function lately and how to customize it. This is the best feature SMF has and not everyone knows how to use it let alone style it.  :tongue:
#5
Quote from: Mick on 16 Sep 2018
not everyone knows how to use it let alone style it.  :tongue:

Yes, that'll be me lol..   I do learn a lot from looking at the way you use it though, thanks.
#6
Quote from: lurkalot on 16 Sep 2018
Yes, that'll be me lol..   I do learn a lot from looking at the way you use it though, thanks.
I read a lot at SMF, I find myself searching a lot too lol.
#7
Hi, this is a very helpful post. Thank you for sharing.
One question:
How do we show the Recent Topics from all boards, not from a specific board?
Thanks
#8
Quote from: Arslan Abdurazik on 14 Feb 2019
Hi, this is a very helpful post. Thank you for sharing.
One question:
How do we show the Recent Topics from all boards, not from a specific board?
Thanks
Assuming you're using a portal, I think these portals have that code out of the box. Just create a block and select Recent Topics. It will show the latest.


Or use this generic code... Create a PHP block and add this code...
global $scripturl;

     echo '

        <h3>Recent topics</h3> ';
            $what=ssi_recentTopics('5', NULL, 'array');

               foreach ($what as $topic)
           {
     echo '
               <div align="left">', $topic['link'],'</div>';
           }
#9
Hi Mick,
Thanks for your quick response.
How do we control the length of the title using ssi_recentTopics?
ssi_recentTopics is also showing the recent posts/replies in the list. I want to list Topics only.
How do we exclude the recent post/reply from ssi_recentTopics list?
#10
Quote from: Arslan Abdurazik on 15 Feb 2019
Hi Mick,
Thanks for your quick response.
How do we control the length of the title using ssi_recentTopics?
ssi_recentTopics is also showing the recent posts/replies in the list. I want to list Topics only.
How do we exclude the recent post/reply from ssi_recentTopics list?
Let me take another look. I'll get back to you today
#11
@Arslan Abdurazik try this,

  echo '

   <br />';

    $array = ssi_recentTopics( 5, null, null, 'array');

  echo '

         <h2><i class="fas fa-caret-right"></i>  Recent Topics</h2>';

    foreach ($array as $news)
    {
        echo '
            <div align="left"><a href="', $news['href'], '">', $news['subject'], '</a></div>';

    }


Replace the 5 with the amount of topics. 10, 15, 20
#12

Get more stuff like this