<style type=»text/css»><!– [et_pb_line_break_holder] –> body {<!– [et_pb_line_break_holder] –> padding-bottom: 40px;<!– [et_pb_line_break_holder] –> }<!– [et_pb_line_break_holder] –><!– [et_pb_line_break_holder] –> section {padding: 60px 0 0 0;}<!– [et_pb_line_break_holder] –><!– [et_pb_line_break_holder] –> .srp-social-list {<!– [et_pb_line_break_holder] –> list-style: none;<!– [et_pb_line_break_holder] –> margin: 0;<!– [et_pb_line_break_holder] –> padding: 0;<!– [et_pb_line_break_holder] –> }<!– [et_pb_line_break_holder] –><!– [et_pb_line_break_holder] –> .srp-social-list li {<!– [et_pb_line_break_holder] –> display: inline-block;<!– [et_pb_line_break_holder] –> float: left;<!– [et_pb_line_break_holder] –> line-height: 32px;<!– [et_pb_line_break_holder] –> }<!– [et_pb_line_break_holder] –><!– [et_pb_line_break_holder] –> .srp-social-list li:first-child {<!– [et_pb_line_break_holder] –> margin-right: 10px;<!– [et_pb_line_break_holder] –> }<!– [et_pb_line_break_holder] –><!– [et_pb_line_break_holder] –> .srp-social-icon-facebook {<!– [et_pb_line_break_holder] –> display: inline-block;<!– [et_pb_line_break_holder] –> position: relative;<!– [et_pb_line_break_holder] –> width: 32px;<!– [et_pb_line_break_holder] –> height: 32px;<!– [et_pb_line_break_holder] –> background:url(assets/img/icons/facebook.png) no-repeat;<!– [et_pb_line_break_holder] –> }<!– [et_pb_line_break_holder] –><!– [et_pb_line_break_holder] –> .srp-social-icon-twitter {<!– [et_pb_line_break_holder] –> display: inline-block;<!– [et_pb_line_break_holder] –> position: relative;<!– [et_pb_line_break_holder] –> width: 32px;<!– [et_pb_line_break_holder] –> height: 32px;<!– [et_pb_line_break_holder] –> background:url(assets/img/icons/twitter.png) no-repeat;<!– [et_pb_line_break_holder] –> }<!– [et_pb_line_break_holder] –><!– [et_pb_line_break_holder] –> .srp-social-icon-googlep {<!– [et_pb_line_break_holder] –> display: inline-block;<!– [et_pb_line_break_holder] –> position: relative;<!– [et_pb_line_break_holder] –> width: 32px;<!– [et_pb_line_break_holder] –> height: 32px;<!– [et_pb_line_break_holder] –> background:url(assets/img/icons/google+.png) no-repeat;<!– [et_pb_line_break_holder] –> }<!– [et_pb_line_break_holder] –><!– [et_pb_line_break_holder] –> .srp-social-icon-envato {<!– [et_pb_line_break_holder] –> display: inline-block;<!– [et_pb_line_break_holder] –> position: relative;<!– [et_pb_line_break_holder] –> width: 32px;<!– [et_pb_line_break_holder] –> height: 32px;<!– [et_pb_line_break_holder] –> background:url(assets/img/icons/envato.png) no-repeat;<!– [et_pb_line_break_holder] –> }<!– [et_pb_line_break_holder] –><!– [et_pb_line_break_holder] –> .hero-unit h1 {<!– [et_pb_line_break_holder] –> margin-bottom: 30px;<!– [et_pb_line_break_holder] –> }<!– [et_pb_line_break_holder] –> </style><!– [et_pb_line_break_holder] –>
Recent Post Documentation
Recent Posts PRO Edition (SRP PRO) is one of the most advanced WordPress plugin to manage your posts with thumbnails. With an incredible easy configuration and a wonderful look, you’re just a click away from setting up your awesome layout.
It’s the perfect solution for Web Magazines or just Simple Blogs and it comes with more than 120 Customization Options Available(*).
With an amazing & elegant interface, you can easilly configure your posts, set up your thumbnail types and sizes, apply advanced filter techniques and even paginate your results to achieve a fully working WordPress Home Page, or if you wish, just a beautiful sidebar widget to show up your preferred posts.
Special Recent Posts PRO Edition uses a customized WordPress loop to fetch your posts/pages based on each setting you set up in the widget/plugin options.
Manual installation is easy and takes fewer than five minutes.
In order for the Special Recent Posts PRO Edition plugin to work, these settings are required:
Special Recent Posts PRO Edition comes with great feature that lets users to insert the widget in all non-widget handled parts of their WordPress theme.
Now you don’t have to care anymore about manually building your own shortcode or PHP code, because everything is processed and generated by the “CODE GENERATOR” section in the widget panel. Just copy & paste the generated code into one of your WordPress pages or PHP templates.
The Code Generator area in the widget settings.
Introduction
How it works
- If you choose to display the default WordPress featured images as thumbnails, SRP will scan each post for it and return the relative layout with the chosen image dimension.
- If you choose to display the custom thumbnails, SRP will scan each post for its featured image; if none is found, it will try to fetch inner post content images instead. If no image is definitely found within the post content, a default «No Image» placeholder will be shown. For each image found, SRP will apply an adaptive image resize, save the result in the cache folder and render it out.
- If you choose to display author avatars as thumbnails, SRP will scan each post for its relative author avatar image and render it out. If no author avatar image is found, a «No Image» placeholder will be shown.
NOTE!
Caching is mandatory. This means that if the cache folder doesn’t exist or is not writable, the «Custom Thumbnail Size» option in the PRO Edition can’t work. Please make sure the cache folder is writable and has the correct permissions.
Installation & Setup
- Download the plugin from CodeCanyon, unpack it and upload the [special-recent-posts-pro] folder to your wp-content/plugins/ directory.
- Activate the plugin through the ‘Plugins‘ menu in WordPress.
- Go to your main WordPress left menu > SRP PRO > General Settings to configure the basic options.
- On the widgets panel, drag the Special Recent Posts PRO Edition widget onto one of your sidebars or draggable areas and configure its specific settings.
- You’re done. Enjoy.
KNOWN ISSUE:
If you get the WordPress error: «Fatal error: Cannot redeclare special_recent_posts() » when activating the plugin, it means that you have an already installed version. Both FREE and PRO editions CANNOT EXISTS. So please deactivate the previously installed SRP version first.
Requirements
- WordPress release 3.0+
- PHP version 5.3+
- GD libraries installed and enabled on your server.
- Correct permissions (0775 or 0777) on the cache folder under [SRP FOLDER]/cache
Layouts & CSS Styles customization and highlights
Heads up!
Two CSS files are being used in this plugin.
DO NOT WRITE YOUR OWN CODE IN THESE. USE THE CUSTOM CSS EDITOR INSTEAD OR APPLY YOUR RULES IN YOUR THEME CSS TO AVOID FILES TO BE OVERWRITTEN WHEN UPDATING THE PLUGIN.
Stylesheets
Here’s the list of the stylesheets used. Both are located in the [PLUGIN FOLDER]/CSS directory.File Name | Description |
---|---|
admin.css |
This is the stylesheet used to style all the admin parts of the Special Recent Posts PRO Edition. |
layout.css |
Here you can find all the CSS rules that apply throughout the entire SRP front-end layouts. |
How SRP renders your posts
By default, Special Recent Posts PRO Edition uses the wonderful CSS FlexBox Module to render responsively all the different layouts with proper alignments. There are tons of options to modify quite everything about your posts layout, but if you need something more, you have to apply some CSS code. Follow the instructions below to know how. (And if you feel brave enough to mess around with CSS, here’s a complete guide to Flexbox.)The Default Post Layout
By default, SRP lets you change quite everything about the post layout like positioning the post title above the thumbnail, or even the thubnail above everythig else. Everything has just an option in the relative widget panel. But if you wish more customization, then you have to write some CSS code. Here below you can find the list of the needed CSS classes to target when customizing your own layout.The CSS Classes List
/** * -------------------------------- * THE WIDGET TITLE * This is the class that holds the title of the widget. * Usually you don't have to edit this element because is already done by WordPress. * -------------------------------- */ .srp-widget-title {} /** * -------------------------------- * THE WIDGET CONTAINER * This is the class that holds the entire widget container. * -------------------------------- */ .srp-widget-container {} /** * -------------------------------- * THE SINGLE POST * This is the class that holds the entire single post container. * Use this class to apply margins or padding between each post entry. * -------------------------------- */ .srp-widget-singlepost {} /** * -------------------------------- * THE THUMBNAIL BOX * -------------------------------- */ // This is the box that contains the thumbnail. .srp-thumbnail-box {} // This is the thumbnail link. .srp-post-thumbnail-link {} // This is just the thumbnail image. .srp-thumbnail-box img {} /** * -------------------------------- * THE POST META BOXES * -------------------------------- */ // The post title. .srp-post-title {} // The post title link. .srp-post-title-link {} // The post author text. .srp-post-author {} // The post author URL Link. .srp-post-author-url {} // The post date text. .srp-post-date {} // The post category text. .srp-post-category {} // The post comments text. .srp-post-comments {} // The post comments link. .srp-post-comments-link {} // The post content text. .srp-post-content {} // The post tags. .srp-post-tags {} /** * -------------------------------- * THE POST TITLE * -------------------------------- */ .srp-post-title {} // The post title link. .srp-post-title-link {} /** * -------------------------------- * THE POST CONTENT * -------------------------------- */ // The post stringbreak link. .srp-post-stringbreak-link {} // The post stringbreak image. .srp-post-stringbreak-image {} // The post stringbreak image link. srp-post-stringbreak-link-image {}So for example, if we want to reset the amount of space between the Post Title and the list of Post Meta we’ll write as follows:
.srp-post-title { margin: 0; }Another example: change the post title font size, its colour and add a little extra amount of space below:
.srp-post-title { font-size: 18px; color: #000; margin-bottom: 10px; }Wanna remove that gray line between each post?
.srp-widget-singlepost { border-bottom: none; }
NOTE!
These are only simple examples of how to style your posts with SRP PRO. For more complex rules however, a good knowledge of HTML and CSS is recommended to know what you’re doing.