Mio Custom Recent Posts Widget

It is a widget that can display recent posts in each thumbnail view and post type .

Author:Miosee (profile at wordpress.org)
WordPress version required:4.0
WordPress version tested:4.4
Plugin version:1.0.0
Added to WordPress repository:27-10-2015
Last updated:19-11-2015
Warning! This plugin has not been updated in over 2 years. It may no longer be maintained or supported and may have compatibility issues when used with more recent versions of WordPress.
Rating, %:0
Rated by:0
Plugin URI:https://webs-k.com/wp/mio-custom-recent-posts
Total downloads:674
Active installs:60+
plugin download
Click to start download

That can be configured item

  • Change of title
  • Display switching of thumbnail
  • Setting the thumbnail size ( to abide to the size of the media settings )
  • The setting of the display number
  • Display settings Posted
  • Setting of post type

Languages

  • English
  • Japanese

HTML code that is output

<div id="mio_custom_recent_posts-{Num}" class="widget widget_custom_recent_entries">
  <h3 class="widgettitle heading-mark"><span class="f-um">{widget-title}</span></h3>
  <ul>
    <li>
      <a href="{post-url}">
        <span class="thumb">
          <img width="150" height="150" src="{Image File URL}" class="attachment-thumbnail wp-post-image" alt="{Media alt}"/>
        </span>
        <span class="title">{post-title}</span>
      </a>
      <span class="post-date on-thumb">{post-date}</span>
    </li>
  </ul>
</div>

CSS setting of the initial state

.widget_custom_recent_entries > ul {
  list-style: none;
}
.widget_custom_recent_entries > ul > li {
  position: relative;
}
.widget_custom_recent_entries > ul > li:before,
.widget_custom_recent_entries > ul > li:after {
  content: "";
  display: table;
}
.widget_custom_recent_entries > ul > li:after {
  clear: both;
}
.widget_custom_recent_entries > ul > li + li {
  margin-top: 10px;
}
.widget_custom_recent_entries .thumb {
  float: left;
  display: block;
  width: 80px;
  height: 80px;
}
.widget_custom_recent_entries .thumb img {
  max-width: 100%;
  height: auto;
}
.widget_custom_recent_entries .thumb + .title {
  margin-left: 88px;
}
.widget_custom_recent_entries .title {
  display: block;
}
.widget_custom_recent_entries .post-date {
  display: block;
}
.widget_custom_recent_entries .post-date.on-thumb {
  margin-left: 88px;
}

Go to the widget screen , please set the " Custom Recent Posts " to your own widget area .

I'm sorry. We have created the English with Google Translate .