Display XML data on your Webpage

Display XML data on your Webpage

Many wordpress developers and also others have a need for this, there are many solution, plugin etc., however these did not suit my requirements and hence the following is my solution using PHP.. ( Note: I am hot linking and using the RSS feed; Hot Linking is not approved by many sites).

<?php
    $data = "";
    // $xml = simplexml_load_file("http://tskamath.pactindia.net/feed/rss2/");
    // $xml = file_get_contents("http://tskamath.pactindia.net/feed/");
    // understand the wordpress default RSS Feed read http://codex.wordpress.org/WordPress_Feeds
    $xml = simplexml_load_file ("http://tskamath.pactindia.net/category/technology/feed");
    // echo $data;
    echo "<h1>List of Blogs</h1>";
        // get the number of items 
        // open the link in your browser http://tskamath.pactindia.net/category/technology/feed
        // understand the xml layout.. in my case <channel><item></item><item></item>...<item></item></channel>
        // get the count of items
    $cnt = $xml->channel->item->count();
    // get the data & perepare the output
    $data .= "
    "; for ($i = 0; $i channel->item[$i]->title; $link = $xml->channel->item[$i]->link; // ucword converts to title Case; not a perfect converstion but will do for me $data .= "
  • " . ucwords($title) . "
  • "; } $data .= "
"; echo $data; ?>

I have also used CSS to Style the Same..

/* for Tut List */

.tut {
 width: 100%;
 /* border-right: 1px solid #000; */
 padding: 0 0 1em 0;
 margin-bottom: 1em;
 font-family: 'Trebuchet MS', 'Lucida Grande',
   Verdana, Lucida, Geneva, Helvetica, 
   Arial, sans-serif;
 /* background-color: #90bade; */
 background-color: #FCFCFC;
 color: #333;
}

.tut ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border: none;
}
  
.tut li {
  /* border-bottom: 1px solid #90bade; */
  border-bottom: 1px solid #FCFCFC;
  margin: 0;
}

.tut li a {
  display: block;
  padding: 5px 5px 5px 0.5em;
  border-left: 10px solid #A5A5A5;
  border-right: 10px solid #A5A5A5;
  /* background-color: #2175bc; */
  background-color: #8E8E8E;
  color: #fff;
  text-decoration: none;
  width: 100%;
  } html>body 

.tut li a {
  width: auto;
} 

.tut li a:hover {
  border-left: 10px solid #8E8E8E;
  border-right: 10px solid #8E8E8E;
  /* background-color: #2586d7; */
  background-color: #A5A5A5;
  color: #fff;
}

Leave a comment