I love using Elegant Theme’s Extra Theme for projects like Room Magazine. This WordPress theme was designed for magazine-type websites that produce content that have many different topics. Room Magazine, for instance, has about 7 types of post categories such as Creative Non-Fiction, Poetry, or Book Reviews. We categorized them by genre so site visitors to easily browse and find samples. Extra theme makes it easy to create these types of websites.
Site accessibility is very important to me when building websites so using proper heading levels is an essential step. The heading elements are H1, H2, H3, H4, H5, and H6 with H1 being the highest (or most important) level and H6 the least.
What is the problem?
There is no way to change the heading levels in blog modules in the Extra theme customizer. The only way is to dive into the php file and edit the HTML tags. I must admit I needed to ask the Elegant Themes support team for this. I don’t know why it didn’t occur to me that it’s probably hard coded. I’ll blame this on vacation hangover. I thought I just can’t find the settings among the many options available for the modules. But nope! As confirmed by the kindly support person, no way except to edit the theme files
Fear not! It’s not too difficult. If you mess it up, just download the file from the parent theme folder (Extra) and try it again.
What do you need to do first
- Properly assign heading levels for your page. Also make sure there is only one H1 for every home page. Pro tip: download an accessibility extension for your browser. I use Chrome and these two extensions – WAVE Evaluation tool for more thorough checking and for a quick check on the headings HeadingsMap
- Identify the Extra modules that you need to change. I had to edit the files for these modules for my project but for the tutorial, I will change the Post Module only
- Featured Post Slider Module (module-featured-posts-slider.php)
- Post Module (module-posts and module-posts-content.php)
- Post Carousel (module-posts-carousel.php)
- Text Editor – what you will use to edit the files. I use Visual Studio Code on my iMac.
- FTP or File Manager- for downloading and uploading files to your child theme folder
Let’s get started
Check the errors in HeadingsMap by clicking the extension on your browser to identify which headings need to be changed
The multiple H1 levels are not flagged here as errors because they are followed by H2 and H3’s. For this demo, we will correct that Heading 1 ‘Creative Writing’ and ‘All’ headings (both are using the same template) and change them to Heading 2. Headings below them will be changed to H3’s.
Time to edit your php files
There are a few ways to edit the file.
- You can install a plugin such as File Manager in WordPress admin
- Download the php files using your FTP, edit the file then upload
- If your hosting has cPanel or any kind of File Manager access- just use that
Go to the parent theme folder Extra and copy the files ‘module-posts.php’ and ‘module-posts-content.php.’ The first one is the category ‘Creative Writing’ the second file is to change the headings below it.
Open the file using your editor and look for Line 4 in module-posts.php file
Change the H1 tags to H2 or to whatever heading level it should be. Don’t forget the closing tag.
Save and close the file.
That’s it! Refresh the page. Recheck with HeadingsMap.
Do the same in the module-posts-content.php file in Line 19 and Line 81.
Save the file and close. Refresh your page and recheck the heading hierarchy again.
Hope this helps! While I still have ways to go to become an accessibility expert, I try to do a bit at a time in the right direction. A journey of a thousand steps starts with a single one, right? 😀
Have no fear of perfection — you’ll never reach it.-Salvador Dali