DropCap First Character WordPress Plugin
Posted by Rodney.Campbell at July 27th, 2006
OK – I've written my first WordPress plugin – it is incredibly simple and VERY short but it does the job none-the-less. The plugin is called dropcap_first and is available for download if you so desire.
What it does is it makes the first character of the post BIG in a magazine style. I got the idea (and most of the CSS code) to do this from an article called Magazine Style CSS Drop Caps and then it was just a matter of writing the relevant PHP code to do what I wanted.
Current Version Download: dropcap_first plugin
Installation:
- download the latest version the plugin (above).
- upload the entire plugin folder to your wordpress plugins folder (wp-content/plugins) on your server.
- activate the DropCap First Character plugin in WordPress Plugins administration tab.
The plugin consists of two files. The PHP file (dropcap_first.php) which does the work (the important code is below):
function dropcap_header() {
echo('<link rel="stylesheet" type="text/css" media="screen" xhref="' . get_bloginfo('wpurl') . '/wp-content/plugins/dropcap_first/dropcap_style.css" />');
}
add_action('wp_head', 'dropcap_header');
function dropcap_first($content='') {
$pos = stripos($content, '<p>');
if (($pos !== 0) || ($pos === false)) {
return '<p class="dropcap-first">' . $content;
} else {
return '<p class="dropcap-first"' . stristr($content, '>');
}
}
add_filter('the_content', 'dropcap_first', 7);
and a stylesheet file (dropcap_style.css) which defines what the character will look like and uses the :first-letter pseudo element to limit the effect to the first character of the post.
p.dropcap-first:first-letter {
color: #D4D4C7;
float: left;
font-size:80px;
line-height:60px;
padding-top:4px;
padding-right:5px;
font-family: Times, serif, Georgia;
}
If you wanted to change what the first character looked like (the colour, size, font, etc) then you just need to adjust this stylesheet entry. If you like the look of this you can add it to your own Wordpress blog by downloading the dropcap_first plugin and installing it as per usual – this plugin requires no other manual edits to work.
cool idea but iget this error:
—
Fatal error: Call to undefined function: stripos() in /home/mcclain/public_html/wp/wp-content/plugins/dropcap_first/dropcap_first.php on line 34
—
any idea? thanks…
change it with “strpos”
Live example here: http://www.virgolamobile.net
Thanks Niccolo
Since stripos is only available in fairly new PHP versions I’ve changed it to use strpos(which is more widely available) and we’ll live with using the case sensitive version so it won’t match <P>.
thanks that fixed it!
Is it possible to have the plugin deactivated only for a specific page or post? I used it together with the KG Archives plugin, where a page is populated automatically with all post titles, and the page came empty
Is it possible to have the plugin deactivated only for a specific page or post? I used it together with the KG Archives plugin, where a page is populated automatically with all post titles.
Just found this plugin from wp-plugins trying to create this effect. It looks fine, but it doesn’t hav a drop-shadow.
Any plans to include this effect in the future? Been tinkering with the stylesheet but no dice.
Excellent pluggie Rodney. I thought sthg was wrong at first as I wasn’t getting the effect.
Then I realised that if, like many of my posts, you have an image at the very beginning of the post, it won’t work.
That’s actually really elegant behaviour. Otherwise a pic big text would look kind of messy.
Ta again
Paul
Very nice plugin. You can see it in action at http://www.sbe38.org. It works perfectly for normal post, but not rss feeds. How can I modify to account for a post being an rss feed?
Also if I want to exclude a page from drop caps how can I acheive this?
thanks.
don (el paso)
I downloaded it and installs fine, but it only makes the dropcap on pages, not posts.
Example is here: The “W”elcome dropcap post is my own css.
You can see the plugin example on the about page.
http://www.Wahm-Blog.com
I didn’t change anything, so how do I get it to show up on posts, too, and not just pages?
Thanks!
Great plug in, thanks for putting time and effort into it!!
Nice plugin, thanks! Looks fantastic on mine.
it looks very nice, but almost all of my posts start with a thumbnail, so this plugin does nothing for me…
can it somehow detect html tags and skip over those?
Great plugin! Thanks;
In action at http://www.adrianherritt.com
What I want to do on my blog, is every few hours take the oldest post and move it to the
front of the queue, all automatically. Anyone know if there is a plugin that can do this or
a simple way to set up another plugin to do this (use my own feed perhaps)?
Thanks.
The drop caps are only appearing on one of the pages and not the posts. How do I fix this?
http://www.sharonvaz.com
Hi Rodney,
I’m using your DropCap on my website and it works great, but I have one problem. When I choose to “block justify” the post, the DropCap disappears. The only way to get it to work is to have the post “left justified”.
Any suggestions to get DropCap to work when its block justified?
Thanks,
- Mac
http://www.TheAviationNation.com
Love it, clean and simple.
Thanks!!
http://www.RBHmultimedia.com/blog
Link is not working to download – just takes me to a different page
Ooops – Sorry – my bad – it should be fixed now
This plugin is great! But I want to take it a step further. If you study old style typography, when a drop cap is used, the subsequent paragraphs are indented. I tried to work this out myself, but I am afraid, I am not a programmer, just a humble graphic designer. Anyone have any ideas?
Daniel, I bet you could set the left-margin of the dropcap to a negative number to give the effect of indenting the following paragraphs.
You got some spam in your trackbacks.
Great plugin, by the way.
Hi, the link to the plugin doesn’t work
Installed your plug-in and it looked great but it only shows the first letter of the first word as a drop cap but the rest of the word shows at the end of the post title instead of following the drop cap.
I had to uninstall it.
Lovely and perfect, specially that it work only when theres no picture at the beggining of a post and that is perfect. Thanks a lot for this great plugin.
i LOVE this plugin. my blog has excerpts on the front page, is there any way to get it to work on the excerpts too?
On my site doesn’t work…
Why not?
Great plug-in, relatively easy to customize.
It works fine in Firefox and Safari, on both the Mac and Windows, but in Internet Explorer, the drop-cap is elevated. Is there a CSS thing I could do to compensate for this?
Peace,
Gene
When I edit the beginning sentence of my posts, I seem to lose the drop cap. On two of my posts that were edited, the drop cap does not appear. It shows up on other posts. I deactivated and reactivated the plugin, and still have the same issue. I could recreate the posts, but would rather not go there.
Is there a way for me to restore the missing drop caps?
I ADORE this plugin, Rodney! Thank you!
Holly C., the plugin work a only when theres no picture at the beginning of a post
It worked like a charm. I made one tweak of the style sheet, changing the color of the drop cap to a darker gray. I used #666666. But I am truly grateful for the beauty and simplicity of this plugin. Thanks
The first character (Drop Cap) displays perfectly, but the other letters display next to the title. Take a look at my blog: http://www.seriousaboutwine.co.za & the posts 28 Sept, 27 Sept & 21 Sept. Can anyone assist me?
Awesome! Thank you so much!
rerer
@Rodney
this’s absolutely a great wp plugin, its work prefectly on wp 2.3 … but i think this plugin will become more great plugin if it makes the first character of the post BIG not only in the first paragraph, but makes the first character of the post BIG in all paragraphp, generally likes in microsoft office word.
so, can you tell me how to do that?
Thanks,
K
Si me funciona el plugin – Esta genial – gracias
good!
Hi -
For some reason your great plugin is not working over at WebHelperMagazine.com. It is installed and activated — but the drop caps do not appear. I am using the theme, “Fluid Blue” — it should be up to date (see: http://srinig.com/wordpress-themes/fluid-blue/)
Any suggestions?
Thanks, Scott
thanks for the GREAT post! Very useful…
Great plug in but I also love the comments section. Did you create this plug in as well?
Thanks so much.
It works perfectly! thanks for putting time and effort into it!
Is there a way to put something in the post code so that only certain posts have the drop cap?
It’s pushing the word the drop cap is associated with to the far right on top of the posts title. I LOVE this plug in and would like some advice on how to fix this.
Hello !
Thanks for this GREAT plugin !
Works perfect !
But… I’m trying to use it with another great process : http://www.truefontfamily.com/
Truefontfamily help us to use TTF fonts.
Here I read that “Using the CSS to set the font-family with one of your TrueType fonts. Be sure to replace the dot in .ttf with a space: Font.ttf becomes Font ttf.”
Ok.
Then I modify the dropcap_style.css adding this : font-family: “myfont ttf”;
But that doesn’t match… If I try to use Truefontfamily with another part of my weblog it’s ok, the text shows with my TTF. But I can’t fix it to work with the dropcap_style.css…
Do you have any idea ?
Thanks ! Cheers !
Wow! A truly great plugin.
Thanks very much.
this wordpress plugin is excellent,i have used it long time,thank you very much
If you want to see it in action then I use this on http://crn-web.com
Many thanks for this – saved me ages adjusting the CSS – good job!
When I choose the first character disappears.
Any suggestions to get DropCap to work when its block justified?
Thanks,
Pierre Mir贸
http://www.elpobrecitoveedor.net/blog/
When I choose to 鈥渂lock justify鈥 the post, the first character disappears.
Any suggestions to get DropCap to work when its block justified?
Thanks,
Pierre Mir贸
http://www.elpobrecitoveedor.net/blog/
I wanted to let you know that as of version 1.1, the Grayplicity theme will be including some of your code from this plugin by default. All credit and licensing text is included intact. See link above for theme.
Hi there,
Know anyone which plugin to use if I want only a part of the article to be displayed? If someone want to read more there will be a “read more” link…
On my blog right now is displayed all of article content and I don’t want this…
I’m talking about the latest 10 articles displayed on the first page of my blog.
I’m using Wordpress.
Can anyone help?
Thanks for the plugin. It is great. I am using it on this blog/online magazine:
My question: How can I disable it on pages but keep it active on posts? Can you add a “Preferences” page under the “Setting” in Admin?
Thanks for the plugin. It is great. I am using it on this blog/online magazine:
http://thepublicsphere.com/
My question: How can I disable it on pages but keep it active on posts? Can you add a “Preferences” page under the “Setting” in Admin?
Great little plugin!!!
Nice plugin I guess, besides cool information, a blog should has the aesthetic touch too.
Hi,
The only place the initial cap shows is on this page. How can I get it to show on all my pages and posts?
It is beautiful!
Patricia
Thank you so much.
Thank you! This works with UTF8, unlike other plugins.
The pluin support Chinese_zh.
瀵逛腑鏂囨敮鎸侀潪甯稿ソ锛
璋簡銆
Q: Supported WP 2.7?..
Hi: Thanks for this cool little plugin. I always like dropcap and this one is very nicely designed.
http://www.iamparis.com/wordpress
Looks like a great plugin, i will be trying it on my blog for sure.
啸械褏.. 泻邪泻芯泄-褌芯 芯褎褎褌芯锌懈泻 薪邪褔邪谢褋褟
校褏 褌褘! 袠薪褌械褉械褋薪褘泄 锌芯胁芯褉芯褌 褋芯斜褘褌懈泄!
Appears to be yes
does not work on category page
The plugin is awesome; however, it doesn’t display correctly in Safari. It looks great in FireFox. You can check here: http://michaelhyatt.com.
小锌邪褋懈斜芯 袙邪屑 芯谐褉芯屑薪芯械
nice plugin
I already use it and running well
袩谢邪谐褨薪 锌褉邪褑褞褦 薪邪 褉芯褋褨泄褋泻褨泄 邪斜芯 褍泻褉邪褩薪褋泻褨泄 胁械褉褋褨褩褩 ordpress?
笑褨泻邪胁芯, 褔懈 锌褉邪褑褞褦 锌谢邪谐褨薪 薪邪 褉芯褋褨泄褋泻褨泄 邪斜芯 褍泻褉邪褩薪褋泻褨泄 胁械褉褋褨褩 wordpress?
thankssss
thankssss.
This worked so easily and is soooo easy to adapt to my theme in progress in which I will give you mention when I have it up and running.
http://inspirations.cosmicthings.com.
Thank you.
I installed and activated the plug in and nothing changed. What’s up?
cool idea
thanks鈥
Great Plugin.
You can check it in our posts.
http://www.freakyclip.com
Great plug-in! Works perfect for WP 2.9.1.