How to add gradient to the first letter of a WordPress blog post

Great content is just part on running a successful website, user experience is another key ingredient to get visitors to come back. So today in this WordPress tutorial I want to show you how make your blog post a little more appealing and professional by capitalizing the first letter of a paragraph and adding gradient (multiple colors) to make your content stand out from other blogs.

We are going to do this by simply using CSS selectors that you can apply to your “style.css” for the content in the “single.php” file of your theme.

Open the style.css from your current WordPress site with your favorite code editor. Go to the end of the file and paste this CSS code:

.single .entry-content p:first-of-type::first-letter {
 background: -webkit-gradient(linear,left top,left bottom,from(#FF2828),to(#302130))!important;
 -webkit-background-clip: text!important;
 -webkit-text-fill-color: transparent!important;
 }

To customize your own gradient colors, you need to change the “#FF2828” and the “#302130” with the combination of hexadecimal colors that you want to include. Then simply save and upload the style sheet file back to your site.

Here is an example how it should look like:

gradient-first-letter-css

Though if you want it to look just like in the image above you have use this code:

.single .entry-content p:first-of-type::first-letter {
float: left;
font-size: 5.538em;
line-height: 0.7em;
margin-top: 8px;
padding-left: -5px;
padding-right: 12px;
text-transform: uppercase;
font-family: Georgia, "Times New Roman", Times, serif;
font-weight: 500;
color: #588C9A;
background: -webkit-gradient(linear,left top,left bottom,from(#FF2828),to(#302130))!important;
-webkit-background-clip: text!important;
-webkit-text-fill-color: transparent!important;

}

One thing to note: The code that I am sharing today will work with pretty much any WordPress theme that follows the best practices or has been designed by the WordPress community such as with the Underscores framework theme. And it will work with any web browser that supports “webkit”.

Troubleshooting

If it doesn’t work chances are that the first paragraph tag is around an image or there is an empty paragraph tag in the HTML code of your post. To solve this issue simple remove the image and check the “Text” tab (in the post editor) and delete any paragraph tag that is empty.

Leave a Reply