Hi there and happy holidays!

First, let me extend a warm welcome back to the blog. It’s been far too long since my last post, and for that, I owe you an explanation. Life and work have kept me on my toes, leaving little room to nurture this space as much as I would like. However, exciting developments are on the horizon, and I’m thrilled to share a glimpse of what’s been happening behind the scenes and what’s coming next.

Status update on my life as a Rydoo’er

A significant chunk of my time has been dedicated to my work at Rydoo, where we’ve been hard at work on a complete overhaul of our website and branding. The new version of the site is now live, and I’m proud to say it’s a significant leap forward. We’ve launched the updated website in six languages, ensuring that our message resonates globally. This project has been a labor of love—a culmination of meticulous planning, collaboration, and execution. From refreshing the brand identity to fine-tuning the multilingual user experience, every detail has been a step toward creating a platform that reflects the Rydoo mission.

Freelance work and supporting the developer community

Beyond Rydoo, I’ve kept busy with freelance projects that have pushed my skills to new levels. You can find some of them on the Websites section. And of course, is also part of my freelance work, to actively support the frameworks and plugins I developed, such as: Mr.Utils and Mr.Dev’s Framework. These tools have been instrumental for users and developers, and ensuring they’re running smoothly and efficiently has been a priority. Whether it’s updating documentation, providing technical support, or rolling out new features, I’m deeply committed to empowering the developer community and, as a result, empower our clients and authors too.

Taking my music hobby to new heights

On a more personal note, I’ve been channelling my creative energy into my music hobby. Music has always been a passion of mine, but over the past few months, I’ve taken it to a new level. I got new guitar pedals that added a lot of new sounds and opened up exciting possibilities for my unique sound. I’m exploring ways to integrate my love for music into future projects, so check my new songs on my personal Instagram and Youtube, and stay tuned for updates on that front.

A web developer status update: new project in the works

Perhaps the most exciting update is a new web development project I’ve been quietly working on. While I can’t share too many details just yet, I’m confident it will be a game-changer in its niche. This project represents months of research and planning, using newer technologies, and I’m eager to unveil it soon. And once I do, it’s likely that I’ll have a lot more to add to this blog.

The blog’s future

With this new project set to launch, I’m planning to bring the blog back to life. My vision for this space is evolving, much like my personal and professional endeavours. I’m looking forward to sharing more in-depth insights, tutorials, and updates as I embark on this next chapter. The blog will once again become a hub for tech enthusiasts, developers, and anyone who enjoys the journey of learning and creating.

Wrapping up the web developer status update

If you’ve been following the blog over the years, thank you for your patience and support. This journey has been filled with growth, challenges, and opportunities, and I’m grateful to have you here. The hiatus was necessary, but it’s paved the way for an exciting future.

As we prepare to welcome 2025, I’m filled with anticipation and motivation. There’s so much to share, and I’m eager to make this blog a vibrant, informative, and inspiring space once again. Here’s to a new year filled with creativity, innovation, and meaningful connections.

Stay tuned for updates, until then, let’s celebrate Christmas and start 2025 with the right footer!
🎅 🎄 🎁 🥂

Comments

In this post, I’ll be focusing on those useful extras.

Whitelabel WordPress and Mr.Dev. for a more friendly and professional look

Whitelabel WordPress and Mr.Dev. titles and logos

Mr.Dev’s Framework can replace the main instances of WordPress title and logo with the site’s name and favicon, this will better personalize the backend and login page to you or your client. Giving that extra friendly and professional touch shows that you care and leaves a good impression on your client.

Mr.Dev.’s Framework can also replace its own title and logo, that way your client can easily find where the framework settings and make changes. It’s much easier for you to explain and for your client to remember that he/she needs to “go to Settings > Website name > Styles, to change the colours“ compared to saying “Settings > Mr.Dev.’s Framework > Styles”.

Whitelabel WordPress active theme

If you are using a theme that changes looks over time, or it uses a name that does not match the website, it can also be friendly and looks professional, to change the look of the active theme on WordPress theme list, to show the current look and name of the website.

By enabling the “Active theme” white label, the active theme will always show a screenshot and the name of the website, as shown on the image below.

Change WordPress backend styling

With some themes, you can find the option to style the backend in the Configuration tab of the Framework. By enabling it, the styles configured on the styles tab will be automatically applied on the backend.

Currently, the Mr.Dev_s theme shows that option if you have Beta Test enabled.

If your theme does not give you that option, all you need to do is to create a file named style-admin.css on the root folder. Edit the file to add styles accordingly (you can use the variables you set on the Framework) and enable the option to see the results on the backend.

Dequeue CSS and JS files from WordPress or plugins

Another cool and handy feature on Mr.Dev’s Framework is the File Manager, not only it allows adding new styles and scripts, it also allows to dequeue files that were already loaded, not only by the framework but also from other plugins or even WordPress itself.

To do this, go to the “Files” tab and increase the number of files (Styles or Scripts).

Then, for the new “File ID” field, you’ll grab the ID of the file that you want to dequeue, without -css or -js.

For example, if you wanted to dequeue the styles of the block editor, you would inspect the source of a page and find something like this:

<link rel='stylesheet' id='wp-block-library-css'  href='/wp-includes/css/dist/block-library/style.min.css?ver=6.0.1' media='all' />

The part “wp-block-library” is what you need to copy and paste on the “File ID” field.

Then, on the load part, you’ll choose “Do not load”.

Save and that’s it!

You don’t need to add the File URL in this situation.

Combine this with assignments if you want to remove a style or script from specific posts / categories / post-types…

How to set the base for rem sizes

If you are using rem sizes on your CSS variables, you might want to set the base size for rem and change it depending on the breakpoints.

It’s really easy to do it with Mr.Dev.’s Framework, just set one variable name to “base” and save. Once you save, you’ll notice that also the breakpoints now have the option to change the base value accordingly.

On the back side of things, Mr.Dev.’s Framework adds the font-size to the html element once it recognizes the “base” variable, on the same stylesheet.

Add root variables instead of body for styling

Most times, adding CSS variables to the body is the way to go if you want to make them available to use anywhere on your pages (for example: WordPress block editor and FSE [Full site editor] do exactly that), that’s why Mr.Dev.’s Framework does it.

But there are specific situations, that you might want to have the variables available to elements before the body. For example: setting a value for scroll-padding-top (to have a scroll offset) with a variable can only be done on the html or on the root element.

Those are very specific situations, so the way to do it might not be very obvious, but it’s very easy. All you have to do on the framework is to include one of the following words on your variable name/slug:
“base“, “root” or “offset“.

By doing that, the framework will add those variables to the root element when creating the vars.css file.

Enable the block editor on WooCommerce product pages and remove WooCommerce default styles

If you have WooCommerce enabled, you will find options for it on the Configuration tab of Mr.Dev.’s Framework.

One option allows removing all WooCommerce default styles, this is very helpful if you want to style WooCommerce from scratch.

Another option is to enable the block editor on WooCommerce product pages. This option is currently only visible when the Beta test option is enabled, but it’s already on a stable status. It’s totally safe to enable beta test to use this feature. The only reason this is not yet on the master build is because I’m still considering whether to create or not a “post type manager & builder”, if so this option will move to that feature.

Comments

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 theme framework with optional features and add-ons that extend the natural workflow of WordPress.

Which features are available?

All framework features work with any theme!

But if you want to start from scratch and focus on the features given by the framework, then Mr.Dev. gives you a boilerplate theme that you can use.

Despite being a boilerplate, you can develop complete websites without needing to add or edit the base code, that’s thanks to the features of the Framework together with the block editor.

The Mr.Dev’s Theme is a boilerplate that works with the default Full Site Editor. By joining the Framework, you can control the default styles that appear on the FSE and you’ll be up to date with all the new features that are coming to WordPress.

DOWNLOAD

+INFO

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

Mr.Dev. is your provider of developing tools!

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

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.

Fazer is a new Portuguese magazine about design, their eCommerce website was designed by Carvalho Bernau and developed by me.

The development of this project showcases perfectly the combined power of WordPress‘ block editor, with Mr.Dev.’s Framework, Mr.Dev’s Theme, Mr.Utils and some custom code.

Mr.Dev.’s Theme is a boilerplate theme, that allowed using all the features of the block editor on WooCommerce pages (including products and templates), while having the default colors managed from Mr.Dev.’s Framework.

Mr.Utils with Mr.Dev.’s Framework, added extra style options to the block editor including custom utility classes. That was very handy to define variables to all sizes (font-sizes, padding, margins, etc) and have them editable from one unique place in the backend if needed.

For all the custom code, I used the file manager of Mr.Dev.’s Framework to select where to load each CSS and JS, reducing unused code for each page. This was important for speed purposes. Some PHP custom code was also created. All files can be accessed trough the Framework and edited on the backend, using WordPress’ default plugin files editor.

The custom code was important to reach some specific needs of the design, here are some examples:

• Temporarily have the homepage redirecting to the most recent product/magazine-issue.
• Align footnotes with the text, according to the position of the note in the text (on non-mobile breakpoints).
• Automatically detect the color of the most recent product and apply it as accent color on the entire site (Products’ colors are added on Mr.Dev.’s Framework, by having the variable equal to the product slug).
• Allow different svg logos for each product (Uses safe SVG).
• Enable cache for almost all the pages, regardless of the cart item count. This was made possible by having custom javascript and cookies, to detect the number of items in cart. Also detects which products, to show a “View the cart” when a product is already in the cart.
• Detect when the scroll passes the header to change the color of the logo, menu, and “Buy” buttons from white to the accent color.
• Use the alt text of an image, to tell which should be the object-position/background-position for each breakpoint.
• Highlight the sub-menus according to the scroll on the page.
• Replace default tags taxonomy in favor of authors (multiple authors).
• Automatically create categories in Afazeres/Blog matching each WooCommerce product.

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.