{"id":77551,"date":"2012-05-07T12:00:09","date_gmt":"2012-05-07T16:00:09","guid":{"rendered":"http:\/\/wpmu.org\/?p=77551"},"modified":"2012-05-07T01:04:06","modified_gmt":"2012-05-07T05:04:06","slug":"how-to-create-drop-caps-big-first-letters-in-wordpress","status":"publish","type":"post","link":"https:\/\/wpmudev.com\/blog\/how-to-create-drop-caps-big-first-letters-in-wordpress\/","title":{"rendered":"How to Create Drop Caps (Big First Letters) in WordPress"},"content":{"rendered":"

\"Post<\/a>
\nWe\u2019ve all seen drop caps, but perhaps you weren\u2019t familiar with their technical name. Drops caps are those big first letters that you see at the beginning of paragraphs. They are common in magazines and newspapers, but not so much on the web.<\/p>\n

If you\u2019d like to style up your posts with a drop cap, it\u2019s easy enough to do. There are several ways to go about it.<\/p>\n

 <\/p>\n

Place CSS Code in Your Stylesheet<\/strong><\/h2>\n

The first way is to place some CSS code in your Stylesheet.<\/p>\n

You will need to know the name of the div class for your main content. You can find that by looking in\u00a0 your theme files. For example, in the default TwentyTen theme from WordPress, you can see the div class is called \u201centry-content\u201d for the single post file (loop-single.php).<\/p>\n

\"Post<\/a>There\u2019s a good chance that your theme is named in the same way, but it might not be, so you\u2019ll need to check it.<\/p>\n

Once you have your div class, then place the following code in your Stylesheet. (Appearance > Editor > Stylesheet \u2013 style.css)<\/p>\n

You\u2019ll need to change the \u201centry-content\u201d section below if your theme has a different class name. You can also change the properties to make it look the way you like, even adding more properties, of course. In this example, I\u2019ve made a blue drop cap with a shadow.<\/p>\n

 <\/p>\n

div.entry-content p:first-child:first-letter {\r\nfloat:left;\r\nfont-size:4em;\r\ncolor: #000099;\r\nmargin-right:0.10em;\r\nline-height:90%;\r\ntext-shadow: 0.05em 0.05em #C0C0C0;\r\n}<\/pre>\n
 <\/p>\n
And here\u2019s the result:<\/p>\n
\"Post<\/a><\/p>\n\n
Use a Plugin<\/strong><\/h2>\n
Another way to achieve a drop cap is with the Drop Caps<\/a> plugin. This plugin gives the novice a little more flexibility with less work.<\/p>\n
This plugin lets you easily choose where drop caps should appear and where they shouldn\u2019t: on content, on excepts, on single posts, on pages, on the homepage, etc. It also lets you exclude specific posts or categories.<\/p>\n
\"Post<\/a><\/p>\n
Here\u2019s the default look for the Drop Caps plugin, but it does also give you the option of inserting your own CSS in your Stylesheet.<\/p>\n
\"Post<\/a><\/p>\n
 <\/p>\n\n
 <\/p>\n
Photo: ornamental letter – D- vector<\/a> from BigStock<\/p>\n","protected":false},"excerpt":{"rendered":"
Use one of the following ways to style your posts like a magazine article.<\/p>\n","protected":false},"author":84404,"featured_media":77553,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"blog_reading_time":"","wds_primary_category":0,"wds_primary_tutorials_categories":0,"footnotes":""},"categories":[4],"tags":[],"tutorials_categories":[],"class_list":["post-77551","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-plugins"],"_links":{"self":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/77551","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/users\/84404"}],"replies":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/comments?post=77551"}],"version-history":[{"count":1,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/77551\/revisions"}],"predecessor-version":[{"id":216169,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/77551\/revisions\/216169"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media\/77553"}],"wp:attachment":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media?parent=77551"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/categories?post=77551"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tags?post=77551"},{"taxonomy":"tutorials_categories","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tutorials_categories?post=77551"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}