Following on from the post Display Your WordPress Recent Posts on a Static Page which was used to display your WordPress posts on a non-WP website on the same server. I have had several people contacting me on how to display WordPress posts on another WordPress blog. This tutorial will show you how to display your posts, associated post thumbnail images and a snippet of the content from one blog to another by fetching the data from your RSS feed using the SimplePie RSS parser which is included in the WordPress installation.
Enable Post Thumbnails in WordPress & RSS Feeds
To be able to display the post thumbnails you need to enable or check that your theme supports thumbnails and also enable post thumbnails to show up in your RSS feeds.
To display your post thumbnails in your feeds you need to add the following to your theme’s functions.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <?php //add post thumbnails to RSS images function cwc_rss_post_thumbnail($content) { global $post; if(has_post_thumbnail($post->ID)) { $content = '<p>' . get_the_post_thumbnail($post->ID) . '</p>' . get_the_excerpt(); } return $content; } add_filter('the_excerpt_rss', 'cwc_rss_post_thumbnail'); add_filter('the_content_feed', 'cwc_rss_post_thumbnail'); ?> |
Whilst functions.php is open check for or add the following
1 | add_theme_support( 'post-thumbnails' ); |
Don’t forget to add the thumbnails to your posts!
Code to Display WordPress Posts
Open up your theme template and add the following snippet of code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 | <?php $rss = fetch_feed('http://www.worldoweb.co.uk/feed'); if (!is_wp_error( $rss ) ) : $maxitems = $rss->get_item_quantity(5); $rss_items = $rss->get_items(0, $maxitems); endif; ?> <?php function get_first_image_url($html) { if (preg_match('/<img.+?src="(.+?)"/', $html, $matches)) { return $matches[1]; } } ?> <?php function shorten($string, $length) { $suffix = '…'; $short_desc = trim(str_replace(array("r","n", "t"), ' ', strip_tags($string))); $desc = trim(substr($short_desc, 0, $length)); $lastchar = substr($desc, -1, 1); if ($lastchar == '.' || $lastchar == '!' || $lastchar == '?') $suffix=''; $desc .= $suffix; return $desc; } ?> <ul class="rss-items" id="wow-feed"> <?php if ($maxitems == 0) echo '<li>No items.</li>'; else foreach ( $rss_items as $item ) : ?> <li class="item"> <span class="rss-image"> <?php echo '<img src="' .get_first_image_url($item->get_content()). '"/>'; ?> </span> <span class="data"> <h5><a href='<?php echo esc_url( $item->get_permalink() ); ?>' title='<?php echo esc_html( $item->get_title() ); ?>'> <?php echo esc_html( $item->get_title() ); ?></a></h5> <span class="date-image"> </span><small><?php echo $item->get_date('F Y'); ?> </small> <span class="comment-image"> </span><small><?php $comments = $item->get_item_tags('http://purl.org/rss/1.0/modules/slash/', 'comments');?><?php $number = $comments[0]['data']; ?> <?php if ($number == '1'){ echo $number." ". "Comment"; } else {echo $number. " "."Comments";}?></small> <p><?php echo shorten($item-> get_description(),'150');?></p> </span> </li> <?php endforeach; ?> </ul> |
Now we need to edit the above snippet to suit your needs. I have highlighted the lines that need to be changed. I recommend that you get the script running before making any other changes and always test it in a development environment and not in a production environment.
Line 2 Change this to the URL of the feed you want to fetch.
Line 7 Gets the latest 5 posts. This can be changed to suit your needs.
Line 11-17 This function grabs the first image that is contained in the feed.
Line 18-29 This function is used to shorten the description and not display the full blog post.
Line 30 This is the start of our output which is in the form of an unordered list.
Line 36-38 This is where our image from the post thumbnails feature should display. Please note that linking to an external blog which is not your own may result in no images being displayed.
Line 41 get_date(‘F Y’); This will display the date of the published content. This can be changed to suit your requirements. Read Formatting Date and Time to learn more.
Line 42-43 grabs the amount of comment(s) the post has received. This may not show up as it depends on your RSS feed structure.
Line 44 shorten($item-> get_description(),’150′) uses the function shorten (Line 19-29) to display the blog post to a maximum of 150 characters. This can be changed to suit your requirements.
Add the CSS
Now it’s time to spice up the content with a little CSS. Open up your stylesheet, normally style.css in WordPress. Feel free to change any of the CSS to suit your requirements.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | #wow-feed { background: #FFFFFF; border: 1px solid #AFAFB0; width: 600px; margin: 10px 0; font-size: 0.8em; } #wow-feed li { list-style: none; } #wow-feed .rss-image img { width: 100px; height: 100px; padding: 8px; border: solid 1px #eee; } #wow-feed .rss-image { width: 30%; } #wow-feed .item { border-bottom: 1px solid #AFAFB0; padding: 10px; } #wow-feed .data { display: inline-block; margin-left: 2%; vertical-align: top; width: 70%; } #wow-feed .data h5 { font-weight: bold; } #wow-feed .data small { color: #8F90CB; font-size: 0.9em; margin-right: 10%; } #wow-feed .comment-image { background: url("images/comments.png"); height: 16px; width: 16px; vertical-align: middle; display: inline-block; margin-right: 2%; } #wow-feed .date-image { background: url("images/date.png"); height: 16px; width: 16px; vertical-align: middle; display: inline-block; margin-right: 2%; } |
All you need to do now is to add the images to your theme images folder. I have packed the tutorial and image files into a handy zip file, available below. If the comments and time images do not display you will need to change the image paths in the CSS to be relative to your theme image directory.
Conclusion
This method of displaying your posts in another blog is fairly limited as there is only so much information contained in a RSS feed. If you have any questions or maybe have a better solution feel free to comment.
Sources
Add Post Thumbnails to RSS feed
Use SimplePie to grab first image from a RSS feed
