How to Get Your Blog Articles to Show on Your Web Site

Jim Dee
Jim Dee
Nov 26, 2019 · 5 min read

Turn your RSS feed into a visual, automatically-updated feed on your web site.

The above photo is a screen-grab from the bottom of my web site. It shows the 9 most recent articles from this publication (Web Designer / Web Developer Magazine). Want something like that on your web site as well? It’s not terribly tough to do, so long as you can pop some PHP code onto your web site. Let’s dig in.

To start, we’re going to make the following assumptions:

  • You have a account where you do your blogging;
  • You have your own publication here on;

Instead of using my own site as an example, let’s pick another, just to show that this will work on any normal Medium publication. The largest active publication is, reportedly, The Startup, at

So, the first thing we need is to identify the FEED. I happen to already know that, if you insert “feed/” just after in the URL, that’s the feed. But, we can also look at the source code of their page to see it:

Their feed is:

Thus, your publication’s feed can be found or constructed in the same manner. Look for it in the “view source” (available by right-clicking on your publication home page and clicking “view source”) or just add a “feed/” just before the part of your URL that is normally there. E.g.:[publication alias]

Now, if we want to first simply fetch some data and dump it onto the screen to analyze before parsing out, we could do something like this:

$feedURL = '';
$apiEndpoint = '';
$feedData = json_decode( file_get_contents($apiEndpoint . urlencode($feedURL)) , true );

And, that’ll get us some data to begin working with. It should look like this (though this grab is clipped a bit):

By default, this one seems to show 10 items. I don’t know if there is any way to request more. But, 10 will do. In fact, as the screen-grab atop this piece shows, I use just 9 items myself for this little promo area.

Note, of course, that you’re going to need to be able to run PHP code in whatever place you put this on your site. If that’s an issue for you, perhaps also check out this article:

I tried to clean-up my own code for this a bit, to make it easier for others to customize. Here’s the code:

// ------------------
$configs_desiredPhotoWidth = 350;
// use pixels (Note: desired height should go into the CSS, as publications can often sent over varying-height pics, and that'll throw off the look. So, I like to constrain all to a specific height.
$configs_numStoriesPerRow = 3;
// # of stories you want in each row.
$configs_maxStories = 9;
// the # of stories you want to pull (max 10, I believe).
$configs_feedURL = '';
// Note: Try it both with and without the ending slash, as that tends to have an effect, in my testing.
// NB: There would be many ways to get and parse / decode this data. Shown here is one simple way.
// ------------------
$apiEndpoint = '';
$feedData = json_decode( file_get_contents($apiEndpoint . urlencode($configs_feedURL)) , true );
echo '<style> .mediumFeedContainer { display: table; max-width: 1200px; } .mediumFeedRow { display: table-row; } .mediumFeedCell { width: 30%; padding: 10px; display: table-cell; } .mediumFeedCell img { width: 100%; height: 175px; } </style>';// OPTIONAL: Put the above CSS either here or in an already-loaded CSS file. Note that, depending on the # of stories you're going to show in a row, you'll want to adjust the .mediumFeedCell width to something appropriate (eg 2 stories, 50%, 4 stories, 25%, etc.). Same with the heights, as noted above.if ($feedData['status'] == 'ok') {$rowCount = 1;
$storyCount =0;
$theHTML = '<div class="mediumFeedContainer">';foreach ($feedData['items'] as $feedItem) {

if ($storyCount == $configs_maxStories) { break; }

$thisItem_title = $feedItem['title'];
$thisItem_title = str_replace('$','&#36;',$thisItem_title);

$thisItem_link = $feedItem['link'];

$thisItem_image = $feedItem['thumbnail'];
$thisItem_image = preg_replace('~/max/[^/]*~','/max/'.$configs_desiredPhotoWidth,$thisItem_image);

if ($rowCount == 1) { $theHTML .= '<div class="mediumFeedRow">'; }

$theHTML .= '<div class="mediumFeedCell">';

$theHTML .= '<a href="'. $thisItem_link. '" target="_blank">';

$theHTML .= '<img src="' .$thisItem_image. '" title="'.$thisItem_title .'" alt="'.$thisItem_title .'">';

$theHTML .= '</a>';

$theHTML .= '<h4><a href="'.$thisItem_link. '" target="_blank" title="'. $thisItem_title .'">' . $thisItem_title . '</a></h4>';

$theHTML .= '</div>';

$rowCount ++;

if ($rowCount > $configs_numStoriesPerRow) {

$theHTML .= '</div><div class="clear"></div>';

$rowCount = 1;


if ( $storyCount == $configs_maxStories and $rowCount <= $configs_numStoriesPerRow) { $theHTML .= '</div>'; }}$theHTML .= '</div>';

echo $theHTML;

} else {
echo "</p>Check back for articles to be posted here.</p>";}

Basically, the above should provide a framework to build upon. Almost certainly, you’ll want to add some custom CSS to style things according to your site’s look and feel. I tried to code the above so that most areas are self-explanatory enough so that you can easily add any markup needed (e.g., on my site, I added in some hover effects for when users hover over the images).

Hope this helps some people. :-)

✍🏻 Jim Dee maintains his personal blog, “Hawthorne Crow,” and a web design blog, “Web Designer | Web Developer Magazine.” He also contributes to various publications. Find him at, his Amazon Author page, Facebook, Twitter, Instagram, LinkedIn, Medium, or via email at Jim [at] His latest novel, CHROO, is available on If you enjoy humorous literary tales, please grab a copy!

Web Designer / Web Developer Magazine

WDWD Magazine features articles on web site design / development, internet marketing, social media, SEO, and topics like marketing, communications, business development, etc. Editor: Jim Dee of Array Web Development —

Jim Dee

Written by

Jim Dee

Web guy at; author of books & blogs. See:

Web Designer / Web Developer Magazine

WDWD Magazine features articles on web site design / development, internet marketing, social media, SEO, and topics like marketing, communications, business development, etc. Editor: Jim Dee of Array Web Development —

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade