How To Add A Custom Class To Astra Search Form

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

How To Add Custom CSS To WordPress Admin Area

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

How To Make A Web Accessible Disclosure Toggle Using Shortcodes

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

How To Make Divi Accordion Accessible

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

How To Move Divi Top Header Inside Main Header

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

How To Add Current Year To Divi Footer

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

How To Move Astra Post Meta

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

How To Change Header Text In GeneratePress

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

How To Create A Child Theme For Any WordPress Theme

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

How To Change The Default Colors In WordPress Customizer

Many of the better WordPress themes add a color picker to the WordPress customizer. This makes it easier to design your website visually, rather than with code. When you use the WordPress Customizer, you may have seen something like this: The circled colours is what we’ll be changing today. Why go to the trouble of