I asked this over on Stack Overflow, and got the following answer from user Howlin:
There is a plugin that should help you, it’s called Visual Editor
Custom Buttons.Once installed there is an option on the dashboard menu called Visual
Editor Custom Buttons,
- There is an option called Add new
- Call the new style something e.g. Cite.
- Make sure the “Wrap Selection” option is ticked
- In the “Before” box enter what you want to be wrapped before the content e.g. “”
- In the “After” box enter what you want to be wrapped after the content e.g. “”
- In the “Display in Editor” box below the above tick one or both of the options there.
- If the Visual/Text are selected then choose the button icon/Quick label (optional)
- Once all the above is done click on the blue “Publish” on the right hand side of the screen.
- Open the page/post you want the new style on and highlight the text.
- Click on the style you just created and it should be inserted.
This plugin allows me to easily do what I wanted without playing with code I don’t understand. Works for me!