Contribute to the development of SMF. Follow the coding discussions taking place on >> Github.

Simple Recent Topics Block

Mick in Tutorials
Aug 30, 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:
Code: [Select]
  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,
Code: [Select]
	$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:
Code: [Select]
	// Output any remaining HTML headers. (from mods, maybe?)
echo $context['html_headers'];

echo '

Add after:
Code: [Select]
		  <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:
Code: [Select]
  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

Tagged with: recent topics smf ssi css 

Share This Post

Mick

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 and has a weakness for Tacos and Pizza.

    


7 Comments

chrishicks
Sep 14, 2018
I really like this look and was wondering if it's possible to have something like this for recent posts as well? Thanks.
1

Mick
Sep 14, 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

Mick
Sep 14, 2018
Try this, I really don't like it but here you go. Replace the 10 with the amount of recent posts.

Code: [Select]
$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

lurkalot
Sep 16, 2018
These are neat block codes, thanks for sharing them.  :wink:
4

Mick
Sep 16, 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

lurkalot
Sep 16, 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

Mick
Sep 16, 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



Connect with us:


Improve SMF

If you wish to contribute to the development of SMF you can contribute to the coding discussions taking place on Github. You are also welcome to suggest features which you would like to see added to the software in the Feature Requests board.




go up