Search code examples
apitumblrposts

Tumblr blog: how to add a list of all posts sorted by dates


I'm customizing a Tumblr blog and I cannot find a good way to access all the posts by date. Tumblr allows you to display a particular post from a day using their Day Pages, but I want to find all posts and their dates, and then display them as a list sub-divided by months and years (really, it's like Wordpress's default sidebar). See example image here: https://i.sstatic.net/28gGH.png

I've been looking through Tumblr's Custom Theme Documentation but have not found a way to generate this information. Perhaps they offer it through their API? I haven't found anything yet.

I appreciate any direction here. Thanks.


Solution

  • I found the best way to do it is by pulling it from your blog's own RSS feed. Add this code after jquery has been included:

    <script>
      $(function() {
        var url = '/rss';
        var $list = $('#recent-posts');
        $.ajax({
            url: url,
            type: 'GET',
            dataType: 'xml',
            success: function(data) {                
                var $items = $(data).find('item');
                $items.each( function() {
                    var $item = $(this);
                    var link = $item.children('link').text();
                    var title = $item.children('title').text();
                    if (link && title) {
                        $list.append($('<li><a href="' + link + '">' + title + '</a></li>'));
                    }
                });
              }
          });
      });
    </script>
    

    It will go out and make a list of ALL blog posts, if you want to limit it so a certain number of posts you can check the index value passed into the $items.each() functions: http://api.jquery.com/jquery.each/

    Also make sure to include the list in your sidebar:

    <!-- RECENT POSTS -->
      <ul id="recent-posts"></ul>
    <!-- RECENT POSTS -->
    

    Note: the list will probably not appear in preview mode, only once you save your changes and go to the live blog, will it be able to pull from /rss