{"id":5497,"date":"2010-05-18T23:24:12","date_gmt":"2010-05-19T06:24:12","guid":{"rendered":"http:\/\/www.shibashake.com\/wordpress-theme\/?p=5497"},"modified":"2013-10-28T22:27:04","modified_gmt":"2013-10-29T05:27:04","slug":"style-your-rss-feeds-in-wordpress","status":"publish","type":"post","link":"https:\/\/shibashake.com\/wp\/style-your-rss-feeds-in-wordpress","title":{"rendered":"Style Your RSS Feeds in WordPress"},"content":{"rendered":"<p>RSS feeds are an important part of any WordPress blog. WordPress now comes with an RSS widget that allows you to display feeds in any widget area. <\/p>\n<p>However, sometimes, you may want to display RSS feeds in the content area of your post. You may also want to change the structure and style of your feeds. <\/p>\n<p>Here we consider how to render and style our own RSS feeds with PHP. <\/p>\n<div class=\"alignspace\"><\/div>\n<h2>1. Get RSS Feed Items<\/h2>\n<p>First off we want to extract items from our RSS feed and render them as HTML elements. Luckily, WordPress already has some built-in functions that allow us to do this.<\/p>\n<p>The function below accepts a feed URL and a list of arguments &#8211; <\/p>\n<ul>\n<li><strong>items_per_page<\/strong> &#8211; Number of RSS items to show per page. A &lt;!nextpage&#8211;> delimiter will be added after every <strong>$items_per_page<\/strong> number of elements.<\/li>\n<li><strong>max_items<\/strong> -Maximum number of items to show from the RSS feed.<\/li>\n<li><strong>desc<\/strong> &#8211; Whether to show the description of the RSS feed items.<\/li>\n<li><strong>desc_length<\/strong> &#8211; The maximum length of each item description.<\/li>\n<li><strong>item_before,item_after<\/strong> &#8211; What HTML to add before and after each RSS item.<\/li>\n<li><strong>title_before,title_after<\/strong> &#8211; What HTML to add before and after each RSS item title.<\/li>\n<li><strong>desc_before,desc_after<\/strong> &#8211; What HTML to add before and after each RSS item description.<\/li>\n<\/ul>\n<p><pre class=\"brush: php; title: ; notranslate\" title=\"\">\r\nfunction render_rss( $url, \r\n\t\t     $args = array(\t&quot;items_per_page&quot; =&gt; 0, &quot;max_items&quot; =&gt; 0, \r\n\t\t\t\t\t&quot;desc&quot; =&gt; false, &quot;desc_length&quot; =&gt; 150,\r\n\t\t\t\t\t&quot;item_before&quot; =&gt; &#039;&lt;div class=&quot;rss-item&quot;&gt;&#039;, &quot;item_after&quot; =&gt; &#039;&lt;\/div&gt;&#039;,\r\n\t\t\t\t\t&quot;title_before&quot; =&gt; &#039;&#039;, &quot;title_after&quot; =&gt; &#039;&#039;,\r\n\t\t\t\t\t&quot;desc_before&quot; =&gt; &#039;&#039;, &quot;desc_after&quot; =&gt; &#039;&#039;)) {\r\n\textract($args);\r\n\t$str = &#039;&#039;;\r\n\r\n\tif (!$url) return &#039;&#039;;    \r\n    \/\/ Get a SimplePie feed object from the specified feed source.\r\n        $rss = fetch_feed($url);\r\n\r\n    \/\/ Figure out how many total items there are, but limit it to 5. \r\n   \tif (!$max_items)\r\n    \t$max_items = $rss-&gt;get_item_quantity(); \r\n\tif ($max_items &lt;= 0) return &#039;&#039;; \r\n\tif (!$items_per_page)\r\n\t\t$items_per_page = $max_items;   \r\n\t\r\n    \/\/ Build an array of all the items, starting with element 0 (first element).\r\n        $rss_items = $rss-&gt;get_items(0, $max_items); \r\n\r\n\t$i = 0;$itemnum = 0;\r\n\tif (!is_array($rss_items) || empty($rss_items)) return $str; \/\/ no items\r\n\telse {\r\n\t\t\/\/ Loop through each feed item and display each item as a hyperlink.\r\n\t\tforeach ( $rss_items as $item ) : \r\n\t\t\t$str .= &quot;{$item_before}\\n&quot;;\r\n\t\t\t$str .= &quot;&lt;a href=&#039;{$item-&gt;get_permalink()}&#039; title=&#039;Posted {$item-&gt;get_date(&#039;j F Y | g:i a&#039;)}&#039;&gt;\\n&quot;;\r\n\t\t\t$str .= &quot;{$title_before}{$item-&gt;get_title()}{$title_after}&lt;\/a&gt;\\n&quot;;\r\n\t\t\t\r\n\t\t\tif ($desc) { \r\n\t\t\t\t$str .= $desc_before . shorten_description($item-&gt;get_description(),$desc_length) . $desc_after . &quot;\\n&quot;;\r\n\t\t\t}\r\n\t\t\t$str .= &quot;{$item_after}\\n&quot;; \r\n\t\t\t$i++;$itemnum++;\r\n\t\t\tif ($i &gt;= $items_per_page) {\r\n\t\t\t\tif ($nextpage &amp;&amp; ($itemnum &lt; $max_items)) { $str .= &quot;&lt; !--nextpage--&gt;&quot;; $i = 0;}\r\n\t\t\t\telse break;\r\n\t\t\t}\r\n\t   endforeach; \r\n   }\r\n   return $str;\r\n}\r\n<\/pre>\n<\/p>\n<p><u>Line 12<\/u> &#8211; Fetches items from an RSS feed and stores it in a SimplePie object. This may <a href=\"http:\/\/www.wptavern.com\/wordpress-rss-parsor-simplepie-ceases-development\">change in the future<\/a>.<br \/>\n<u>Lines 15-19<\/u> &#8211; Get the total number of items in the RSS feed. If the <em>max_items<\/em> argument is undefined, we set it to show all of the items in the feed. If the <em>items_per_page<\/em> argument is undefined, we set it to include all of the RSS items in a single page.<br \/>\n<u>Line 22<\/u> &#8211; Build an array of all the items we want to show from the RSS feed.<br \/>\n<u>Line 25<\/u> &#8211; If we fail to create any feed items, then return an empty string.<br \/>\n<u>Lines 28-42<\/u> &#8211; Generate the proper HTML for each feed item based on our input arguments.<br \/>\n<u>Line 44<\/u> &#8211; Return the generated HTML string.<\/p>\n<div class=\"alignspace\"><\/div>\n<h2>2. Shorten RSS Item Description<\/h2>\n<p>Note that on <u>line 34<\/u> we pass each RSS item description through a <em>shorten_description<\/em> function.<\/p>\n<p><pre class=\"brush: php; title: ; notranslate\" title=\"\">\r\nfunction shorten_description($result, $max_len) {\r\n\t$result = str_replace(&quot;\\n&quot;, &quot; &quot;, $result);\t\r\n\t$result = str_replace(&quot;\\r&quot;, &quot; &quot;, $result);\t\r\n\tif (strlen($result) &gt; $max_len) {\r\n\t\t$end = strpos($result, &#039; &#039;, $max_len);\r\n\t\tif ($end !== FALSE)\r\n\t\t\treturn substr($result, 0, $end) . &quot; [...]&quot;;\r\n\t\telse\r\n\t\t\treturn substr($result, 0, $max_len) . &quot; [...]&quot;;\r\n\t} else\r\n\t\treturn $result;\t\t\r\n}\r\n<\/pre>\n<\/p>\n<p><u>Lines 2-3<\/u> &#8211; Remove line feeds and line breaks from our item descriptions. This ensures that the item descriptions get rendered as a compact paragraph of text.<br \/>\n<u>Lines 4-11<\/u> &#8211; Shorten our feed item descriptions. We ensure that the description is shortened on a word boundary i.e., we do not want to cut the text off in the middle of a word. <\/p>\n<div class=\"alignspace\"><\/div>\n<h2>3. Link Our RSS Feed Functions to a WordPress Shortcode<\/h2>\n<p>Finally we may want to link our RSS feed functions to a WordPress shortcode. This will allow us to enter &#8211; <\/p>\n<pre class=\"aligncenter\">\r\n&#091;rss url=\"http:\/\/feeds.feedburner.com\/shiba-inu\"]\r\n<\/pre>\n<p>And get the following result &#8211;<br \/>\n[rss url=&#8221;http:\/\/feeds.feedburner.com\/shiba-inu&#8221;]<\/p>\n<div class=\"alignspace\"><\/div>\n<p>To add rss as a shortcode, we use the <em><a href=\"http:\/\/codex.wordpress.org\/Shortcode_API\">add_shortcode<\/a><\/em> function.<\/p>\n<p><pre class=\"brush: php; title: ; notranslate\" title=\"\">\r\nfunction rss_shortcode($atts) {\r\n\t$atts = shortcode_atts(array(\t&quot;url&quot; =&gt; &#039;&#039;,\r\n\t\t\t\t\t&quot;items_per_page&quot; =&gt; 0, &quot;max_items&quot; =&gt; 0, \r\n\t\t\t\t\t&quot;desc&quot; =&gt; false, &quot;desc_length&quot; =&gt; 150,\r\n\t\t\t\t\t&quot;item_before&quot; =&gt; &#039;&lt;div class=&quot;rss-item&quot;&gt;&#039;, &quot;item_after&quot; =&gt; &#039;&lt;\/div&gt;&#039;,\r\n\t\t\t\t\t&quot;title_before&quot; =&gt; &#039;&#039;, &quot;title_after&quot; =&gt; &#039;&#039;,\r\n\t\t\t\t\t&quot;desc_before&quot; =&gt; &#039;&#039;, &quot;desc_after&quot; =&gt; &#039;&#039; ),\r\n\t\t\t\t\t$atts);\r\n\treturn render_rss($atts);\r\n\r\n}\r\nadd_shortcode(&#039;rss&#039;, &#039;rss_shortcode&#039;);\r\n<\/pre>\n<\/p>\n<p>Since the default values are now handled by our <em>rss_shortcode<\/em> function we can simplify our <em>render_rss<\/em> function as follows &#8211;<\/p>\n<p><pre class=\"brush: php; title: ; notranslate\" title=\"\">\r\nfunction render_rss($atts) {\r\n\textract($atts);\r\n...\r\n}\r\n<\/pre>\n<\/p>\n<p>Note that the feed URL now gets passed as part of the <strong>$atts<\/strong> attribute array.<\/p>\n<div class=\"alignspace\"><\/div>\n<h2>We Are Done!<\/h2>\n<p>All done! Here is another example rss feed from <a href=\"http:\/\/hubpages.com\/_brec\">HubPages<\/a> &#8211;<\/p>\n<pre class=\"aligncenter\">\r\n&#091;rss url=\"http:\/\/hubpages.com\/author\/shibashake\/best\/?rss\" title_before=\"&lt;h4>\" title_after=\"&lt;\/h4>\" desc=\"TRUE\" max_items=\"5\"]\r\n<\/pre>\n<ul style=\"border:double;padding:10px 30px;list-style-type:disc;background-color:#E1E1E1;\">\n[rss url=&#8221;http:\/\/hubpages.com\/author\/shibashake\/best\/?rss&#8221; title_before=&#8221;<\/p>\n<h4>&#8221; title_after=&#8221;<\/h4>\n<p>&#8221; desc=&#8221;TRUE&#8221; max_items=&#8221;5&#8243;]\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>How to display and style RSS feeds in WordPress.<\/p>\n","protected":false},"author":1,"featured_media":11752,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":""},"categories":[110],"tags":[628,633,629,630,632,631,1168,626,627,573],"_links":{"self":[{"href":"https:\/\/www.shibashake.com\/wp\/wp-json\/wp\/v2\/posts\/5497"}],"collection":[{"href":"https:\/\/www.shibashake.com\/wp\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.shibashake.com\/wp\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.shibashake.com\/wp\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.shibashake.com\/wp\/wp-json\/wp\/v2\/comments?post=5497"}],"version-history":[{"count":76,"href":"https:\/\/www.shibashake.com\/wp\/wp-json\/wp\/v2\/posts\/5497\/revisions"}],"predecessor-version":[{"id":12685,"href":"https:\/\/www.shibashake.com\/wp\/wp-json\/wp\/v2\/posts\/5497\/revisions\/12685"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.shibashake.com\/wp\/wp-json\/wp\/v2\/media\/11752"}],"wp:attachment":[{"href":"https:\/\/www.shibashake.com\/wp\/wp-json\/wp\/v2\/media?parent=5497"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.shibashake.com\/wp\/wp-json\/wp\/v2\/categories?post=5497"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.shibashake.com\/wp\/wp-json\/wp\/v2\/tags?post=5497"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}