The journey of Mr.Dev.’s Widget and Module

Back when I first started developing Mr.Dev.’s Widget and Module, it didn’t have that name and the main intention was to show categories in accordions and posts inside tabs that are inside those accordions for Ruben R Dias website.

Back then, WordPress and Joomla were CMS where the frontend was totally dependent of extra elements (themes, plugins and other optional features) that the developer/designer could choose to use or could create custom tools.

We (developers) had the full control over the frontend.

In my case, I choosed to create a widget and module because of the functions and the graphic user interface (GUI) that both WordPress and Joomla had already built-in. In theory they allowed to not bloat the systems with something otherwise done from scratch or using external dependencies.

The version of Mr.Dev.’s widget/module I gave to my direct clients became very powerful, allowing to show any type of content (from posts to products) with many options, themes and layouts. All that with checkbox and fields, so it was safe to give to clients, knowing they would not affect negatively the design.

To indirect clients (people downloading the widget/module to their own developments) I put the most powerful features part of the paid plugin Mr.Dev.’s Framework.

But then things changed..

As for the module, Joomla 4 was later released with different methods to create modules. It was not worth it to recreate the module, so it was discontinued and unsupported for other two reasons: The user-base of Joomla is much smaller comparing to WordPress and I was using Joomla mostly for a company where I am not working anymore.

As for the widget, WordPress also changed, with a new highly visual editor enabled by default: The Gutenberg block editor meant that WordPress was pushing to developers a specific tool to change the frontend, a tool that basically transforms the CMS into a site builder.

And with that, the optional features such as widgets and the customizer started to become obsolete vs the block editor with full site editor growing much stronger.

Despite this, Mr.Dev.’s Widget is still compatible and support is available! But no further development will be put into it (for the reason mentioned above).

Instead I’ll focus my energies on Mr.Dev’s Framework and Mr.Utils..

The plugin development journey of Mr.Dev.’s Framework

The idea behind the framework came up because I started noticing how using a third-party framework (Gantry5 with particles) together with the block editor and Mr.Dev.’ widgets was adding extra learning curves, starting to bloat WordPress and I wasn’t even needing all the features of Gantry5.

So, keeping that idea of not wanting to bloat the system and make it simpler, I had to adopt the block editor and accept it as the future moving forward.

Mr.Dev.’s Framework focus on adding optional features he considers essential to a CMS, without repeating features already available by default and helping transition / discontinue features that might become available by default.

Being a continued path, the Framework its on active development and improvements continue to be made.

And this brings us to today..

The new version of Mr.Utils joined with the Framework

Mr.Dev.’s Framework already helps to create breakpoints, add media sizes, create stylesheets with global colors, typography, sizes and files via a graphic user interface (GUI). And it always included an optional frontend toolkit I developed called Mr.Utils.

There was no graphic user interface to use that toolkit, it was used mainly by developers knowing concepts like classes, CSS and javascript functions.

As of today, Mr.Utils and the framework reached the block editor!

Mr.Dev. now gives an option for editors and clients to use that frontend toolkit using the GUI!

All options will appear under an “Utilities” tab,  allowing to easily implement designs that were difficult or impossible to implement with the current state of the Gutenberg block editor. Including Mr.Utils pagination (perpage) and components to create sliders and tabs.

If you don’t have Mr.Dev’s Framework yet, you can actually install Mr.Utils as a plugin for free. It will give you the same interface just without some advanced options.

And to finish with another great news, a present just in time for Christmas…

Mr.Utils plugin is available on WordPress repository!

I hope you’ve found interesting to know the reasons behind developing this plugins, that you can join me on this journey and most of all, enjoy using the plugins!

Let’s now celebrate Christmas and start 2022 with the right footer! 🎅 🎄 🎁 🥂

Extra note: Mr. comes from playing with the initials of my first and last name while representing a person that is a developer. Dev. represents the fact that all framework features are optional, thinking on developers that want some control and worry about lighter work environments.

Comments

Mr.Dev. is your provider of developing tools!

He gives you a powerful WordPress widget to display your content with many customizable layouts and options.

If you have a WordPress website already established and you feel the need to show the category descriptions on the category pages, but now you realize your theme is not compatible with that, you don’t need to change theme, or mess with the code and not even do a child-theme.

If Mr.Dev. is already giving a Framework and Widgets to your website, you already have all you need!

If his not, I invite you to check all the features those plugins provide when combined. The more features you realize you need the more worth it is to download them!

If you see that you actually don’t need that many features from Mr.Dev. and don’t mind touching the code of your theme, no problem, I’ll share with you at the end of the post the code you need to use to show the category descriptions.

How to use Mr.Dev.’s Widget to display category descriptions

Display current category

1. Go to Appearance > Widgets and drag a Mr.Dev.’s Widget inside a widget-area/sidebar.
2. In Content make sure the type of content is set to Categories, this will display all categories.
3. In Customize content select Different url, this is the trick to show the widget only on the current category.

Show only the category description

1. Go to Display and disable the main title, images, meta and links. Leave only the descriptions as Item description.
2. Then you might want to only show the text without extra styling: Go to Appearance and change theme to None.

This are the only options you need to select. The category description should now be displayed at the frontend on the chosen widget-area/sidebar.

Create a custom widget area / sidebar for the category description (optional)

If the chosen widget-area/sidebar is not the best position for a category description to be displayed, you can create a new one using Mr.Dev.’s Framework.

On this example, I’ll show how to have a new widget-area/sidebar above the list of posts.

1. Go to Settings > Mr.Dev.’s Framework (Or the name of your website) and select the tab Layout (If that tab is not available, you might need to activate it on the Configuration tab first).
2. Scroll to the Main section and select to show 1 section per line.
3. Give a name to the first section (On this example I called it Content Top).
4. Choose Widget area / Sidebar as the type of content to display on that section.
5. Save the settings.

The new widget-area/sidebar/section will now appear on Appearance > Widgets, for you to drag the widget you made before into it.

Live examples of Mr.Dev. displaying categories

Gift & Craft – Categories’ images?

By default, WordPress doesn’t have the option to add a thumbnail or featured image to a category, so for the categories’ headers of this website, I added an image inside the category description and I used the method explained above.

The only difference was to disable the item description and change the image to be Description first image. This also allowed to use the parallax effect of the widget.

Ruben R. Dias – Display a set of categories

This website is a good example of how practical it can be to show a set of categories with widget shortcodes inside the categories descriptions.

The main difference comparing to the method above, is that I didn’t set to exclude different urls for this website.

Display category descriptions with code (advanced)

Child-theme

To not lose the code changes you are gonna make on future theme updates, check if your theme as a specific way to override files.

If not, you should start by making a child-theme, born from the one you are currently using.

Follow the WordPress official documentation to know more about child-themes.

Change the correct file

Your theme should have a specific file to display the list of posts. In many cases is called archive.php but can differ.

Add the code

Paste the following line of code on the file, at the location where you want the description to appear:

the_archive_description( '<div class="taxonomy-description">', '</div>' );

^{As found on WordPress developer handbook.}

And that’s it! Those are the 2 suggestions I can give you on how to show category descriptions. The same works for tags and other taxonomies. I hope this is handy for some of you developers and WordPress affectionate out there.

Comments

Portfolio and eCommerce website developed for Itemzero, a design studio specialized in the intersection between technology, information design and editorial design.

This project is heavily powered by Mr.Dev. and it’s the perfect showcase of what is possible to do when combining his framework with his frontend toolkit.

The framework allowed the use of the block editor on WooCommerce product pages.
The frontend toolkit (Mr.Utils) allowed to make specific customizations and to easily use components such as sliders and tabs inside the block editor.

And because this website uses those plugins that I developed, some other plugins that I selected and because I manage this website’s server + domain, Itemzero’s score on Google Pagespeed Insights shows excellent results.

A portfolio website done for a designer, author, consultant and scholar.

The biggest challenge for this project was to combine the many needs:

• All projects appear on the page, inside accordions and tabs.
• Each project still needs its unique url that opens the correspondent accordion and tab.
• Keep it easy for the client to add and organize the content.

To answer to those needs, I started a widget that would later become the Mr.Dev.’s widget.

That widget would show all five categories’ titles and descriptions in an accordion.
And on each category description another widget, showing the posts in a tabs layout.

A discontinued platform that was developing personalized gifts, handcrafted in Portugal by the best craftsmen.

This website was designed by Itemzero and developed by me.

Some key features of this website were:

• Sticky galleries with zoom on mouseover. Showing all images on larger screens, becoming sliders that show two photos at a time on medium screens and sliders of one image at a time on smaller screens.
• Forms to request a quote with the option to send a file, with the logo for the personalized product.
• The forms have integration with Google Spreadsheets, so all data is organized and kept on a different database for extra security.
• Use of Mr.Dev.’s Widget, to display a header image on each category with a parallax effect. This is possible by using the options “Set Item image as first image found on category description” and “Only show categories of current url”. Know more