Fix “Invisible” Dropdown Menus in Extra

I have been redesigning this web site over the past week using the new Extra theme from Elegant Themes. One glitch I found involved the archives and categories widgets. When I selected use dropdown for these and saved, the dropdown menus were almost invisible because the height was not large enough to show the actual lists.

So, I went to the code in the style.css for the theme and found the following entries:

In order to make the dropdown menus work properly, I added the height parameter to each CSS entry with a value of auto to let the browser determine the appropriate height for the box. I did not add this code to the style.css file, but used the Custom CSS section on the General tab of the Extra theme’s Theme Options in the Administration menu. Here is the code:

After saving it, the dropdown menus for Archives and Categories display properly.

Good Practices

In the instructions for making this modification, I said to place this in the Custom CSS area provided by the settings panel provided as a part of the Extra theme. Not all themes have easy to use settings routines to make mods without actually changing the theme’s files. If you were to make the changes in the actual files, those changes have the potential for being wiped out if the theme is updated by the original author. Here are some points to add to your WordPress practices tool kit:

If you are using a theme that is not written by you, consider how to make the changes.

If they have a way to add customization outside of physically changing the theme files, use it.

If not, create a child theme and make your changes there.

Keep a change log of any and all changes you make. That way, if you want to reuse your code on other sites, you have a log of functional changes to be made.

Use a source code management system, such as Git, to control your code changes with ease. It is also a way to make changes to a centralized system, such as GitHub or Bitbucket, to manage all your code.

You should put good practices into place to cut down on errors and to add consistency to your software development process. You should consider this whether you work on 100 lines of code or a million! It saves time because it is all right there: your code, a history of changes, and descriptive information about your code and changes.