Blog Enhanced Widget [ PRO ]

Extending on the blog widget, the Enhanced Blog Widget comes with a set of predesigned article templates. The widget also comes equipped with the default and AJAX powered navigation.

DEMO


Title : The title appears above the blog posts.


Blog Post Loop

Select Posts :

  • Click the Build post query button. This opens up the post query interface.
  • Under Post type make sure to select Posts.
  • If you want to display only a few posts click the Select Posts. Then just make a list of the posts you want.
  • If you want posts only from particular categories or tags, enter them in the Taxonomies field.
  • Define the number of posts to display in the Posts per page field. At the moment the widget does not support pagination. It’s a feature I may add in the future.
  • Modify the form further as you see fit. Then click the Save Query button.

Exclude current post : This field allows you to remove the current post from the query.


Post Format Icons

Select icons for the Standard, Aside, Gallery, Link, Image, Quote, Status, Video, Audio & Chat.

Color : Choose the icon color.

Size : Choose the icon size. Enter the units as well.

Background Color : Choose the icon background color. This is an optional field.

Padding : The distance around the icon till where the background extends.
Margin : Add margins around the icon.

Shape : Choose between Square and Circle.

Border Color : The border color of the icon element.
Border Width : The border width. Set it to 0 if you do not want a border.
Opacity : The icon opacity. Choose a value between 0 and 1.

Design

Layout : Choose from 5 predesigned article templates.

Image Size : Choose the image size. You can define the default sizes by navigating to Settings > Media.

Show Format Icon : Checking this will display the article format icons.

Post Height : Uncheck to disable equal height for all posts.

Title Tag : Choose the heading tag for the post title.

Show Excerpt : This displays the post’s excerpt.

Show Excerpt for small screens : Check this option to display the excerpt on screens below 768px.

Excerpt Length : Defines the maximum number of words for the excerpt. Leave blank if you do not want this feature.

After Excerpt : This appears if your excerpt is longer than the length you have entered above.

Excerpt as a link : Convert the excerpt into a link.

For bylines: use ||  %date% : The Date || %category% : List of Categories || %author% : Author name with link || %comments% : Number of Comments ||  to display custom fields

Byline 1 : Use the guide above to build this field.

Byline 2 : Use the guide above to build this field.

Text between Categories : This is the text between categories. By default it is set to , . If you want a gap instead you can input   .

Columns : This defines the maximum columns for your posts. The widget is responsive, so will automatically adjust for smaller screens.


Styling

Text Align : This applies to title, bylines and excerpt.

Image Expands on hover : This will expand your image on hover.

Image Overlay Color : The color that appears over the image on hover.

Image Overlay Opacity : Choose a number between 0 and 1. 0 is Transparent & 1 is Opaque.

Article Background Color : This sets the background color for the article.

Show Border : Display border around the article.
Border Width : The article border width. Set this to 0 if you do not want a border.
Border Color : The color of the border.

Title Font Size : The titles font size. Enter the units.

Title Color : Choose the title color.

Excerpt Font Size : The excerpt font size. Enter the units.

Excerpt Color : Choose the excerpt color.

Byline Font Size : The byline font size. Enter the units.

Make byline text uppercase : Make the text in the byline uppercase.

Byline 1 Color : Choose the byline 1 color.

Byline 2 Color : Choose the byline 2 color.

Make links in Byline bold : This adds a bold styling to links present in the byline.

Byline Links Color : Choose the byline color for links. ex: the author link & category links.

Byline Link Hover Color : This color applies to link in the byline links & title on mouse hover.


Navigation

Use navigation? : Enable Navigation

Type : Choose between the default navigation and Ajax.

ID : This is needed only if ajax is selected. Should be unique on the page. Must begin with alphabets[A-Za-z]. Should not contain spaces. Does not appear on the front-end.

Links : Choose between next/previous buttons and pagination.

Older Posts Text : Text for link to older posts.

Older Posts Icon : Icon accompanying text for older posts.

Newer Posts Text : Text for link to newer posts.

Newer Posts Icon : Icon accompanying text for newer posts.

Navigation Theme : You can choose from Classic, Flat, Outline, 3D, Shadow and Modern.

Navigation Alignment : You can align the button to the left, center or right.

Button Size : Choose the size of the Button. Defaults to Standard.

Button Highlight Color : Typically used as button background.

Button Base Color : Typically used as text color.

Hover Effects : If checked will add an effect on mouse hover. The effect will vary depending on the chosen theme.

Click Effects : If checked will add an effect on mouse click. The effect will vary depending on the chosen theme.

Button Corners : Choose the shape of the Button. Defaults to Slightly curved.