WPAdverts 2.0 Preview

I am happy to announce that after a year of development work and probably another one of planning, testing different solutions, and building mockups we finally have WPAdverts 2.0 MVP (minimum viable product) that you will be able to try on your own server in May.

The Schedule

4th May 2022 – a beta version will be released on GitHub (it will not be possible to update to 2.0 via automatic updates until the final version is ready, that is until the official release you would need to update the 2.0 using the zip files).

Along with the beta version, I will publish an article explaining how to migrate from 1.X to 2.0 although it is recommended not to do that on your production site until the 2.0 is ready.

22nd May 2022 – is the cut-off date for suggesting changes in the 2.0, after that, we will be doing bug fixes only, the suggested changes will be included in the GitHub issue tracker and will need to wait for “their turn”.

22nd June 2022 – version 2.0 will be released to the WordPress.org repository.

Please note that due to changes we made in the source code not all of our extensions are compatible with the 2.0 version, so from 4th May to 22nd June we will be also working on making the plugins compatible, on the migration instructions page where I will list the extensions statuses.

TL;DR;

If you are not interested in the technical details and decisions then just scroll to the bottom to check out alpha previews of the new templates and in the comments let me know what you think, all feedback is highly appreciated.

The Goals

The main goal of the 2.0 update was to redesign the templates. Our users complained that the templates are looking “dated” to say the least. I do agree with that since the templates were first designed in 2015 so they are about 7 years old now.

In hindsight aside from the dated look the biggest mistakes we made with the design were

• In the WPAdverts i included a filter that allows replacing the templates, the idea was that if you do not like our templates you can use your own, but while pretty good this feature was hardly used since it required quite a lot of work, while our users usually need quick results for the clients.
• In 2015 the mobile devices were not as popular as they are now so we did not put that much emphasis on the mobile version, it was rather developed once the desktop layout was done.
• We used CSS 2.0, for the most part, to make sure the plugin will be compatible with old and new browsers, what I did not think about is that the browsers will quickly catch up with the latest CSS while it will be hard to update templates without breaking backward compatibility.
• We did not use any CSS framework which – on one side was good since it minimized the amount of CSS shipped with the plugin, but on the other – made it harder for users to customize the templates since they did have to learn our CSS structure which was not well documented.
• The WPAdverts is using FontAwesome icons generated with Fontello.com service – this allowed us to have unique icons prefixes and avoid conflicts with other plugins/themes using FontAwesome but – got us stuck with FontAwesome 4.0 icons

What we are going to do about it

Cutting Edge CSS Framework

To start off we decided to base the foundation on a solid CSS framework, thankfully at the time we were deciding the 2021 State of CSS results were available, this allowed us to confirm that the Tailwind CSS that is topping the charts in terms of “interest”, “awareness” and “usage” is a perfect fit for a project like WPAdverts.

Along with the PostCSS generator, it allows us to generate CSS rules with WPAdverts prefixes (so we will not conflict with other plugins), remove the default “CSS reset” is pretty well documented, easy to use and on top of that it optimizes the final CSS file making it a lot smaller.

While we are on the subject of CSS. Tailwind CSS calls itself unapologetically modern meaning we will no longer refrain from using modern CSS, instead we will be taking advantage of the modern CSS letting the browsers catch up.

If you are worried that the new version will break in all the browsers then do not worry. The Tailwind CSS has pretty good browser support. It works with the latest versions of all modern browsers except IE11 (which isn’t a modern browser anyway).

Fresh Design

When redesigning we started off with the mobile version – the so-called mobile-first design – we will be making sure that the WPAdverts plugin is as usable on the mobile devices as it is on the desktops.

That being said we are a small team we will be focusing on smartphone devices (up to 425px screens) and desktops, we will not be doing a specific version for the tablets it will e a hybrid between smartphone and desktop, but this should not be a problem since tablets have around 2 – 3% market share.

Modern FontAwesome Icons

The current WPAdverts version is using custom-generated FontAwesome icons from Fontello.com, this is a great service but they are using the old 4.X version while the FontAwesome team already released version 6.

With WPAdverts version 2.0, we decided to bundle the WPAdverts with the latest FontAwesome version, this will not only give you access to more icons of a higher quality but additionally by using the official FontAwesome WordPress plugin you will be able to access the paid icons (if you have the FontAwesome license) and load the icons from CDN.

The plugin should also help in resolving conflicts in case some other plugin or theme will include the FontAwesome as well, but that of course depends on the said plugin/theme implementation.

Gutenberg Integration

Instead of allowing users to build their own templates (which requires time and some web development skills), we built Gutenberg blocks for WPAdverts.

So instead of building your own templates or reading the shortcodes documentation, you will be able to visually adjust the design and content directly from the wp-admin panel and see the results live – quick and easy.

Sure, using your own custom template file you will have more control over design, but over the past 5 years, I received quite a lot of support tickets asking for help with the design changes so I am pretty sure we can have options for each block that can fit 90% to 95% of our customers’ needs as far as customizing the blocks (shortcodes) look and feel goes (the rest would need to create a child template or do some changes via CSS).

What about the old design?

When I first wrote about the redesign some of our users asked if we can leave the old design. This actually is a good idea and will make version 2.0 100% backward compatible with version 1.X.

The idea is that the shortcodes will be using the old designs by default (maybe with an option to enable the new designs) while the Blocks will use the new design exclusively.

In other words, if you are thinking what do i need to do in order to keep the old design after updating then the answer is: you do *not* need to do anything.

Screenshots

Below you can find a couple of screenshots from the WPAdverts 2.0, please note that most of the design will be visually customizable including the input styles, primary (blue) color, image sizes, and elements visible on the page and etc.

Also, note that the designs are pretty close to how version 2.0 will look but this is not a final version.

Administrator Panel

Frontend List and Search blocks in a mobile and desktop view.

Frontend Ad Details on desktop and mobile

Other

Now what?

Keep an eye on the blog, there will be a second announcement soon with a link to the beta version, give the new version a try and let us know in the comments section or GitHub what do you think, the May will be a month to polish the plugin but also implement some changes that you think the WPAdverts would benefit from.

You can also use the comment form to comment on the mockups/screenshots provided above.