WordPress instructions for adding a drop cap quicktag

Community Forums Forums General Discussion WordPress instructions for adding a drop cap quicktag

This topic is: not resolved

This topic contains 6 replies, has 3 voices, and was last updated by  greybird 1 year, 6 months ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
  • #39825

    Carla the Moose


    I’ve been adding dropcaps to the first letter of each post manually, using HTML. But following the instructions on this page (scroll down a bit), I tried creating a new quicktag in my post editor:


    I added the CSS and then found my wp-includes/js/quicktags.js file and added this:

    `edButtons[edButtons.length] =
    new edButton(‘ed_capdrop’

    But it’s not working. My website isn’t public yet, so you can’t see my code. But I simply pasted it into the edbuttons section and uploaded it to my website.

    I don’t want to use a plugin for this. So if I can’t get it to work, I’ll do this manually. But do you have any suggestions? Is there anything in this file that’s unique to Genesis? It seems like it’s all standard WordPress stuff, but I’m not sure.

    I’d sure love some input.


    The Chicken has Spoken



    Greg Rickaby provides instructions on how to do this here – http://gregrickaby.com/2011/04/how-to-create-drop-caps-in-thesis-and-genesis.html.


    Carla the Moose

    Thanks so much!

    It works perfectly. My only concern is browser compatibility with pseudo classes. His second step involves span tags that need to be manually added around the first letter of each post. That’s how I’ve been doing it. He says span tags address browser concerns. But you can’t do both. You have to either add CSS from his first step, or use span tags, or you’ll end up with the first two letters as drop caps.

    I did post a question about this in the comments section, and I also asked about this in reference to this article, which was written this year:


    It looks like the first-of-type pseudo class works great in most browsers, but it only works in IE9. If IE9 is the current version, then lots of people may still be running IE8, right? I’d like it to work in IE8. I’ll have to take a look at the screen shots in multiple browsers. If there isn’t any kind of wonky code showing up in place of the pseudo class, I can probably live with that. But I did ask in the comments about Javascript and whether that might be a better option.

    Of course, I haven’t a clue as to how to write that code. :)


    Carla the Moose

    As I was hoping it would, using the pseudo class in my CSS preserves the drop caps in post excerpts. This is awesome. Archives set up as excerpts removes all HTML. So using span tags around the first letter of each post means no drop caps on the archive pages, and that really bothered me.

    I’m very excited about this!!



    Would it be possible for you to share your solution? I know it was a long time ago (a year ago), do you remember what you did?

    I’ve been trying to do this with CSS but the Genesis columns are messing it up, they don’t place the dropcaps in the first paragraph for some reason. I haven’t tried other column solutions yet.

    I’m new to Genesis (and to dropcaps in blogs), so this has been rather confusing and time consuming.


    Carla the Moose

    After lots of experimenting and really hoping for a clean way to do this, I finally resorted back to span tags and creating a class in my CSS. It seems to work consistently.

    This is the CSS:

    .first-letter {
    	float: left;
     	font-family: georgia, serif;
    	color: #4B5481;
     	font-size: 327%;
     	line-height: 0.85em;
     	margin-right: 0.15em;
    	margin-top: 0.06em;
     	margin-bottom: 0.0em; 
    	vertical-align: baseline;

    And for every post, I wrap the first letter with <span class=”first”>H</span> so that the H is the drop cap. There are cleaner ways to do this, but nothing seemed to create drop caps across all browsers. My solution may not be ideal, but it seems to work great for me.

    I hope that helps. Is that you were doing but wasn’t working?



    Wow, thanks! Thank you for remembering and for the fast response! But I guess if you’re having to do those span tags every time you write a new post that would keep it fresh in your memory. I may have to resort to that, but I was hoping for something a bit more automatic especially for my client’s sake. He wants it to be as easy to use as possible. There is a CSS bit that IS more automatic but it doesn’t play nice with Genesis Columns. I have an open ticket with CopyBlogger on that very issue as we speak.

    .entry-content  p:first-child:first-letter {
    font-family: Open Sans;
    color: #333;
    text-shadow: 0.02em 0.02em #C0C0C0;

    PS. If you use the above CSS don’t pay much attention to the font-size the way I have it… I’m still learning about rem vs px…. pick your own values :)

    • This reply was modified 1 year, 6 months ago by  greybird.
    • This reply was modified 1 year, 6 months ago by  greybird.
Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.