How to have Capital Letter in your Blog • WordPress Help

and a lot of people who like to use the capital letter in their blogs. I refer to that nice effect that we see in books and newspapers that show the first character of a text in a size, even typography, different.

I have used it a long time in CiberPrensa and, as every now and then I am asked by a reader, I have encouraged myself to do a guide in which to show the two ways (that I know) of putting Capital Letter in your Blog

The Simple Mode

There is a way to get it in the fastest and easiest way, using a plugin. It is not a bad option if you want to obtain a quick result but it has the disadvantage that you do not completely control the aspect of the capital letter .

The process is this:

  1. Download the plugin DropCap First
  2. Unzip it on your computer and upload the "dropcap_first" folder to the plugins directory of your server (/ wp-content / plugins /)
  3. Activate the plugin

If you dare , you can retouch some of the plugin's CSS by modifying the file 'dropcap_style.css', located in the plugin folder.

HTML mode

Here we already talk about older words (never better said) Not only will you be able to configure the CSS style in a basic way, but you can even use special HTML marks or, more interestingly, use images as a capital letter. In addition, we will automate it with a PHP function.

To give a different style to the first letter of a paragraph we need to frame it in a special HTML element to which we will then add a bit of CSS to put it to our liking. We will use an element ' span ' with the class ' letracapital '. The resulting paragraph would read something like this:

Remember to not repeat the letter after of 'span'


Here you have to be a little thin because each template has different values ​​of line height and font size, so you'll have to adapt this part to your theme. We will assume, for the example, that your standard paragraph has a font size of 14 pixels and a line of 18 pixels.

1. Floating ! – We have to make our capital letter "float" to the left so that the paragraph text flows around it.

2 . Font Size – We assign a font size of 40 pixels (remember that this can vary depending on the default values ​​of your template), and a line height of 35 pixels, which is twice the line height of the standard paragraph minus 1 pixel (in this case only).

3. More Style – We will use a serif font, put it in blue and add a bit of space to the right so that it does not mix with the paragraph.

The normal thing is that you have to play a bit with the font size and line height to adjust it to your template. This is your task and what will offer you a personal style

Automating that is gerund

Perfect, you have already added the necessary CSS to your file style.css . But what would be a nuisance to have to add HTML marks every time you write a new article ?. With this bit of PHP we will get WordPress to do it for you:

How does this code work? Basically, take the content of the post and wrap the first letter with sample special mark.

All you have to do is paste this code into the file ' functions.php ' of your template.

Now you choose which of the two systems you prefer. The first one gives you immediate and effortless results, but the second one is much more complete and will allow you to distinguish your blog from the rest of the world [1945911]

NOTICE : this publication is from two years ago or plus. If it's a code or a plugin it might not work in the latest versions of WordPress, and if it's a news story it might be obsolete. Then do not say we have not warned you.

Loading …

That may also help you: