The Affair is a blogging and magazine theme for WordPress that bills itself as a:
“Clean and well-thought WordPress theme for creative bloggers and publishers.”
In this review I’m going to be putting the theme through its paces, installing it on a test site, leveraging my 12 years of professional experience with WordPress to evaluate it, and letting you know exactly where the theme excels and where it struggles.
Note that for the purposes of this review, I’m not going to be talking about the appearance of the theme. My reason for this is you can already see for yourself how the theme looks in its demos so you don’t need me to tell you what to think about its visuals.
Instead, I’ll fill you in the aspects you only encounter after purchase, when you start to use the theme, breaking the information into two key sections.
- Part 1: User experience, focusing on installation and customization
- Part 2: Technical tests, covering speed, SEO, responsiveness and accessibility
I’ll then wrap up with an “Overall Verdict” section to let you know how the theme performed.
Alright, let’s go!
Part 1: User Experience
In this section we’ll take the theme through the typical process an average person will undertake when starting out with a new theme. This theme can be installed on an existing site that already has content, but to ensure a fair evaluation with no interference from previous content we’ll be working with the blank slate of a new WordPress install.
Installation Experience
Downloaded File Organization
After purchase you’ll download a zip file, and when you extract it you will see a very simple method of file organization. There’s just a theme zip file, a child theme zip file, a folder with two license text files, and a text file with the URL of the documentation.
A lot of themes get a bit carried away with complex nested directory structures that make you hunt around to find the actual theme files, but in this case it was effortless, and from my point of view that’s a breath of fresh air.
Access to Instructions
The URL in the documentation text file mentioned above takes you to the documentation site for the theme:
The documentation is well laid out, readable, and easily navigated.
An offline version of the documentation as well would be appreciated, but online documentation that can be bookmarked and visited from anywhere is also excellent.
Suggested Companion Plugins
Upon installation of the theme you will see a prompt requesting that you process the automatic installation of a selection of plugins the developers suggest you use with the theme.
My experience with this feature in the past with other themes has been that sometimes, in my opinion, developers take liberties they probably should not take, pushing plugins that are unnecessary and / or included for marketing purposes.
That is not the case with the dev team behind “The Affair”. Each of the plugins suggested for install has excellent utility, and none of them are offering up-sells. This is exactly how this feature in WordPress is supposed to be used.
Additionally, the documentation gives a full rundown of what each plugin is, and why it is included for installation.
To summarize that information:
- Powerkit is a collection of useful utilities to help with things like social media integration, image presentation, newsletter signups etc.
- Contact Form 7 is a long standing classic contact form plugin
- Kirki helps with customization
- One Click Demo Import assists with the setup process of importing demo content
- Post Views Counter can display the number of times a post has been viewed
- Regenerate Thumbnails helps you apply this theme properly to an existing site, resizing image thumbnails to suit the new layout.
- SearchWP Live Ajax Search allows for as-you-type, inline search results
These are all useful plugins and worthy of the suggestion to install.
Demo Content
During the installation process the theme prompts you to add your purchase code in order to add demo content. Once this is done it also guides you through the process of importing demo content, and lets you know you can deactivate the demo content import plugin once done.
The provided demo content does an excellent job of striking a balance between showing you how things can be setup and remaining neutral enough that it is clearly placeholder content.
The whole process of adding demo content was smooth and without issue, very well done.
Demo Presets
Further to the demo import process, in the admin area Appearance > Customize section you’ll find an outstanding feature I wish all themes had: a collection of presets that reflect the theme’s demos.
Sometimes it can be quite difficult for a theme user to replicate what they have seen in demos, but “The Affair" completely eliminates that difficulty - you can replicate any demo just by going to the "Theme Demos" section in the customizer:
In this section you will see seven large thumbnails, representing each of the theme’s seven demos. Click the Activate button on one of them and it will automatically configure your site to look like the related demo. (Be aware this will alter any existing settings).
The presets all look substantially different to one another, and simultaneously serve as a great way to get up and running fast, and a showcase of what can be done by changing up theme settings.
Amber Decor demo preset:
Salt & Pepper demo preset:
Steal My Style demo preset:
Installation Verdict: Clear and Quick
Everything about the initial setup process was convenient and fast. The downloaded files were organized such that you could immediately find what you were looking for. Installation of the theme and related plugins was fast and handled conscientiously by the devs. Demo content installation was easy and seamless, and the excellent “Theme Demos” feature went above and beyond in making the setup process quick and approachable.
Customizing
Adding Branding
Logo
The first thing most people want to do on a new theme is add their own logo and business / site name. To achieve this, the theme’s documentation says to go to Appearance > Site Identity in the admin panel, which isn’t quite correct. You have to first go to Appearance > Customize in admin:
And then from there you can go to Site Identity. Once there you can browse for a logo image to display in your header.
This is a very convenient way to add a logo and I greatly prefer this approach over some of the others I have experienced in various themes. (By the way, for the purposes of demonstration I’ll be using the Hexagon logo from Envato Elements).
The documentation doesn’t give a recommended size for a logo image to upload, saying:
“There’s no such thing as recommended logo sizes, as logos are displayed in their original size and will not be downscaled. Make sure you resize your logos accordingly before uploading them to WordPress in a graphic app (for example Photoshop).”
However, it’s because of the fact logo images need to be resized for use in this theme that it would be easier if the docs suggested a maximum height that will fit within the confines of the theme layout.
The logo is displayed in the header, and if the image is too large it will protrude outside of its bounds.
This leaves it down to the user to figure out what size logo image will fit in the header.
When inspecting the header using browser dev tools it can be seen to be 60px high, but the average user will not know how to look this up.
To allow for spacing above and below the logo, for this I would recommend a maximum height of 40px. (Don’t forget to also upload a second image at 80px height for HiDPI displays - see the note on naming protocol in the related customizer section).
An additional note is that adding an image logo removes the text based title that is displayed upon first install. It would be good to have the option to show the text title next to the image logo as well, but for now if you want your site / business name to appear in the header you’ll have to bake it into the logo image, for example:
Brand Colors
“The Affair” has a Colors section in the customizer. Some settings, such as those for the footer and navigation, make an obvious change. But it’s not immediately apparent what some other settings control, such as the cover background colors. It would be great to see an explanation of these settings added to the related section in the docs.
The theme responds very well to changes in background colors, such as for navigation menus or buttons. If you change from a light background color to dark, or vice versa, it will automatically invert the color of any text that appears over said background to ensure proper contrast and readability.
Adding Social Links
Setting up social links was an excellent process via the Powerkit plugin installed during setup. Powerkit brings with it a number of sub-plugins, or modules, one of which is named “Social Links”.
When you check the box in the customizer Header Settings specifying that you would like to Display social links a clear message is immediately shown in the section of the header where said social links will appear:
This lets you know right away that you need to go somewhere else in the admin panel to set up your social links. Under Settings > Social Links you will find the location in question:
Here you have an extensive list of social media sites, and all you have to do is to tick a box for each one you want to link to from your site.
A tab will then appear for each checked box, providing settings for the related social media site. Go through the tabs and add your details for each site, and you’re done.
Side note: They didn’t forget the Fediverse in this plugin, including options for Mastodon and PixelFed. As a big fan of these projects I personally found this to be a lovely surprise.
After configuring the Social Links plugin settings, you can go back to the customizer’s header settings and set the number of social media links you want to have appear in your header. Save your changes and icons for each site will appear in a nice clean format, including displays of subscriber & follower counts as a bonus.
Footer Content
The footer link to the theme developer’s site is easily removed through the customizer by deleting the content of the Copyright field. Social links are also easily displayed by checking the related Display social links box, which works in the same way as discussed above for the header.
Homepage
The homepage has a Hero Section and Featured Posts section enabled by default. If you don’t want either of these they can be turned off with a checkbox in the customizer’s homepage settings area. If you do want to use them, the customizer controls for each one are very intuitive and straight forward to make sense of.
Hero Unit
It was very quick and effortless to change up the hero unit without needed to refer to any documentation. For example, changing its height and adding a video background from YouTube:
Or adding a background image:
The only problem in this part of the customization settings is there doesn’t seem to be a way to directly control the color of the overlaid text. This can make it hard to ensure there is sufficient contrast for readability.
A workaround you can use instead is to change the Background Color setting to be similar to the color of the background image. Then the theme will automatically change the text color to contrast with it:
However this option isn’t available with video backgrounds so you won’t be able to see the overlaid text on a dark colored video:
It’s possible there may be a means of remedying this issue, but among the otherwise very thorough documentation there is no section with details on working with the hero unit so I can’t be sure. In the absence of a solution you’ll just need to make sure you use a relatively light colored video background.
Featured Posts
The featured posts section is a slider comprised of post images, title and some meta-information. There isn’t a lot you can change up here: just the number of posts, the number of columns between 1 and 3, and some filtering options. However the settings that are present are quite straight forward to tweak.
Homepage Layout
The remainder of the homepage, (assuming you don’t have it set to a static page), is a display of your latest posts, and there are a number of settings available to control how they are laid out.
You can decide if you want a full width or boxed layout, how your individual posts are arranged, whether or not you want a sidebar, which pieces of meta-information should be displayed per post, and how you want pagination to work.
All these settings were very intuitive to access, and the various combinations of layout worked well together.
A nice little stand out feature on the homepage is that if the featured image is hovered over it will display an estimated read time for the related article.
Other Customization Settings
We’ve already gone over the settings that are usually the most important for customization, so we won’t go through all the remaining settings areas one at a time. To instead give you a quick summary:
- Posts, pages, archives and categories can all have their layout and content controlled in a similar manner to the homepage
- There are additional controls for the search bar, gallery alignment, parallax effects and method of loading web-fonts
- "Additional content" fields are available to load custom HTML before and after several sections throughout the site.
Customizing Verdict: Small Issues but Overall Excellent
While the customizing experience was not 100% perfect, the issues I raised were manageable. Overall my feeling on how customization is handled in “The Affair” was that it is leaps and bounds ahead of many other themes I have tried.
It’s somewhat common for theme developers to inadvertently create a confusing customization experience due to having too many locations in the admin area to work with, too many different processes, and not enough documentation.
Not the case with “The Affair”.
All the customization could be done in a single location. Where a companion plugin had to be used for configuration purposes a notice was clearly displayed in the customizer area to let you know. The processes of changing settings were consistent so once you had successfully changed one thing you could use the same approach to change something else. The documentation was clear and thorough, only missing a couple of small areas, such as more information on the hero and featured content sections.
This was definitely one of the better WordPress theme customization experiences I’ve had.
Part 2: Technical Tests
Now we’re done looking at the user experience for installation and customization, we’ll put the theme through its paces on the technical front, testing things like speed, performance, SEO, responsiveness and accessibility.
The speed test will be done on our blank slate locally installed WP site to ensure there are no anomalies caused by my personal internet connection.
SEO and accessibility tests will be conducted on the standard demo of “The Affair” to ensure they are being run against a fully configured installation of the theme.
Tests are done with a combination of Firefox speed and responsiveness developer tools, and Chrome Lighthouse audits.
Speed Test
For the speed tests we are using the Network tab in Firefox Developer Tools, which allows us to disable the cache to simulate a first time visit to the site, and to throttle the load speed to simulate different types of internet connection such as 3G, 4G and DSL.
I began by testing an emulation of first time load of the theme on my local test site, on the homepage with demo content only, and without having undertaken any optimization steps. On a simulated 3G connection this took 14 seconds, which is unfortunately not so great.
On simulated DSL it took 5 seconds which is better, but still not ideal as a sub 3 second load speed is a good approximate goal.
On 4G it took 2.44 seconds, which is the goal sub 3 second time we look for, but administrators of most sites can’t afford to assume all visits are coming from 4G or equivalent connections unless their audience is in a fairly narrow geographic region.
The less-than-ideal load speed may be in part due to the number of requests: 71. The Powerkit plugin seems to be a significant culprit behind this as it loads individual CSS and JS files per tool or module it adds to the system, and it comes with a total of 28 modules. (Not all are activated during installation).
You will absolutely need to use a plugin that combines and minifies CSS and JS files if you want to optimize load times with this theme and plugin combo. I would suggest to the devs that it would be great if they select a reputable plugin themselves, establish that it works well with their theme & plugin bundle, recommend it during install as a companion plugin, and provide instructions in their documentation on configuring it during the setup process.
Seeing these results I wanted to test the difference that could be made with a couple of optimizations in place.
I installed the Autoptimize plugin and enabled its CSS & JS optimization settings. I also activated the Lazy Load option in Powerkit. This made some initial difference, bringing the number of requests down from 71 to 24 and the resulting load time on simulated 3G down from 14 to 12 seconds, DSL to from 5 to 4 seconds, and 4G from 2.44 to 2.35 seconds.
It seemed that even with the combining and minifying of CSS and JS, the file size being loaded was still causing some drag. So I then also then went into the Powerkit settings and deactivated any plugins that were not explicitly being used, leaving only 5 active.
This bought the load time down further to 9 seconds on simulated 3G, 5 seconds faster than default:
It got DSL down to 3 seconds from the original 5, and almost to our sub 3 second goal:
And reduced 4G to 1.49 seconds, down from the original 2.44:
I also tried disabling Powerkit entirely and the times were brought down further to 7 seconds for 3G, 2.3 seconds for DSL, and 1.3 seconds for 4G.
However a lot of the most useful features of the theme come by way of Powerkit, so I wouldn’t recommend deactivating it totally. The best way to look at it is that the utility added by Powerkit can be excellent, but you should definitely turn off parts of it you are not using.
Note that additional optimization would be possible in order to further speed up load times, starting with setting up a CDN and cache.
Speed Verdict, Theme by Itself: Good With Optimization
Load times on fast connections are solid once optimization is added, but not ideal on slower connections.
Speed Verdict, Theme + Default Powerkit: Needs Post-Install Changes
When you follow the prompts and allow for an automated install of Powerkit you will get a lot of excellent utility, but will pay for it in load speed.
With application of optimization techniques it is possible to get solid load speeds and still take advantage of the utility offered by Powerkit, so it would be very helpful if the devs could provide further recommendations and instruction for users to that effect in their docs at some point in the future.
SEO Test
“The Affair” scores 97/100 on the Chrome Lighthouse SEO audit, which is excellent. It passes all tests except one, nailing the evaluation of head section code, link descriptions, alt tags, and a few other areas.
The one test it doesn’t pass is due to about a third of tap targets being too small in size. The accompanying note in the audit says:
“Interactive elements like buttons and links should be large enough (48x48px), and have enough space around them, to be easy enough to tap without overlapping onto other elements.”
SEO Verdict: Outstanding
The theme would only have to make one small change to get a perfect score on SEO, so that’s a really great place to be in this category.
Responsiveness Test
Adjustment Between Breakpoints
Sometimes designers make layouts adjust at specific points they believe represent devices like tablets, phones etc but don’t check to ensure that the layout still works in between those fixed points.
I’m happy to say that is not the case with “The Affair”. I tested gradual increases and decreases from 2300px down to 300px and everything flowed smoothly, adjusting itself nicely at all widths in the range. This theme is successfully one size fits all.
Portrait & Landscape
Another gotcha that sometimes trips developers up is orientation changes leaving layouts looking odd in either portrait or landscape mode at various sizes.
Again, there are no such problems with this theme. The layout continues looking presentable in both orientations.
Proper Layout Collapse
With the logo, menu and social links all located in the header, as well as the multi-column posts layout on the homepage, I was curious to see if the layout would collapse effectively and ensure there were no overlapping header items or cramped columns.
“The Affair” performed admirably on this front. As soon as there was no longer enough room in the header it collapsed to show only a centered logo, and the number of post columns changed up dynamically leaving healthy spacing at all viewport sizes.
Touch Navigation
A problem that still, surprisingly, remains on the web today is a lack of touch controls on key navigation items.
Once more, “The Affair” does not have this problem.
I tested the drop down menus used in the theme on the iPad Pro’s large screen. I did this because a common mistake among developers is assuming any large screen is a desktop or laptop monitor, and that the user has a mouse or trackpad they can hover with. They then leave touch based users without a means to access navigation sub-menus that need to be opened through hovering.
Upon tapping a top level item its sub-menu opened up and remained open so I could view the navigation items it contained at my leisure. This is exactly the expected behavior.
The theme also has a hamburger menu that opens up an overlay down the side of the page. When on a wide viewport that has enough room in the header for the navigation to fit, the overlay shows only a collection of widgets:
But on a narrower viewport in which the header doesn’t have room for navigation, the menu is instead moved into the top of the overlay. Quite an ingenious solution in my opinion.
Responsiveness Verdict: Near Perfect
“The Affair” has done a near faultless job in handling responsiveness with this theme, including applying ingenuity to how they handled the main navigation. The only space for improvement I am aware of is to follow the Chrome Lighthouse suggestion, mentioned earlier, of increasing the size of tap targets.
Accessibility Test
“The Affair” scores 70/100 on a Lighthouse accessibility audit. This test was run on the main demo of the theme as it is assumed this is a fully configured installation of the theme.
Accessibility tasks the theme does well include using WAI-ARIA roles correctly, ensuring unique IDs, including alt tags on images, and a few others.
Tasks it falls a little short on include ensuring adequate contrast - some link, captions and post meta information text is too light in comparison to the background, but regular text and heading contrast is fine. It could also improve by adding labels and names to some links, buttons and form elements.
Accessibility Verdict: Good Foundation, Could be Improved
The developers have clearly put in an effort with accessibility in this theme given it passes audits on WAI-ARIA roles, alt tags and a collection of other things.
If they tweak their color contrast levels and look at the other points an audit using Chrome’s Lighthouse tool will reveal, they are only a short jump from achieving perfect scores in this area.
“The Affair” Overall Verdict: Excellent User Experience and Strong Technical Performance
“The Affair” is an excellent theme from both a user and technical perspective.
On the user experience front it delivers a smooth setup flow that is consistent and intuitive, and is only slowed down by a couple of points of friction that in my opinion could be easily remedied. It widely avoids many of the most common pitfalls I have encountered many times with themes, and to me that ranks it at a very high level in WordPress land.
In the technical performance area it is outstanding in the SEO and responsiveness categories, and needs just a few adjustments to ace the accessibility category.
It struggles a little on speed, yet likely a main reason for that is because it is aiming to deliver a set of very useful tools in the form of the Powerkit plugin, which are quite a strong feature for user experience. The effect on speed could be offset with some additional instructions in the documentation about how to use plugins and settings to optimize a freshly installed site.
As an extra note, I encountered no bugs while evaluating this theme. It appears to be stable and functional throughout.
In summary, “The Affair” WordPress theme is a very strong performer with only a couple of weaknesses. It is thoughtfully and carefully designed, generally technically solid, and feature rich. I would rate this as being a suitable choice for most typical websites.
No comments:
Post a Comment