Adding Publishing Dates to Suffusion List Layout

Dec 122013

Posted by Ciprian on 12/12/2013 How-To's Tagged with: List Layout, Publishing Date, Suffusion, template, WordPress Codex Add comments

The default Suffusion list layout for categories, tags or other aggregate pages is just an unordered list of post titles without anything else. But sometimes is needed to add more information’s, usually the date of publishing.

The solution is simple and the goal can be achieved with a new template. Better is to use a child theme – by editing templates in child theme is safer than editing the theme core files, but most important, your templates will be preserved and will continue to work in case of theme updates. See this post for making a child theme in practically no time. After creating your child theme follow the next easy steps:

Step. 1. Create a /layouts/ subfolder under your child theme folder.

Step. 2. Copy layout-list.php from /suffusion/layouts/ folder to your child theme /layouts/ subfolder.

Step. 3. Edit the copy and look for the loop which generate the list markup (somewhere close to the end of file):

<section class='post <?php echo $class; ?> fix'>
      <div class="entry fix">
<?php
   }
   if ($total > 0) {
      echo "<$suf_excerpt_list_style>\n";
      while (have_posts()) {
         the_post();
         if (in_array($post->ID, $suffusion_duplicate_posts)) {
            continue;
         }
         echo "<li>";
         echo suffusion_get_post_title_and_link();
         echo "</li>\n";
      }
      echo "</$suf_excerpt_list_style>\n";
?>
      </div> <!-- /.entry -->
   </section> <!-- /.post -->

}

if ($total > 0) {

echo "<$suf_excerpt_list_style>\n";

while (have_posts()) {

the_post();

if (in_array($post->ID, $suffusion_duplicate_posts)) {

continue;

}

echo "

echo suffusion_get_post_title_and_link();

echo "\n";

}

echo "\n";

</div>

</section>

Inside the <li> tag which surround the title of post, immediately after echo suffusion_get_post_title_and_link(); add a new function: echo “ ” . get_the_date($d); – so the entire <li> tag will look as:

         echo "<li>";
         echo suffusion_get_post_title_and_link();
         echo " ".get_the_date($d);
         echo "</li>\n";

echo "

echo suffusion_get_post_title_and_link();

echo " ".get_the_date($d);

echo "\n";

Step. 4. Save the file.

Step. 5. Done. Can select the list layout, now with dates, at Suffusion Options -> Layouts -> each view of aggregate pages (Category Views, Tag Views etc.).

Can download the modified template (and upload it into /layouts/ subfolder on your site) from here: Download the new layout-list.php template

Of course, instead of get_the_date() function can use any of WordPress functions for retrieving dates and not only dates (look at the end of Codex page for related functions).

The above solution was also published in reply to a question of an user on the Suffusion Support forum, but I put here also for further reference and to be easier to retrieve it.

https://drafie-design.nl/adding-publishing-dates-to-suffusion-list-layout/trackback/Trackback URI:

Ciprian

Experienced web developer and graphic designer. Former consultant for Suffusion theme and former moderator on Suffusion Support forum. I teach others while learning myself.

Google+ Profile

Google+ Page

This site uses Akismet to reduce spam. Learn how your comment data is processed.

7 Responses to “Adding Publishing Dates to Suffusion List Layout”

Comments (7)

No problem Tuan, anytime. For more informations/help with Suffusion theme can visit Suffusion Support Forum

There I write many times about how to set the theme to be responsive, but maybe next days I will write a short article about this here, to summarize those posts from forum.

Drake

28/04/2014 at 08:54
Thanks for your great help. I am very appriciate about it 🙂

By, the way, can you have a post about config the suffusion theme for responsive ?

Thanks 🙂

Tuan

28/04/2014 at 06:49
Hi Tuan, thanks for visit.

Actually is not so hard to obtain what you want. Inside the “li” tags as is showed in the article, you can “echo” any markup you want. By eg., for fulfilling your request can change the second code from my article with:

echo "<li>"; echo '<div class="list-title" style="width:70%;float:left">'.suffusion_get_post_title_and_link().'</div>'; echo '<div class="list-date" style="width:30%;float:right;">'.get_the_date($d).'</div>'; echo "</li>n";

1
2
3
4

echo "
";
echo '
'.suffusion_get_post_title_and_link().'
';
echo '
'.get_the_date($d).'
';
echo "n";

You can play with widths of those div’s, you can take out completely the inline styles and add your own styles at Custom Styles for .list-title and .list-date classes.

Drake

25/04/2014 at 10:43
Hi, Drake,

Thanks for your post.

I have a question about how to set the date in the right of page? ( like my demo picture )
[img]http://s28.postimg.org/uy9c93z99/Untitled.png[/img]

Thanks

Tuan

25/04/2014 at 07:36
Thanks a lot mate, it works

Bram

13/12/2013 at 13:29
This is the tutorial what i am looking for, thanks for sharing this

but, i have a questions about this tutorial
i have a website with suffusion template and set all the display setting in categories, front blog, pages, tags, authors, and archives as a “display-list” and i want to change publishing dates position move from after post-title to before post-title.

my question is:
i just moving the publishing dates position to before the post-title by moving this function: echo “ ” . get_the_date($d); —-> to above of this fuction: echo suffusion_get_post_title_and_link();
but the publishing dates position moved to before icon image category, i want publishing dates position after; the icon image and before; post title & link. im also using category icons lite as my “category icon image” plugin.

Bram

13/12/2013 at 12:05
Is easy to obtain what you wish. Need only few minor changes.

1

is needed for adding some space between date and additional elements, so, add the function for date above the function for title as:

echo " " . get_the_date($d) . " "; echo suffusion_get_post_title_and_link();

1
2

echo " " . get_the_date($d) . " ";
echo suffusion_get_post_title_and_link();

Now, at Suffusion Options -> Backend -> Custom Includes -> Custom Styles can add:

img.caticonslite_bm {float:left;margin-top:5px;}

1

img.caticonslite_bm {float:left;margin-top:5px;}

(can adjust the value of 5px until the icon is vertically aligned)

Drake

13/12/2013 at 13:02

Ciprian

Leave a Reply

7 Responses to “Adding Publishing Dates to Suffusion List Layout”