New version 1.0.11 with requested ones from the wp.org user forum

great work

The Same Category Posts widget gets a new version 1.0.11 with two features which are requested by the wordpress.org user forum.

  • If you also had a request feel free and write us that we can talk and implement your request.
  • For your developer skills you can pull a request to GitHub and we don’t hesitate to merge your pull-request with the master branch and release it on wordpress.org asap.

The two new features in more depth

  1. The first new feature supports format the rendered date. The options “Use the WordPress Settings general date format” or make your own format with a text box where you can write own customizing Time and Date (codex.wordpress.org/Formatting_Date_and_Time). And a option to make the date a link to the single post page.
  2. The second one give you a filter hook for the post titles: ‘widget_title’. Add a filter with this name to the wp-content\Themes[your-Theme]\functions.php:
function cruise_shortcode_iconship( $html ) { 
    return "prefix-" . $html . "-suffix"; 
} 
add_filter( 'widget_title', 'cruise_shortcode_iconship' );

1 year-celebration of the Term and Category Based Posts Widget

brooke-lark-158026

We’re happy to announce: Term and Category based Posts Widget has it’s first birthday!

Started with the aim to make a much bigger Category Posts Widget with thousand of new features. The Category Posts Widget is a very focused widget with more than 650.000 downloads which means 400 downloads/day and 80.000+ active WordPress installations.

We also use both widgets for our client projects. Our free and also the premium widget. Most features are based on customer experience. We are happy to announce not all new features are started from us ourselves. We gets many suggestions from our happy users. To meet these requirements we try to split the Category Posts Widget and made a more customer friendly premium widget – the premium Term and Category based Posts Widget.

What is customer friendly?

We’re all developer in our team and it means to expand and customize the widget to get the focus to each customer needs. Not all features are good for all websites, some confusing features more harms as they fits for the most users. Some special features might just fit for one single website. Especially when it comes to working with other widgets. From the CSS, however, we haven’t still spoken at all.

Sub-domain for development and documentation

We plane a developer sub-domain with more documentation, filter and action hooks, widget concepts and how the widget works, etc.

We have one ready extension (Excerpt Extension, Adds more options for the excerpt output – A free extension for the premium widget Term and Category Based Posts Widget) and one tool (Update-Settings Tool, Update settings for all installed widgets.) on our TopTopPress GitHub account. And some basic scripts on GitHubGist. Just for new users it’s to complicated to find a point to start first smaller examples. What we must change.

Thank YOU!

That is, we thank our users for the great response within the first year, the great e-mails with questions and suggestions. We welcome any e-mail. And plan to continue to deliver a great widget for WordPress, what we have a lot of fun with and hope to be able to do even more.

Greetings
TipTopPress

“Excerpt Extension” widget

Allow HTML in the excerpt

Allow HTML in the excerpt

 Download the extension from wordpress.org here: Excerpt Extension

Term Posts Excerpt Extension. Additional options

Additional options

At the moment we plan three extensions and started with the first “Term Posts Excerpt Extension”. Why this as first? Here we get the most suggestions from our widget users. But first a short explanation. Primarily the excerpt sounds easy to use and good to configure. Unfortunately deceives that. If the post excerpt is configured, it is used in all placements with this preconfiguration. So the configuration should be nice. Here are the adjustments which WordPress let you do: Add the excerpt automatic-, manual and with the More tag (called teaser), include shortcodes, banner, social buttons, etc., include HTML elements, change the excerpt length in words and the more text. Depends where this configuration is done, for example in the Theme, in a Plugin, your Child Theme’s functions.php it’s nearly impossible to give stable widget options, which work for all WordPress installations.

We learned much configurations in the last year

Our problem isn’t that we had learned tried out each second issue a new core excerpt configuration in the last year. The hack is each special genius solution is not applicable to the next used special WordPress installation. Every time we wanted to install a super intelligent switch, we had to define a normal state and leave this for our majority of users. And how should it be otherwise? Basically, all attitudes can be regarded as particularly special. A definition can be:

What is a “normal state”? And is the “normal state” differently on special use?

The answer is yes, but special use is not for all users the same, because there are so many configurations. The answer is also, we’ll dig deep in custom code. If the user starts with a free or paid Theme, the Theme comes with set filters for the excerpt. Our thought is the Theme designer don’t know which widgets and plugins the user want to use and as we’ll say it: To which place you want to put your posts? As in the relation of using shortcodes, many placements are imaginable and possible. And so conflicts with the excerpt and between the Theme and installed plugins are not a rarity.

Can be the programmer’s view the right one?

In the second application case from the programmer’s view, the set excerpt filters must be overridden when using a recommended Child Theme. And we called this overriding code “custom code” and want get rid of it in our core widget code. Our solution is providing a excerpt extension.

You can download the extension from wordpress.org here: Excerpt Extension

delete double shortcode banner or social icons in the excerpt

Delete double shortcode banner or social icons in the excerpt

Extension to manage more website tasks

Bildschirmfoto 2016-12-26 um 22.55.54

We build extensions for our premium widget Term and Category Based Posts Widget. We want satisfy the many requests and also issues we get from customers with this extensions. Our problem is we have to build a stable widget with many features and possibilities. The tasks the widget should solve are easy in a single scope and when this many controls interact with each other it comes difficult. And this is what we want:

Expand to more regions and manage more website tasks.

It means not only the kind of the website, like is the website a blog, a shop or for schools or education. Also how the website was managed, updated and build. There are many approaches how a website is maintained and from how. But also this is important today for the success of a website.

 

The text content is very important. Also important are photos, design, layout, menus, submenus, low distract, trust and social enthusiasm. One of our main considerations is:

Owners of a website should be involved as much as possible when creating the content. If you need expert advice, this must also fit into the website in order to achieve the best possible success.

So we have many widget users and each have different technical skills. We don’t know if all know CSS programming, place the widget to new areas and do high-level layout improvements, imagine landing pages, cross-selling, up-selling and related-selling. Promote your courses and upcoming events.
So it comes many customer code and features together, for what we think for one it helps for many others it will harms. That’s why we outsource such features to extension. As explained we know and even expect most of our widget users are no programmers. Insert example code to the Theme’s functions.php to add filter and action hooks should no problem, but there are so many more high-level task to solve for a website. So we’ll provide programming APIs to extend the widget with your own ideas as we did, if there are needs and want give our best basic widget as possible. With the focus on single tasks which achieve much.

Client-side cropped-, adaptive- and also fluid images for Responsive Layouts

Client-side cropped- and also fluid images

Client-side cropped- and also fluid images

We decided in the past to add a image cropping feature (CPW since 4.1.6, April 13th 2016, as option and TACBPW since 1.0.1, as default), to set your image dimensions in pixel for the feature image or called thumbnail. We called it “CSS cropping for thumbnails“.

This CSS cropping gives your image the possibility to set dimension options for width and height. Our decision till now is to perform this cropping with CSS. CSS is fast and the website admin can use, but it’s not a have to. And our feature don’t neet to generate new images or actually a change for image sizes in the WordPress settings.

We talk much about the feature and implement it to other widgets like Same Category Posts.

We started to solve the max-width problem for our client-side cropped images

Solve "max-width" issue for client-side cropped images with Javascript

Solve “max-width” issue for client-side cropped images with Javascript

The problem we had with our cropped images is we can’t use the CSS property max-width, because the cropping is also made with CSS. No CSS rule solve both features correctly at the same time and we set a fixed width and height. For Responsive Layouts this is very bad to have only one image size and the image can’t be resized, e.g. for many different mobile devices and screen sizes.

For the 4.7 we tried a CSS solution again to solve the aim to have fluid images with CSS attribute max-width. It’s Mark again who mentioned to try it with Javascript. And now it’ll be available with the 4.7 (4.7 beta 1).

The Javascript code works only once at page load or on page resize. Last one is in the normal website usage not performed. The Javascript code is also performance optimized and curse a very less millisecond delay while page load.

Demo page: demo.tiptoppress.com

Advantages with client-side responsive images:

  • No additional (server-side) libraries required.
  • No cookies required.
  • No extra server configuration needed.
  • Does not attempt to perform any client OS detection.
  • Server image storage doesn’t change.
  • Fast server response any time.
  • No image quality loss.
  • No side effects with frequent use on several pages.

Other image features for Responsive Layouts are planed

We’re happy we found a solution and we hope we don’t get problems and can solve the requested Responsive Layout support. What we also want is use the CSS attribute “width” like percentage unit (100%). And either for one dimension and the other as pixels or for both, no size restriction is given and the image fill all the available space. We planed it also for the 4.8 – be patient if all works right.


Related posts:

Terms and Category Based Posts Widget support the Masonry framework

Masonry is a JavaScript UI framework and we decided to support it for “Terms and Category Based Posts Widget” from the version 4.6 and higher. The framework do this “masonry” arrangement for posts and much more – we need some time to understand how the framework works – and now we can proudly say, we know a little part of it. This little part in understanding was enough for support thas UI framework.

Masonry with Thumbnail > Position > Background

Masonry with Thumbnail > Position > Background

The problem(s) which Masonry solve and how is unique

Every time we get to deal with the UI framework we discover and learn something new. Therefore, it is difficult to find one suitable set to describe it. Masonry solve many small and big problems in a simple way. For an entry, following remarks:

“Masonry is used for responsive websites, different screen sizes and all mobile devices and without that media-queries must be defined in the CSS file.”

Especially relevant it’s the second UI framework which is added to the core code beside jQuery which must have a reason. That’s why we want to explain how we use it, which features we start implementing with this Masonry framework and which features we want implement with it further versions of our widget.

Edit the Masonry settings with the customizer

Edit the Masonry settings with the customizer

As a result edit the settings with the WordPress customizer, after Terms and Category Based Posts Widget is added to the widget area or with shortcode. Choose in the Styles panel for Layout: Masonry and our posts should rearrange in a masonry pattern. On the screenshots and at the demo.tiptoppress.com page we use post item width or the thumbnails panel width for position. Thumbnails panel width means “background“, so the text, excerpt and other text content is positioned over the image. So you need to define a width for posts which is enough for the Masonry framework to know to make this posts responsive. Change the Browser width and you can see how the post take place of the page width. Once with three columns, two or one.

Hence for the version 4.6 this should be good to use it. And it will be good, you should try it. Simple to use and solve a lot – for responsive webpages.

Responsive webpages and more

Finally in 4.7 we want to implement two other features for Masonry. We want to add pagination and Ajax scripts which perform infinite page loading effects. If you’re interested in grids and columns for your posts we recommend you should try it out.

In Conclusion the masonry feature is available in the 4.6-beta wich we’ll release in a less days. If you’re already interested in a beta version, please write us: http://tiptoppress.com/contact/

Find bugs and test with mobile devices

At the moment we’re hardworking on the release for 4.6 and and look forward to the new version, which has great features. Find last bugs and test with some mobile devices.

Remote debugging with hardware mobile devices

So we stopped implementing features and have the focus on only testing functionality, the rendered HTML and our CSS styles. Our effort is don’t make patch versions after the release. Patch versions can’t be avoided but reduces to a nearly zero. We test with common operations systems and also with mobile devices, like Android, Windows 10, OS X and IOS.

If you are already interested in a beta version, please write us: http://tiptoppress.com/contact/

And we test with some WordPress Themes, like Twenty Sixteen, Twenty Fifteen, … Themes which includes Google’s Material Design Light framework and Themes how build for WooCommerce. We have found the most unexpected error while testing with different WordPress Themes. And is expected to remain in the feature, because each Theme use such different CSS styles and there’re many CSS attributes which can normalized in many ways. So we use in our widget CSS as less as possible normalizing CSS and take our to the layout attributes, like float, text-align, flex-box, … and avoid writing things like sizes, colors or font decoration styles. Implement this is impossible, but with our experience, we get a feel for a happy medium.

mobile-debugging

Testing the upcoming version 4.6, with many operation systems, devices and Themes

We start installing “Terms and Category Based Posts Widget” on our customer pages

The third way we’re testing is with our customer websites and shops. What can only cover a small portion of all our supported features and supported feature variations. What meanwhile matters an important part of our widget concept. But this concept should not part of this post and will be described in further posts more in details. We started with the pro version and support Custom Post Types, Custom Taxonomies, WooComerce Products or events from the The Event Calendar. So there is a wide possibility of websites to use and show posts with our widget Term and Category Based Posts Widget. With the upcoming version 4.6 we leave the widget area and support shortcode as our free version Category Posts Widget supports it. And with shortcode you can use our widget in the post’s content, e.g. over the entire post content width.

This makes us busy and not even easy to decide in which direction the widget had to go. Now we’re on a very good final state and final features.

For sure we support mobile and responsive features and referring mobile devices in further versions in more details.

Demo page shows upcoming 4.6 features for the Terms and Category Based Posts Widget

If you’re interested in our new version 4.6 features. We can help you with “start” to expose the final version on demo.tiptoppress.com/.

We release a beta version and use it for our customer sites. Beta means: No more features were added only bugfixes for this version.

Rearrange-our-demo--and-example-page-with-upcoming-4.6-features

All the features announced in further posts are final and we would let you participate with this. Till we decided to release a new version as the same time as WordPress do it. We had a timeline we’ll made a version ready. For the most features it’s good and make a end for coding and coding.

We need your feedback gladly also recognition – as we get it from you in the past. 😉

The demo site shows three main features:

and this demo site will grow in the next days with variations and other good looking and useful features for your website.

With 4.6 we support columns not only rows!

Now it’s possible to arrange your posts not only in rows rather columns are supported. This is possible with the shortcode we had implemented for a while in the free version and now shortcode is also possible with the pro version. (Put shortcode with the pro is: [termposts], with the free widget write [catposts] to the content.) It’s possible use many columns where ever you want, but in the content and not in the widget-area it make much sense and we recomment this layout features to use with shortcode.

Masonry

We had more ideas for all main features and how we improve this. There are a lot of recent topics we are not compleatly doing perfec right now. For the Masonry support we had even delete code we write because we haden’t much time to make it ready and stable.

So we decited to give you a teaser with Masonry and plane next features more sharper. We have to learn to understand this Javascript framework and it can be helpful for responsive websites. When we visit other sites and how to use it so we could be confident to offer it (tympanus.net/codrops or www.elmastudio.de).

With one click to the WordPress “Customizer”

WordPress admin sides have some areas, configuration panels or widgets to configurate.  So you can get all settings in only few clicks. And it wasn’t WordPress if you can configurate all. So we decided to expand this navigation buttons with a additional customizer link. If the user is in post or page edit mode and use our widgets: Term and Category based Posts Widget or Category Posts Widget.

WordPress don’t supports this link because there is no need for this link without using our widgets. But our widgets give you the oportunity to add shortcode in the content area and configurate it in the customizer. Right, we propose the shortcode configuration only in the customizer.

with-one-click-to-the-customizer

We propose to use the customizer to configurate widgets added with shortcode

We know and use widgets which extends WordPress’s admin navigation buttons, menus, etc. For example for navigating between posts or pages with a forward and backward button with the Admin Post Navigation. Widgets like this can be very helpful to change many posts in a row and there is no need to go back to the post edit-site and admins save a lot of time. We decided to write not a own widget and we also decided to make this link not configurable to show or hide. The link we set is fix.

After saving your post or page the “customizer link” is visible and available for use. And you’re with one click in the there:

after-one-click-to-the-customizer

In conclusion here is a interesting blog post why we decided to use the WordPress customizer for the widget options and settings configuration: tiptoppress.com/the-customizer-in-in-our-focus/
Second reason is we had a lot of options to configure and we search a more computed way to do this configuration with shortcode.

Help us us to improve this feature. Most of all we’re looking forward when you write as a comment or private message.

New dynamic layout feature “Separate categories”

The feature support the option 'Number of posts per seperated categories'.

The feature support the option ‘Number of posts per seperated categories’.

With the Same Category Posts widget it is possible to get multi category selection with a new dynamic layout feature: “Separate categories”. Here it’s possible to separate all assigned categories for the post which is shown on a WordPress single page. And so we call it layout feature. (Hint: The widget gets all assigned categories if or if not checkt this new option.)

 

With one new number option: “Number of posts per separated categories” you can set the maximum number of post beneath a categorie headline. Which extends the existing parameters “Number of posts to show (overall)”. This option  remains unchanged and gets the overall counted posts.

 

Why it is called dynamic?

Its simple answer: Because it depends on the filter option order by ‘date’, ‘name’, ‘number of comments’, etc. And it goes further, the widget (shows and seperates) posts from this categories which the current post assigned to. If each shown post have other assigned categories, the widget will show for each post other categoies.

 

For example post ‘doostang’ is in the categories CARS and HOUSES and post ‘hipmunk’ is in the categories CARS, TECHNOLOGY and WEBTWO only one shown category is the the same. The other are dynamiclly and different.

 

'Seperate categories' is similar to a order by category.

‘Seperate categories’ is similar to a order by category.

If you want to picture latest news and your post begin date is important for your readers, so it’s better you don’t use ‘Separate categories’. ‘Separate categories’ may cause that not the newes post is on top. But have you many posts to show and you can hide your thumbnail. Order by categories with the feature ‘Separeate categories’ can be very helpful to show a huge number of posts and get a very clearly layout.

 

The idea for this option comes from Aecorn on WordPress.org. He gives the request for this layout because his site and widget area use a lot of post to show. Create idea – thank you Aecorn.

He has given us a 5-star rating on wordpress.org for the implementation of his option.

 

5-star rating on wordpress.org

5-star rating on wordpress.org.

 

 

 

 

 

 

 

 

 

 

 

 

Downlaod link: https://wordpress.org/plugins/same-category-posts


Related posts: