Users can enter term entries in a a taxonomy box (hierarchical) and I want to force that the entries be capitalized (first letter each word).
I tried adding text-transform:uppercase css to the entry box and although it capitalizes the words “during-typing”, it still doesn’t register it as capitalized when the term is added to the entry.
Meaning if the user doesn’t press Shift to capitalize the words, it will show capitalized on the entry box (because of the css), but it will not show capitalized inside the taxonomy box.
Reasons why this is needed:
1) In the front-end when displaying artists names, example like Michael jAckson, or bruce Springsteen, it wouldn’t look good in the front end.
2) Another reason is in the taxonomy box, it doesn’t look good when the artists’ names are not capitalized.
So any answers to the main issue?
Edit: I think an alternative I thought of is to put like a form validation, so when the user clicks “Add New” a popup box will appear saying that he must capitalize the words correctly. The problem is, I’m not very good at javascript, so I don’t know what the code is.
Can anyone provide the code to validate the entry in the taxonomy box if its capitalized correctly when the user clicks the ‘Add New’ button?
PHP has a function that does EXACTLY what you’re looking for,
ucwords(). Leave the CSScapitalizeon there, so that the users know it will be auto-capitalized, and then when you’re filtering the input (which you should be doing ANYWAYS, since it’s user input, run it throughucwords()right before database insertion.You don’t need to add that CSS to the admin area – you need to add
text-transform: capitalize;to the HTML output. So say for example your meta value was output in<div class="entry-meta">, your css would looks like this:.entry-meta { text-transform: capitalize; }.This way, the user can type the information in however they want, for example: “this IS somE mETa Information”, and it would looks like this in the browser: “This Is Some Meta Information”.
EDIT: On second read, I realize you may mean that you do indeed want the user’s words to be capitalized in the back-end – but you need to use jQuery for this solution, not CSS. Since my answer above would solve the problem when the meta value is output, further work on capitalizing the user’s input would be a waste of time and resources to be perfectly honest.