facebook transparent twitter
Go Back  

SawFirst Forum

> SawFirst - About Your Virtual Presence > Websites

Websites Let us know about your website or any other website you find helpful, here.

Reply
 
Thread Tools
  #1  
Old 12-18-2019, 10:36 PM
Pretty Girl's Avatar
Pretty Girl Pretty Girl is offline
POST ADDICT
 
Join Date: Jul 2019
Location: Manila
Posts: 1,542
Default How to show wordpress posts on another site with featured images

Open up your theme template and add the following snippet of code, where you want to show the latest posts from another website.


Code:
<?php  $rss = fetch_feed('https://www.google.com/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 = '&hellip;';  $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">&nbsp;</span><small><?php echo $item->get_date('F Y'); ?> </small> 			<span class="comment-image">&nbsp;</span><small><?php $comments = $item->get_item_tags('https://purl.org/rss/1.0/modules/slash/', 'comments');?><?php $number = $comments[0]['data']; ?> 				<?php if ($number == '1'){ echo $number."&nbsp;". "Comment"; } else {echo $number. "&nbsp;"."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.


Code:
#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%; }

SOURCE : Display Wordpress Posts on another WordPress Blog
__________________
Reply With Quote
Reply

Tags
featured posts, latest posts, wordpress
Thread Tools



CONTACT US
Powered by vBulletin® Version 3.8.11
Copyright ©2000 - 2021, vBulletin Solutions Inc.