Theme Customization

A friend had a question on how to add a custom class to the header search box in Astra that was too complex to answer in a Facebook post, so I’ll put it here. Essentially, he wanted to add a class to the input field which already has the class “search-field”. The class he wanted

Sometimes it’s nice to add a bit of custom styling to the WordPress admin area to make things stand out a bit better. Today I needed to resize a meta box in the sidebar of the Gutenberg editor. We had lots of options for membership levels, but it was annoying to have to scroll through

I spoke previously about how to make Divi’s toggle module web accessible, but what if you weren’t using Divi? I needed to have a disclosure pattern toggle independent of any theme. It needed to be setup using a shortcode with customizable content. Ideally, you’d want to wrap this into a plugin, but I’m going to

I was building an accordion in Divi, using the standard accordion widget. Checking it against the Aria Design Patterns for Accordions and the Accordion Example from W3, the Divi accordion module wasn’t following the correct labelling requirements. Perhaps by the time you’re reading this, it has been fixed. If not, I hope you find this

On the default Divi install, the top header sits outside the <header> section. For accessibility and web standards reasons, Divi’s <div id=”top-header”> should be contained within the main <header> section. The alternative is to wrap it in <div role=”banner”>, as explained at Deque University. How to move Divi top header inside the main header: Install

On all the websites I build, I put a “Copyright © 2020” in the footer, where the year gets automatically updated. The site that I was just working on had “Copyright 2018” in the footer. It was following the way Elegant Themes said to do it. No one wants to have to go in and

This tutorial is in response to a question from one of our readers. This tutorial will work with both the free and paid versions of Astra. We also have a tutorial on customizing the post meta appearance for Astra. You’ll need to have a child theme active. See our tutorial on building a child theme

I needed to change the header text in GeneratePress by adding a span around one of the words. I was trying to change the color of the last word of the title to a different color as illustrated below: Under most circumstances, to do a basic change to the header text in GeneratePress, go to

Child themes are a staple of every WordPress developer. There are times when the functionality provided by the theme developer doesn’t meet your needs and you want to add something else. I’ll often say in my tutorials to “edit the functions.php file”. Whenever I say that, I’m assuming you’re editing a child theme. You should