Share this...

I started blogging with WordPress long before I knew anything about how WordPress actually works. If that sounds familiar to you, it’s because that’s the typical learning curve: you don’t bother learning something until you actually need to know it. This runs counter to the Chinese proverb about digging the well before you are thirsty, but that’s how most of us operate, I’m afraid.

I Need Italics!

Anyway, I started my first blog over at bookblog.kjodle.net, where I blog about books for kids and young adults. (Yes, go there. I spent a lot of time customising the appearance, which goes to show what is possible with the Graphene theme. I have also spent an inordinate amount of time writing those reviews.) One of the things that bugged me was that book titles should always be italicized, and there was no way that I knew of to make the title of a post italic, other than editing the theme’s stylesheet or (once I started using the Graphene theme) adding some custom CSS. Besides, I didn’t want to italicize the entire title, since I also included the author’s name in the title. What I wanted was an easy way to italicize only a portion of the title.

It took me longer than it should have (until today, in fact) to realize that this is easy to do. Here’s a shot of how things looked before:

wp_title_tricks-001

 

My solution, as you can see, was to simply type in the title of the book and then put the author’s name in parentheses. This is neither elegant nor correct.

The edit pane looked like this:

wp_title_tricks-002

 

which is what you would expect.

Turns out that when you enter something in that title pane, WordPress just parses it as ordinary HTML or CSS. (It ignores anything else, I guess.) So you can add pretty much any kind of HTML styling you would like, or CSS styling (provided you wrap it in a `<span>`) element. So I changed what you see above to this:

wp_title_tricks-003

 

And now my post looks like this:

wp_title_tricks-004

 

It even shows up that way in the slider:

wp_title_tricks-005

 

Yes, I realize that is a different book. Do you know how hard it is to get a screen cap of a moving slider? (BTW, Ship Breaker is one of the best books I’ve read in the past year. You should definitely read it.)

Add an Icon

I think that’s pretty cool. But wait, it gets better! If you look at the title of this post, you’ll notice a book icon off to the left. I added that in the title. The text in my title looks like this:

<img src="http://images.kjodle.net/books-0322.png" />WordPress Tricks &mdash; Fun With Titles

Edit: I took out the icon because it looked pretty awful in the sidebar widget. But it does work.

Add Extra Styling

I also said that you could add CSS elements if you add them to a `<span>`) element. I haven’t played around with this too much, but I’ve used something like this elsewhere to make just one title into small caps:

<span style="font-variant: small-caps;">This Text is in Small Caps</span>

Add Special Characters

Another neat thing you can do is to add special characters. You can already do this in a post by using “Insert Custom Character” in the MCE Editor, but it won’t add that character to a title. That really bugs me because a lot of people will just substitute two hyphens (- -) for an em dash (—). That was fine when everyone used typewriters, but we are using computers and we shouldn’t be using new technology as if it were old technology.

If you know the the html code or the num code for the character you want to add, you can just type it in the title bar. You can see where I entered `&mdash;` in the title of this post for instance.

For more about special characters, read this. To get a complete list of the codes, go here.

Conclusion

Like I said, it took me longer than it should have to figure out how to do this. Play around with this, and if you find other tricks to play with titles, add a comment.


Share this...
Except for material released under a Creative Commons License: ©2021 Kenneth John Odle All Rights ReservedPermalink for this article:
https://techblog.kjodle.net/2012/04/06/wordpress-tricks-fun-with-titles/