We are thrilled to introduce Hello Elementor Theme version 3.1. This release is focused on bug fixes, accessibility enhancements, DOM optimizations, and tweaks that give more flexibility to style your websites the way you want.
Breaking Changes Ahead
We should start with the elephant in the room. This release has breaking changes. Nevertheless, most websites won’t be affected.
What is a Breaking Change?
Elementor considers a breaking change as a change that removes or replaces an HTML element. For example changing <div role=”button”> to <button> is considered a breaking change. Why? Because if your website has custom code, and it uses CSS selectors or queries elements with JavaScript, the element selector may change.
Which Websites are Affected?
Only websites that use custom code have the potential to be affected. Either custom CSS that changes the theme styles, or custom JavaScript that adds functionality. Even if the website uses custom code, it won’t be affected unless it is using element selectors rather than class selectors or id selectors.
To conclude, only websites that in their theme use custom code and element selectors targeting HTML tags, and target the HTML tags that were changed, may be affected by this version.
What Should I Do?
Check whether you’ve applied custom CSS or custom JavaScript to your Hello Theme. If you have, check which selectors they are using. If they’re using element selectors, you should update them.
Markup Changes
Some of the HTML tags previously used by the theme have been changed to improve semantics, simplify navigation, and set a consistent heading structure (H1-H6 tags).
Headings Structure
Each HTML page should have a single <h1> tag. Unfortunately, until now, this wasn’t the case in the Hello Theme. Our users reported that some audit tools warn about this issue.
In addition, to give you control over the page heading structure, the theme should not set heading tags at all, aside from the page header. By replacing the heading tags with simple <div> elements, you will be able to create your own heading structure from inside Elementor or Guttenberg.
<header id="site-header" class="site-header">
<h1 class=”site-logo”> ... </h1> <!-- Replaced with a regular div -->
<p class=”site-description”> ... </p>
<nav class=”site-navigation”> ... </nav>
</header>
<main id="content" class="site-main">
<div class="page-header">
<h1 class="entry-title"> ... </h1> <!-- The main heading -->
</div>
<div class="page-content">
…
<!-- Elementor/Guttenberg content goes here -->
…
</div>
</main>
<footer id="site-footer" class="site-footer">
<h4 class=”site-logo”> ... </h4> <!-- Replaced with a regular div -->
<p class=”site-description”> ... </p>
<nav class=”site-navigation”> ... </nav>
</footer>The site logo in the header and footer was replaced with regular <div> tags. Aside from the page <h1> tag, all of the headings are now concentrated in the content area, giving you full control to set your SEO heading structure without any unexpected theme headings injected by the theme.
Page Header
All of the theme templates are wrapped in a <main> wrapper tag. Inside, there is a section for the page header and page content.
<main id="content" class="site-main">
<header class="page-header"> <!-- Replaced with a regular div -->
<h1 class="entry-title"> ... </h1>
</header>
<div class="page-content">
…
<!-- Elementor/Guttenberg content goes here -->
…
</div>
</main>Previously the <h1> tag was wrapped with a <header> tag. As of this release, it will be a simple <div> tag.
Mobile Menu Toggle Button
The mobile hamburger menu in the header was a simple <div> tag. To improve accessibility, it is now replaced with a <button> tag. Read more about this change in the “Semantic Toggle Buttons” section below.
Reduced DOM Size
Although the Hello Theme is considered a lightweight and very performant theme, version 3.1.0 further reduces DOM size, minimizing your website’s final HTML. These are small changes, but they affect all pages, and therefore are important.
Empty Tagline
The header displays the site name with a tagline. However, when the site has no tagline (empty field), the theme renders an empty <p> element. As of this release, that is no longer the case.
<header id="site-header" class="site-header">
<div class="site-branding">
<div class="site-title">
<a href="#" title="Home" rel="home"> Site Name </a>
</div>
<p class="site-description"></p> <!-- Don't render this tag when empty -->
</div>
</header>Empty Post Tags
In the single post view, the theme displays the post content, and below the content it shows the post tags. However, when the post has no tags, the theme renders an empty <div> element. As of this release, that is no longer the case.
<main id="content" class="site-main">
<div class="page-header">
<h1 class="entry-title"> </h1>
</div>
<div class="page-content">
…
<!-- Post content goes here -->
…
<div class="post-tags"></div> <!-- Don't render this tag when empty -->
</div>
</main>Menu Wrappers
The theme’s header and footer uses the built-in WordPress wp_nav_menu() function to display menus. However, this function renders a redundant wrapping <div> element that is not in use. As of this release, this wrapper was removed.
<nav class="site-navigation">
<div class="menu-header-links-container"> <!-- This div is redundant -->
<ul id="menu-header-links" class="menu">
<li><a href="#"> … </a></li>
<li><a href="#"> … </a></li>
<li><a href="#"> … </a></li>
</ul>
</div> <!-- This div is redundant -->
</nav>Accessibility Improvements
This release addressed several accessibility issues in the theme, thereby improving the usage for users utilizing assistive technologies.
Focus Ring on Firefox
The theme now restores the default focus ring for Firefox users when navigating through the website using a keyboard, mainly on buttons. This change adds a visual hint, an outline, to let the user know which interactive element is currently in focus.
Nav Menu Labeling
An additional accessibility improvement made is the use of unique labels to describe various navigation menus. The theme now has aria-label attributes with distinct labels on various <nav> elements in the header and footer.
Tab Flow
The navigation menu in the header has links displayed for desktop users and a dropdown menu for mobile users. Previously, when navigating using the TAB key on desktop view, the user was able to focus on hidden mobile menu links. This release fixes this issue so that hidden mobile menu links are now excluded from the desktop tab flow.
Semantic Toggle Buttons
The navigation menu in the header has a toggle button that opens the mobile dropdown menu, which doesn’t use semantic markup. It was a simple <div> that required additional HTML role and tabindex attributes, and additional JS event listeners to catch “Enter” and “Space” key strokes.
As of this release, the toggle button uses <button> instead of <div role=”button” tabindex=”0”>; eliminating the need for additional HTML/JS, making the code lighter and semantic.
Bug Fixes & New Features
This release also focuses on multiple issues related to how the theme displays various theme elements.
- The most notable is the Mobile Menu hamburger, which was not visible for logged-out users and used duplicate
idattributes. These issues are fixed now. - When the post was tagged with post-tags, the tags were not separated. As of this release, all the tags are comma separated, making them easy to read.
- The posts pagination component in archive pages is now styled properly, positioned according to the writing direction, and is now fully RTL-compatible.
- When styling the header or footer, the redundant white space below the site logo is now removed. But more importantly, you get a new set of options to control the position of your logo and tagline.
With more control over your design, you can style the header/footer without Elementor Pro, using only the free Hello Theme and the free Elementor plugin.
PHP Version Requirements
As part of Elementor’s Roadmap to Upgrade PHP Versions, Hello Theme gradually transitions to newer and faster PHP versions, dropping support for older unsupported versions. This release is fully compatible with PHP 8.0+ and sets the minimum required PHP version to 7.4.
Over the last year, the theme stopped supporting older PHP versions. Hello Theme 2.8.0 dropped support for PHP 5.x. Hello Theme 3.0.0 dropped support for PHP 7.0, 7.1, and 7.2. Hello Theme 3.1.0 dropped support for PHP 7.3.
The final goal will be to stop supporting PHP 7.4, adopting only the PHP 8.x versions. As the largest theme in the WordPress repo, we hope this move will set the trend among other themes.
To Conclude
Hello Theme is the most popular theme in the WordPress theme repository, serving over 3 million active websites. Users appreciate the lightweight solution, which is why this release focused on reducing DOM size. Regulatory accessibility requirements necessitate even the simplest themes to continually improve their code, and the Hello Theme is no exception. Finally, clean and semantic markup not only improves SEO and accessibility, it also makes your code readable.
It’s not very often that the Hello theme releases breaking changes, this is one of these rare times. Nevertheless, we believe that in the long run, it would be worth the effort to update the needed code.
